Bootstrap

Bootstrap是Twitter推出的一個用于前端開發的開源工具包，它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架，目前，Bootstrap最新版本為4.4，注意，Bootstrap有三個大版本分別是 v2、v3和v4，我們這里學習最常用的v3，

使用Bootstrap的好處：

Bootstrap簡單靈活，可用于架構流行的用戶界面，具有友好的學習曲線，卓越的兼容性，回應式設計，12列柵格系統，樣式向導檔案，自定義JQuery插件，完整的類別庫，基于Less等特性，

下載

bootstap英文官方: https://getbootstrap.com/
bootstrap中文官網：http://www.bootcss.com/
下載地址: http://v3.bootcss.com/getting-started/#download

注意： Bootstrap提供了三種不同的方式供我們下載，我們不需要使用Bootstrap的原始碼和 sass專案，只需要下載生產環境的Bootstrap即可，

常用格式-柵格系統

柵格引數

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種螢屏設備上作業的，

	超小螢屏手機 (<768px)	小螢屏平板 (≥768px)	中等螢屏桌面顯示幕 (≥992px)	大螢屏大桌面顯示幕 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變為水平排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是

<div >
  <div >

    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>
    <div >col-md-1</div>

  </div>
</div>

<div >
  <div >col-md-6</div>
  <div >col-md-6</div>
</div>
<div >
  <div >col-md-9</div>
  <div >col-md-3</div>
</div>
<div >
  <div >col-md-6 col-sm-9</div>
  <div >col-md-6 col-sm-3</div>
</div>

列偏移

<h3>列偏移</h3>
<div >
  <div >col-md-4 col-md-offset-2</div>
  <div >col-md-5 col-md-offset-3</div>
  <div >col-md-4 col-md-offset-1</div>
</div>

列嵌套

<h3>列嵌套</h3>
  <div >
    <div >
      <div >
        <div >col-md-6</div>
        <div >col-md-6</div>
      </div>
    </div>
  </div>
  <hr>
  <div >
    <div >
      <div >
        <div >col-md-6</div>
        <div >col-md-6</div>
      </div>
    </div>
  </div>

列排序

<h3>列排序</h3>

<div >
  <div >col-md-4</div>
</div>

<div >
  <div >col-md-4</div>
  <div >col-md-4(2)</div>
</div>

<div >
  <div >col-md-4</div>
</div>

其他常用格式

標題排版

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題，

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式，

添加 .table-bordered 類為表格和其中的每個單元格增加邊框，

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出回應，

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半，

通過這些狀態類可以為行或單元格設定顏色，

Class	描述
`.active`	滑鼠懸停在行或單元格上時所設定的顏色
`.success`	標識成功或積極的動作
`.info`	標識普通的提示資訊或動作
`.warning`	標識警告或需要用戶注意
`.danger`	標識危隙訓潛在的帶來負面影響的動作

<div >
  <div >
    <div >
      <table border="1" >
        <tr>
          <th>序號</th>
          <th>姓名</th>
          <th>年齡</th>
          <th>部門</th>
        </tr>

        <tr >
          <td>1</td>
          <td>張三</td>
          <td>23</td>
          <td>銷售</td>
        </tr>
        <tr >
          <td>2</td>
          <td>李四</td>
          <td>23</td>
          <td>銷售</td>
        </tr>
        <tr >
          <td>3</td>
          <td>王五</td>
          <td>23</td>
          <td>銷售</td>
        </tr>
      </table>
    </div>
  </div>
</div>

表單

單獨的表單控制元件會被自動賦予一些全域樣式，所有設定了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設定寬度屬性為 width: 100%;，將 label 元素和前面提到的控制元件包裹在 .form-group 中可以獲得最好的排列，

<form>
  <div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="exampleInputEmail1" placeholder="Email">
  </div>
  <div >
    <label for="exampleInputPassword1">Password</label>
    <input type="password"  id="exampleInputPassword1" placeholder="Password">
  </div>
  <div >
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p >Example block-level help text here.</p>
  </div>
  <div >
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" >Submit</button>
</form>

將bootstrap的渲染去掉可以進行對比：

<hr>
<form action="">
    <div >

        <label for="user">用戶名</label>
        <input type="text"  id="user">
    </div>
    <div >
        <label for="pwd">密碼</label>
        <input type="password"  id="pwd">
    </div>
    <div >

        <div >
            <div >

                <select >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
    </div>

    <div >
        <div ><input type="submit" ></div>
    </div>
</form>

校驗狀態

Bootstrap 對表單控制元件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式，使用時，添加 .has-warning、.has-error 或 .has-success 類到這些控制元件的父元素即可，任何包含在此元素之內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式，

使用這些校驗樣式只是為表單控制元件提供一個可視的、基于色彩的提示，但是并不能將這種提示資訊傳達給使用輔助設備的用戶 - 例如螢屏閱讀器 - 或者色盲用戶，

為了確保所有用戶都能獲取正確資訊，Bootstrap 還提供了另一種提示方式，例如，你可以在表單控制元件的 <label> 標簽上以文本的形式顯示提示資訊（就像下面代碼中所展示的）；包含一個 Glyphicon 字體圖示（還有賦予 .sr-only 類的文本資訊 - 參考Glyphicon 字體圖示實體）；或者提供一個額外的輔助資訊塊，另外，對于使用輔助設備的用戶，無效的表單控制元件還可以賦予一個 aria-invalid="true" 屬性，

<div >
  <label  for="inputSuccess1">Input with success</label>
  <input type="text"  id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" >A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div >
  <label  for="inputWarning1">Input with warning</label>
  <input type="text"  id="inputWarning1">
</div>
<div >
  <label  for="inputError1">Input with error</label>
  <input type="text"  id="inputError1">
</div>
<div >
  <div >
    <label>
      <input type="checkbox" id="checkboxSuccess" value="https://www.cnblogs.com/ivanlee717/p/option1">
      Checkbox with success
    </label>
  </div>
</div>
<div >
  <div >
    <label>
      <input type="checkbox" id="checkboxWarning" value="https://www.cnblogs.com/ivanlee717/p/option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div >
  <div >
    <label>
      <input type="checkbox" id="checkboxError" value="https://www.cnblogs.com/ivanlee717/p/option1">
      Checkbox with error
    </label>
  </div>
</div>

添加圖示

你還可以針對校驗狀態為輸入框添加額外的圖示，只需設定相應的 .has-feedback 類并添加正確的圖示即可，

反饋圖示（feedback icon）只能使用在文本輸入框 <input > 元素上，

對于不帶有 label 標簽的輸入框以及右側帶有附加組件的輸入框組，需要手動為其放置反饋圖示，為了讓所有用戶都能訪問你的網站，我們強烈建議為所有輸入框添加 label 標簽，如果你不希望將 label 標簽展示出來，可以通過添加 .sr-only 類將其隱藏，如果的確不能添加 label 標簽，請調整反饋圖示的 top 值，對于輸入框組，請根據附加組件的實際情況調整 right 值，

為了確保輔助技術- 如螢屏閱讀器 - 正確傳達一個圖示的含義，額外的隱藏的文本應包含在 .sr-only 類中，并明確關聯使用了 aria-describedby 的表單控制元件，或者，以某些其他形式（例如，文本輸入欄位有一個特定的警告資訊）傳達含義，例如改變與表單控制元件實際相關聯的 <label> 的文本，

雖然下面的例子已經提到各自表單控制元件本身的 <label> 文本的驗證狀態，上述技術（使用 .sr-only 文本和 aria-describedby) ）已經包括了需要說明的目的，

<div >
  <label  for="inputSuccess2">Input with success</label>
  <input type="text"  id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span  aria-hidden="true"></span>
  <span id="inputSuccess2Status" >(success)</span>
</div>
<div >
  <label  for="inputWarning2">Input with warning</label>
  <input type="text"  id="inputWarning2" aria-describedby="inputWarning2Status">
  <span  aria-hidden="true"></span>
  <span id="inputWarning2Status" >(warning)</span>
</div>
<div >
  <label  for="inputError2">Input with error</label>
  <input type="text"  id="inputError2" aria-describedby="inputError2Status">
  <span  aria-hidden="true"></span>
  <span id="inputError2Status" >(error)</span>
</div>
<div >
  <label  for="inputGroupSuccess1">Input group with success</label>
  <div >
    <span >@</span>
    <input type="text"  id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span  aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" >(success)</span>
</div>

按鈕

需要讓按鈕具有不同尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕，

通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素，

當按鈕處于激活狀態時，其表現為被按壓下去（底色更深、邊框夜色更深、向內投射陰影），對于 <button> 元素，是通過 :active 狀態實作的，對于 <a> 元素，是通過 .active 類實作的，然而，你還可以將 .active 應用到 <button> 上（包含 aria-pressed="true" 屬性)），并通過編程的方式使其處于激活狀態，

可以為基于 <a> 元素創建的按鈕添加 .active 類，

通過為按鈕的背景設定 opacity 屬性就可以呈現出無法點擊的效果，

<div >
    <div >
        <h3>按鈕</h3>
        <button  disabled="disabled">button</button>
        <input   type="button" value="https://www.cnblogs.com/ivanlee717/p/button">
        <span ></span>&nbsp;&nbsp;&nbsp;
        <span ></span>
    </div>
</div>

查看所有組件圖示

應用頁面

首先引入外部插件

<link rel="stylesheet" href="https://www.cnblogs.com/ivanlee717/p/bootstrap/dist/css/bootstrap.css">
  <script src="https://www.cnblogs.com/ivanlee717/p/jquery3.6.js"></script>
  <script src="https://www.cnblogs.com/ivanlee717/p/bootstrap/dist/js/bootstrap.js"></script>

導航條

<nav >
    <div >
        <!-- Brand and toggle get grouped for better mobile display -->
        <div >
            <button type="button"  data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span >Toggle navigation</span>
                <span ></span>
                <span ></span>
                <span ></span>
            </button>
            <a  href="https://www.cnblogs.com/ivanlee717/p/#">ivanlee</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div  id="bs-example-navbar-collapse-1">
            <ul >
                <li ><a href="https://www.cnblogs.com/ivanlee717/p/#">Link <span >(current)</span></a></li>
                <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Link</a></li>
                <li >
                    <a href="https://www.cnblogs.com/ivanlee717/p/#"  data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span ></span></a>
                    <ul >
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Action</a></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Another action</a></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Something else here</a></li>
                        <li role="separator" ></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Separated link</a></li>
                        <li role="separator" ></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form >
                <div >
                    <input type="text"  placeholder="Search">
                </div>
                <button type="submit" >Submit</button>
            </form>
            <ul >
                <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Link</a></li>
                <li >
                    <a href="https://www.cnblogs.com/ivanlee717/p/#"  data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span ></span></a>
                    <ul >
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Action</a></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Another action</a></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Something else here</a></li>
                        <li role="separator" ></li>
                        <li><a href="https://www.cnblogs.com/ivanlee717/p/#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Panel

<div >
    <div >
        <div >Panel heading without title</div>
        <div >
            Panel content
        </div>
    </div>

    <div >
        <div >Panel heading without title</div>
        <div >
            Panel content
        </div>
    </div>

    <div >
        <div >Panel heading without title</div>
        <div >
            Panel content
        </div>
    </div>
</div>

巨幕

<div >
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a  href="https://www.cnblogs.com/ivanlee717/p/#" role="button">Learn more</a></p>
</div>

表格

模態框

<div  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div  role="document">
        <div >
            <div >
                <button type="button"  data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4  id="myModalLabel">Modal title</h4>
            </div>
            <div >

                <form>
                    <div >
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email"  id="exampleInputEmail1"
                               placeholder="Email">
                    </div>
                    <div >
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password"  id="exampleInputPassword1"
                               placeholder="Password">
                    </div>
                    <div >
                        <label for="exampleInputFile">File input</label>
                        <input type="file" id="exampleInputFile">
                        <p >Example block-level help text here.</p>
                    </div>
                    <div >
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                    <button type="submit" >Submit</button>
                </form>
            </div>
            <div >
                <button type="button"  data-dismiss="modal">Close</button>
                <button type="button" >Save changes</button>
            </div>
        </div>
    </div>
</div>

分頁

<nav aria-label="Page navigation">
  <ul >
    <li>
      <a href="https://www.cnblogs.com/ivanlee717/p/#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/#">1</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/#">2</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/#">3</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/#">4</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/#">5</a></li>
    <li>
      <a href="https://www.cnblogs.com/ivanlee717/p/#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

本文來自博客園，作者：ivanlee717，轉載請注明原文鏈接：https://www.cnblogs.com/ivanlee717/p/16331192.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498869.html

標籤：jQuery

上一篇：jQuery的操作方式以及影片效果

下一篇：JQuery 遍歷的方法

bootstrap的基礎使用