フロント-bootstrap

はじめにブートストラップ

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>

 

 

更多详情:https://v3.bootcss.com/

おすすめ

転載: www.cnblogs.com/zhengyuli/p/10981540.html