サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
コーヒー沼
bootstrap3.cyberlab.info
ナビゲーション・バーにおけるドロップダウン ナビゲーション・バーにおけるドロップダウン使用方法。 ドロップダウン機能を持たせたいメニュー項目のli要素のclass属性にdropdownを指定する。 ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素のclass属性にdropdown-toggle、data-toggle属性にdropdownを指定する。 ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素の下に、ドロップダウンで表示させるリンクリスト(ul要素)を配置する。 リンクリスト(ul要素)のclass属性にはdropdown-menuを指定する。 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type=
コンテナ Containers Bootstrapは、コンテンツやグリッド・システムを収容するコンテナ要素を必要とする。 コンテナ要素は、固定幅(.container)と全幅(.container-fluid)の2種類用意されている。 どちらのコンテナ要素も、入れ子(ネスト)にできる。
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="「開く(A)」ボタン"> 開く(A) </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く(B)」ボタン"> 開く(B) </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
使い方 ポイントは1つだけ。 ボタン群を覆う要素(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>
使い方 ポイントは2つ。 入力欄の左に配置する場合は入力欄の直前に、入力欄の右に配置する場合は入力欄の直後に、入力欄の両サイドに配置する場合は入力欄の直前と直後に、class属性に、input-group-addonを指定したspan要素を配置する。そのspan要素内にテキストやボタンを配置する。 入力欄(input要素)とspan要素を、class属性にinput-groupを指定したdiv要素で括る。 <div class="input-group"> <span class="input-group-addon">ユーザー名</span> <input type="text" class="form-control" placeholder="太郎"> </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="送信ボタン">
使い方 class属性にpanel panel-defaultを指定したdiv要素を用意する。 必要に応じて、1の要素内に、panel-heading(ヘッダー)、panel-body(ボディー)、panel-footer(フッター)の何れかをclass属性に指定したdivを配置する。 必要に応じて、1の要素内に、表(table要素)やリスト・グループを配置することもできる。 <div class="panel panel-default"> <div class="panel-heading"> パネルのヘッダー </div> <div class="panel-body"> パネルの内容 </div> <div class="panel-footer"> パネルのフッター </div> </div>
ナビゲーション・バー Navbar ウェブサイトやアプリケーションのナビゲーション・ヘッダーに最適なスタイル。 表示領域の幅が狭いモバイルなどには、メニューを非表示にし、メニュー表示を切り替えるためのボタンを表示する。メニューは縦に並べて表示する。 表示領域の幅が広いパソコンなどには、メニューを水平に表示する。 使い方 ポイントは6つ。 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
ドロップダウン Dropdowns dropdown.jsを使うドロップダウン。 リンクのリストの表示/非表示を切り替えることができる。 使い方 ポイントは3つ。 ドロップダウンを覆う要素(div要素やul要素など)のclass属性に、dropdownを指定する。 リンクのリストの表示/非表示を切り替えを制御する要素(button要素やa要素など)のdata-toggle属性に、dropdownを指定する。 リンクのリストの要素(ul要素)のclass属性に、dropdown-menuを指定する。 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> ドロップダウン <span class="caret"></span> </
グリッド・システム Grid system Bootstrap3には、とても柔軟なグリッドが用意されている。 モバイル、タブレット、デスクトップ、幅広デスクトップの4つの表示領域に対応するレスポンシブ・グリッド・システムだ。 使い方 class属性にrowを指定したdiv要素を用意する。このdiv要素は、class属性にcontainerかcontainer-fluidを指定した要素内に配置する。 1のdiv要素内に、class属性にcol-*-*を指定したdiv要素を配置する。 col-*-*における1つ目の*には、表示幅を意味するxs、sm、md、lgの何れかを指定する。 col-*-*における2つ目の*には、カラム数を指定する。一行における最大カラム数は12。
レスポンシブ・ユーティリティ Responsive utilities class属性を指定するだけで、ブラウザの表示幅に基づくブレーク・ポイントごとに、表示/非表示、表示方法(block、inline、inline-block)を切り替えることができる。
テキスト入力欄の左サイド、右サイド、もしくは、両サイドに、テキストやボタンを、1つ配置することができる。
入門 Getting started Bootstrap3の使用に必要なファイルの入手や読み込みについて。 ダウンロード 公式サイトのDownload Bootstrapより、Bootstrap3をダウンロード。 2015.1.7現在の最新版は、「v3.3.1」。 ダウンロードしたbootstrap-3.3.1-dist.zipを解凍すると、distフォルダが現れる。そのdistフォルダの中に、css、js、fontsの3つのフォルダがある。 下記のファイルを自分のサーバーにアップロードする。 cssフォルダ内のbootstrap.min.css jsフォルダ内のbootstrap.min.js fontsフォルダ内の全てのファイル。 尚、ダウンロードもアップロードもせず、 「Bootstrap CDN」を使う方法もある。 基本テンプレート Bootstrapの使用に必要なファイルを読み
Bootstrapは、HTML、CSS、Javascriptからなる人気のフレームワーク。 Bootstrap3日本語リファレンスでは、モバイル・ファーストとして生まれ変わったBootstrap3について解説しています。初心者でもわかる様に、ほぼ全てにサンプルを付けています。
このページを最初にブックマークしてみませんか?
『Bootstrap3日本語リファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く