分享bootstrap學習筆記心得(組件及其屬性)，bootstrap學習筆記

分享bootstrap學習筆記心得(組件及其屬性)，bootstrap學習筆記

 Bootstrap是一種web架構，是基於HTML,CSS和JS的一種目前較為流行的前端架構。

Bootstrap包含有豐富的組件，根據提供的組件，開發人員可以更加快速、便捷地搭建自己心儀的網站。通常包括有以下常用組件：下拉式功能表、按鈕組、按鈕下拉式功能表、導航、導航條、分頁、排版、縮圖、警告對話方塊、進度條、媒體對象等。此外，bootstrap還包含有眾多jQuery外掛程式：莫泰局昂、標籤頁、捲軸、彈出框等。

有關bootstrap的下載和文檔可到bootstrap中文網：www.bootcss.com查看。

那麼使用bootstrap的優勢在哪裡？第一、利於開發響應式網站，解決不同裝置的相容性問題。第二、提高了網站的開發速度和開發效率。

參考：如何使用Bootstrap的modal組件自訂alert，confirm和modal對話方塊

Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果

本篇文章將總結常用組件及其屬性。

1.1柵格系統

1、柵格系統是一種行和列構成的一種布局。隨著，螢幕解析度的變大，最多可展示12個列。

PC端：

PAD端：

手機終端：

2、柵格參數：

col-lg-*:(螢幕>=1200px) PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小於768px）手機

3.程式碼範例：

<div class="container" style="border:1px solid red;">  <div class="row">   <div class="col-lg-3 col-sm-4 col- xs-6">    <div class="thumbnail">     <img src="img/codeguide.png">     <h2>靠譜研究所</h2>     <p>我們的口號是：靠譜、有趣、有料</p>    </div>   </div>   <div class="col-lg-3 col-sm-4 col- xs-6">    <div class="thumbnail">     <img src="img/codeguide.png">     <h2>靠譜研究所</h2>     <p>我們的口號是：靠譜、有趣、有料</p>    </div>   </div>  </div>   </div> 

1.2輔助類

1.文本顏色：

<span style="white-space:pre"> </span> <h1 class="text-primary">text-primary靠譜研究所</h1>   <h1 class="text-success">text-success靠譜研究所</h1>   <h1 class="text-warning">text-warning靠譜研究所</h1>   <h1 class="text-danger">text-danger靠譜研究所</h1>   <h1 class="text-info">text-info靠譜研究所</h1>   <h1 class="text-muted">text-muted靠譜研究所</h1> 

2、背景顏色：

<span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary靠譜研究所</h1>   <h1 class="bg-success">text-success靠譜研究所</h1>   <h1 class="bg-warning">text-warning靠譜研究所</h1>   <h1 class="bg-danger">text-danger靠譜研究所</h1>   <h1 class="bg-info">text-info靠譜研究所</h1>   <h1 class="bg-muted">text-muted靠譜研究所</h1> 

3、關閉按鈕&三角表徵圖：

<span style="white-space:pre"> </span> <!--關閉按鈕-->   <button class="close"><span>×</span></button>   <!--三角表徵圖-->   <span class="caret"></span> 

4、快速浮動：

左浮動：pull-left

右浮動：pull-right 清除浮動：clearfix

浮動會將塊元素轉換成行內元素

<div class="pull-left bg-primary">這是左邊的內容</div>  <div class="pull-right bg-danger">這是右邊的內容</div> 

  5、塊元素置中、文字置中：

<!--塊元素垂直置中-->  <style>   #div2{   position:absolute;   left:50%;   top:50%;   transform:translate(-50%,-50%);//平移   }  </style> <span style="white-space:pre"> </span><!--實現塊元素水平置中-->  <div id="div1" class="center-block text-center" style="width:500px;border:1px solid red;">塊元素水平置中</div>  <!--實現塊元素垂直置中-->  <div id="div2" class="center-block text-center" style="width:500px;border:1px solid red;">塊元素垂直置中</div> 

1.3表格

1.表格顏色：active,warning,danger,info,danger

2.滑鼠移至上方效果：table-hover

3.帶邊框表格：table-bordered

4.各行換色：table-striped

<table class="table table-striped table-hover table-bordered"><!--隔行換色、滑鼠移至上方、表格邊框-->    <thead>     <tr class="danger"><!--表格顏色-->      <th>姓名：</th>      <th>性別：</th>      <th>年齡：</th>     </tr>    </thead>    <tbody>     <tr>      <td>張三</td>      <td>男</td>      <td>23</td>     </tr>     <tr>      <td>張三</td>      <td>男</td>      <td>23</td>     </tr>     <tr>      <td>張三</td>      <td>男</td>      <td>23</td>     </tr>    </tbody>   </table> 

1.4列表：

class屬性：ul:list-group

li:list-group-item 徽章：span:badge                                                                                            

 清單項目顏色：list-group-item-(success/warning/danger)

 <ul class="list-group">  <li class="list-group-item">  靠譜研究所  <!--列表徽章--><span class="badge">10</span>  </li>  <li class="list-group-item list-group-item-success">IT研究所</li>  <li class="list-group-item list-group-item-warning">美食研究所</li>  <li class="list-group-item list-group-item-info">美妝研究所</li> </ul> 

1.5表單：

表單分組：form-group

表單項：(input/span/textarea):form-control

<style>  .container{   width:450px;   height:300px;   background:#ffffff;   position:absolute;   left:50%;   top:50%;   transform:translate(-50%,-50%);   border-radius:20px;  }  </style> <span style="white-space:pre"> </span><form role="form">    <h3 class="text-center">靠譜研究所後台管理系統</h3>    <div class="form-group has-success has-feedback">     <label for="user">使用者名稱</label>     <input type="text" id="user" placeholder="請輸入使用者名稱" class="form-control">     <span class="glyphicon glyphicon-ok form-control-feedback"></span>    </div>    <div class="form-group has-error has-feedback">     <label for="pass">密碼</label>     <input type="text" id="pass" placeholder="請輸入密碼" class="form-control">     <span class="glyphicon glyphicon-remove form-control-feedback"></span>    </div>    <div class="checkbox">     <label>      <input type="checkbox">請記住我     </label>    </div>    <button type="submit" class="btn btn-success btn-block">提交</button>   </form>