Go to Qiita Advent Calendar 2024 Top
LoginSignup
257
269

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@opengl-8080inTIS株式会社

Bootstrap使い方メモ２（Components）

Last updated at Posted at 2014-05-24

Bootstrap 使い方続き。

Components の使い方。

Glyphicons

基本

フォルダ構成
│  sample..html
│
├─css
│      bootstrap.min.css
│
└─fonts
       glyphicons-halflings-regular.eot
       glyphicons-halflings-regular.svg
       glyphicons-halflings-regular.ttf
       glyphicons-halflings-regular.woff

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="glyphicon glyphicon-search"></span>
    </body>
</html>

bootstrap.JPG

  • CSS ファイルから見て、 ../fonts の下にフォントファイルが配置されるようにする。
  • .glyphicon クラスと、表示させたいアイコンごとのクラス（.glyphicon-search）を指定すると、アイコンを表示できる。
  • アイコン表示用のクラスは、他のコンポーネントと一緒に指定してはいけない。その場合は、アイコンだけ span タグで作成して、それをラップする形で他のコンポーネントを指定する。

Glyphicon について

アイコンには Glyphicon の Halflings セットというのが利用されている。

これは本来無料では使用できないが、 Bootstrap と合わせて利用する場合に限り無償で使うことができるよう Glyphicon の製作者が計らってくれているらしい。

Glyphicon のリンク をサイト上に載せることは必須ではないが、できれば表示してほしいと Bootstrap および Glyphicon がお願いしている。

ボタンにアイコンを表示する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>Search
        </button>
    </body>
</html>

bootstrap.JPG

Dropdowns

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • jQuery と bootstrap.min.js を読み込む。
  • .dropdown クラスを設定したタグで、ドロップダウンの表示を切り替えるリンク（またはボタン）、およびメニューを括る。
  • 表示を切り替えるリンク（ボタン）には data-toggle="dropdown" を設定する。
  • メニューは .dropdown-menu を設定した ul タグで作成する。
  • 各メニュー項目は a タグで括る。

区切り線を入れる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li class="divider"></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • .divider クラスを設定した li タグを挟むことで区切り線を設けることができる。

ドロップダウンメニューを画面の右側に表示する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu dropdown-menu-right">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • メニューの ul タグに .dropdown-menu-right クラスを設定すると、メニューが右側に表示される。

ヘッダーラベルを表示する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li class="dropdown-header">header menu</li>
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • .dropdown-header クラスを設定した li で、メニューにヘッダーラベルを追加できる。

メニュー項目を無効にする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li class="disabled"><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • li タグに .disabled クラスを設定された項目は選択できなくなる。

Button groups

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
    </body>
</html>

bootstrap.JPG

  • ボタンを .btn-group クラスを設定した div タグでくくると、ボタングループを作成できる。

ボタンのサイズを変更する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group btn-group-lg">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
        <div class="btn-group btn-group-md">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
        <div class="btn-group btn-group-xs">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
    </body>
</html>

bootstrap.JPG

  • .btn-group と一緒に .btn-group-** クラスを設定すると、ボタンのサイズを変更できる。
  • ** に入るはの、 lg, md, sm, xs の４つ。

ボタングループの中にドロップダウンを混ぜる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            
            <div class="btn-group">
                <button class="btn btn-default" data-toggle="dropdown">
                    Dropdown<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">hoge</a></li>
                    <li><a href="#">fuga</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .btn-group は入れ子が可能で、ドロップダウンなどをボタングループに混ぜることができる。

縦方向に並べる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group-vertical">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
    </body>
</html>

bootstrap.JPG

  • .btn-group-vertical クラスを設定すれば、縦方向にボタンを並べられる。

ボタングループの幅を親要素の幅いっぱいまで広げる

ボタンに a タグを使う場合

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group btn-group-justified">
            <a class="btn btn-default">hoge</a>
            <a class="btn btn-default">fuga</a>
            <a class="btn btn-default">piyo</a>
        </div>
    </body>
</html>

bootstrap.JPG

  • .btn-group-justified クラスを追加すれば、幅を親要素いっぱいまで広げることができる。

ボタンに button タグを使う場合

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button class="btn btn-default">hoge</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">fuga</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">piyo</button>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • button タグを使う場合は、各ボタンを .btn-group クラスを設定した div タグで括らなければならない。

Button dropdowns

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button data-toggle="dropdown">
                Dropdown<span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • .btn-group でもドロップダウンが作れる。

ドロップダウンを表示させる ▼ ボタンを分割して表示する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">Button</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • ▼ ボタン用にもう一つ button タグを用意し、そちらでドロップダウンの表示を制御する。
  • ▼ ボタンの方には .btn-toggle クラスを設定する。

ドロップアップ

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>body {padding-top: 10em;}</style>
    </head>
    <body>
        <div class="btn-group dropup">
            <button class="btn btn-default" data-toggle="dropdown">
                Dropup<span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • .dropup クラスを追加するとメニューがボタンの上部に表示される。

Input groups

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>div {margin-bottom: 1em;}</style>
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-addon">hoge</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">fuga</span>
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">piyo</span>
            <input type="text" class="form-control" />
            <span class="input-group-addon">piyo</span>
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio" />
            </span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" />
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>

bootstrap.JPG

  • テキスト入力項目の前後に任意の文字やボタンを配置することができる。
  • .input-group で入力項目を括り、追加する文字を .input-group-addon クラスを設定した span タグで前後に配置する。
  • テキストだけでなく、チェックボックスやラジオボタンを配置することも可能。

.form-group と一緒に使うときは、 .input-group をネストさせる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="input-group form-group">
            <label for="exampleInputFile">Hoge</label>
            <span class="input-group-addon">hoge</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="form-group">
            <label for="exampleInputFile">Fuga</label>
            <div class="input-group form-group">
                <span class="input-group-addon">fuga</span>
                <input type="text" class="form-control" />
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .form-group と .input-group を同じ div タグに設定すると、スタイルが崩れてしまう。
  • 一緒に使いたい場合は、 .form-group の中に .input-group が来るようにする。

サイズを変更する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>div {margin-bottom: 1em;}</style>
    </head>
    <body>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">large</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">normal</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group input-group-sm">
            <span class="input-group-addon">small</span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>

bootstrap.JPG

  • .input-group-lg で大きくなる。
  • .input-group-sm で小さくなる。

ボタンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default">Button</button>
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>

bootstrap.JPG

  • .input-group-btn クラスを使うとボタンを配置できる。

ドロップダウンボタンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Button<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">hoge</a></li>
                    <li><a href="#">fuga</a></li>
                    <li><a href="#">piyo</a></li>
                </ul>
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>

bootstrap.JPG

  • ドロップダウンを配置できる。

Navs

タブ

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li class="active"><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • ul タグに .nav クラスと .nav-tabs クラスを設定すると、タブバーを作れる。
  • li タグに .active クラスを設定すると、「その項目が現在選択されている」という状態を表現できる。

各タブの幅を親要素の幅にいっぱいになるように均等割する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs nav-justified">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .nav-justified クラスを追加すると、各タブの幅が、親要素いっぱいに均等割になるように拡張される。

Pills

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .nav-pills で Pills ？を作成できる。

縦にする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .nav-stacked クラスを追加すると縦にできる。

項目を無効にする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li class="disabled"><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • li タグに .disabled クラスを設定すると、その項目を無効にできる。

項目をドロップダウンにする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li>
                <a href="#" data-toggle="dropdown">
                    Dropdown<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Hoge</a></li>
                    <li><a href="#">Fuga</a></li>
                    <li><a href="#">Piyo</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • 項目をドロップダウンにできる。

Navbar

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
        </nav>
    </body>
</html>

bootstrap.JPG

  • nav タグに .navbar クラスを指定したところがナビゲーションバーとしてレウアウトが設定される。

ホームページへ戻る用のボタンを置く

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="nav-header">
                <a class="navbar-brand" href="#">Boostrap</a>
            </div>
        </nav>
    </body>
</html>

bootstrap.JPG

  • よくナビゲーションバーの左端にある、タイトル的なボタンを配置する。
  • .nav-header クラスを指定した div タグの中に .navbar-brand クラスを指定した a タグを配置する。

テキストを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text">hoge fuga piyo</p>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-text クラスを指定した p タグで配置できる。

リンクを混ぜる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text">
                text <a href="#" class="navbar-link">link</a>
            </p>
        </nav>
    </body>
</html>

bootstrap.JPG

  • テキストの中にリンクを設けたい場合は、 .navbar-link クラスを設定する。

ボタンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <button class="btn btn-default navbar-btn">Button</button>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-btn クラスを設定する。

フォームを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-form と .navbar-left クラスを設定した form タグを配置する。
    • .navbar-left を設定しないと form タグの幅が横幅いっぱいになってしまう。
  • 入力項目は .form-group で括らないと、横幅いっぱいに広がってしまう。

右端に配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text navbar-right">right text</p>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-right で右に配置できる。

ナビゲーションバーに一体化したボタンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li><a href="#">Hoge</a></li>
                <li><a href="#">Fuga</a></li>
                <li><a href="#">Piyo</a></li>
            </ul>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .nav と .navbar-nav クラスを設定した ul タグを配置する。

ドロップダウンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" data-toggle="dropdown">
                        Dropdown<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">hoge</a></li>
                        <li><a href="#">fuga</a></li>
                        <li><a href="#">piyo</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-nav を利用してドロップダウンを配置できる。

画面の幅が狭くなったときに各項目を非表示にして、メニューボタンで呼び出せるようにする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#collapse-target">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Boostrap</a>
            </div>
            
            <div class="collapse navbar-collapse" id="collapse-target">
                <ul class="nav navbar-nav">
                    <li><a href="#">Hoge</a></li>
                    <li><a href="#">Fuga</a></li>
                </ul>
                <button class="navbar-btn btn btn-default">Button</button>
            </div>
        </nav>
    </body>
</html>

画面の幅が十分にあるとき

bootstrap.JPG

ないとき

bootstrap.JPG

メニューボタンを押したとき

bootstrap.JPG

  • .navbar-header の中に button タグで画面幅が小さくなったときに表示するボタンを配置する。
  • 幅が小さくなったときに非表示にする範囲を .collapse と .navbar-collapse クラスを指定した div タグで括る。
  • この div タグを特定するためのセレクタを先述のメニューボタンの data-target 属性に設定する。

ナビゲーションバーを画面上部に固定する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <style>
            body {
                padding-top: 50px;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
        
        <p>top</p>
        <div style="height:1000px;"></div>
        <p>bottom</p>
    </body>
</html>

一番上

bootstrap.JPG

一番下

bootstrap.JPG

  • .navbar-fixed-top クラスを設定すると、ナビゲーションバーが画面上部に固定される。
  • ナビゲーションバーの中身は .container または .container-fluid クラスを指定した div タグで括る。
  • body 要素のスタイルに padding-top: 50px; を設定する。
    • こうしないと、ナビゲーションバーが直後の要素を上から覆い隠してしまう。
    • 50px はデフォルトのナビゲーションバーの高さ。

ナビゲーションバーを画面下部に固定する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <style>
            body {
                padding-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
        
        <p>top</p>
        <div style="height:1000px;"></div>
        <p>bottom</p>
    </body>
</html>

一番上

bootstrap.JPG

一番下

bootstrap.JPG

  • .navbar-fixed-bottom クラスを設定するとナビゲーションバーが画面下部に固定される。
  • こっちは body タグに padding-bottom を設定しないと（以下略）。

画面の幅いっぱいまで利用する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-static-top クラスを設定する。

ナビゲーションバーの色を反転させる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
    </body>
</html>

bootstrap.JPG

  • .navbar-default の代わりに .navbar-inverse クラスを設定すると、色が反転したスタイルになる。

Breadcrumbs（パンくずリスト）

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="breadcrumb">
            <li><a href="#">Hoge</a></li>
            <li><a href="#">Fuga</a></li>
            <li class="active">Piyo</li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • ul タグに .breadcrumb クラスを設定することで、パンくずリストのスタイルを適用できる。

Pagination

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • ul タグに .pagination クラスを設定すると、ページング用のリンクを作れる。

リンクを無効にする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li class="disabled"><span>&amp;laquo;</span></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .disabled クラスを設定すると、そのリンクを無効にできる。

現在表示されているページをハイライトさせる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .active クラスを設定したリンクはハイライトされるので、現在表示中のページ番号を示すのに利用できる。

サイズを変更する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination pagination-lg">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
        <ul class="pagination pagination-sm">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .pagination-lg で大きく、 .pagination-sm で小さくできる。

Pager

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • ul タグに .pager クラスを設定すると、ページ切り換えボタン用のスタイルを適用できる。

ボタンを画面の左右に分けて配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • li タグに .previous クラスを設定すると、画面の左側に寄せることができる。
  • .next クラスを設定すると、画面の右側に寄せることができる。

ボタンを無効にする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li class="disabled"><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .disabled クラスを設定すると、ボタンを無効にできる。

Labels

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="label label-default">default</span>
        <span class="label label-primary">primary</span>
        <span class="label label-success">success</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </body>
</html>

bootstrap.JPG

  • .label クラスと .label-** クラスを設定すると、テキストにラベルのスタイルが適用される。

Badges

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="badge">12</span>
        <span class="badge"></span>
    </body>
</html>

bootstrap.JPG

  • .badge クラスを設定すると、未読メッセージ数の通知などに利用できるバッジのスタイルを適用できる。
  • .badge クラスを設定したタグのテキストが空の場合は、何も表示されない。

Navs の Pill と一緒に利用できる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#">
                    Hoge
                    <span class="badge">15</span>
                </a>
            </li>
            <li>
                <a href="#">
                    Fuga
                    <span class="badge">15</span>
                </a>
            </li>
            <li><a href="#">Piyo</a></li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • Navs の Pill と一緒に使うとよしなにスタイルが調整される（アクティブのときに色が反転される）。

Jumbotron

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="jumbotron">
            <h1>H1 Text</h1>
            <p>p text...</p>
            <button class="btn btn-primary">Button</button>
        </div>
    </body>
</html>

bootstrap.JPG

  • 最近の Web サイトのトップページでよく見かける、そのサイトの主要コンテンツを大きく・かつシンプルに紹介する領域用のスタイルを適用できる。
  • div タグに .jumbotron クラスを指定する。

Page header

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="page-header">
            <h1>H1 Text</h1>
        </div>
    </body>
</html>

bootstrap.JPG

  • .page-header クラスを設定すると、ページのヘッダーと本文を明確に分離するためにスペースを開けたスタイルを適用できる。

Thumbnails

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="thumbnail">
            <img src="hoge.png" />
        </div>
    </body>
</html>

bootstrap.JPG

  • .thumbnail クラスを設定した要素で img タグを括ることで、サムネイル表示用のスタイルを適用できる。

Grid System と一緒に利用する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="hoge.png" />
					</div>
                </div>
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="fuga.png" />
					</div>
                </div>
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="piyo.png" />
					</div>
                </div>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • 基本は Grid system と一緒に利用することで、簡単にサムネイル画像を並べることができる。

サムネイルの下に説明などのテキストを載せる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="thumbnail">
                        <img src="hoge.png" />
                        <div class="caption">
                            <h3>Thumbnail Label</h3>
                            <p>p text...</p>
                            <button class="btn btn-primary">Button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .caption クラスを設定した div タグを配置すれば、その中にサムネイルを説明するテキストを載せることができる。

Alerts

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="alert alert-success">success</div>
        <div class="alert alert-info">info</div>
        <div class="alert alert-warning">warning</div>
        <div class="alert alert-danger">danger</div>
    </body>
</html>

bootstrap.JPG

  • .alert と .alert-** クラスを設定すると、アラートメッセージ用のスタイルを適用できる。

閉じるボタンを配置する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="alert alert-success alert-dismissable">
            <button class="close" data-dismiss="alert">&amp;times;</button>
            success
        </div>
    </body>
</html>

bootstrap.JPG

↓クリック

bootstrap.JPG

  • JavaScript を読み込む。
  • .alert クラスを設定した要素に .alert-dismissable クラスを追加する。
  • .close クラスと data-dismiss="alert" 属性を追加した button タグを配置する（テキストは &amp;times;）。

リンクを含める

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="alert alert-success">
            normal text <a href="#" class="alert-link">link text</a>
        </div>
    </body>
</html>

bootstrap.JPG

  • リンクを配置するときは、 a タグに .alert-link クラスを設定する。

Progress bars

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .progress クラスを設定した div タグの中に、 .progress-bar クラスを設定した div タグを配置する。
  • .progress-bar クラスを設定した div タグの幅でプログレスバーの表示幅が変わる。

バーの上にテキストを載せる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 60%;">
                60%
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .progress-bar クラスを設定した div タグ内にテキストを書けば、そのままバーの上に表示される。

色を付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 60%;">
                success
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 80%;">
                info
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 30%;">
                warning
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 70%;">
                danger
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .progress-bar-** クラスを追加することで、バーに色を付けることができる。

バーにストライプ模様を付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress progress-striped">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .progress-striped クラスを追加すると、バーがストライプ模様になる。
  • IE8 は非サポート。

ストライプ模様をアニメーションさせる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress progress-striped active">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>

jsFiddle サンプル

  • .active クラスを追加するとバーがアニメーションされる。

バーを積み重ねる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-success" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-info" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 20%;">
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .progress-bar クラスを設定した div タグを続けて記述することで、バーを積み重ねることができる。

Media object

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="hoge.png" />
            </a>
            <div class="media-body">
                <h4>Media heading</h4>
                <p>text...</p>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • twitter のコメントのような、画像とテキストを並べた一塊のレイアウトを実現する。

ネストする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="hoge.png" />
            </a>
            <div class="media-body">
                <h4>Media heading</h4>
                <p>text...</p>
                
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="fuga.png" />
                    </a>
                    <div class="media-body">
                        <h4>Nested Media</h4>
                        <p>text...</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .media-body の中に更に .media を追加することで、ネストが可能。

メディアリスト

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="media-list">
            <li class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="hoge.png" />
                </a>
                <div class="media-body">
                    <h4>Media heading</h4>
                    <p>text...</p>
                </div>
            </li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • ul タグを使う事が可能。
  • コメントスレッドや記事のリストを使う場合に便利らしい。

List group

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">Hoge</li>
            <li class="list-group-item">Fuga</li>
            <li class="list-group-item">Piyo</li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .list-group と .list-group-item クラスを使用してリストビューを作成できる。

Badge を付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">
                Hoge
                <span class="badge">11</span>
            </li>
            <li class="list-group-item">Fuga</li>
            <li class="list-group-item">Piyo</li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • Badge と組み合わせて使用できる。

リストの項目をリンクにする

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="list-group">
            <a href="#" class="list-group-item active">Hoge</a>
            <a href="#" class="list-group-item">Fuga</a>
            <a href="#" class="list-group-item">Piyo</a>
        </div>
    </body>
</html>

bootstrap.JPG

  • ul タグと li タグを使う代わりに div タグと a タグを使うことで、リストの項目をリンクにできる。
  • .active クラスを設定すると表示がアクティブ状態になる。

色を付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item list-group-item-success">success</li>
            <li class="list-group-item list-group-item-info">info</li>
            <li class="list-group-item list-group-item-warning">warning</li>
            <li class="list-group-item list-group-item-danger">danger</li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • .list-group-item-** クラスを追加することで色を付けることができる。

リストの項目に任意の HTML を記述する

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">
                <h4>List group item heading</h4>
                <p>text...</p>
            </li>
        </ul>
    </body>
</html>

bootstrap.JPG

  • リスト項目の中には任意の HTML が記述可能。

Panels

基本

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-body">
                panel body
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • パネルスタイルを実現する。

ヘッダーを付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Panel Heading
            </div>
            <div class="panel-body">
                panel body
            </div>
        </div>
    </body>
</html>

angularjs.JPG

  • .panel-heading クラスでパネルのヘッダーを追加できる。

フッターを付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-body">
                panel body
            </div>
            <div class="panel-footer">
                Panel Footer
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .panel-footer クラスでパネルのフッターを追加できる。

色を付ける

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                Primary
            </div>
            <div class="panel-body">
                primary
            </div>
        </div>
        
        <div class="panel panel-success">
            <div class="panel-heading">
                Success
            </div>
            <div class="panel-body">
                success
            </div>
        </div>
        
        <div class="panel panel-info">
            <div class="panel-heading">
                Info
            </div>
            <div class="panel-body">
                info
            </div>
        </div>
        
        <div class="panel panel-warning">
            <div class="panel-heading">
                Warning
            </div>
            <div class="panel-body">
                warning
            </div>
        </div>
        
        <div class="panel panel-danger">
            <div class="panel-heading">
                Danger
            </div>
            <div class="panel-body">
                danger
            </div>
        </div>
    </body>
</html>

bootstrap.JPG

  • .panel-** クラスを切り替えることで色を設定できる。

パネルの中にテーブルを入れる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <div class="panel-body">
                body
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Takeshi</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>Takuya</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>Toshio</td>
                        <td>16</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

bootstrap.JPG

  • .panel-body の外にテーブルを追加する。

ボディが無い場合

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Takeshi</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>Takuya</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>Toshio</td>
                        <td>16</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

bootstrap.JPG

  • .panel-body が無い場合、ヘッダーにつづいてテーブルが描画される。

パネルの中にリストグループを入れる

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <div class="panel-body">
                body
            </div>
            <ul class="list-group">
                <li class="list-group-item">Hoge</li>
                <li class="list-group-item">Fuga</li>
                <li class="list-group-item">Piyo</li>
            </ul>
        </div>
    </body>
</html>

bootstrap.JPG

  • リストグループもテーブル同様にパネル内に入れることができる。

Wells

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="well well-sm">well text</div>
        <div class="well">well text</div>
        <div class="well well-lg">well text</div>
    </body>
</html>

bootstrap.JPG

  • Inset Effetct ？のスタイルを適用できる。
  • .well-sm, .well-lg クラスでパディングを調整できる。

参考

全般

AREA について

257
269
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
257
269

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?