Bootstrapは、Webフロントエンドページを構築するためのシンプルで柔軟なHTML5およびCSS3ベースのHTML5およびCSS3ベースのHTML、CSS、およびJavaScriptツールセットです。フレンドリーな学習曲線、優れた互換性、レスポンシブデザイン、12グリッドグリッド、スタイルウィザードドキュメント、カスタムJQueryプラグイン、完全なクラスライブラリ、その他の機能に基づいています。ブートストラップにより、Web開発がより速く簡単になります。
1.BootStrapダウンロード
公式ウェブサイト：http：//getbootstrap.com/;初心者の始めましょう：http：//getbootstrap.com/getting-started/
公式WebサイトからBootstrapおよびBootstrapソースコードをダウンロードできます。ダウンロードしたくない場合は、Bootstrapが提供するCDNを使用することもできます。
2.ブートストラップファイル構造
ブートストラップ/
├├。。CSS/
│├。。
│├│。。bootstrap.css.map
││。。
│├│。-bootstrap.min.css.map
│││。。bootstrap-theme.css
│├│。。bootstrap-theme.css.map
│├。。
│└。。
├├）/ js/
│├│。-bootstrap.js
│││。-bootstrap.min.js
ponts/
├├）-グリフィコン - ハルフリング - レギュラー.eot
├··ックス - Glyphicons-Halflings-Regulal.svg
├├）- Glyphicons-Halflings-Regulal.ttf
├├）-グリフィコン - ハルフリング - レギュラー.woff
└└）- Glyphics-Halflings-Regular.Woff2
3.BootStrapのHTML標準テンプレート
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <！ - 最新のレンダリングモードをie-> <meta http-equiv = "x-ua互換" content = "ie = edge"> <イニシャルスケール= 1スケーリングスケールを設定 - > <メタ名= "Viewport" content = "width = device-width、initial-scale = 1"> <title> bootstrapのHTML標準テンプレート</title> <！ - bootstrapのコアCSS-紹介 - > <link rel = "styleSheet" " href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.cssおよびブラウザ以下。必要ない場合は、削除できます - > <！ - [if lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </scrip> <スクリプトsrc = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script> <！[endif] - > </head> <h1> hello、world！</h1> <！ - ドキュメントを終了するドキュメントに配置します。ブートストラップ、最初にjQuery-> <スクリプトsrc = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <！ - 必要に応じて使用できるすべてのjsプラグインまたはJSプラグインを含む - > <> <> <> <> < src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4。ブートストラップタイトル
通常のHTMLページと同様に、BootstrapはタグH1からH6を使用してタイトルを定義しますが、ブートストラップはデフォルトスタイルをオーバーライドして、すべてのブラウザに表示される効果が同じになります。定義の特定のルールを次の表に示します。
<！ - ブートストラップのタイトル - > <h1>タイトル1 </h1> <h2>タイトル2 </h2> <！ - bootstrapは<small>タグを使用して字幕を作成します - > <h1>タイトル1 <small> <mall> <mall> <small> <small> <small>同じスタイル - > <div>タイトル1 </div> <div>タイトル2 </div> <div>タイトル3 </div>
注：サブタイトルのラインの高さは1、フォントウェイトは太字ではなく、色は灰色です（＃999）。 H1〜H3の字幕はタイトルの65％であり、H4〜H6の字幕はタイトルの75％です。詳細については、bootstrap.cssファイルの行407〜443を参照してください。
5.BootStrapコンテンツ
1）コンテンツを強調します
実際のプロジェクトでは、いくつかの重要なテキストでは、強調表示されると予想される部分が別のスタイルで扱われます。 Bootstrapは、この部分で軽量処理も行いました。
クラス名「.Lead」を追加してパラグラフPを強調することにより、その機能はテキストフォントサイズを増やし、テキストを太字にし、それに応じてラインの高さとマージンを扱うことです。使用法は次のとおりです。
<p>通常のテキスト</p>
<p>皇后テキスト</p>
2）色を通して強調を表現します
例えば：
<！ - 以下の通常のテキストは茶色です - >
<p>通常のテキスト</p>
3）太字と斜体
太字は、Bラベルまたは強力なラベルを使用するために使用されます。イタリックは、EMラベルまたはIラベルの使用に使用されます。
<
4）テキストアライメント
Bootstrapは、4つのクラス名を定義することにより、テキストのアライメントスタイルを制御します。
<p>私は左にいます</p> <p>私は中心にいます</p> <p>右にいます</p> <p>
6.BootStrapリスト
Bootstrapは、通常のリスト、順序リスト、ポイント説明リスト、インラインリスト、定義リスト、および水平定義リストの通常の使用法に応じて、6つのフォームのリストを提供します。
1）通常のリスト
<！ - 通常のリスト - > <ul> <li>通常のリスト1 </li> <li>通常のリスト2 </li> </ul>
2）注文リスト
<！ - 並べ替え済みリスト - > <ol> <li>並べ替え済みリスト1 </li> <li>並べ替えリスト2 </li> </ol> <！ - ソートされたリストネスト - > <ol> <li>ソートリスト1 </li> <li>ソートリスト2 <ol> <li>ソート付きリスト2.1 </li> </li> </li> </li> </li>
3）リストに移動します
デフォルトのリストスタイルを削除できるように、クラス名「.list-unstyled」を順序のないリストに追加します。
<ol> <li>ソートされたリスト1 </li> <li>ソートされたリスト2 </li> </ol>
4）インラインリスト（水平ナビゲーションを作成するために生まれた）
Destinedリストと同様に、インラインリストはクラス名「.list-inline」を追加し、垂直リストを水平リストに交換し、弾丸（数字）を削除して水平ディスプレイを維持することにより実装されます。
<ul> <li>ナビゲーションバーエントリ1 </li> <li>ナビゲーションバーエントリ2 </li> </ul>
5）定義リスト
ブートストラップ定義リストは、単にライン間隔、マージン、フォントの太字の効果を調整します。
<dl> <dt> beijing </dt> <dd>中国の首都。 </dd> <dt>上海</dt> <dd>国立セントラルシティ、大脳。 </dd> </dl>
6）水平定義リスト
水平定義リストは、インラインリストのようなものです。 Bootstrapは、クラス名「.DL-Horizontal」をDLタグに追加して、水平ディスプレイ効果を実現できます。
<dl> <dt> beijing </dt> <dd>中国の首都。 </dd> <dt>上海</dt> <dd>国立セントラルシティ、大脳。 </dd> </dl>
7.Bootstrapのテーブル
Bootstrapは、1つの基本スタイルと4つの追加スタイルとレスポンシブテーブルを備えたテーブルを提供します。詳細は次のとおりです。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>基本表> <リンクrel = "styleSheet" http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/boottrap.min.cs "> <表</h3> <！ - bootstrap.cssファイル1402〜行1441を表示するメインソースコード - > <テーブル> <thead> <tr> <th>テーブルタイトル</th> <th>テーブルタイトル</th> </tr> </thead> <tbody> <td>テーブルセルセル</td> </tr> <tr> <td>テーブルセル</td> <td>テーブルセル</td> <td>テーブルセル</td> <td>タイトル</th> <th>テーブルタイトル</th> <th>テーブルタイトル</th> </tr> </thead> <tbody> <tr> <td>テーブルセル</td> <td>テーブルセル</td> <td>テーブルセル</td> </tr> </tbody> </tbody>セル</td> <td>テーブルセル</td> <td>テーブルセル</td> </tr> <tr> <td>テーブルセル</td> <td>テーブルセル</td> <td>テーブルセル</td> </tr> </tbody> </table> <h3> border </h3> 1464 - > <table> <thead> <tr> <th>テーブルタイトル</th> <th>テーブルタイトル</th> <th>テーブルテーブルタイトル</th> </tr> </thead> <tbody> <tr> <td> <td> td>テーブルセル</td> </tr> </tdd> </tbody> </tbody>セル</td> </tr> <tr> <td>テーブルセル</td> <td>テーブルセル</td> </tr </tbody> </table> <h3>マウスはハイライトされたテーブルを一時停止します</h3> <！ - boottrap.cssファイルライン1469〜 <thead <> <thead <> <> <thaeタイトル</th> <th>テーブルタイトル</th> <th>テーブルタイトル</th> </tr> </tbody> <tbody> <tr> <td>テーブルセル</td> <td>テーブルセル</td> <td>テーブルセル</td> </tr> <tr> <td>テーブルセル</td>テーブルセル</td> </td> </td> </td> </td> <h3>コンパクトテーブル</h3> <！ - メインソースコードは、bootstrap.cssファイル1442〜行1449-〜> <taed> <tr> <th> <th> <th> <th> <th>テーブルタイトル</th> </th> <th> <th> <th> <th> <th> <th> <th> </th> </tr> </thead>セル</td> <td>テーブルセル</td> </tr> <tr> <td>テーブルセル</td> <td>テーブルセル</td> <td> <td>テーブルセル</td> </tr> </tbody> </table> <h3>レスポブテーブル</h3> <！このコンテナに配置されたテーブルには、応答性の高い効果があります - > <div> <table> <thead> <tr> <th>テーブルタイトル</th> <th <th <th <th <thead> <thead> <thead> <tbody>セル</td> <td>テーブルセル</td> </tr> </tbody> </table> </div> </body> </html>
コードのこの部分には、ブートストラップで一般的に使用されるテーブルが含まれており、レンダリングは次のとおりです。
Bootstrapは、テーブルの行TRの5つの異なるクラス名も提供します（対応するソースコードについては、1484行目から1583行目をBootstrap.CSSファイルで確認してください）。各クラス名は、行の異なる背景色を制御します。特定の説明を次の表に示します。
非常に簡単に使用できます。上記のテーブルの対応するクラス名を要素に追加するだけで、効果を実現する必要があります。
<tr> <td>…</td> </tr>
知らせ：
1.吊り下げられた状態を達成するには、<table>タグにテーブルホーバークラスを追加する必要があります。
2。「.active」に加えて、他の4つのクラス名と「.table-Hover」を使用する場合、ブートストラップは、フローティング状態のこれらのスタイルに対応するスタイル設定も作成します。したがって、TR要素に他のカラースタイルを追加する必要がある場合は、「.Table-Hover」テーブルで対応する調整もする必要があります。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
一連の記事：
魔法のブートストラップグリッドシステムと初めて接触したとき//www.vevb.com/article/89333.htm
初めて魔法のブートストラップフォームに接触したとき//www.vevb.com/article/89330.htm
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。