はじめにブートストラップ
jQueryのベースのブートストラップファイルをインポートするために使用されることを意図してjQueryの、前にそれをブートストラップ
3.xバージョンが推奨され、最新バージョンを使用していません
ブートストラップ機能:のみスタイルクラス属性はページを変更することで変更します
どのように使用するには:
ダウンロードします。https://v3.bootcss.com/
第二は、CDNアドレスへの参照です。
レイアウトコンテナ
<DIV CLASS = "コンテナ"> </ div>の固定空白の周り
の<divクラス= "コンテナ流体 C1"> </ div>の全画面表示
グリッドシステム
行は、行は、あなたのデフォルトにこの行が12個の部分に分けられたあなたにも12個の部分に分けることができ、それぞれ1と言います
クラス= DIV "コンテナ"> < divのクラス= "行" > の行 < divのクラス= "COL-MD-6 C1" > </ divの> あなたのアカウントを管理する方法現在の行の列数
Googleのブラウザで自動的にちょうどCOL-XS-6は、対応するレイアウトを生成追加し、あなたの携帯電話やパソコンの画面を切り替えます
列オフセット
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。 <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>
表格标签
<table class="table table-bordered table-hover table-striped"></table> <tr class="active">...</tr>
按钮
<button class="btn btn-success">button</button> <button class="btn btn-info">button</button> <button class="btn btn-warning">button</button> <button class="btn btn-danger">button</button> <button class="btn btn-primary">button</button> <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>