ブートストラップ-クイックガイド
Twitter Bootstrapとは何ですか？
Bootstrapは、より速く、より簡単なWeb開発のための、洗練された直感的で強力なモバイルファーストフロントエンドフレームワークです。HTML、CSS、Javascriptを使用しています。
歴史
ブートストラップは、によって開発されたマーク・オットーとジェイコブ・ソーントンでTwitterの。2011年8月にGitHubでオープンソース製品としてリリースされました。
なぜブートストラップを使用するのですか？
Mobile first approach − Bootstrap 3、フレームワークは、個別のファイルではなく、ライブラリ全体のモバイルファーストスタイルで構成されています。
Browser Support −一般的なすべてのブラウザでサポートされています。
Easy to get started− HTMLとCSSの知識だけで、誰でもBootstrapを使い始めることができます。また、Bootstrapの公式サイトには優れたドキュメントがあります。
Responsive design− BootstrapのレスポンシブCSSは、デスクトップ、タブレット、およびモバイルに適応します。レスポンシブデザインの詳細については、「ブートストラップレスポンシブデザイン」の章を参照してください。
開発者向けのインターフェースを構築するためのクリーンで統一されたソリューションを提供します。
カスタマイズが簡単な美しく機能的な組み込みコンポーネントが含まれています。
また、Webベースのカスタマイズも提供します。
そして何よりも、それはオープンソースです。
どのブートストラップパッケージが含まれていますか？
Scaffolding− Bootstrapは、グリッドシステム、リンクスタイル、および背景を備えた基本構造を提供します。これについては、セクションで詳しく説明しますBootstrap Basic Structure
CSS− Bootstrapには、グローバルCSS設定、拡張可能なクラスでスタイル設定および拡張された基本的なHTML要素、および高度なグリッドシステムの機能が付属しています。これについては、セクションで詳しく説明しますBootstrap with CSS。
Components− Bootstrapには、図像、ドロップダウン、ナビゲーション、アラート、ポップオーバーなどを提供するために構築された、12を超える再利用可能なコンポーネントが含まれています。これについては、セクションで詳しく説明しますLayout Components。
JavaScript Plugins− Bootstrapには、12を超えるカスタムjQueryプラグインが含まれています。それらすべてを簡単に含めることも、1つずつ含めることもできます。これについては、セクションで詳しく説明しますBootstrap Plugins。
Customize − Bootstrapのコンポーネント、LESS変数、およびjQueryプラグインをカスタマイズして、独自のバージョンを取得できます。
Bootstrapのセットアップと使用開始は非常に簡単です。この章では、Bootstrapをダウンロードしてセットアップする方法について説明します。また、Bootstrapファイル構造についても説明し、例を使用してその使用法を示します。
Bootstrapをダウンロードする
Bootstrapの最新バージョンはからダウンロードできます https://getbootstrap.com/。このリンクをクリックすると、以下のような画面が表示されます-
ここに2つのボタンがあります-
Download Bootstrap−これをクリックすると、Bootstrap CSS、JavaScript、およびフォントのプリコンパイル済みおよび縮小版をダウンロードできます。ドキュメントやオリジナルのソースコードファイルは含まれていません。
Download Source −これをクリックすると、GitHubから直接最新のBootstrapLESSおよびJavaScriptソースコードを取得できます。
Bootstrapのコンパイルされていないソースコードを使用する場合は、LESSファイルをコンパイルして使用可能なCSSファイルを生成する必要があります。LESSファイルをCSSにコンパイルするために、Bootstrapは公式にRecessのみをサポートします 。これはless.jsに基づくTwitterのCSSヒント です。
理解を深め、使いやすくするために、チュートリアル全体でコンパイル済みバージョンのBootstrapを使用します。ファイルはコンパイルおよび縮小されるため、個々の機能用に個別のファイルを含めるたびに煩わされる必要はありません。このチュートリアルの執筆時点で、最新バージョン（Bootstrap 3）がダウンロードされています。
ファイル構造
プリコンパイルされたブートストラップ
コンパイルされたバージョンのBootstrapがダウンロードされたら、ZIPファイルを抽出すると、次のファイル/ディレクトリ構造が表示されます-
ご覧のとおり、コンパイルされたCSSとJS（bootstrap。*）のほか、コンパイルされて縮小されたCSSとJS（bootstrap.min。*）があります。オプションのBootstrapテーマであるため、Glyphiconsのフォントが含まれています。
ブートストラップソースコード
Bootstrapソースコードをダウンロードした場合、ファイル構造は次のようになります-
less /、js /、およびfonts /の下のファイルは、Bootstrap CSS、JS、およびアイコンフォント（それぞれ）のソースコードです。
DIST /フォルダには、上記のコンパイル済みのダウンロードセクションに記載されているすべてのものを含んでいます。
docs-assets /、examples /、およびすべての* .htmlファイルはBootstrapドキュメントです。
HTMLテンプレート
Bootstrapを使用した基本的なHTMLテンプレートは次のようになります-
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>ここであなたは見ることができます jquery.js、 bootstrap.min.js そして bootstrap.min.cssブートストラップされたテンプレートに通常のHTMファイルを作成するために含まれているファイル。Bootstrapライブラリを含める前に、必ずjQueryライブラリを含めてください。
上記のコードの各要素の詳細については、「ブートストラップCSSの概要」の章で説明します。
例
次に、上記のテンプレートを使用して例を試してみましょう。当社のウェブサイトの以下のサンプルコードボックスの右上隅にあるライブデモオプションを使用して、次の例を試してください-
<h1>Hello, world!</h1>以降のすべての章では、サイトからのダミーテキストを使用しました https://www.lipsum.com/。
この章では、ブートストラップグリッドシステムについて説明します。
グリッドとは何ですか？
ウィキペディアによって置かれたように-
グラフィックデザインでは、グリッドは、コンテンツを構造化するために使用される一連の交差する直線（垂直、水平）線で構成される構造（通常は2次元）です。印刷デザインのレイアウトやコンテンツ構造のデザインに広く使用されています。Webデザインでは、HTMLとCSSを使用して一貫したレイアウトを迅速かつ効果的に作成することは非常に効果的な方法です。
簡単に言えば、Webデザインのグリッドはコンテンツを整理および構造化し、Webサイトのスキャンを容易にし、ユーザーの認知的負荷を軽減します。
ブートストラップグリッドシステムとは何ですか？
グリッドシステム用のブートストラップの公式ドキュメントに記載されているように-
Bootstrapには、デバイスまたはビューポートのサイズが大きくなると、最大12列まで適切にスケールアップする応答性の高いモバイルファースト流体グリッドシステムが含まれています。簡単なレイアウトオプションのための事前定義されたクラスと、よりセマンティックなレイアウトを生成するための強力なミックスインが含まれています。
上記のステートメントを理解しましょう。Bootstrap 3は、モバイルデバイスやタブレットなどの小さな画面をターゲットにすることから始まり、ラップトップやデスクトップなどの大きな画面用にコンポーネントとグリッドを「拡張」するという意味で、最初はモバイルです。
モバイルファースト戦略
Content
- 最も重要なものを決定します。
Layout
- 最初に小さい幅に設計します。
- 最初にベースCSSアドレスモバイルデバイス。メディアクエリは、タブレット、デスクトップのアドレスです。
Progressive Enhancement
- 画面サイズが大きくなるにつれて要素を追加します。
ブートストラップグリッドシステムの動作
グリッドシステムは、コンテンツを格納する一連の行と列を介してページレイアウトを作成するために使用されます。ブートストラップグリッドシステムの仕組みは次のとおりです-
行は、内に配置する必要があります .container 適切な配置とパディングのためのクラス。
行を使用して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
次のような事前定義されたグリッドクラス .row and .col-xs-4グリッドレイアウトをすばやく作成するために使用できます。LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
列は、パディングを介してガター（列の内容間のギャップ）を作成します。そのパディングは、上の負のマージンを介して最初と最後の列の行でオフセットされます.rows。
グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-xs-4。
メディアクエリ
メディアクエリは、「条件付きCSSルール」の非常に凝った用語です。記載されている特定の条件に基づいて、CSSを適用するだけです。これらの条件が満たされると、スタイルが適用されます。
Bootstrapのメディアクエリを使用すると、ビューポートサイズに基づいてコンテンツを移動、表示、および非表示にできます。以下のメディアクエリは、ブートストラップグリッドシステムで主要なブレークポイントを作成するためにLESSファイルで使用されます。
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }時折、これらは以下を含むように拡張されます max-width CSSをより狭いデバイスのセットに制限します。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }メディアクエリには、デバイス仕様とサイズルールの2つの部分があります。上記の場合、次のルールが設定されます-
この行を考えてみましょう-
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }どんなにどのような種類で、すべてのデバイスでは最小幅：画面-SM-分@画面の幅がより小さくなる場合には、画面-SM-MAX @、そして何かをします。
グリッドオプション
次の表は、Bootstrapグリッドシステムが複数のデバイス間でどのように機能するかをまとめたものです。
| 超小型デバイス電話（<768px） | 小型デバイスタブレット（≥768px） | 中型デバイスデスクトップ（992px以上） | 大型デバイスデスクトップ（≥1200px） | |
|---|---|---|---|---|
| グリッドの動作 | 常に水平 | ブレークポイントの上の水平方向に折りたたまれて開始 | ブレークポイントの上の水平方向に折りたたまれて開始 | ブレークポイントの上の水平方向に折りたたまれて開始 |
| コンテナの最大幅 | なし（自動） | 750px | 970px | 1170px |
| クラスプレフィックス | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | 12 | 12 | 12 |
| 最大列幅 | 自動 | 60px | 78px | 95px |
| 側溝幅 | 30px （列の両側に15px） |
30px （列の両側に15px） |
30px （列の両側に15px） |
30px （列の両側に15px） |
| 必要な | はい | はい | はい | はい |
| オフセット | はい | はい | はい | はい |
| 列の順序 | はい | はい | はい | はい |
基本的なグリッド構造
以下は、ブートストラップグリッドの基本構造です。
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>いくつかの簡単なグリッドの例を見てみましょう-
例-スタックから水平
例-中型および大型デバイス
例-モバイル、タブレット、デスクトップ
レスポンシブカラムのリセット
利用可能なグリッドの4つの層があると、特定のブレークポイントで、一方が他方よりも高いため、列が完全にクリアされないという問題が発生することになります。これを修正するには、クラスの組み合わせを使用します.clearfix次の例に示すように、レスポンシブユーティリティクラス-
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>これにより、次の結果が生成されます-
この例の望ましい結果については、ビューポートのサイズを変更するか、電話で確認してください。
オフセット列
オフセットは、より特殊なレイアウトに役立つ機能です。これらを使用して、列を押して間隔を広げることができます（たとえば）。ザ・.col-xs = * クラスはオフセットをサポートしていませんが、空のセルを使用して簡単に複製できます。
大型ディスプレイでオフセットを使用するには、 .col-md-offset-*クラス。これらのクラスは、列の左マージンを次のように増やします。* ここで列 * の範囲 1 に 11。
次の例では、<div class = "col-md-6"> .. </ div>があり、クラスを使用してこれを中央に配置します .col-md-offset-3。
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>これにより、次の結果が生成されます-
ネスト列
デフォルトのグリッドでコンテンツをネストするには、新しいグリッドを追加します .row とのセット .col-md-* 既存の列内の列 .col-md-*カラム。ネストされた行には、合計12個の列のセットを含める必要があります。
次の例では、レイアウトに2つの列があり、2番目の列は2行にわたって4つのボックスに分割されています。
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>これにより、次の結果が生成されます-
列の順序
Bootstrapグリッドシステムのもう1つの優れた機能は、列を順番に簡単に記述して、別の列に表示できることです。組み込みのグリッド列の順序は、次のコマンドで簡単に変更できます。.col-md-push-* そして .col-md-pull-* 修飾子クラスここで * の範囲 1 に 11。
次の例では、2列のレイアウトがあり、左側の列が最も狭く、サイドバーとして機能します。を使用してこれらの列の順序を入れ替えます.col-md-push-* そして .col-md-pull-* クラス。
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>これにより、次の結果が生成されます-
この章では、Bootstrapのより優れた、より高速な、より強力なWeb開発へのアプローチなど、Bootstrapのインフラストラクチャの主要部分の概要を説明します。
HTML5 doctype
Bootstrapは、HTML5Doctypeの使用を必要とする特定のHTML要素とCSSプロパティを利用します。したがって、Bootstrapを使用するすべてのプロジェクトの最初に、HTML5Doctypeの以下のコードを含めます。
<!DOCTYPE html>
<html>
....
</html>モバイルファースト
Bootstrap 3がリリースされて以来、Bootstrapは最初にモバイルになりました。つまり、「モバイルファースト」スタイルは、個別のファイルではなく、ライブラリ全体で見つけることができます。追加する必要がありますviewport meta tag に <head> 要素、モバイルデバイスでの適切なレンダリングとタッチズームを保証します。
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">widthプロパティは、デバイスの幅を制御します。デバイス幅に設定すると、さまざまなデバイス（モバイル、デスクトップ、タブレットなど）で適切にレンダリングされます。
initial-scale = 1.0を指定すると、読み込まれたときにWebページが1：1の縮尺でレンダリングされ、すぐにズームが適用されることはありません。
追加 user-scalable = no に content以下に示すように、モバイルデバイスのズーム機能を無効にする属性。この変更により、ユーザーはスクロールのみが可能になり、ズームはできなくなります。その結果、サイトはネイティブアプリケーションのように感じられます。
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">通常、maximum-scale = 1.0は、user-scalable = noとともに使用されます。上記のようにuser-scalable = no ユーザーにネイティブアプリのようなエクスペリエンスを提供する可能性があるため、Bootstrapはこの属性の使用を推奨していません。
レスポンシブ画像
Bootstrap 3では、クラスを追加することで画像をレスポンシブにすることができます .img-responsive に <img>鬼ごっこ。このクラスが適用されますmax-width: 100%; そして height: auto; 親要素に適切に拡大縮小されるように画像に合わせます。
<img src = "..." class = "img-responsive" alt = "Responsive image">タイポグラフィとリンク
Bootstrapは、基本的なグローバル表示（背景）、タイポグラフィ、およびリンクスタイルを設定します-
Basic Global display−背景色を設定します：#fff; 上の<BODY>要素。
Typography−活版印刷のベースとして、@ font-family-base、@ font-size-base、および@ line-height-base属性を使用します。
Link styles−属性@ link-colorを介してグローバルリンクの色を設定し、：hoverにのみリンクアンダースコアを適用します。
LESSコードを使用する場合は、scaffold.less内にこれらすべてが含まれている可能性があります 。
ノーマライズ
Bootstrapは、Normalizeを使用してブラウザー間の一貫性を確立します。
Normalize.cssは、CSSリセットに代わる最新のHTML5対応です。これは小さなCSSファイルであり、HTML要素のデフォルトのスタイル設定でブラウザー間の一貫性を向上させます。
コンテナ
クラスを使用する .container 以下に示すように、ページのコンテンツを折り返し、コンテンツを簡単に中央に配置します。
<div class = "container">
...
</div>を見てください .containerbootstrap.cssファイルのクラス-
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}パディングと固定幅のため、コンテナはデフォルトでネストできないことに注意してください。
bootstrap.cssファイルを見てください-
@media (min-width: 768px) {
.container {
width: 750px;
}
}ここで、CSSにメディアクエリがあることがわかります。 width。これは応答性を適用するのに役立ち、それらの中でコンテナクラスはそれに応じて変更され、グリッドシステムを適切にレンダリングします。
Bootstrapは、デフォルトのフォントスタックでHelvetica Neue、Helvetica、Arial、およびsans-serifを使用します。Bootstrapのタイポグラフィ機能を使用すると、見出し、段落、リスト、その他のインライン要素を作成できます。次のセクションで、これらのそれぞれについて学びましょう。
見出し
すべてのHTML見出し（h1からh6）はBootstrapでスタイル設定されています。例を以下に示します-
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Bootstrapを使用した上記のコードセグメントは、次の結果を生成します-
インライン小見出し
いずれかの見出しにインライン小見出しを追加するには、任意の要素の周囲に<small>を追加するか、追加します。 .small クラスを選択すると、以下の例に示すように、明るい色の小さなテキストが表示されます-
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Bootstrapを使用した上記のコードセグメントは、次の結果を生成します-
リードボディコピー
段落に強調を加えるには、class = "lead"を追加します。これにより、次の例のように、フォントサイズが大きくなり、太さが軽くなり、行の高さが高くなります。
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>強調
<small>などのHTMLのデフォルトの強調タグは、テキストを親のサイズの85％に設定し、<strong>はフォントの太さが重いテキストを強調し、<em>はイタリック体のテキストを強調します。
Bootstrapは、次の例に示すように、テキストを強調するために使用できるいくつかのクラスを提供します。
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>略語
HTMLの<abbr>要素は、WWWやHTTPなどの略語または頭字語のマークアップを提供します。ブートストラップは、下部に明るい点線の境界線を持つ<abbr>要素のスタイルを設定し、ホバー時に全文を表示します（そのテキストを<abbr> title属性に追加する場合）。フォントサイズを少し小さくするには、<abbr>に.initialismを追加します。
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>住所
<address>タグを使用すると、Webページに連絡先情報を表示できます。<address>はデフォルトで次のように表示されるため：block; 使用する必要があります
囲まれたアドレステキストに改行を追加するタグ。
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>ブロッククォート
HTMLテキストの周りにデフォルトの<blockquote>を使用できます。他のオプションには、引用のソースを識別するための<small>タグの追加、およびクラス.pull-rightを使用したブロック引用の右揃えが含まれます。次の例は、これらすべての機能を示しています-
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>リスト
Bootstrapは、順序付きリスト、順序なしリスト、および定義リストをサポートします。
Ordered lists −順序付きリストは、ある種の順番に分類され、先頭に番号が付いたリストです。
Unordered lists−順序なしリストとは、特定の順序がなく、従来は箇条書きでスタイル設定されたリストです。箇条書きを表示したくない場合は、クラス.list-unstyledを使用してスタイルを削除できます。クラス.list-inlineを使用して、すべてのリストアイテムを1行に配置することもできます。
Definition lists−このタイプのリストでは、各リスト項目は<dt>要素と<dd>要素の両方で構成できます。<dt>は定義用語を表し、辞書のように、これは定義されている用語（またはフレーズ）です。続いて、<dd>は<dt>の定義です。クラスdl-horizontalを使用して、<dl>の用語と説明を並べて作成できます。
次の例は、これらの各タイプを示しています-
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>Bootstrapを使用すると、2つの異なる主要な方法でコードを表示できます-
1つ目は<code>タグです。コードをインラインで表示する場合は、<code>タグを使用する必要があります。
2番目は<pre>タグです。コードをスタンドアロンのブロック要素として表示する必要がある場合、またはコードに複数の行がある場合は、<pre>タグを使用する必要があります。
<pre>タグと<code>タグを使用するときは、開始タグと終了タグにUnicodeバリアントを使用するようにしてください- < そして >。
以下の例を見てみましょう-
<p><code><header></code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use <pre> tag as:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>Bootstrapは、テーブルを構築するためのすっきりとしたレイアウトを提供します。Bootstrapでサポートされているテーブル要素の一部は次のとおりです。
| シニア番号 | タグと説明 |
|---|---|
| 1 | <table> 表形式でデータを表示するためのラッピング要素 |
| 2 | <thead> テーブル列にラベルを付けるためのテーブルヘッダー行（<tr>）のコンテナ要素。 |
| 3 | <tbody> テーブル本体のテーブル行（<tr>）のコンテナ要素。 |
| 4 | <tr> 単一の行に表示される一連のテーブルセル（<td>または<th>）のコンテナ要素。 |
| 5 | <td> デフォルトのテーブルセル。 |
| 6 | <th> 列（またはスコープと配置に応じて行）ラベル用の特別なテーブルセル。<thead>内で使用する必要があります |
| 7 | <caption> テーブルが保持するものの説明または要約。 |
基本表
軽いパディングと水平方向の仕切りだけを備えた、素晴らしく基本的なテーブルスタイルが必要な場合は、次の例に示すように、.tableの基本クラスを任意のテーブルに追加します。
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>オプションのテーブルクラス
基本テーブルマークアップと.tableクラスに加えて、マークアップのスタイル設定に使用できる追加のクラスがいくつかあります。次のセクションでは、これらすべてのクラスを垣間見ることができます。
縞模様のテーブル
.table-stripedクラスを追加すると、次の例に示すように、<tbody>内の行にストライプが作成されます。
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>ボーダーテーブル
.table-borderedクラスを追加すると、次の例に示すように、すべての要素を囲む境界線と、テーブル全体の周りの丸い角が得られます。
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>ホバーテーブル
次の例に示すように、.table-hoverクラスを追加すると、カーソルが行の上にある間、明るい灰色の背景が行に追加されます。
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>凝縮テーブル
.table-condensedクラスを追加することにより、行のパディングが半分にカットされ、テーブルが凝縮されます。次の例に示すように。これは、より密度の高い情報が必要な場合に役立ちます。
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>コンテキストクラス
次の表に示すコンテキストクラスを使用すると、テーブルの行または個々のセルの背景色を変更できます。
| シニア番号 | クラスと説明 |
|---|---|
| 1 | .active 特定の行またはセルにホバーカラーを適用します |
| 2 | .success 成功または前向きな行動を示します |
| 3 | .warning 注意が必要な可能性のある警告を示します |
| 4 | .danger 危険または潜在的に否定的な行動を示します |
これらのクラスは、<tr>、<td>、または<th>に適用できます。
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>レスポンシブテーブル
.tableを.table-sensitiveクラスでラップすることにより、テーブルを小さなデバイス（768px未満）まで水平方向にスクロールさせます。幅768pxを超えるものを表示する場合、これらのテーブルに違いは見られません。
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>この章では、Bootstrapを使用して簡単にフォームを作成する方法を学習します。Bootstrapを使用すると、さまざまなスタイルのフォーム用の単純なHTMLマークアップと拡張クラスを簡単に使用できます。この章では、Bootstrapを使用して簡単にフォームを作成する方法を学習します。
フォームレイアウト
Bootstrapは、次のタイプのフォームレイアウトを提供します-
- 垂直（デフォルト）フォーム
- インラインフォーム
- 横型
縦型または基本型
基本的なフォーム構造にはBootstrapが付属しています。個々のフォームコントロールは、自動的にグローバルなスタイルを受け取ります。基本的なフォームを作成するには、次のようにします。
親の<form>要素にロールフォームを追加します。
ラベルとコントロールをクラス.form-groupで<div>にラップします。これは、最適な間隔のために必要です。
.form-controlのクラスをすべてのテキストの<input>、<textarea>、および<select>要素に追加します。
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>インラインフォーム
すべての要素がインラインで、左揃えで、ラベルが並んでいるフォームを作成するには、クラス.form-inlineを<form>タグに追加します。
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>デフォルトでは、入力、選択、およびテキストエリアの幅はBootstrapで100％です。インラインフォームを使用する場合は、フォームコントロールに幅を設定する必要があります。
クラス.sr-onlyを使用すると、インラインフォームのラベルを非表示にできます。
横型
水平フォームは、マークアップの量だけでなく、フォームの表示においても他のフォームとは一線を画しています。水平レイアウトを使用するフォームを作成するには、次のようにします。
.form-horizontalのクラスを親の<form>要素に追加します。
ラベルとコントロールをクラス.form-groupで<div>にラップします。
.control-labelのクラスをラベルに追加します。
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>サポートされているフォームコントロール
Bootstrapは、主に入力、テキストエリア、チェックボックス、ラジオ、および選択の最も一般的なフォームコントロールをネイティブにサポートします。
入力
最も一般的なフォームテキストフィールドは入力フィールドです。これは、ユーザーが重要なフォームデータのほとんどを入力する場所です。Bootstrapは、テキスト、パスワード、日時、日時ローカル、日付、月、時刻、週、番号、電子メール、URL、検索、電話、色など、すべてのネイティブHTML5入力タイプをサポートします。入力を完全にスタイル設定するには、適切な型宣言が必要です。
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>Textarea
textareaは、複数行の入力が必要な場合に使用されます。必要に応じて行属性を変更します（行が少ない=ボックスが小さい、行が多い=ボックスが大きい）。
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>チェックボックスとラジオボタン
チェックボックスとラジオボタンは、ユーザーがプリセットオプションのリストから選択できるようにする場合に最適です。
フォームを作成するときに、ユーザーがリストから任意の数のオプションを選択できるようにする場合は、チェックボックスを使用します。ユーザーを1つの選択だけに制限する場合は、ラジオを使用します。
.checkbox-inlineまたは.radio-inlineクラスを使用して、コントロールの一連のチェックボックスまたは無線を同じ行に表示します。
次の例は、両方の（デフォルトとインライン）タイプを示しています-
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>選択
selectは、ユーザーが複数のオプションから選択できるようにする場合に使用されますが、デフォルトでは1つしか許可されていません。
状態や番号など、ユーザーが使い慣れているリストオプションには、<select>を使用します。
使用複数=「複数」のユーザーが複数のオプションを選択することができるようにします。
次の例は、（選択および複数）タイプの両方を示しています-
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>静的制御
水平フォーム内のフォームラベルの横にプレーンテキストを配置する必要がある場合は、<p>でクラス.form-control-staticを使用します。
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>フォーム管理状態
加えて：フォーカス（それへの入力またはタブに、すなわち、ユーザーがクリック）状態、ブートストラップは、フォーム検証のために無効に入力し、クラスのためのスタイリングを提供しています。
入力フォーカス
入力が：focusを受け取ると、入力のアウトラインが削除され、ボックスシャドウが適用されます。
無効な入力
入力を無効にする必要がある場合は、disabled属性を追加するだけで無効になるだけではありません。また、カーソルを要素の上に置くと、スタイルとマウスカーソルが変更されます。
無効なフィールドセット
<fieldset>内のすべてのコントロールを一度に無効にするには、disabled属性を<fieldset>に追加します。
検証状態
ブートストラップには、エラー、警告、および成功メッセージの検証スタイルが含まれています。使用するには、適切なクラス（.has-warning、.has-error、または.has-success）を親要素に追加するだけです。
次の例は、すべてのフォーム制御状態を示しています-
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>フォームコントロールのサイジング
フォームの高さと幅は、それぞれ.input-lgや.col-lg- *などのクラスを使用して設定できます。次の例はこれを示しています-
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>ヘルプテキスト
ブートストラップフォームコントロールには、入力とともに流れるブロックレベルのヘルプテキストを含めることができます。コンテンツの全幅ブロックを追加するには、<input>の後に.help-blockを使用します。次の例はこれを示しています-
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>この章では、例を挙げてBootstrapボタンの使用年齢について説明します。のクラスが与えられているものは何でも.btn角が丸い灰色のボタンのデフォルトの外観を継承します。ただし、Bootstrapには、ボタンのスタイルを設定するためのいくつかのオプションがあり、次の表に要約されています。
| シニア番号 | クラスと説明 |
|---|---|
| 1 | btn デフォルト/標準ボタン。 |
| 2 | btn-primary 視覚的な重みを追加し、一連のボタンの主要なアクションを識別します。 |
| 3 | btn-success 成功または前向きなアクションを示します。 |
| 4 | btn-info 情報アラートメッセージ用のコンテキストボタン。 |
| 5 | btn-warning このアクションには注意が必要であることを示します。 |
| 6 | btn-danger 危険または潜在的に否定的な行動を示します。 |
| 7 | btn-link ボタンの動作を維持しながら、ボタンをリンクのように見せることで、ボタンの強調を解除します。 |
次の例は、上記のすべてのボタンクラスを示しています-
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>ボタンのサイズ
次の表は、さまざまなサイズのボタンを取得するために使用されるクラスをまとめたものです。
| シニア番号 | クラスと説明 |
|---|---|
| 1 | .btn-lg これにより、ボタンのサイズが大きくなります。 |
| 2 | .btn-sm これにより、ボタンのサイズが小さくなります。 |
| 3 | .btn-xs これにより、ボタンのサイズが非常に小さくなります。 |
| 4 | .btn-block これにより、ブロックレベルのボタン（親の幅全体に広がるボタン）が作成されます。 |
次の例はこれを示しています-
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>ボタンの状態
Bootstrapは、ボタンの状態をアクティブ、無効などに変更できるクラスを提供します。それぞれについて、次のセクションで説明します。
アクティブ状態
アクティブな場合、ボタンは押された状態で表示されます（背景が暗く、境界線が暗く、影がはめ込まれています）。次の表は、ボタン要素とアンカー要素をアクティブにするために使用されるクラスをまとめたものです。
| 素子 | クラス |
|---|---|
| ボタン要素 | 使用する .active それがアクティブ化されていることを示すクラス。 |
| アンカー要素 | 使用する .active <a>ボタンにクラス分けして、アクティブ化されていることを示します。 |
次の例はこれを示しています-
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>無効状態
ボタンを無効にすると、ボタンの色が50％薄くなり、グラデーションが失われます。
次の表は、ボタン要素とアンカー要素を無効にするために使用されるクラスをまとめたものです。
| 素子 | クラス |
|---|---|
| ボタン要素 | 追加します disabled <button>ボタンの属性。 |
| アンカー要素 | 追加します disabled <a>ボタンへのクラス。 Note−このクラスは、<a>の外観のみを変更し、機能は変更しません。ここでリンクを無効にするには、カスタムJavaScriptを使用する必要があります。 |
次の例はこれを示しています-
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>ボタンタグ
<a>、<button>、または<input>要素を持つボタンクラスを使用できます。ただし、主にブラウザ間の不整合の問題を回避するために、<button>要素とともに使用することをお勧めします。
次の例はこれを示しています-
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">この章では、イメージのブートストラップサポートについて説明します。Bootstrapは、いくつかの単純なスタイルを画像に適用するために使用できる3つのクラスを提供します-
.img-rounded−画像に丸みを帯びた角を与えるためにborder-radius：6pxを追加します。
.img-circle− border-radius：500pxを追加して、画像全体を丸くします。
.img-thumbnail −少しのパディングと灰色の境界線を追加します−
次の例はこれを示しています-
<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">この章では、便利なBootstrapのヘルパークラスのいくつかについて説明します。
アイコンを閉じる
モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。クラスを使用するclose 閉じるアイコンを取得します。
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>キャレット
キャレットを使用して、ドロップダウンの機能と方向を示します。この機能を取得するには、クラスを使用しますcaret <span>要素を使用します。
<p>Caret Example<span class = "caret"></span></p>クイックフロート
クラスで要素を左または右にフロートさせることができます pull-left または pull-right それぞれ、次の例はこれを示しています。
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>navbarのコンポーネントをユーティリティクラスに揃えるには、 .navbar-left または .navbar-right代わりに。詳細については、 ナビゲーションバーの章を参照してください。
センターコンテンツブロック
クラスを使用する center-block 要素を中央に設定します。
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>Clearfix
要素のフロートをクリアするには、 .clearfix クラス。
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>コンテンツの表示と非表示
クラスを使用して、要素を強制的に表示または非表示にすることができます（スクリーンリーダーを含む） .show そして .hidden。
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>スクリーンリーダーのコンテンツ
クラスのスクリーンリーダーを除くすべてのデバイスに対して要素を非表示にすることができます .sr-only。
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>ここでは、両方の入力タイプのラベルにクラスが割り当てられていることがわかります。 sr-only、したがって、ラベルはスクリーンリーダーにのみ表示されます。
Bootstrapは、モバイルフレンドリーな開発を高速化するために、いくつかのヘルパークラスを提供します。これらは、大、小、中のデバイスと組み合わせて、メディアクエリを介してデバイスごとにコンテンツを表示および非表示にするために使用できます。
これらは慎重に使用し、同じサイトのまったく異なるバージョンを作成しないようにしてください。 Responsive utilities are currently only available for block and table toggling。
| クラス | デバイス |
|---|---|
| .visible-xs | 非常に小さい（768px未満）が表示されます |
| .visible-sm | 小さい（最大768ピクセル）表示 |
| .visible-md | 中（768ピクセルから991ピクセル）が表示されます |
| .visible-lg | 大きい（992ピクセル以上）表示 |
| .hidden-xs | 極小（768px未満）非表示 |
| .hidden-sm | 小さい（最大768ピクセル）非表示 |
| .hidden-md | 中（768ピクセルから991ピクセル）非表示 |
| .hidden-lg | 大きい（992ピクセル以上）非表示 |
印刷クラス
次の表に、印刷クラスを示します。これらを使用して、印刷するコンテンツを切り替えます。
| クラス | 印刷 |
|---|---|
| .visible-print | はい目に見える |
| .hidden-print | 印刷しないようにブラウザにのみ表示されます。 |
例
次の例は、上記のヘルパークラスの使用法を示しています。ブラウザのサイズを変更するか、さまざまなデバイスにサンプルをロードして、レスポンシブユーティリティクラスをテストします。
<div class = "container" style = "padding: 40px;">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-xs">Extra small</span>
<span class = "visible-xs">✔ Visible on x-small</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-sm">Small</span>
<span class = "visible-sm">✔ Visible on small</span>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-md">Medium</span>
<span class = "visible-md">✔ Visible on medium</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-lg">Large</span>
<span class = "visible-lg">✔ Visible on large</span>
</div>
</div>
</div>Checkmarks 要素が現在のビューポートに表示されていることを示します。
この章では、グリフィコン、その使用法、およびいくつかの例について説明します。Bootstrapは、フォント形式で200個のグリフをバンドルします。グリフィコンとは何かを理解しましょう。
グリフィコンとは何ですか？
グリフィコンは、Webプロジェクトで使用できるアイコンフォントです。Glyphicons Halflingsは無料ではなく、ライセンスが必要ですが、作成者はBootstrapプロジェクトで無料で利用できるようにしています。
「ありがとうございます。可能な限り、GLYPHICONSへのオプションのリンクを含めることをお勧めします」。—ブートストラップドキュメント
グリフィコンはどこにありますか？
Bootstrap 3.xバージョンをダウンロードし、環境設定の章からそのディレクトリ構造を理解したので、グリフィコンはfontsフォルダ内にあります。これには次のファイルが含まれています-
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
関連するCSSルールは内に存在するbootstrap.cssとブートストラップ・min.cssのCSSフォルダ内のファイルdistのフォルダ。このリンクGLYPHICONSで利用可能なグリフィコンを見ることができます。
使用法
アイコンを使用するには、コード内のほぼどこでも次のコードを使用するだけです。適切なパディングのために、アイコンとテキストの間にスペースを残してください。
<span class = "glyphicon glyphicon-search"></span>次の例はこれを示しています-
<p>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type = "button" class = "btn btn-default btn-lg">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type ="button" class = "btn btn-default btn-xs">
<span class = "glyphicon glyphicon-user"></span>
User
</button>この章では、Bootstrapドロップダウンメニューについて説明します。ドロップダウンメニューは、リンクをリスト形式で表示するための切り替え可能なコンテキストメニューです。これは、ドロップダウンJavaScriptプラグインを使用してインタラクティブにすることができます。
ドロップダウンを使用するには、クラス内でドロップダウンメニューをラップするだけです .dropdown次の例は、基本的なドロップダウンメニューを示しています-
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>オプション
配置
クラスを追加して、ドロップダウンメニューを右に揃えます .pull-right に .dropdown-menu。次の例はこれを示しています-
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>ヘッダー
クラスを使用して、任意のドロップダウンメニューのアクションのセクションにラベルを付けるためのヘッダーを追加できます dropdown-header。次の例はこれを示しています-
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。これは、位置合わせボタンなどのアイテムを一緒に配置する場合に便利です。Bootstrap Button Pluginを使用して、オプションのJavaScriptラジオとチェックボックススタイルの動作を追加できます。
次の表は、Bootstrapがボタングループを使用するために提供する重要なクラスをまとめたものです。
| クラス | 説明 | コードサンプル |
|---|---|---|
| .btn-group | このクラスは、基本的なボタングループに使用されます。一連のボタンをクラスでラップします.btn に .btn-group。 | |
| .btn-ツールバー | これは、より複雑なコンポーネントの<div class = "btn-group">のセットを<divclass = "btn-toolbar">に結合するのに役立ちます。 | |
| .btn-group-lg、.btn-group-sm、.btn-group-xs | これらのクラスは、各ボタンのサイズを変更する代わりに、ボタングループに適用できます。 | |
| .btn-group-vertical | このクラスは、ボタンのセットを水平方向ではなく垂直方向に積み重ねて表示します。 | |
基本ボタングループ
次の例は、クラスの使用法を示しています .btn-group 上記の表で説明されています-
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>ボタンツールバー
次の例は、クラスの使用法を示しています .btn-toolbar 上記の表で説明されています-
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
</div>ボタンのサイズ
次の例は、クラスの使用法を示しています .btn-group-* 上記の表で説明されています-
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>ネスティング
ボタングループを別のボタングループ内にネストできます。つまり、 .btn-group 別の中で .btn-group 。これは、ドロップダウンメニューを一連のボタンと混合する場合に実行されます。
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>垂直ボタングループ
次の例は、クラスの使用法を示しています .btn-group-vertical 上記の表で説明されています-
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>この章では、Bootstrapクラスを使用してボタンにドロップダウンメニューを追加する方法について説明します。ボタンにドロップダウンを追加するには、ボタンとドロップダウンメニューを.btn-group。<span class = "caret"> </ span>を使用して、ボタンがドロップダウンであることを示すインジケーターとして機能させることもできます。
次の例は、基本的な単一ボタンのドロップダウンを示しています-
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>分割ボタンのドロップダウン
分割ボタンのドロップダウンは、ドロップダウンボタンと同じ一般的なスタイルを使用しますが、ドロップダウンとともにプライマリアクションを追加します。分割ボタンの左側には主要なアクションがあり、右側にはドロップダウンを表示するトグルがあります。
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Default</button>
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>ボタンのドロップダウンサイズ
ドロップダウンは任意のボタンサイズで使用できます- .btn-large, .btn-sm, または .btn-xs。
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
Success
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>ドロップアップバリエーション
メニューは、下ではなく上にドロップするように作成することもできます。これを実現するには、単に追加します.dropup 親に .btn-group コンテナ。
<div class = "row" style = "margin-left:50px; margin-top:200px">
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
</div>この章では、Bootstrapがサポートするもう1つの機能である入力グループについて説明します。入力グループは拡張フォームコントロールです。入力グループを使用すると、テキストまたはボタンをテキストベースの入力に簡単に追加および追加できます。
追加および追加されたコンテンツを入力フィールドに追加することにより、ユーザーの入力に共通の要素を追加できます。たとえば、ドル記号、Twitterユーザー名の@、またはアプリケーションインターフェイスに共通する可能性のあるその他のものを追加できます。
要素をに追加または追加するには .form-control−
クラスで<div>にラップします .input-group
次のステップとして、同じ<div>内で、クラスを使用して<span>内に追加のコンテンツを配置します .input-group-addon。
次に、この<span>を<input>要素の前または後に配置します。
ブラウザー間の互換性のために、ここでは<select>要素を使用しないでください。WebKitブラウザーでは完全にスタイル設定できないためです。また、入力グループクラスをフォームグループに直接適用しないでください。入力グループは、分離されたコンポーネントです。
基本入力グループ
次の例は、基本的な入力グループを示しています-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>入力グループのサイズ設定
次のような相対フォームサイズ設定クラスを追加することで、入力グループのサイズを変更できます。 .input-group-lg, input-group-sm, input-group-xs に .input-group自体。中のコンテンツは自動的にサイズ変更されます。
次の例はこれを示しています-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>チェックボックスとラジオアドオン
次の例に示すように、テキストの代わりにラジオボタンとチェックボックスを事前に追加または追加できます。
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>ボタンアドオン
入力グループにボタンを事前に追加または追加することもできます。の代わりに.input-group-addon クラス、クラスを使用する必要があります .input-group-btnボタンをラップします。これは、オーバーライドできないデフォルトのブラウザスタイルのために必要です。次の例はこれを示しています-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>ドロップダウン付きのボタン
入力グループにドロップダウンメニューを含むボタンを追加するには、ボタンとドロップダウンメニューをでラップするだけです。 .input-group-btn 次の例に示すようなクラス-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>セグメント化されたボタン
入力グループのボタンドロップダウンをセグメント化するには、ドロップダウンボタンと同じ一般的なスタイルを使用しますが、次の例に示すように、ドロップダウンとともにプライマリアクションを追加します。
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Bootstrapは、ナビゲーション要素のスタイルを設定するためのいくつかの異なるオプションを提供します。それらはすべて同じマークアップと基本クラスを共有し、.nav。Bootstrapは、マークアップと状態を共有するためのヘルパークラスも提供します。修飾子クラスを交換して、各スタイルを切り替えます。
表形式のナビゲーションまたはタブ
タブ付きナビゲーションメニューを作成するには-
基本クラスがの基本的な順序なしリストから始めます。 .nav
クラスを追加 .nav-tabs。
次の例はこれを示しています-
<p>Tabs Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>ピルナビゲーション
基本的な丸薬
タブをピルに変えるには、上記と同じ手順に従い、クラスを使用します .nav-pills の代わりに .nav-tabs。
次の例はこれを示しています-
<p>Pills Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>垂直ピル
クラスを使用してピルを垂直に積み重ねることができます .nav-stacked クラスと一緒に- .nav, .nav-pills。
次の例はこれを示しています-
<p>Vertical Pills Example</p>
<ul class = "nav nav-pills nav-stacked">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>正当化されたナビゲーション
クラスを使用して、768pxより広い画面で、親と同じ幅のタブまたはピルを作成できます。 .nav-justified に加えて .nav, .nav-tabs または .nav, .nav-pillsそれぞれ。小さい画面では、ナビゲーションリンクがスタックされます。
次の例はこれを示しています-
<p>Justified Nav Elements Example</p>
<ul class = "nav nav-pills nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<br>
<ul class = "nav nav-tabs nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>無効なリンク
それぞれについて .nav クラス、追加した場合 .disabled クラス、それはまた無効にする灰色のリンクを作成します :hover 次の例に示すような状態-
<p>Disabled Link Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>このクラスは、<a>の外観のみを変更し、機能は変更しません。ここでリンクを無効にするには、カスタムJavaScriptを使用します。
ドロップダウン
ナビゲーションメニューは、ドロップダウンメニューと同様の構文を共有します。デフォルトでは、アンカーがいくつかのデータ属性と連携して機能し、順序付けされていないリストをトリガーするリストアイテムがあります。.dropdown-menu クラス。
ドロップダウンのあるタブ
タブにドロップダウンを追加するには-
基本クラスがの基本的な順序なしリストから始めます。 .nav
クラスを追加する .nav-tabs。
次に、順序付けされていないリストを追加します。 .dropdown-menu クラス。
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>ドロップダウン付きピル
ピルで同じことをするために、単に交換してください .nav-tabs とのクラス .nav-pills 次の例に示すように。
<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java <span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>ナビゲーションバーは、Bootstrapサイトの顕著な機能の1つです。Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーとして機能するレスポンシブな「メタ」コンポーネントです。ナビゲーションバーはモバイルビューで折りたたまれ、使用可能なビューポートの幅が増えると水平になります。中核となるナビゲーションバーには、サイト名と基本的なナビゲーションのスタイルが含まれています。
デフォルトのナビゲーションバー
デフォルトのナビゲーションバーを作成するには−
クラスを追加する .navbar, .navbar-default <nav>タグに。
追加 role = "navigation" 上記の要素に、アクセシビリティを支援します。
ヘッダークラスを追加する .navbar-header<div>要素に。クラスに<a>要素を含めるnavbar-brand。これにより、テキストのサイズが少し大きくなります。
ナビゲーションバーにリンクを追加するには、次のクラスの順序なしリストを追加するだけです。 .nav, .navbar-nav。
次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>レスポンシブナビゲーションバー
レスポンシブ機能をナビゲーションバーに追加するには、折りたたむコンテンツをクラスで<div>にラップする必要があります .collapse, .navbar-collapse。崩壊する性質は、次のクラスを持つボタンによってトリップされます.navbar-toggle次に、2つのデータ要素を備えています。最初、data-toggle、はJavaScriptにボタンの処理方法を指示するために使用され、2番目は data-target、切り替える要素を示します。次に
次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbarのフォーム
チャプターブートストラップフォームのデフォルトのクラスベースフォーム、ナビゲーションバーにあるフォームを使用する代わりに、.navbar-formクラス。これにより、狭いビューポートでのフォームの適切な垂直方向の配置と折りたたまれた動作が保証されます。配置オプション（コンポーネントの配置セクションで説明）を使用して、ナビゲーションバーコンテンツ内のどこに配置するかを決定します。
次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>ナビゲーションバーのボタン
クラスを使用してボタンを追加できます .navbar-btn <form>に存在しない<button>要素に、ナビゲーションバーの垂直方向の中央に配置します。 .navbar-btn <a>および<input>要素で使用できます。
使ってはいけません .navbar-btnまた、内の<a>要素の 標準ボタンクラスも .navbar-nav。
次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Navbarのテキスト
要素内のテキストの文字列をラップするには、クラスを使用します .navbar-text。これは通常、適切な先頭と色のために<p>タグとともに使用されます。次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>ナビゲーション以外のリンク
通常のナビゲーションバーナビゲーションコンポーネント内にない標準リンクを使用する場合は、クラスを使用します navbar-link 次の例に示すように、デフォルトおよび逆ナビゲーションバーオプションに適切な色を追加するには-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>コンポーネントの配置
ユーティリティクラスを使用して、ナビゲーションリンク、フォーム、ボタン、テキストなどのコンポーネントをナビゲーションバーの左または右に揃えることができます。.navbar-left または .navbar-right。どちらのクラスも、指定された方向にCSSフロートを追加します。次の例はこれを示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>トップに修正
Bootstrapナビゲーションバーは、その配置を動的にすることができます。デフォルトでは、HTMLでの配置に基づいて配置されるブロックレベルの要素です。いくつかのヘルパークラスを使用して、ページの上部または下部に配置することも、ページとともに静的にスクロールさせることもできます。
ナビゲーションバーを上部に固定する場合は、クラスを追加します .navbar-fixed-top に .navbar class。次の例はこれを示しています-
ナビゲーションバーがページの本文の他のコンテンツの上に表示されないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>下部に固定
ナビゲーションバーをページの下部に固定する場合は、クラスを追加します .navbar-fixed-bottom に .navbar class。次の例はこれを示しています-
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>スタティックトップ
ページとともにスクロールするナビゲーションバーを作成するには、 .navbar-static-topクラス。このクラスでは、<body>にパディングを追加する必要はありません。
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>反転ナビゲーションバー
背景が黒でテキストが白の反転ナビゲーションバーを作成するには、 .navbar-inverse クラスへ .navbar 次の例に示すようなクラス-
ナビゲーションバーがページの本文の他のコンテンツの上に表示されないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>ブレッドクラムは、サイトの階層ベースの情報を表示するための優れた方法です。ブログの場合、ブレッドクラムは公開日、カテゴリ、またはタグを表示できます。これらは、ナビゲーション階層内の現在のページの場所を示します。
Bootstrapのブレッドクラムは、クラスが次の順序付けされていないリストです。 .breadcrumb。セパレータは、CSS（bootstrap.min.css）によって次のクラスを介して自動的に追加されます-
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}次の例は、ブレッドクラムを示しています-
<ol class = "breadcrumb">
<li><a href = "#">Home</a></li>
<li><a href = "#">2013</a></li>
<li class = "active">November</li>
</ol>この章では、Bootstrapがサポートするページネーション機能について説明します。ページネーション、順序付けられていないリストは、他の多くのインターフェイス要素と同様にBootstrapによって処理されます。
ページネーション
次の表に、Bootstrapがページネーションを処理するために提供するクラスを示します。
| クラス | 説明 | サンプルコード |
|---|---|---|
| .pagination | このクラスを追加して、ページのページネーションを取得します。 | |
| .disabled、.active | を使用してリンクをカスタマイズできます .disabled クリックできないリンクの場合 .active 現在のページを示します。 | |
| .pagination-lg、.pagination-sm | これらのクラスを使用して、さまざまなサイズのアイテムを取得します。 | |
デフォルトのページネーション
次の例は、クラスの使用法を示しています .pagination 上記の表で説明されています-
<ul class = "pagination">
<li><a href = "#">«</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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>州
次の例は、クラスの使用法を示しています .disabled, .active 上記の表で説明されています-
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>サイジング
次の例は、サイズ設定のためのクラスの使用を示しています。 .pagination-* 上記の表で説明されています-
<ul class = "pagination pagination-lg">
<li><a href = "#">«</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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
<li><a href = "#">«</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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
<li><a href = "#">«</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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>ページャ
テキストを超える単純なページ付けリンクを作成する必要がある場合、ページャーは非常にうまく機能します。ページネーションリンクと同様に、ポケットベルは順序付けられていないリストです。デフォルトでは、リンクは中央に配置されます。次の表に、Bootstrapがページャーに提供するクラスを示します。
| クラス | 説明 | サンプルコード |
|---|---|---|
| 。ページャ | このクラスを追加して、ポケットベルのリンクを取得します。 | |
| .previous、.next | クラスを使用する .previous 左揃えに .next リンクを右揃えにします。 | |
| 。無効 | このクラスを追加して、落ち着いた外観にします。 | |
デフォルトのポケットベル
次の例は、クラスの使用法を示しています .pager 上記の表で説明されています-
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>整列されたリンク
次の例は、整列のためのクラスの使用を示しています。 .previous, .next 上記の表で説明されています-
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>州
次の例は、クラスの使用法を示しています .disabled 上記の表で説明されています-
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>この章では、ブートストラップラベルについて説明します。ラベルは、ページのカウント、ヒント、またはその他のマークアップを提供するのに最適です。クラスを使用する.label 次の例に示すようにラベルを表示するには−
<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>次のような修飾子クラスを使用して、ラベルの外観を変更できます。 label-default, label-primary, label-success, label-info, label-warning, label-danger 次の例に示すように-
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>この章では、Bootstrapバッジについて説明します。バッジはラベルに似ています。主な違いは、角がより丸みを帯びていることです。
バッジは主に、新しいアイテムや未読のアイテムを強調するために使用されます。バッジを使用するには、追加するだけです<span class = "badge"> リンク、ブートストラップナビゲーションなどへ。
次の例はこれを示しています-
<a href = "#">Mailbox <span class = "badge">50</span></a>新規または未読のアイテムがない場合、バッジはCSSを介して単純に折りたたまれます :empty 内にコンテンツが存在しない場合は、セレクター。
アクティブなナビゲーション状態
バッジをピルとリストナビゲーションのアクティブな状態に配置できます。あなたは置くことによってこれを達成することができます<span class = "badge"> 次の例に示すように、アクティブリンクへ-
<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
<li class = "active">
<a href = "#">
<span class = "badge pull-right">42</span>
Home
</a>
</li>
<li><a href = "#">Profile</a></li>
<li>
<a href = "#">
<span class = "badge pull-right">3</span>
Messages
</a>
</li>
</ul>この章では、Bootstrapがサポートするもう1つの機能であるJumbotronについて説明します。名前が示すように、このコンポーネントはオプションで見出しのサイズを大きくし、ランディングページのコンテンツに多くのマージンを追加できます。ジャンボトロンを使用するには−
次のクラスでコンテナ<div>を作成します .jumbotron。
<h1>を大きくすることに加えて、フォントの太さを200pxに減らします。
次の例はこれを示しています-
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>全幅のジャンボトロンを取得するには、角が丸くない場合は、 .jumbotron すべての外のクラス .container クラスを追加し、代わりに .container 次の例に示すように、内で-
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>ページヘッダーは、ページの見出しの周りに適切な間隔を追加するためのちょっとした機能です。これは、複数の投稿タイトルがあり、それぞれに区別を付ける方法が必要なWebページで特に役立ちます。ページヘッダーを使用するには、見出しを<div>でラップします。.page-header −
<div class = "page-header">
<h1>
Example page header
<small>Subtext for header</small>
</h1>
</div>
<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>この章では、Bootstrapサムネイルについて説明します。多くのサイトでは、画像、ビデオ、テキストなどをグリッドにレイアウトする方法が必要です。Bootstrapには、サムネイルを使用してこれを行う簡単な方法があります。Bootstrapを使用してサムネイルを作成するには-
次のクラスの<a>タグを追加します .thumbnail 画像の周り。
これにより、4ピクセルのパディングと灰色の境界線が追加されます。
ホバーすると、アニメーションのグローが画像の輪郭を描きます。
次の例は、デフォルトのサムネイルを示しています-
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>カスタムコンテンツの追加
基本的なサムネイルができたので、見出し、段落、ボタンなど、あらゆる種類のHTMLコンテンツをサムネイルに追加できます。以下の手順に従ってください-
次のクラスを持つ<a>タグを変更します .thumbnail <div>に。
その<div>内に、必要なものを追加できます。これは<div>であるため、サイズ設定にデフォルトのスパンベースの命名規則を使用できます。
複数の画像をグループ化する場合は、それらを順序付けられていないリストに配置すると、各リストアイテムが左側に表示されます。
次の例はこれを示しています-
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role =" button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>この章では、アラートとBootstrapがアラートに提供するクラスについて説明します。アラートは、ユーザーへのメッセージのスタイルを設定する方法を提供します。これらは、一般的なユーザーアクションのコンテキストフィードバックメッセージを提供します。
オプションの閉じるアイコンを追加して警告することができます。インライン却下の場合は、AlertsjQueryプラグインを使用します。
ラッパー<div>を作成し、次のクラスを追加することで、基本的なアラートを追加できます。 .alert および4つのコンテキストクラスの1つ（例： .alert-success, .alert-info, .alert-warning, .alert-danger）。次の例はこれを示しています-
<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>解雇アラート
解雇アラートを作成するには-
ラッパー<div>を作成し、次のクラスを追加して、基本的なアラートを追加します。 .alert および4つのコンテキストクラスの1つ（例： .alert-success, .alert-info, .alert-warning, .alert-danger）
オプションを追加する .alert-dismissable 上記の<div>クラスに。
閉じるボタンを追加します。
次の例はこれを示しています-
<div class = "alert alert-success alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Error ! Change few things.
</div>必ず<button>要素をdata-dismiss = "alert" data属性とともに使用してください 。
アラート内のリンク
アラートでリンクを取得するには-
ラッパー<div>を作成し、次のクラスを追加して、基本的なアラートを追加します。 .alert および4つのコンテキストクラスの1つ（例： .alert-success, .alert-info, .alert-warning, .alert-danger）
使用 .alert-link アラート内で一致する色付きのリンクをすばやく提供するユーティリティクラス。
<div class = "alert alert-success">
<a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
<a href = "#" class = "alert-link">Info! take this info.</a>
</div>
<div class = "alert alert-warning">
<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
<a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>この章では、Bootstrapプログレスバーについて説明します。プログレスバーの目的は、アセットが読み込まれている、進行中であること、またはページ上の要素に関してアクションが発生していることを示すことです。
プログレスバーは、CSS3トランジションとアニメーションを使用して、いくつかの効果を実現します。これらの機能は、Internet Explorer9以前のバージョンのFirefoxではサポートされていません。Opera12はアニメーションをサポートしていません。
デフォルトのプログレスバー
基本的なプログレスバーを作成するには-
次のクラスの<div>を追加します .progress。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";と言います。プログレスバーが60％であったことを示します。
以下の例を見てみましょう-
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>代替プログレスバー
さまざまなスタイルのプログレスバーを作成するには-
次のクラスの<div>を追加します .progress。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar とクラス progress-bar-* ここで*は success, info, warning, danger。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";と言います。プログレスバーが60％であったことを示します。
以下の例を見てみましょう-
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>ストライププログレスバー
ストライプのプログレスバーを作成するには−
次のクラスの<div>を追加します .progress そして .progress-striped。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar とクラス progress-bar-* ここで*は success, info, warning, danger。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";と言います。プログレスバーが60％であったことを示します。
以下の例を見てみましょう-
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>アニメーションプログレスバー
アニメーションのプログレスバーを作成するには-
次のクラスの<div>を追加します .progress そして .progress-striped。クラスも追加.active に .progress-striped。
次に、上記の<div>内に、クラスが次の空の<div>を追加します。 .progress-bar。
幅をパーセンテージで表したスタイル属性を追加します。たとえば、style = "60％";と言います。プログレスバーが60％であったことを示します。
これにより、ストライプが右から左にアニメーション化されます。
以下の例を見てみましょう-
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>スタックプログレスバー
複数のプログレスバーを積み重ねることもできます。複数のプログレスバーを同じ場所に配置します.progress 次の例に示すように、それらをスタックします-
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>この章では、メディアオブジェクトについて説明します。これらは、テキストコンテンツと一緒に左揃えまたは右揃えの画像を特徴とする、さまざまなタイプのコンポーネント（ブログのコメント、ツイートなど）を構築するための抽象的なオブジェクトスタイルです。メディアオブジェクトの目標は、これらの情報ブロックを開発するためのコードを大幅に短くすることです。
メディアオブジェクトの目標（軽いマークアップ、簡単な拡張性）は、いくつかの単純なマークアップにクラスを適用することによって達成されます。メディアオブジェクトには2つの形式があります-
.media −このクラスを使用すると、メディアオブジェクト（画像、ビデオ、およびオーディオ）をコンテンツブロックの左側または右側にフロートさせることができます。
.media-list−アイテムが順序付けられていないリストの一部となるリストを準備する場合は、クラスを使用します。コメントスレッドや記事リストに役立ちます。
以下のデフォルトのメディアオブジェクトの例を見てみましょう-
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>メディアリストの例を見てみましょう-
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>リストグループコンポーネントの目的は、複雑でカスタマイズされたコンテンツをリストにレンダリングすることです。基本的なリストグループを取得するには-
クラスを追加する .list-group 要素<ul>に。
クラスを追加 .list-group-item <li>へ。
次の例はこれを示しています-
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>リストグループへのバッジの追加
バッジコンポーネントは任意のリストグループアイテムに追加でき、自動的に右側に配置されます。追加するだけです<span class = "badge"><li>要素内。次の例はこれを示しています-
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>リストグループアイテムのリンク
リストアイテムの代わりにアンカータグを使用することで、リストグループをリンクできます。<ul>要素の代わりに<div>を使用する必要があります。次の例はこれを示しています-
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>リストグループにカスタムコンテンツを追加する
上記のリンクリストグループに任意のHTMLコンテンツを追加できます。次の例はこれを示しています-
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>この章では、ブートストラップパネルについて説明します。パネルコンポーネントは、DOMコンポーネントをボックスに入れたい場合に使用されます。基本的なパネルを取得するには、クラスを追加するだけです.panel<div>要素に。クラスも追加.panel-default 次の例に示すように、この要素に-
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>見出し付きパネル
パネル見出しを追加する方法は2つあります-
使用する .panel-heading パネルに見出しコンテナを簡単に追加するクラス。
<h1>-<h6>を .panel-title 事前にスタイル設定された見出しを追加するクラス。
次の例は、両方の方法を示しています-
<div class = "panel panel-default">
<div class = "panel-heading">
Panel heading without title
</div>
<div class = "panel-body">
Panel content
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>フッター付きパネル
クラスを含む<div>でボタンまたはセカンダリテキストをラップすることにより、パネルにフッターを追加できます .panel-footer。次の例はこれを示しています。
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">Panel footer</div>
</div>パネルフッターは、フォアグラウンドに配置することを意図していないため、コンテキストバリエーションを使用する場合は色と境界線を継承しません。
パネルコンテキストの代替
次のようなコンテキスト状態クラスを使用します。 panel-primary, panel-success, panel-info, panel-warning, panel-danger、特定のコンテキストに対してパネルをより意味のあるものにするため。
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>テーブル付きパネル
パネル内で境界のないテーブルを取得するには、クラスを使用します .tableパネル内。を含む<div>があるとします.panel-body、分離のためにテーブルの上部に境界線を追加します。を含む<div>がない場合.panel-body、その後、コンポーネントは中断することなくパネルヘッダーからテーブルに移動します。
次の例はこれを示しています-
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>リストグループのあるパネル
任意のパネルにリストグループを含めることができます。クラスを追加してパネルを作成する.panel<div>要素に。クラスも追加.panel-defaultこの要素に。このパネル内にリストグループを含めます。リストグループの作成については、リストグループの章から学ぶことができます。
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>ウェルは<div>内のコンテナであり、コンテンツが沈んだり、ページにインセット効果が表示されたりします。ウェルを作成するには、ウェルに表示するコンテンツを、のクラスを含む<div>でラップするだけです。.well。次の例は、デフォルトのウェルを示しています-
<div class = "well">Hi, am in well !!</div>サイジング
次のようなオプションのクラスを使用して、ウェルのサイズを変更できます。 well-lg または well-lg。これらのクラスは、.wellクラス。これらはパディングに影響を与え、クラスに応じてウェルを大きくしたり小さくしたりします。
<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>前の章で説明したコンポーネント Layout Componentsほんの始まりに過ぎません。Bootstrapには、機能を拡張し、サイトへのインタラクションを追加できる12個のjQueryプラグインがバンドルされています。BootstrapのJavaScriptプラグインを使い始めるために、高度なJavaScript開発者である必要はありません。Bootstrap Data APIを利用することで、ほとんどのプラグインを1行のコードを記述せずにトリガーできます。
ブートストラッププラグインは、2つの形式でサイトに含めることができます-
Individually−Bootstrapの個々の* .jsファイルを使用する。一部のプラグインとCSSコンポーネントは、他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。
または compiled (all at once)-使用bootstrap.jsまたは縮小さbootstrap.min.jsを。bootstrap.jsとbootstrap.min.jsの両方にすべてのプラグインが単一のファイルに含まれているため、両方を含めようとしないでください。
すべてのプラグインはjQueryに依存しています。したがって、プラグインファイルの前にjQueryを含める必要があります。bower.jsonをチェックして、サポートされているjQueryのバージョンを確認 してください。
データ属性
付属のDataAPIを使用して、すべてのBootstrapプラグインにアクセスできます。したがって、プラグイン機能を呼び出すためにJavaScriptを1行含める必要はありません。
状況によっては、DataAPIのこの機能をオフにすることが望ましい場合があります。Data APIをオフにする必要がある場合は、JavaScriptの次の行を追加することで属性のバインドを解除できます-
$(document).off('.data-api')特定の/単一のプラグインをオフにするには、プラグインの名前を名前空間として、次のようなdata-api名前空間と一緒に含めます。
$(document).off('.alert.data-api')プログラマティックAPI
Bootstrapの開発者は、JavaScriptAPIを介してすべてのプラグインを使用できるはずだと考えています。すべてのパブリックAPIは単一のチェーン可能なメソッドであり、たとえば、実行されたコレクションを返します。
$(".btn.danger").button("toggle").addClass("fat")以下に示すように、すべてのメソッドは、オプションのオプションオブジェクト、特定のメソッドを対象とする文字列、または何も（デフォルトの動作でプラグインを開始する）を受け入れます。
// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')各プラグインは、その生のコンストラクターを Constructorプロパティ：$。fn.popover.Constructor。特定のプラグインインスタンスを取得する場合は、要素から直接取得します-
$('[rel = popover]').data('popover').競合なし
ブートストラッププラグインは、他のUIフレームワークで使用できる場合があります。このような状況では、名前空間の衝突が発生することがあります。この呼びかけを克服するために.noConflict の値を元に戻したいプラグイン。
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButtonイベント
Bootstrapは、ほとんどのプラグインの固有のアクションにカスタムイベントを提供します。一般に、これらのイベントには2つの形式があります。
Infinitive form−これはイベントの開始時にトリガーされます。例：ショー。不定詞イベントはpreventDefault機能を提供します。これにより、アクションの実行を開始する前に停止することができます。
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})Past participle form−これはアクションの完了時にトリガーされます。例：
トランジションプラグインは、シンプルなトランジションエフェクトを提供します。
このプラグイン機能を個別に含めたい場合は、 transition.js他のJSファイルと一緒に一度。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
Transition.jsは、transitionEndイベントの基本的なヘルパーであり、CSS遷移エミュレーターでもあります。これは、CSSトランジションのサポートを確認し、ハングしたトランジションをキャッチするために他のプラグインによって使用されます。
ユースケース
移行プラグインのいくつかの例は次のとおりです。
モーダルでのスライドまたはフェード。例は、Bootstrap ModalPluginの章にあります。
タブをフェードアウトします。例は、Bootstrap TabPluginの章にあります。
アラートをフェードアウトします。例は、ブートストラップアラートの章にあります。
スライド式カルーセルペイン。例は、Bootstrap CarouselPluginの章にあります。
モーダルは、親ウィンドウの上に階層化された子ウィンドウです。通常、目的は、親ウィンドウを離れることなく何らかの対話を行うことができる別のソースからのコンテンツを表示することです。子ウィンドウは、情報やインタラクションなどを提供できます。
このプラグイン機能を個別に含めたい場合は、 modal.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
モーダルプラグインの非表示コンテンツを切り替えることができます-
Via data attributes −属性を設定する data-toggle = "modal" ボタンやリンクなどのコントローラー要素に、 data-target = "#identifier" または href = "#identifier" 特定のモーダル（id = "identifier"）をターゲットにして切り替えます。
Via JavaScript −この手法を使用すると、JavaScriptの1行でid = "identifier"のモーダルを呼び出すことができます。
$('#identifier').modal(options)例
静的モーダルウィンドウの例を次の例に示します-
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Add some text here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Details of the preceding code −
モーダルウィンドウを呼び出すには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しました。
上記のコードを見ると、<button>タグに次のことがわかります。 data-target = "#myModal"ページにロードするモーダルのターゲットです。このコードを使用すると、ページ上に複数のモーダルを作成し、それぞれに異なるトリガーを設定できます。明確にするために、複数のモーダルを同時にロードすることはありませんが、異なる時間にロードされるページに多くのモーダルを作成できます。
モーダルで注意すべき2つのクラスがあります-
最初は .modal、これは単に<div>のコンテンツをモーダルとして識別することです。
そして2番目は .fadeクラス。モーダルを切り替えると、コンテンツがフェードインおよびフェードアウトします。
aria-labelledby = "myModalLabel"、属性はモーダルタイトルを参照します。
属性 aria-hidden = "true" トリガーが来るまで（関連するボタンをクリックするなど）、モーダルウィンドウを非表示に保つために使用されます。
<div class = "modal-header">、modal-headerは、モーダルウィンドウのヘッダーのスタイルを定義するクラスです。
class = "close"は、モーダルウィンドウの[閉じる]ボタンのスタイルを設定するCSSクラスのクローズです。
data-dismiss = "modal"は、カスタムHTML5データ属性です。ここでは、モーダルウィンドウを閉じるために使用されます。
class = "modal-body"は、モーダルウィンドウの本体のスタイルを設定するためのBootstrapCSSのCSSクラスです。
class = "modal-footer"は、モーダルウィンドウのフッターのスタイルを設定するBootstrapCSSのCSSクラスです。
data-toggle = "modal"、HTML5カスタムデータ属性data-toggleは、モーダルウィンドウを開くために使用されます。
オプション
モーダルウィンドウのルックアンドフィールをカスタマイズするために、データ属性またはJavaScriptを介して渡すことができる特定のオプションがあります。次の表にオプションを示します-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| 背景 | ブール値または文字列 'static'デフォルト：true | データの背景 | ユーザーがモーダルの外側をクリックしたときにモーダルを閉じたくない場合は、背景に静的を指定します。 |
| キーボード | ブールデフォルト：true | データキーボード | エスケープキーが押されると、モーダルを閉じます。無効にするにはfalseに設定します。 |
| 公演 | ブールデフォルト：true | データショー | 初期化時にモーダルを表示します。 |
| リモート | パスデフォルト：false | データリモート | jQuery .loadメソッドを使用して、モーダルボディにコンテンツを挿入します。有効なURLを持つhrefが追加されると、そのコンテンツが読み込まれます。この例を以下に示します- |
メソッド
modal（）で使用できるいくつかの便利なメソッドを次に示します。
| 方法 | 説明 | 例 |
|---|---|---|
| Options − .modal（options） | コンテンツをモーダルとしてアクティブ化します。オプションのオプションオブジェクトを受け入れます。 | |
| Toggle − .modal（ 'toggle'） | モーダルを手動で切り替えます。 | |
| Show − .modal（ 'show'） | モーダルを手動で開きます。 | |
| Hide − .modal（ 'hide'） | モーダルを手動で非表示にします。 | |
例
次の例は、メソッドの使用法を示しています-
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>Escボタンをクリックするだけで、モーダルウィンドウが終了します。
イベント
次の表に、モーダルで機能するイベントを示します。これらのイベントは、関数にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| show.bs.modal | showメソッドが呼び出された後に発生します。 | |
| show.bs.modal | モーダルがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。 | |
| hide.bs.modal | インスタンスの非表示メソッドが呼び出されたときに発生します。 | |
| hidden.bs.modal | モーダルがユーザーから隠され終わったときに発生します。 | |
例
次の例は、イベントの使用法を示しています-
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Click on close button to check Event functionality.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
alert('Hey, I heard you like modals...');})
});
</script>上記の画面のように、[閉じる]ボタンをクリックすると、つまりイベントを非表示にすると、アラートメッセージが表示されます。
ドロップダウンプラグインを使用すると、ナビゲーションバー、タブ、ピル、ボタンなどのコンポーネントにドロップダウンメニューを追加できます。
このプラグイン機能を個別に含めたい場合は、 dropdown.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
ドロップダウンプラグインの非表示コンテンツを切り替えることができます-
Via data attributes −追加 data-toggle = "dropdown" 以下に示すように、リンクまたはボタンに移動してドロップダウンを切り替えます-
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>リンクをそのまま維持する必要がある場合（ブラウザがJavaScriptを有効にしていない場合に便利です）、 data-target 代わりに属性 href = "#"−
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Via JavaScript − JavaScriptを介してドロップダウントグルを呼び出すには、次のメソッドを使用します−
$('.dropdown-toggle').dropdown()例
Within Navbar
次の例は、ナビゲーションバー内のドロップダウンメニューの使用法を示しています-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Within Tabs
次の例は、タブ内のドロップダウンメニューの使用法を示しています-
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>オプション
オプションはありません。
メソッド
ドロップダウントグルには、ドロップダウンを表示または非表示にする簡単な方法があります。
$().dropdown('toggle')例
次の例は、ドロップダウンプラグインメソッドの使用法を示しています。
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div id = "myexample">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a id = "action-1" href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>スクロールスパイ（自動更新ナビゲーション）プラグインを使用すると、スクロール位置に基づいてページのセクションをターゲットにすることができます。基本的な実装では、スクロールしながら追加できます.active スクロール位置に基づいてナビゲーションバーにクラス分けします。
このプラグイン機能を個別に含めたい場合は、 scrollspy.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
トップバーのナビゲーションにスクロールスパイ動作を追加できます-
Via data attributes −追加 data-spy = "scroll"スパイしたい要素（通常は体）に。次に、属性を追加しますdata-target ブートストラップの親要素のIDまたはクラスを使用 .nav成分。これが機能するためには、スパイしているリンクのIDが一致する要素がページの本文に含まれている必要があります。
<body data-spy = "scroll" data-target = ".navbar-example">
...
<div class = "navbar-example">
<ul class = "nav nav-tabs">
...
</ul>
</div>
...
</body>Via JavaScript −スパイする要素を選択してから呼び出すことにより、データ属性を使用する代わりにJavaScriptでscrollspyを呼び出すことができます。 .scrollspy() 関数-
$('body').scrollspy({ target: '.navbar-example' })例
次の例は、データ属性を介したscrollspyプラグインの使用を示しています-
<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<h4 id = "ios">iOS</h4>
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
<h4 id = "svn">SVN</h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but now it
is developed as a project of the Apache Software Foundation, and as
such is part of a rich community of developers and users.</p>
<h4 id = "jmeter">jMeter</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for building
highly scalable and robust enterprise level applications to be deployed
on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>オプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。次の表にオプションを示します-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| オフセット | 番号デフォルト：10 | データオフセット | スクロールの位置を計算するときに上からオフセットするピクセル。 |
メソッド
.scrollspy('refresh') − JavaScriptメソッドを介してscrollspyを呼び出す場合は、 .refreshDOMを更新するメソッド。これは、DOMの要素が変更された場合、つまり、いくつかの要素を追加または削除した場合に役立ちます。以下は、このメソッドを使用するための構文です。
$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})例
次の例は、 .scrollspy('refresh') 方法−
<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<div class = "section">
<h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "section">
<h4 id = "svn">SVN<small></small></h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but
now it is developed as a project of the Apache Software Foundation,
and as such is part of a rich community of developers and users.</p>
</div>
<div class = "section">
<h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "section">
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications
to be deployed on J2EE compliant Application Server such as
JBOSS, Web Logic etc.</p>
</div>
<div class = "section">
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>
</div>
<script type = "text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>イベント
次の表に、scrollspyで機能するイベントを示します。このイベントは、関数にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| activate.bs.scrollspy | このイベントは、新しいアイテムがスクロールスパイによってアクティブ化されるたびに発生します。 | |
例
次の例は、 activate.bs.scrollspy イベント−
<html>
<head>
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
<script src = "bootstrap/scripts/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
// The event is fired when an item gets actived with the scrollspy
$("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
$("#spyevent").html("Current Item being viewed >> " + currentSection);
})
});
</script>
<style>
.scroll-box {
height: 250px;
position: relative;
overflow: auto;
font-size:2em;
}
</style>
</head>
<body>
<div class = "container">
<nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
<!-- Nav Bar -->
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#navbarCollapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorials Point</a>
</div>
<!-- Links and Sublinks -->
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#subject-1">Subject 1</a></li>
<li><a href = "#subject-2">Subject 2</a></li>
<li class = "dropdown"><a href = "#" class = "dropdown-toggle"
data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#subject-3-1">Subject 3.1</a></li>
<li><a href = "#subject-3-2">Subject 3.2</a></li>
<li><a href = "#subject-3-3">Subject 3.3</a></li>
</ul>
</li>
<li><a href = "#subject-4">Subject 4</a></li>
</ul>
</div>
</nav>
<div class = "scroll-box" data-spy = "scroll" data-offset = "0">
<div class = "subject">
<h3 id = "subject-1">Subject 1
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-2">Subject 2
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-3">Subject 3
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
</div>
<hr>
<div class = "subject">
<h4 id = "subject-3-1">Subject 3.1
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-2">Subject 3.2
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-3">Subject 3.3
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-4">Subject 4
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<h4 id = "spyevent" class = "text-info"></h4>
</div>
</body>
</html>タブは、「ブートストラップナビゲーション要素」の章で紹介されました。いくつかのデータ属性を組み合わせることで、タブ付きのインターフェイスを簡単に作成できます。このプラグインを使用すると、ドロップダウンメニューを使用しても、タブまたはピルのローカルコンテンツのペインを移動できます。
このプラグイン機能を個別に含めたい場合は、 tab.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
次の2つの方法でタブを有効にできます-
Via data attributes −追加する必要があります data-toggle = "tab" または data-toggle = "pill" アンカーに。
追加する nav そして nav-tabs タブへのクラス ulブートストラップタブのスタイルを適用し、nav そして nav-pillsクラスはピルスタイリングを適用します。
<ul class = "nav nav-tabs">
<li><a href = "#identifier" data-toggle = "tab">Home</a></li>
...
</ul>Via JavaScript −以下のようにJavscriptを使用してタブを有効にできます−
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})個々のタブをアクティブにするさまざまな方法の例を次に示します-
// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show')
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')フェード効果
タブのフェード効果を得るには、 .fade それぞれに .tab-pane。最初のタブペインにも.in 初期コンテンツを適切にフェードインする-
<div class = "tab-content">
<div class = "tab-pane fade in active" id = "home">...</div>
<div class = "tab-pane fade" id = "svn">...</div>
<div class = "tab-pane fade" id = "ios">...</div>
<div class = "tab-pane fade" id = "java">...</div>
</div>例
データ属性とフェード効果を使用したタブプラグインの例は、次の例に示すとおりです。
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed
by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
and Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the OS X
operating system used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>メソッド
.$().tab−このメソッドは、タブ要素とコンテンツコンテナをアクティブにします。タブには、data-target または href DOMのコンテナノードをターゲットにします。
<ul class = "nav nav-tabs" id = "myTab">
<li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
.....
</ul>
<div class = "tab-content">
<div class = "tab-pane active" id = "home">...</div>
.....
</div>
<script>
$(function () { $('#myTab a:last').tab('show')
})
</script>例
次の例は、タブプラグインメソッドの使用を示しています .tab。この例では、2番目のタブiOSがアクティブ化されています-
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
jmeter
</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">
ejb
</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS,
Web Logic etc.</p>
</div>
</div>
<script>
$(function () { $('#myTab li:eq(1) a').tab('show');
});
</script>イベント
次の表に、タブプラグインで機能するイベントを示します。このイベントは、関数にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| show.bs.tab | このイベントはタブ表示で発生しますが、新しいタブが表示される前です。使用するevent.target そして event.relatedTarget アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにします。 | |
| show.bs.tab | このイベントは、タブが表示された後、タブ表示で発生します。使用するevent.target そして event.relatedTarget アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにします。 | |
例
次の例は、タブプラグインイベントの使用法を示しています。この例では、現在および以前にアクセスしたタブを表示します-
<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>
<script>
$(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
});
});
</script>リンクを説明する必要がある場合は、ツールチップが役立ちます。プラグインは、触発されたjQuery.tipsyによって書かれたプラグインジェイソンフレーム。その後、ツールチップが更新され、画像なしで機能し、CSSアニメーションでアニメーション化し、ローカルタイトルストレージのデータ属性を使用できるようになりました。
このプラグイン機能を個別に含めたい場合は、 tooltip.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
ツールチッププラグインは、オンデマンドでコンテンツとマークアップを生成し、デフォルトでは、トリガー要素の後にツールチップを配置します。次の2つの方法でツールチップを追加できます-
Via data attributes −ツールチップを追加するには、 data-toggle = "tooltip"アンカータグに。アンカーのタイトルはツールチップのテキストになります。デフォルトでは、ツールチップはプラグインによってトップに設定されています。
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>Via JavaScript −JavaScriptを介してツールチップをトリガーします−
$('#identifier').tooltip(options)ツールチッププラグインだけではありません-ドロップダウンのようなcssプラグインや、前の章で説明した他のプラグイン。このプラグインを使用するには、jqueryを使用してプラグインをアクティブ化する必要があります（javascriptを読んでください）。ページ上のすべてのツールチップを有効にするには、このスクリプトを使用するだけです-
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
例
次の例は、データ属性を介したツールチッププラグインの使用法を示しています。
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>オプション
Bootstrap Data APIを介して追加したり、JavaScriptを介して呼び出すことができる特定のオプションがあります。次の表にオプションを示します-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| アニメーション | ブールデフォルト：true | データアニメーション | CSSフェードトランジションをツールチップに適用します。 |
| html | ブールデフォルト：false | data-html | HTMLをツールチップに挿入します。falseの場合、jQueryのtextメソッドを使用してコンテンツをDOMに挿入します。XSS攻撃が心配な場合は、テキストを使用してください。 |
| 配置 | string | functionデフォルト：top | データ配置 | ツールチップの配置方法を指定します（つまり、上|下|左|右|自動）。 場合はautoが指定され、それが動的ツールヒントを再配向します。たとえば、配置が「自動左」の場合、ツールチップは可能な場合は左に表示され、そうでない場合は右に表示されます。 |
| セレクタ | 文字列デフォルト：false | データセレクタ | セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。 |
| 題名 | 文字列| 関数デフォルト： " | データタイトル | title属性が存在しない場合、titleオプションがデフォルトのtitle値です。 |
| 引き金 | 文字列デフォルト： 'ホバーフォーカス' | データトリガー | ツールチップのトリガー方法を定義します。 click| hover | focus | manual。複数のトリガーを渡すことができます。それらをスペースで区切ります。 |
| コンテンツ | 文字列| 関数デフォルト： '' | データコンテンツ | data-content属性が存在しない場合のデフォルトのコンテンツ値 |
| ディレイ | 番号| オブジェクトデフォルト：0 | データ遅延 | ツールチップの表示と非表示の遅延（ミリ秒）—手動トリガータイプには適用されません。番号が指定されている場合、遅延は非表示/表示の両方に適用されます。オブジェクト構造は− |
| コンテナ | 文字列| falseデフォルト：false | データコンテナ | ツールチップを特定の要素に追加します。例：コンテナ： 'body' |
メソッド
以下は、ツールチップのいくつかの便利な方法です-
| 方法 | 説明 | 例 |
|---|---|---|
Options − .tooltip（options） |
ツールチップハンドラーを要素コレクションにアタッチします。 | |
Toggle − .tooltip（ 'toggle'） |
要素のツールチップを切り替えます。 | |
Show − .tooltip（ 'show'） |
要素のツールチップを表示します。 | |
Hide − .tooltip（ 'hide'） |
要素のツールチップを非表示にします。 | |
Destroy − .tooltip（ 'destroy'） |
要素のツールチップを非表示にして破棄します。 | |
例
次の例は、データ属性を介したツールチッププラグインの使用法を示しています。
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>イベント
次の表に、ツールチッププラグインで機能するイベントを示します。このイベントは、関数にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| show.bs.tooltip | このイベントは、showinstanceメソッドが呼び出されるとすぐに発生します。 | |
| show.bs.tooltip | このイベントは、ツールチップがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。 | |
| hide.bs.tooltip | このイベントは、hideinstanceメソッドが呼び出されるとすぐに発生します。 | |
| hidden.bs.tooltip | このイベントは、ツールチップがユーザーから非表示になっているときに発生します（CSS遷移が完了するのを待ちます）。 | |
例
次の例は、データ属性を介したツールチッププラグインの使用法を示しています。
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>ポップオーバーはツールチップに似ており、見出し付きの拡張ビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にカーソルを置くだけです。ポップオーバーのコンテンツは、Bootstrap DataAPIを使用して完全に入力できます。この方法にはツールチップが必要です。
このプラグイン機能を個別に含めたい場合は、 popover.jsまた、ツールチッププラグインの依存関係があり ます。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように、 bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
使用法
ポップオーバープラグインはオンデマンドでコンテンツとマークアップを生成し、デフォルトではトリガー要素の後にポップオーバーを配置します。次の2つの方法でポップオーバーを追加できます-
Via data attributes −ポップオーバーを追加するには、 data-toggle = "popover"アンカー/ボタンタグに。アンカーのタイトルは、ポップオーバーのテキストになります。デフォルトでは、ポップオーバーはプラグインによってトップに設定されています。
<a href = "#" data-toggle = "popover" title = "Example popover">
Hover over me
</a>Via JavaScript −次の構文を使用してJavaScript経由でポップオーバーを有効にします−
$('#identifier').popover(options)ポップオーバープラグインだけではありません-ドロップダウンのようなcssプラグインや前の章で説明した他のプラグイン。このプラグインを使用するには、jqueryを使用してプラグインをアクティブ化する必要があります（javascriptを読んでください）。ページ上のすべてのポップオーバーを有効にするには、このスクリプトを使用するだけです-
$(function () { $("[data-toggle = 'popover']").popover(); });
例
次の例は、データ属性を介したポップオーバープラグインの使用法を示しています。
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover on left">
Popover on left
</button>
<button type = "button" class = "btn btn-primary" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover on top">
Popover on top
</button>
<button type = "button" class = "btn btn-success" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover on bottom">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Some content in Popover on right">
Popover on right
</button>
</div>
<script>
$(function (){
$("[data-toggle = 'popover']").popover();
});
</script>オプション
Bootstrap Data APIを介して追加したり、JavaScriptを介して呼び出すことができる特定のオプションがあります。次の表にオプションを示します-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| アニメーション | ブールデフォルト-true | データアニメーション | CSSフェードトランジションをポップオーバーに適用します。 |
| html | ブールデフォルト-false | data-html | ポップオーバーにHTMLを挿入します。falseの場合、jQueryのtextメソッドを使用してコンテンツをDOMに挿入します。XSS攻撃が心配な場合は、テキストを使用してください。 |
| 配置 | 文字列|関数デフォルト-top | データ配置 | ポップオーバーの配置方法を指定します（つまり、上|下|左|右|自動）。場合はautoが指定され、それが動的にポップオーバーを再配向します。たとえば、配置が「自動左」の場合、ポップオーバーは可能な場合は左に表示され、そうでない場合は右に表示されます。 |
| セレクタ | 文字列デフォルト-false | データセレクタ | セレクターが提供されている場合、ポップオーバーオブジェクトは指定されたターゲットに委任されます。 |
| 題名 | 文字列| 関数デフォルト-" | データタイトル | title属性が存在しない場合、titleオプションがデフォルトのtitle値です。 |
| 引き金 | 文字列デフォルト-'ホバーフォーカス' | データトリガー | ポップオーバーがどのようにトリガーされるかを定義します- click| hover | focus | manual。複数のトリガーを渡すことができます。それらをスペースで区切ります。 |
| ディレイ | 番号| オブジェクトデフォルト− 0 | データ遅延 | ポップオーバーの表示と非表示の遅延（ミリ秒）—手動トリガータイプには適用されません。番号が指定されている場合、遅延は非表示/表示の両方に適用されます。オブジェクト構造は− |
| コンテナ | 文字列| falseデフォルト-false | データコンテナ | ポップオーバーを特定の要素に追加します。例：コンテナ： 'body' |
メソッド
以下はポップオーバーのためのいくつかの便利な方法です-
| 方法 | 説明 | 例 |
|---|---|---|
Options − .popover（options） |
ポップオーバーハンドラーを要素コレクションにアタッチします。 | |
Toggle − .popover（ 'toggle'） |
要素のポップオーバーを切り替えます。 | |
Show − .popover（ 'show'） |
要素のポップオーバーを明らかにします。 | |
Hide − .popover（ 'hide'） |
要素のポップオーバーを非表示にします。 | |
Destroy − .popover（ 'destroy'） |
要素のポップオーバーを非表示にして破棄します。 | |
例
次の例は、ポップオーバープラグインメソッドを示しています-
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default popover-show"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover with show method">
Popover on left
</button>
<button type = "button" class = "btn btn-primary popover-hide"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-hide method">
Popover on top
</button>
<button type = "button" class = "btn btn-success popover-destroy"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover-destroy method">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning popover-toggle"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-toggle method">
Popover on right
</button>
<br><br><br><br><br><br>
<p class = "popover-options">
<a href = "#" type = "button" class = "btn btn-warning"
title = "<h2>Title</h2>" data-container = "body"
data-toggle = "popover" data-content = "
<h4>Some content in Popover-options method</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>イベント
次の表に、ポップオーバープラグインで機能するイベントを示します。このイベントは、関数にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| show.bs.popover | このイベントは、showinstanceメソッドが呼び出されるとすぐに発生します。 | |
| show.bs.popover | このイベントは、ポップオーバーがユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。 | |
| hide.bs.popover | このイベントは、hideinstanceメソッドが呼び出されるとすぐに発生します。 | |
| hidden.bs.popover | このイベントは、ポップオーバーがユーザーから隠され終わったときに発生します（CSS遷移が完了するのを待ちます）。 | |
例
次の例は、Popoverプラグインイベントを示しています-
<div clas = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-primary popover-show"
title = "Popover title" data-container = "body" data-toggle = "popover"
data-content = "Some content in Popover with show method">
Popover on left
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("Alert message on show");
})});
</script>アラートメッセージは主に、警告メッセージや確認メッセージなどの情報をエンドユーザーに表示するために使用されます。アラートメッセージプラグインを使用すると、すべてのアラートメッセージに却下機能を追加できます。
このプラグイン機能を個別に含めたい場合は、 alert.js。そうでなければ、この章で述べたように ブートストラッププラグインの概要、あなたは含めることができます bootstrap.jsまたは縮小さ bootstrap.min.jsを。
使用法
次の2つの方法でアラートの却下を有効にできます-
Via data attributes − Data APIを介して却下するには、追加するだけです data-dismiss = "alert" 閉じるボタンに移動すると、アラートを閉じる機能が自動的に提供されます。
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>Via JavaScript − JavaScriptを介して閉じるには、次の構文を使用します−
$(".alert").alert()例
次の例は、データ属性を介したアラートプラグインの使用法を示しています。
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>オプション
ここにはオプションはありません。
メソッド
以下はアラートプラグインのいくつかの便利な方法です-
| 方法 | 説明 | 例 |
|---|---|---|
| .alert（） | このメソッドは、すべてのアラートをクローズ機能でラップします。 | |
Close Method .alert（ 'close'） |
すべてのアラートを閉じることができるようにするには、このメソッドを追加します。 | |
閉じたときにアラートをアニメーション化できるようにするには、アラートに .fade そして .in クラスはすでにそれらに適用されています。
例
次の例は、 .alert() 方法−
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){ $("#myAlert").alert();
});
});
</script>次の例は、 .alert('close') 方法−
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){ $(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>を使用してこのコードを試してください Try it編集者。クローズ機能がすべてのアラートメッセージに適用されていることがわかります。つまり、アラートメッセージを閉じると、残りのアラートメッセージもクローズされます。
イベント
次の表に、アラートプラグインで機能するイベントを示します。このイベントは、アラート機能にフックするために使用できます。
| イベント | 説明 | 例 |
|---|---|---|
| close.bs.alert | このイベントは、インスタンスを閉じるメソッドが呼び出されるとすぐに発生します。 | |
| close.bs.alert | このイベントは、アラートが閉じられたときに発生します（CSS遷移が完了するのを待ちます）。 | |
例
次の例は、アラートプラグインイベントを示しています-
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>ボタンについては、「ブートストラップボタン」の章で説明されています。このプラグインを使用すると、コントロールボタンの状態などのインタラクションを追加したり、ツールバーなどのコンポーネント用のボタンのグループを作成したりできます。
このプラグイン機能を個別に含めたい場合は、 button.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように 、bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。
読み込み状態
ボタンに読み込み状態を追加するには、単に data-loading-text = "Loading..." 次の例に示すように、ボタン要素の属性として-
<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>ボタンをクリックすると、出力は次の画像のようになります-
シングルトグル
1つのボタンでトグルをアクティブにするには（つまり、ボタンの通常の状態をプッシュ状態に、またはその逆に変更するには）、 data-toggle = "button" 次の例に示すように、ボタン要素の属性として-
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>チェックボックス
データ属性を追加するだけで、チェックボックスのグループを作成し、それに切り替えを追加できます data-toggle = "buttons" に btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 3
</label>
</div>無線
同様に、データ属性を追加するだけで、無線入力のグループを作成し、それにトグルを追加できます。 data-toggle = "buttons" に btn-group。
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "radio" name =" options" id = "option1"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3"> Option 3
</label>
</div>使用法
ボタンプラグインを有効にできます via JavaScript 以下に示すように-
$('.btn').button()オプション
オプションはありません。
メソッド
以下に、ボタンプラグインの便利な方法のいくつかを示します-
| 方法 | 説明 | 例 |
|---|---|---|
button（ 'toggle'） |
プッシュ状態を切り替えます。ボタンがアクティブになっているように見せます。を使用してボタンの自動切り替えを有効にすることもできますdata-toggle 属性。 |
|
.button（ 'loading'） |
ロードすると、ボタンが無効になり、テキストがからオプションに変更されます。 data-loading-text ボタン要素の属性 |
|
.button（ 'reset'） |
ボタンの状態をリセットし、元のコンテンツをテキストに戻します。このメソッドは、ボタンをプライマリ状態に戻す必要がある場合に役立ちます |
|
.button（string） |
このメソッドの文字列は、ユーザーが宣言した文字列を参照しています。ボタンの状態をリセットして新しいコンテンツを取り込むには、この方法を使用します。 |
|
例
次の例は、上記の方法の使用法を示しています。
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(function () { $("#myButtons1 .btn").click(function(){
$(this).button('toggle'); }); }); $(function() {
$("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() { $("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
});
});
});
$(function() { $("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
});
});
});
</script>折りたたみプラグインを使用すると、ページの折りたたみ分割を簡単に作成できます。アコーディオンナビゲーションまたはコンテンツボックスの作成に使用するかどうかに関係なく、多くのコンテンツオプションが可能です。
このプラグイン機能を個別に含めたい場合は、 collapse.js。これには、移行プラグインがBootstrapのバージョンに含まれている必要もあり ます。そうでなければ、この章で述べたように ブートストラッププラグインの概要、あなたは含めることができます bootstrap.jsまたは縮小さ bootstrap.min.jsを。
折りたたみプラグインを使用できます-
To create collapsible groups or accordion。これは、以下のサンプル例のように作成できます-
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse.Section 1
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse.Section 2
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse.Section 3
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>data-toggle = "collapse" クリックしてコンポーネントを展開または折りたたむリンクにが追加されます。
href または data-target属性が親コンポーネントに追加され、その値は子コンポーネントのIDです。
data-parent アコーディオンのような効果を作成するための属性が追加されています。
アコーディオンマークアップなしで単純な折りたたみ可能を作成するには-これは、以下のサンプル例のように作成できます-
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
simple collapsible
</button>
<div id = "demo" class = "collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>例でわかるように、アコーディオンとは異なり、単純な折りたたみ可能なコンポーネントを作成しましたが、属性は追加していません。 data-parent。
使用法
次の表に、折りたたみプラグインが手間のかかる作業を処理するために使用するクラスを示します。
| シニア番号 | クラスと説明 |
|---|---|
| 1 | .collapse コンテンツを非表示にします。 |
| 2 | .collapse.in コンテンツを表示します。 |
| 3 | .collapsing 遷移の開始時に追加され、終了時に削除されます。 |
折りたたみプラグインは2つの方法で使用できます-
Via data attributes −追加 data-toggle = "collapse" と data-target折りたたみ可能な要素の制御を自動的に割り当てるために要素に。ザ・data-target属性は、折りたたみを適用するCSSセレクターを受け入れます。必ずクラスを追加してください.collapse折りたたみ可能な要素に。デフォルトで開く場合は、追加のクラスを含めます.in。
アコーディオンのようなグループ管理を折りたたみ可能なコントロールに追加するには、データ属性を追加します data-parent = "#selector"。
Via JavaScript −折りたたみメソッドは、以下に示すようにJavaScriptでアクティブ化できます。
$('.collapse').collapse()オプション
データ属性またはJavaScriptを介して渡すことができる特定のオプションが次の表にリストされています-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| 親 | セレクターデフォルト-false | データ-親 | セレクターがfalseの場合、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます（従来のアコーディオンの動作と同様-これはアコーディオングループクラスに依存します）。 |
| トグル | ブールデフォルト-true | データの切り替え | 呼び出し時に折りたたみ可能な要素を切り替えます。 |
メソッド
これは、折りたたみ可能な要素で使用されるいくつかの便利なメソッドのリストです。
| 方法 | 説明 | 例 |
|---|---|---|
Options − .collapse（options） |
コンテンツを折りたたみ可能な要素としてアクティブ化します。オプションのオプションオブジェクトを受け入れます。 | |
Toggle − .collapse（ 'toggle'） |
折りたたみ可能な要素を表示または非表示に切り替えます。 | |
Show − .collapse（ 'show'） |
折りたたみ可能な要素を表示します。 | |
Hide − .collapse（ 'hide'） |
折りたたみ可能な要素を非表示にします。 | |
例
次の例は、メソッドの使用法を示しています-
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse. Section 1--hide method
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse. Section 2--show method
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse. Section 3--toggle method
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
Click me to expand. Click me again to collapse. Section 4--options method
</a>
</h4>
</div>
<div id = "collapseFour" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>イベント
次の表に、折りたたみ機能で使用できるいくつかのイベントを示します。
| イベント | 説明 | 例 |
|---|---|---|
| show.bs.collapse | showメソッドが呼び出された後に発生します。 | |
| show.bs.collapse | このイベントは、collapse要素がユーザーに表示されたときに発生します（CSS遷移が完了するのを待ちます）。 | |
| hide.bs.collapse | インスタンスの非表示メソッドが呼び出されたときに発生します。 | |
| hidden.bs.collapse | このイベントは、collapse要素がユーザーから非表示にされたときに発生します（CSS遷移が完了するのを待ちます）。 | |
例
次の例は、イベントの使用法を示しています-
<div class = "panel-group" id = "accordion">
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
Click me to expand. Click me again to collapse. Section --shown event
</a>
</h4>
</div>
<div id = "collapseexample" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this alert shows up when you expand it');
})
});
</script>Bootstrapカルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。応答性に加えて、コンテンツは、画像、iframe、ビデオ、または必要なほぼすべてのタイプのコンテンツを許可するのに十分な柔軟性があります。
このプラグイン機能を個別に含めたい場合は、 carousel.js。そうでなければ、この章で述べたように ブートストラッププラグインの概要、あなたは含めることができます bootstrap.jsまたは縮小さ bootstrap.min.jsを。
例
以下の簡単なスライドショーは、Bootstrapカルーセルプラグインを使用して、カルーセルなどの要素を循環するための一般的なコンポーネントを示しています。カルーセルを実装するには、マークアップを使用してコードを追加する必要があります。データ属性は必要ありません。単純なクラスベースの開発だけです。
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>オプションのキャプション
スライドにキャプションを簡単に追加できます。 .carousel-caption 任意の要素内 .item。そこにほぼすべてのオプションのHTMLを配置すると、自動的に配置およびフォーマットされます。次の例はこれを示しています-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
<div class = "carousel-caption">This Caption 1</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
<div class = "carousel-caption">This Caption 2</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
<div class = "carousel-caption">This Caption 3</div>
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+
</div>使用法
Via data attributes −データ属性を使用して、カルーセルの位置を簡単に制御します。
属性 data-slideキーワードprevまたはnextを受け入れます。これにより、現在の位置を基準にしてスライドの位置が変更されます。
使用する data-slide-to 生のスライドインデックスをカルーセルに渡す data-slide-to = "2"、スライド位置を0で始まる特定のインデックスにシフトします。
ザ・ data-ride = "carousel" 属性は、ページの読み込みから始まるアニメーションとしてカルーセルをマークするために使用されます。
Via JavaScript −カルーセルは次のようにJavaScriptを使用して手動で呼び出すことができます−
$('.carousel').carousel()オプション
次の表に、データ属性またはJavaScriptを介して渡すことができる特定のオプションを示します。
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| 間隔 | 番号デフォルト-5000 | データ間隔 | アイテムを自動的に循環させるまでの遅延時間。falseの場合、カルーセルは自動的に循環しません。 |
| 一時停止 | 文字列デフォルト-「ホバー」 | データの一時停止 | mouseenterでカルーセルのサイクリングを一時停止し、mouseleaveでカルーセルのサイクリングを再開します。 |
| ラップ | ブールデフォルト-true | データラップ | カルーセルを継続的に循環させるか、ハードストップするか。 |
メソッド
これは、カルーセルコードで使用できる便利なメソッドのリストです。
| 方法 | 説明 | 例 |
|---|---|---|
| .carousel（オプション） | オプションのオプションオブジェクトを使用してカルーセルを初期化し、アイテムの循環を開始します。 | |
| .carousel（ 'cycle'） | カルーセルアイテムを左から右に循環します。 | |
| .carousel（ 'pause'） | カルーセルがアイテムを循環するのを停止します。 | |
| .carousel（number） | カルーセルを特定のフレームに循環させます（0ベース、配列と同様）。 | |
| .carousel（ 'prev'） | 前のアイテムに循環します。 | |
| .carousel（ 'next'） | 次のアイテムに循環します。 | |
例
次の例は、メソッドの使用法を示しています-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
<!-- Controls buttons -->
<div style = "text-align:center;">
<input type = "button" class = "btn prev-slide" value = "Previous Slide">
<input type = "button" class = "btn next-slide" value = "Next Slide">
<input type = "button" class = "btn slide-one" value = "Slide 1">
<input type = "button" class = "btn slide-two" value = "Slide 2">
<input type = "button" class = "btn slide-three" value = "Slide 3">
</div>
</div>
<script>
$(function() { // Cycles to the previous item $(".prev-slide").click(function() {
$("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
$("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
$("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
$("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
$("#myCarousel").carousel(2);
});
});
</script>イベント
Bootstrapのカルーセルクラスは、次の表にリストされているカルーセル機能にフックするための2つのイベントを公開します。
| イベント | 説明 | 例 |
|---|---|---|
| slide.bs.carousel | このイベントは、スライドインスタンスメソッドが呼び出されるとすぐに発生します。 | |
| slid.bs.carousel | このイベントは、カルーセルがスライド遷移を完了したときに発生します。 | |
例
次の例は、イベントの使用法を示しています-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>
<script>
$(function() {
$('#myCarousel').on('slide.bs.carousel', function () {
alert("This event fires immediately when the slide instance method" +"is invoked.");
});
});
</script>affixプラグインを使用すると、<div>をページ上の場所に貼り付けることができます。このプラグインを使用して、ピン留めのオンとオフを切り替えることもできます。この一般的な例は、ソーシャルアイコンです。それらはある場所から始まりますが、ページが特定のマークに達すると、<div>は所定の位置にロックされ、ページの残りの部分でスクロールを停止します。
このプラグイン機能を個別に含めたい場合は、 affix.js。そうでなければ、この章で述べたように ブートストラッププラグインの概要、あなたは含めることができます bootstrap.jsまたは縮小さ bootstrap.min.jsを。
使用法
以下で説明するように、データ属性を介して、または独自のJavaScriptを使用して手動で接辞プラグインを使用できます。
Via data attributes −任意の要素に接辞動作を簡単に追加するには、追加するだけです。 data-spy = "affix"スパイしたい要素に。オフセットを使用して、要素の固定を切り替えるタイミングを定義します。
例
次の例は、データ属性による使用法を示しています-
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div id = "myNav" data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum
id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet
elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
eu, tristique eget risus. Integer aliquet quam ut elit suscipit,
id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis
dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed
fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at
facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit
amet mauris. </p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante
id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
turpis at accumsan tincidunt. Phasellus risus risus,
volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,
tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis
pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id
vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>Via JavaScript −以下に示すように、JavaScriptを使用して要素を手動で添付できます。
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})例
次の例は、データ属性による使用法を示しています-
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div>
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio
in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique
eget risus. Integer aliquet quam ut elit suscipit, id interdum
neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor.
Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris
quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor.
Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum
ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna.
Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam.
Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
dolor nisl semper tortor, vel sagittis lacus est consequat eros.
Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,
tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
tincidunt fringilla massa. Etiam hendrerit dolor eget ante
rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum
ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#myNav').affix({
offset: {
top: 60
}
});
});
</script>CSSによるポジショニング
上記の両方の状況で、コンテンツの配置にCSSを提供する必要があります。affixプラグインは、それぞれが特定の状態を表す3つのクラス（.affix、.affix-top、および.affix-bottom）を切り替えます。以下の手順に従って、上記の使用オプションのいずれかにCSSを設定します。
開始するには、プラグインは追加します .affix-top要素が最上部の位置にあることを示します。この時点では、CSSの配置は必要ありません。
貼り付けたい要素を超えてスクロールすると、実際の貼り付けがトリガーされます。ここが.affix 置き換えます .affix-top とセット position: fixed; （BootstrapのコードCSSによって提供されます）。
下部オフセットが定義されている場合、それを超えてスクロールすると、 .affix と .affix-bottom。オフセットはオプションであるため、オフセットを設定するには、適切なCSSを設定する必要があります。この場合、追加しますposition: absolute; 必要に応じて。
オプション
次の表に示すように、データ属性またはJavaScriptを介して渡すことができる特定のオプションがあります-
| オプション名 | タイプ/デフォルト値 | データ属性名 | 説明 |
|---|---|---|---|
| オフセット | 番号| 関数| オブジェクトデフォルト：10 | データオフセット | スクロールの位置を計算するときに画面からオフセットするピクセル。単一の数値が指定されている場合、オフセットは上方向と下方向の両方に適用されます。一意の下部と上部のオフセットを提供するには、オブジェクトのオフセット：{上部：10}またはオフセット：{上部：10、下部：5}を指定するだけです。オフセットを動的に計算する必要がある場合は、関数を使用します。 |
グリッドとは何ですか？
グラフィックデザインでは、グリッドは、コンテンツを構造化するために使用される一連の交差する直線（垂直、水平）線で構成される構造（通常は2次元）です。印刷デザインのレイアウトやコンテンツ構造のデザインに広く使用されています。Webデザインでは、HTMLとCSSを使用して一貫したレイアウトを迅速かつ効果的に作成することは非常に効果的な方法です。
ブートストラップグリッドシステムの動作
グリッドシステムは、コンテンツを格納する一連の行と列を介してページレイアウトを作成するために使用されます。ブートストラップグリッドシステムの仕組みは次のとおりです-
行は、内に配置する必要があります .container 適切な配置とパディングのためのクラス。
行を使用して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
次のような事前定義されたグリッドクラス .row and .col-xs-4グリッドレイアウトをすばやく作成するために使用できます。LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
列は、パディングを介してガター（列の内容間のギャップ）を作成します。そのパディングは、上の負のマージンを介して最初と最後の列の行でオフセットされます.rows。
グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-xs-4。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| グリッド | この例は、Bootstrapのグリッド構造について示しています。 | ダウンロード |
Bootstrapは、テーブルを構築するためのすっきりとしたレイアウトを提供します。Bootstrapでサポートされているテーブル要素の一部は次のとおりです。
| シニア番号 | タグと説明 |
|---|---|
| 1 | <table> 表形式でデータを表示するためのラッピング要素 |
| 2 | <thead> テーブル列にラベルを付けるためのテーブルヘッダー行（<tr>）のコンテナ要素。 |
| 3 | <tbody> テーブル本体のテーブル行（<tr>）のコンテナ要素。 |
| 4 | <tr> 単一の行に表示される一連のテーブルセル（<td>または<th>）のコンテナ要素。 |
| 5 | <td> デフォルトのテーブルセル。 |
| 6 | <th> 列（またはスコープと配置に応じて行）ラベル用の特別なテーブルセル。<thead>内で使用する必要があります |
| 7 | <caption> テーブルが保持するものの説明または要約。 |
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| テーブルを購入する | この例は、Bootstrapの購入テーブル構造について示しています。 | ダウンロード |
| 計画表 | この例は、Bootstrapのプランテーブル構造について示しています。 | ダウンロード |
| ギャラリー付きテーブル | この例は、Bootstrapのギャラリーテーブル構造について示しています。 | ダウンロード |
フォームレイアウト
Bootstrapは、次のタイプのフォームレイアウトを提供します-
- 垂直（デフォルト）フォーム
- インラインフォーム
- 横型
縦型または基本型
基本的なフォーム構造にはBootstrapが付属しています。個々のフォームコントロールは、自動的にグローバルなスタイルを受け取ります。基本的なフォームを作成するには、次のようにします。
親の<form>要素にロールフォームを追加します。
ラベルとコントロールをクラス.form-groupで<div>にラップします。これは、最適な間隔のために必要です。
.form-controlのクラスをすべてのテキストの<input>、<textarea>、および<select>要素に追加します。
インラインフォーム
すべての要素がインラインで、左揃えで、ラベルが並んでいるフォームを作成するには、クラス.form-inlineを<form>タグに追加します。
横型
水平フォームは、マークアップの量だけでなく、フォームの表示においても他のフォームとは一線を画しています。水平レイアウトを使用するフォームを作成するには、次のようにします。
.form-horizontalのクラスを親の<form>要素に追加します。
ラベルとコントロールをクラス.form-groupで<div>にラップします。
.control-labelのクラスをラベルに追加します。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| ログインページ | この例は、Bootstrapのログインページ構造について示しています | ダウンロード |
| お問い合わせページ | この例は、Bootstrapの連絡先ページの構造について示しています | ダウンロード |
| サインアップページ | この例は、Bootstrapのサインアップページ構造について示しています | ダウンロード |
Bootstrapは、ボタンのスタイルを設定するためのいくつかのオプションを提供します。これらは次の表に要約されています。
| シニア番号 | クラスと説明 |
|---|---|
| 1 | btn デフォルト/標準ボタン。 |
| 2 | btn-primary 視覚的な重みを追加し、一連のボタンの主要なアクションを識別します。 |
| 3 | btn-success 成功または前向きなアクションを示します。 |
| 4 | btn-info 情報アラートメッセージ用のコンテキストボタン。 |
| 5 | btn-warning このアクションには注意が必要であることを示します。 |
| 6 | btn-danger 危険または潜在的に否定的な行動を示します。 |
| 7 | btn-link ボタンの動作を維持しながら、ボタンをリンクのように見せることで、ボタンの強調を解除します。 |
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| IOSボタン | この例は、Bootstrapのボタン構造について示しています | ダウンロード |
| 画像ボタン | この例は、Bootstrapの画像ボタンの構造について示しています | ダウンロード |
| シャドウボタン | この例は、Bootstrapのシャドウボタン構造について示しています | ダウンロード |
| サインアップボタン | この例は、Bootstrapのサインアップボタンの構造について示しています | ダウンロード |
Bootstrapは、いくつかの単純なスタイルを画像に適用するために使用できる3つのクラスを提供します-
.img-rounded - border-radius：6pxを追加して、画像の角を丸くします。
.img-circle - border-radius：500pxを追加して、画像全体を丸くします。
.img-thumbnail-少しのパディングと灰色の境界線を追加します。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| イメージギャラリー | この例は、Bootstrapの画像ギャラリー構造について示しています | ダウンロード |
| 画像ズーム | この例は、Bootstrapの画像ズーム構造について示しています | ダウンロード |
| チーム画像ギャラリー | この例は、Bootstrapのグリッドイメージ構造について示しています | ダウンロード |
| 背景画像 | この例は、Bootstrapの背景画像構造について示しています | ダウンロード |
| パネルの画像 | この例は、Bootstrapのイメージ構造について示しています | ダウンロード |
Bootstrapは、モバイルフレンドリーな開発を高速化するために、いくつかのヘルパークラスを提供します。これらは、大、小、中のデバイスと組み合わせて、メディアクエリを介してデバイスごとにコンテンツを表示および非表示にするために使用できます。
これらは慎重に使用し、同じサイトのまったく異なるバージョンを作成しないようにしてください。 Responsive utilities are currently only available for block and table toggling。
| クラス | デバイス |
|---|---|
| .visible-xs | 非常に小さい（768px未満）が表示されます |
| .visible-sm | 小さい（最大768ピクセル）表示 |
| .visible-md | 中（768ピクセルから991ピクセル）が表示されます |
| .visible-lg | 大きい（992ピクセル以上）表示 |
| .hidden-xs | 極小（768px未満）非表示 |
| .hidden-sm | 小さい（最大768ピクセル）非表示 |
| .hidden-md | 中（768ピクセルから991ピクセル）非表示 |
| .hidden-lg | 大きい（992ピクセル以上）非表示 |
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| カードレスポンシブ | この例は、ブートストラップのカード構造について示しています | ダウンロード |
| 簡単な紹介文 | この例は、Bootstrapのお客様の声の構造について示しています | ダウンロード |
| ビデオグリッド | この例は、ブートストラップのグリッドビデオ構造について示しています | ダウンロード |
| バナー画像 | この例は、Bootstrapのバナー画像構造について示しています | ダウンロード |
| フェイスインジケーター付きカルーセル | この例は、Bootstrapの顔インジケーター構造を持つカルーセルについて示しています | ダウンロード |
Bootstrapは、ナビゲーション要素のスタイルを設定するためのいくつかの異なるオプションを提供します。それらはすべて、同じマークアップと基本クラス.navを共有します。Bootstrapは、マークアップと状態を共有するためのヘルパークラスも提供します。修飾子クラスを交換して、各スタイルを切り替えます。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| ナビゲーションデモ | この例は、Bootstrapのナビゲーション構造について示しています | ダウンロード |
| 画像ナビゲーションバー | この例は、Bootstrapの画像ナビゲーションバーの構造について示しています | ダウンロード |
| Findconボタン | この例は、Bootstrapのfindconボタン構造について示しています | ダウンロード |
| 小さなナビゲーションバー | この例は、BootstrapのTinyNavbar構造について示しています | ダウンロード |
Bootstrapは、ブログのスタイルを設定するためのいくつかの異なるオプションを提供します。ブログ要素のいくつかは、コメントボックス、ブログ投稿、ブログフッターなどです。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| コメントボックスデモ | この例は、Bootstrapのコメントボックス構造について示しています | ダウンロード |
| 画像付きのブログ投稿 | この例は、Bootstrapの画像要素構造を含むブログ投稿について示しています | ダウンロード |
| ブログフッター | この例は、Bootstrapのブログフッター構造について示しています | ダウンロード |
| サムネイル | この例は、Bootstrapのサムネイル構造について示しています | ダウンロード |
マテリアルデザインとは
マテリアルデザインは、プラットフォーム全体のビジュアル、モーション、インタラクションデザインの包括的なガイドです
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| マテリアルボックスのデモ | この例は、Bootstrapの資材カード構造について示しています。 | ダウンロード |
| マテリアルカード | この例は、Bootstrapの資材カード構造について示しています。 | ダウンロード |
| マテリアルナビゲーション | この例は、Bootstrapの資材ナビゲーション構造について示しています。 | ダウンロード |
| 受信トレイのナビゲーション | この例は、Bootstrapの受信トレイナビゲーション構造について示しています。 | ダウンロード |
Bootstrapは、ナビゲーションスライダーのスタイルを設定するためのいくつかの異なるオプションを提供します。いくつかの例を以下に示します-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| メニューを上にスライド | この例は、Bootstrapのスライダーメニュー構造について示しています | ダウンロード |
| サブメニュー | この例は、Bootstrapのスライダーサブメニュー構造について示しています | ダウンロード |
| タブ付きサイドバー | この例は、BootstrapのSlider WithTabs構造について示しています。 | ダウンロード |
| タブ | この例は、Bootstrapのタブ構造について示しています | ダウンロード |
ブートストラップは、タイムラインをスタイリングするためのいくつかの異なるオプションを提供します。以下に示す例のいくつか-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| タイムラインデモ | この例は、Bootstrapのタイムライン構造について示しています | ダウンロード |
| 点線の単一列のタイムライン | この例は、Bootstrapの単一列のタイムラインドット構造について示しています | ダウンロード |
| タイムライン単一列 | この例は、BootstrapのTimeLine単一列構造について示しています | ダウンロード |
| タイムライン-点線 | この例は、タイムラインについて示しています-ブートストラップの点線の構造 | ダウンロード |
アラートは、ユーザーへのメッセージのスタイルを設定する方法を提供します。これらは、一般的なユーザーアクションのコンテキストフィードバックメッセージを提供します。以下に示すアラートの例の一部-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| ページアラート | この例は、Bootstrapのページアラート構造について示しています | ダウンロード |
| 警告メッセージ | この例は、Bootstrapのアラートメッセージ構造について示しています | ダウンロード |
| 色と半径の小さなオファー | この例は、Bootstrapの色と半径構造を持つリトルオファーについて示しています | ダウンロード |
| ステータスボックス | この例は、ブートストラップのステータスボックス構造について示しています | ダウンロード |
Bootstrapは、管理インターフェースのスタイルを設定するためのいくつかの異なるオプションを提供します。以下に示すいくつかの管理インターフェース-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| レスポンシブメールの受信トレイと作成 | この例は、Bootstrapのレスポンシブメール受信ボックスと作成構造について示しています | ダウンロード |
| シンプルな管理者 | この例は、BootstrapのSimpleAdminインターフェース構造について示しています。 | ダウンロード |
| Datatableのブートストラップ | この例は、BootstrapのDatatable構造のBootstrapについて示しています | ダウンロード |
| メールインターフェース | この例は、Bootstrapの電子メールインターフェイス構造について示しています | ダウンロード |
Ajaxは、WebページおよびWebサーバーとの通信に使用されます。以下に示すように、ajaxとブートストラップに基づく例のいくつか-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| お支払いフォーム | この例は、BootstrapのAjax支払いフォームについて示しています | ダウンロード |
| AJAX / DIVウィザード | この例は、BootstrapのAjax AJAX / DIVウィザードについて示しています | ダウンロード |
Bootstrapは、スライダーにいくつかの異なるオプションを提供します。以下に示すタブ付きスライダー-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| タブ付きスライダー | この例は、Bootstrapのタブ付きスライダーについて示しています | ダウンロード |
Bootstrapは、キャプションにいくつかの異なるオプションを提供します。以下に示すサムネイルキャプションホバー効果-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| キャプションホバー | この例は、Bootstrapの画像のキャプションについて示しています | ダウンロード |
Bootstrapは、マップにいくつかの異なるオプションを提供します。マップのサンプル例は以下のとおりです。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| マップ | この例は、ブートストラップのマップについて示しています | ダウンロード |
Bootstrapは、カレンダーにいくつかの異なるオプションを提供します。カレンダーの例は以下のとおりです。
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| レスポンシブ日付ページャー | この例は、Bootstrapのカレンダーについて示しています | ダウンロード |
| 議題 | この例は、Bootstrapのカレンダーアジェンダについて示しています | ダウンロード |
| シンプルなデートピッカー | この例は、ブートストラップの日付ピッカーについて示しています | ダウンロード |
| カレンダー | この例は、Bootstrapのカレンダーについて示しています | ダウンロード |
Bootstrapは、ソーシャルアイコンにいくつかの異なるオプションを提供します。ソーシャルアイコンのサンプル例は以下のとおりです-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| 回転するソーシャルアイコン | この例は、BootstrapのSpinning SocialIcons構造について示しています | ダウンロード |
| FontAwesomeのソーシャルアイコン | この例は、BootstrapのフォントAwesomeのソーシャルアイコンについて示しています | ダウンロード |
| ソーシャルアイコンホバーアニメーションのズーム | この例は、BootstrapでのZoom Social Icon HoverAnimationについて示しています。 | ダウンロード |
| 共有ボタン | この例は、ブートストラップの共有ボタンについて示しています | ダウンロード |
Bootstrapは、フォントとしてのアイコンにいくつかの異なるオプションを提供します。アイコンのサンプル例を以下に示します-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| 丸いアイコンバッジ | この例は、Bootstrapのラウンドアイコンバッジについて示しています | ダウンロード |
| 回転と反転 | この例は、Bootstrapのアニメーション付きアイコンについて示しています | ダウンロード |
| Ui-Kit-Metro Like Nav | この例は、BootstrapのUIアニメーションを備えたアイコンについて示しています | ダウンロード |
| 太くて平らな青いボタン | この例は、BootstrapのFat and Flatblueボタンについて示しています | ダウンロード |
ブートストラップは、ブートストラップ要素をスタイリングするためのいくつかの異なるオプションを提供します。以下に示すようなブートストラップ要素のいくつか-
| 例 | 説明 | ダウンロードリンク |
|---|---|---|
| マテリアルデザインスイッチ | この例は、Bootstrapのマテリアルデザインスイッチの構造について示しています。 | ダウンロード |
| Windows8ブートストラップモーダル | この例は、BootstrapのWindows 8 BootstrapModal構造について示しています。 | ダウンロード |
| リボンボタン | この例は、Bootstrapのリボンボタン構造について示しています | ダウンロード |
| コールアウト-行動を促すフレーズ | この例は、コールアウトについて示しています-ブートストラップの行動を促すフレーズの構造 | ダウンロード |
| バグの報告 | この例は、Bootstrapのレポートバグ構造について示しています | ダウンロード |
| ホバーキャプション付きカルーセル | この例は、ブートストラップのホバーキャプション構造を持つカルーセルについて示しています | ダウンロード |
| Facebookの壁 | この例は、BootstrapのFacebookの壁の構造について示しています | ダウンロード |
| モバイルアラート | この例は、Bootstrapのモバイルアラート構造について示しています | ダウンロード |
| 丸められたページ付け | この例は、ブートストラップでの丸められたページ付けについて示しています | ダウンロード |
| ビデオリストのサムネイル | この例は、Bootstrapのビデオリストのサムネイルについて示しています | ダウンロード |
| メディアコントロールボタン | この例は、ブートストラップのメディアコントロールボタンについて示しています | ダウンロード |
| シンプルな垂直タブ | この例は、ブートストラップの単純な垂直タブについて示しています | ダウンロード |