米泥棒: Bootstrap

ラベル Bootstrap の投稿を表示しています。すべての投稿を表示

2015年3月17日火曜日

GlassFish Server 4.1でJSF2.2+Bootstrapのアプリケーションを作成中、サーバのコンソールに以下のようなメッセージが表示されていることに気が付いた。

警告: JSF1091: ファイル fonts/glyphicons-halflings-regular.woff2 の MIME タイプが見つかりませんでした。これを解決するには、アプリケーションの web.xml に MIME タイプのマッピングを追加します。

どうやらweb.xmlにMIMEタイプマッピングを追加しないといけないらしい。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
                                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                                    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/x-font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff2</extension>
        <mime-type>application/x-font-woff2</mime-type>
    </mime-mapping>
</web-app>

2013年4月13日土曜日

Bootstrapでヘッダのナビゲーションを画面上部に固定するには

画面上部にナビゲーション領域を固定したり、デスクトップとスマホ用のコンテンツを一つのHTMLで表現したりするためによく使うテンプレートをここにコピペしておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css" />
<title>Welcome!</title>

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar pull-left" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Your Brand</a>
            <div class="nav-collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container">

</div>
<script src="/app_dev.php/js/jquery.min.js"></script>
<script src="/app_dev.php/js/bootstrap.min.js"></script>
</body>
</html>

Symfony2でBootstrapを利用する場合の設定例

Symfony2でBootstrapを利用する場合に、だいぶ苦労したので忘れないうちにメモ。

まずバンドルのResources/publicの下にBootstrapのcss、img、jsファイルを配置。

   Hoge
    └─FugaBundle
        ├─Controller
        ├─DependencyInjection
        ├─Entity
        ├─Resources
        │  ├─config
        │  ├─public
        │  │  ├─css/
        │  │  │      bootstrap-responsive.css
        │  │  │      bootstrap-responsive.min.css
        │  │  │      bootstrap.css
        │  │  │      bootstrap.min.css
        │  │  │
        │  │  ├─img/
        │  │  │      glyphicons-halflings-white.png
        │  │  │      glyphicons-halflings.png
        │  │  │
        │  │  └─js/
        │  │          bootstrap.js
        │  │          bootstrap.min.js
        │  │          jquery.min.js
        │  └─views
        │      └─Matome
        └─Tests
            └─Controller

config.ymlでAsseticの設定で、対象となるBundleにHogeFugaBundleを追加する。

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: true
    bundles:        [ HogeFugaBundle ]
    #java: /usr/bin/java
    filters:
        cssrewrite: ~
        #closure:
        #    jar: %kernel.root_dir%/Resources/java/compiler.jar
        #yui_css:
        #    jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar

bootstrapのCSSとJavaScriptを読み込めるようにTwigを記述。

<html lang="jp">
<head>

{% stylesheets
    'bundles/hogefuga/css/bootstrap.min.css' filter='cssrewrite'
    'bundles/hogefuga/css/bootstrap-responsive.min.css' filter='cssrewrite' %}
    <link href="{{ asset_url }}" rel="stylesheet"></link>
{% endstylesheets %}
<title>{% block title %}Welcome!{% endblock %}</title>

{% block stylesheets %}{% endblock %}
<link href="{{ asset('favicon.ico') }}" rel="icon" type="image/x-icon"></link>
</head>

<body>
{% block body %}

<legend>Hello Bootstrap <i class="icon-heart"></i></legend>

{% endblock %}

{% javascripts
    '@HogeFugaBundle/Resources/public/js/jquery.min.js'
    '@HogeFugaBundle/Resources/public/js/bootstrap.min.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascript %}
{% endblock %}
</body>
</html>

で、最後に

php app/console assets:install
php app/console assetic:dump

画像からBootstrapのCSSをカラーコーディネートしてくれるサイト

画像を投稿すると、その画像をもとにしてBootstrapのCSSをカラーコーディネートしてくれるサイト。 http://www.lavishbootstrap.com/ 自分のサイトの雰囲気にあった画像を投稿すれば、それっぽいCSSを出力してくれる。