bootstrap基礎(chǔ)知識(shí)學(xué)習(xí)筆記

更新時(shí)間：2016年11月02日 15:35:52 作者：cdmamata

這篇文章主要針對(duì)bootstrap基礎(chǔ)知識(shí)為大家整理了詳細(xì)的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在此就不做 bootstrap 的介紹了，近幾年 bootstrap 越來(lái)越流行，一點(diǎn)不亞于 js 中的 jquery。

以下為 bootstrap 3.3.5 學(xué)習(xí)中記錄的東西，方便查閱，作者使用的是 jsp ，跟 html 可能有稍許不同，請(qǐng)自行參考修改

【引用文件】

【頁(yè)面引用】

路徑請(qǐng)自行規(guī)劃

<script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 
 
<!-- 未壓縮 --> 
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> 
<script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 
 
<!--[if lt IE 9]> 
<script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> 
<script src="<%=path%>/js-lib/html5/respond.min.js"></script> 
<![endif]-->

【標(biāo)準(zhǔn)模板】

<!DOCTYPE html> 
<html> 
 <head> 
  <base href="<%=basePath%>"> 
  <meta lang="zh-CN"/> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
   
  <title>bootstrap 模板</title> 
   
  <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 
 
  <!-- 未壓縮 --> 
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> 
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> 
  <script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 
 
  <!--[if lt IE 9]> 
  <script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> 
  <script src="<%=path%>/js-lib/html5/respond.min.js"></script> 
  <![endif]--> 
   
 </head> 
  
 <body> 
  hello bootstrap! 
 </body> 
</html>

【css選擇器優(yōu)先級(jí)】
依次為

style 屬性
id
class
元素標(biāo)簽

【媒體查詢與 container 源碼】
該樣式利用媒體查詢，根據(jù)頁(yè)面寬度不同，展示不同

.container { 
 padding-right: 15px; 
 padding-left: 15px; 
 margin-right: auto; 
 margin-left: auto; 
} 
@media (min-width: 768px) { 
 .container { 
 width: 750px; 
 } 
} 
@media (min-width: 992px) { 
 .container { 
 width: 970px; 
 } 
} 
@media (min-width: 1200px) { 
 .container { 
 width: 1170px; 
 } 
}

【12柵格系統(tǒng)】

.row: 一行

.col-md-*: * 為列號(hào)

.col-md-offset-*: 列向右移幾列的寬度

.col-md-push-*: 向右推（移動(dòng)）幾列

.col-md-pull-*: 向左拉（移動(dòng)）幾列

.clearfix visible-xs: 清除浮動(dòng)，只在小型屏幕生效

【基礎(chǔ)組件5種顏色】

primary(重點(diǎn)藍(lán))
success(成功綠)
info(信息藍(lán))
warning(警告橙)
danger(危險(xiǎn)紅)

【按鈕】

<button type="button" class="btn btn-primary">btn-primary</button> 
<button type="button" class="btn btn-success">btn-success</button>

按鈕大小分為以下幾個(gè)尺寸

xs: 超小
sm: 小型
缺省: 普通
lg: 大型

<button type="button" class="btn btn-primary btn-xs">btn-primary</button> 
<button type="button" class="btn btn-success btn-sm">btn-success</button> 
<button type="button" class="btn btn-success">btn-success</button> 
<button type="button" class="btn btn-success btn-lg">btn-success</button>

【進(jìn)度條】

進(jìn)度條需js進(jìn)行進(jìn)度變動(dòng)

<div class="progress progress-striped active"> 
 <div class="progress-bar" style="width: 45%;"> 
  45% Complete 
 </div> 
</div>

【下拉框】

<div class="btn-group"> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
  我的書(shū)籍 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 編程精解</a> 
  </li> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 設(shè)計(jì)模式</a> 
  </li> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 啟示錄</a> 
  </li> 
  <li class="divider"></li> 
  <li> 
   <a href="javaScript:void(0)">深入理解 bootstrap3</a> 
  </li> 
 </ul> 
</div>

【選項(xiàng)卡】

<ul class="nav nav-tabs" id="myTab"> 
 <li class="active"> 
  <a data-toggle="tab" href="#home">首頁(yè)</a> 
 </li> 
 <li class=""> 
  <a data-toggle="tab" href="#profile">個(gè)人資料</a> 
 </li> 
  
 <li class="dropdown"> 
  <!-- 點(diǎn)擊 “我的書(shū)籍”， 彈出下拉帶錯(cuò) --> 
  <a data-toggle="dropdown" href="#" class="dropdown-toggle"> 
   我的書(shū)籍 
   <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
   <li> 
    <a data-toggle="tab" href="#dropdown1">javaScript 編程精解</a> 
   </li> 
   <li> 
    <a data-toggle="tab" href="#dropdown2">javaScript 設(shè)計(jì)模式</a> 
   </li> 
    
   <li> 
    <a data-toggle="tab" href="#dropdown3">javaScript 啟示錄</a> 
   </li> 
   <li> 
    <a data-toggle="tab" href="#dropdown4">深入理解 bootstrap</a> 
   </li> 
  </ul> 
 </li> 
</ul> 
<div class="tab-content" id="myTabContent"> 
 <div id="home" class="tab-pane fade active in"> 
  <p>點(diǎn)擊 “首頁(yè)”顯示</p> 
 </div> 
 <div id="profile" class="tab-pane fade"> 
  <p>點(diǎn)擊 “個(gè)人資料”顯示</p> 
 </div> 
 <div id="dropdown1" class="tab-pane fade"> 
  <p>點(diǎn)擊 “javaScript 編程精解” 顯示</p> 
 </div> 
  
 <div id="dropdown2" class="tab-pane fade"> 
  <p>點(diǎn)擊 “javaScript 設(shè)計(jì)模式” 顯示</p> 
 </div> 
 <div id="dropdown3" class="tab-pane fade"> 
  <p>點(diǎn)擊 “javaScript 啟示錄” 顯示</p> 
 </div> 
 <div id="dropdown4" class="tab-pane fade"> 
  <p>點(diǎn)擊 “深入理解 bootstrap3” 顯示</p> 
 </div> 
</div>

data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home"
替代，效果相同，js 默認(rèn)先檢測(cè) data-target 屬性，如果沒(méi)有，再檢測(cè) href 屬性，如果還沒(méi)有，則默認(rèn)為父元素

【表格】

<table class="table table-striped table-bordered table-hover table-condensed"> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
</table>

table-striped : 斑馬線
table-bordered : 邊框
table-hover : 懸浮
table-condensed : 表格緊湊

注意，斑馬線與鼠標(biāo)懸浮樣式，顏色與白色很接近，所以可能會(huì)誤認(rèn)為 table-striped 與 table-hover 沒(méi)有生效，不起作用，

如果需要明顯顯示，我們需要重寫(xiě)樣式顏色

/** 斑馬線 **/ 
.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th { 
 background-color: #EFEFEF; 
} 
/** 懸浮 **/ 
.table-hover > tbody > tr:hover > td, 
.table-hover > tbody > tr:hover > th { 
 background-color: #DFE8F6; 
}

【元素的隱藏與顯示】

【響應(yīng)式導(dǎo)航條】

<div class="navbar navbar-default"> 
 <div class="navbar-header"> 
  <!-- 無(wú)論是寬屏還是窄屏，navbar-brand 都會(huì)顯示 --> 
  <a class="navbar-brand" href="javaScript:void(0)">Brand</a> 
  <!-- .navbar-toggle 樣式用于 toggle 收縮的內(nèi)容， 即 nav-collapse collapse元素 --> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
   <span class="sr-only">Toggle navigation</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
   
 </div> 
 <!-- 屏幕寬度小于 768 時(shí)，該DIV 默認(rèn)隱藏，(單機(jī) icon-bar 圖標(biāo)，可以再展開(kāi))， 大于768 時(shí)顯示 --> 
 <div class="collapse navbar-collapse navbar-responsive-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"> 
    <a href="javaScript:void(0)">主頁(yè)</a> 
   </li> 
   <li> 
    <a href="javaScript:void(0)">作品</a> 
   </li> 
   <li class="dropdown"> 
    <a href="javaScript:void(0)" data-toggle="dropdown" class="dropdown-toggle"> 
     下拉菜單 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="javaScript:void(0)">子菜單1</a> 
     </li> 
     <li> 
      <a href="javaScript:void(0)">子菜單2</a> 
     </li> 
    </ul> 
   </li> 
   <li> 
    <a href="javaScript:void(0)">圖書(shū)</a> 
   </li> 
  </ul> 
 </div> 
</div>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: