はてなブックマーク

コンテナ　　Containers Bootstrapは、コンテンツやグリッド・システムを収容するコンテナ要素を必要とする。 コンテナ要素は、固定幅（.container）と全幅（.container-fluid）の２種類用意されている。 どちらのコンテナ要素も、入れ子（ネスト）にできる。

HTML <p>show.bs.modal: <span id="showBsModal"></span></p> <p>shown.bs.modal: <span id="shownBsModal"></span></p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ａ）」ボタン"> 開く（Ａ） </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ｂ）」ボタン"> 開く（Ｂ） </b

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>

HTML <button type="button" id="sampleButton" class="btn btn-primary btn-lg"> モーダル・ダイアログ 呼び出し </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal

使い方 ポイントは１つだけ。 ボタン群を覆う要素（div要素など）のclass属性に、btn-groupを指定する。 <div class="btn-group" role="group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中央</button> <button type="button" class="btn btn-default">右</button> </div>

<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label" for="InputEmail">メール・アドレス</label> <div class="col-sm-10"> <input type="email" class="form-control" id="InputEmail" placeholder="メール・アドレス"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="InputPassword">パスワード</label> <div class="col-sm-10"> <input type="password" class="fo

<a class="btn btn-default" href="#" role="button">a要素</a> <button class="btn btn-default">button要素</button> <input class="btn btn-default" type="button" value="input要素"> <input class="btn btn-default" type="submit" value="送信ボタン">

ナビゲーション・バー　　Navbar ウェブサイトやアプリケーションのナビゲーション・ヘッダーに最適なスタイル。 表示領域の幅が狭いモバイルなどには、メニューを非表示にし、メニュー表示を切り替えるためのボタンを表示する。メニューは縦に並べて表示する。 表示領域の幅が広いパソコンなどには、メニューを水平に表示する。 使い方 ポイントは６つ。 class属性に、navbar navbar-defaultを指定したnav要素を用意する。 nav要素内に、class属性にnavbar-headerを指定したdiv要素と、collapse navbar-collapseを指定したdiv要素を配置する。 2でnavbar-headerを指定したdiv要素内に、button要素とa要素を配置する。 3で配置したbutton要素のclass属性にnavbar-toggle collapsedを指定、dat

グリッド・システム　　Grid system Bootstrap3には、とても柔軟なグリッドが用意されている。 モバイル、タブレット、デスクトップ、幅広デスクトップの４つの表示領域に対応するレスポンシブ・グリッド・システムだ。 使い方 class属性にrowを指定したdiv要素を用意する。このdiv要素は、class属性にcontainerかcontainer-fluidを指定した要素内に配置する。 １のdiv要素内に、class属性にcol-*-*を指定したdiv要素を配置する。 col-*-*における１つ目の*には、表示幅を意味するxs、sm、md、lgの何れかを指定する。 col-*-*における２つ目の*には、カラム数を指定する。一行における最大カラム数は12。

レスポンシブ・ユーティリティ　　Responsive utilities class属性を指定するだけで、ブラウザの表示幅に基づくブレーク・ポイントごとに、表示／非表示、表示方法（block、inline、inline-block）を切り替えることができる。

入門　　Getting started Bootstrap3の使用に必要なファイルの入手や読み込みについて。 ダウンロード 公式サイトのDownload Bootstrapより、Bootstrap3をダウンロード。 2015.1.7現在の最新版は、「v3.3.1」。 ダウンロードしたbootstrap-3.3.1-dist.zipを解凍すると、distフォルダが現れる。そのdistフォルダの中に、css、js、fontsの３つのフォルダがある。 下記のファイルを自分のサーバーにアップロードする。 cssフォルダ内のbootstrap.min.css jsフォルダ内のbootstrap.min.js fontsフォルダ内の全てのファイル。 尚、ダウンロードもアップロードもせず、 「Bootstrap CDN」を使う方法もある。 基本テンプレート Bootstrapの使用に必要なファイルを読み

Bootstrapは、HTML、CSS、Javascriptからなる人気のフレームワーク。 Bootstrap3日本語リファレンスでは、モバイル・ファーストとして生まれ変わったBootstrap3について解説しています。初心者でもわかる様に、ほぼ全てにサンプルを付けています。