bootstrap簡介
http://v3.bootcss.com/
Bootstrap優點：
下載：
Bootstrap引入
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <script type="application/javascript" src="dist/jquery-3.1.1.js"></script> <script type="application/javascript" src="dist/js/bootstrap.min.js">
CSS柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap-demo</title> <style> .row div{ background-color: #2e6da4; border: 1px solid #f5e79e; color:#fff0f0; } .row{ margin-top: 20px; border: 1px solid red; } </style> </head> <body> <!---------------------------- 柵格系統的結構------------>
<h4 style="text-align: center">柵格系統的結構</h4> <div class="container"> <!--在小型pc正常顯示--> <div class="row"> <div class="col-md-2">md-2</div> <div class="col-md-4">md-4</div> <div class="col-md-6">md-6</div> </div> <!--在小型pc66分,sm上48分--> <div class="row"> <div class="col-md-6 col-sm-4">md6-sm4</div> <div class="col-md-6 col-sm-8">md6-sm8</div> </div> <div class="row"> <div class="col-sm-2">md-2</div> <div class="col-sm-4">md-4</div> <div class="col-sm-6">md-6</div> </div> <!-----------------------------柵格系統的使用------------> <h4 style="text-align: center">柵格系統的使用</h4>
<h5> 1 列偏移offset</h5> <div class="row"> <div class="col-md-2">col-md-2</div> <div class="col-md-4 col-md-offset-4">col-md-offset-4</div> </div> <h5> 2 列嵌套 </h5> <div class="row"> <div class="col-md-9"> 111 <div class="row"> <div class="col-md-3">222</div> <div class="col-md-9">222</div> </div> </div> </div> <h5>4 列排序</h5> <div class="row"> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> </body> </html>
四 表格
表格樣式
<div class="container"> <table class="table table-striped"> <!--關於表格存儲內容的描述或總結。--> <caption>條紋表格布局</caption> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>salary</th> </tr> </thead> <tbody> <tr> <td>Bob</td> <td>23</td> <td>3000</td> </tr> <tr class="danger"> <td>steven</td> <td>34</td> <td>5000</td> </tr> <tr class="success"> <td>alvin</td> <td>33</td> <td>7000</td> </tr> <tr class="warning"> <td>alvin</td> <td>33</td> <td>7000</td> </tr> </tbody> </table> </div>
響應式表格
通過把任意的 .table 包在 .table-responsive class 內可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，看不到任何的差別。
表單
Bootstrap 提供了下列類型的表單布局：
- 垂直表單（默認）
- 內聯表單
- 水平表單
垂直表單
創建基本表單的步驟：
- 向父 <form> 元素添加 role="form"。
- 把標簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
<form role="form"> <div class="form-group"> <label for="username">用戶名</label> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> </div> <div class="form-group"> <label for="password">密碼</label> <input type="password" class="form-control" id="password" placeholder="請輸入密碼"> </div> <div class="checkbox"> <label> <input type="checkbox">記住密碼 </label> </div> <button type="submit" class="btn">提交</button> </form>
<div class="row"> <div class="col-md-3 col-md-offset-5"> <form role="form"> <div class="form-group"> <label for="username">用戶名</label> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> </div> <div class="form-group"> <label for="password">密碼</label> <input type="password" class="form-control" id="password" placeholder="請輸入密碼"> </div> <div class="checkbox"> <label> <input type="checkbox">記住密碼 </label> </div> <button type="submit" class="btn">提交</button> </form> </div> </div>
內聯表單
如果需要創建一個表單，它的所有元素是內聯的，向左對齊的，標簽是並排的，請向 <form> 標簽添加 class .form-inline。
- 默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您需要在表單控件上設置一個寬度。
- 使用 class .sr-only，您可以隱藏內聯表單的標簽。
水平表單
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平布局的表單，請按下面的幾個步驟進行：
- 向父 <form> 元素添加 class .form-horizontal。
- 把標簽和控件放在一個帶有 class .form-group 的 <div> 中。
- 向標簽添加 class .control-label。
<div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">用戶名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> </div> </div> <div class="form-group"> <label for="pwd" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="text" class="form-control" id="pwd" placeholder="請輸入用戶名"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">記住密碼 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn">登錄</button> </div> </div> </form> </div>
表單控件狀態
輸入框焦點：當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
禁用的輸入框 input：如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
禁用的字段集 fieldset：對<添加 disabled 屬性來禁用內的所有控件。
驗證狀態：Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態
<div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">normal</label> <div class="col-sm-10"> <input class="form-control" type="text" placeholder="該輸入框可以獲得焦點..."> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">禁用</label> <div class="col-sm-10"> <input class="form-control" id="inputPassword" type="text" placeholder="該輸入框禁止輸入..." disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止選擇</option> </select> </div> </div> </fieldset> <div class="form-group has-success"> <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</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">輸入警告</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">輸入錯誤</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> </div> </div> </form> </div>
表單控件大小
您可以分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度
<div class="container"> <form role="form"> <div class="form-group"> <!--have a try: input-sm--> <input class="form-control input-lg" type="text" placeholder=".input-lg"> </div> <div class="form-group"> <!--have a try: input-sm--> <select class="form-control input-lg"> <option value="">默認選擇</option> </select> </div> <div class="row"> <div class="col-lg-6"> <input type="text" class="form-control"> </div> <div class="col-lg-6"> <input type="text" class="form-control"> </div> </div> </form> </div>
表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。為了添加一個占用整個寬度的內容塊，請在 <input> 后使用 .help-block。
<div class="container"> <form role="form"> <span>幫助文本實例</span> <input class="form-control" type="text" placeholder=""> <span class="help-block">幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例 幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例 幫助文本實例幫助文本實例幫助文本實例</span> </form> </div>
按鈕
任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式
<div class="container"> <!-- 標准的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <!-- 表示應謹慎采取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button> <!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button> <!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 --> <button type="button" class="btn btn-link">鏈接按鈕</button> <hr> <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button> <button type="button" class="btn btn-default btn-sm">小的按鈕</button> <hr> <p> <button type="button" class="btn btn-default btn-lg ">默認按鈕</button> <button type="button" class="btn btn-default btn-lg active">激活按鈕</button> </p> <p> <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button> <button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button> </p> <hr> <p> <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button> <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button> </p> </div>
七 圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：添加 border-radius:6px 來獲得圖片圓角。
- .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
<img src="mienv.png" class="img-rounded">
另外，通過在 <img> 標簽添加 .img-responsive 類來讓圖片支持響應式設計。.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上
<img src="meinv.jpg" class="img-responsive">