入門bootstrap

時間  2019-11-19
標籤 入門 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

 

role是一個html5的屬性，role="form"告訴輔助設備（如屏幕閱讀器）這個元素所扮演的角色是個表單，在button中role="button"就是告訴設備，這是個按鈕，能夠點擊。
本質上是加強語義性，加強組件的可訪問性、可用性和可交互性。css

1、排版

大標題

解析：html

一、從新設置了margin-top和margin-bottom的值，  h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
二、全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
三、固定不一樣級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。前端

副標題

解析：html5

一、行高都是1，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
二、因爲<small>內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%jquery

 

段落（正文文本）

解析：git

一、全局文本字號爲14px(font-size)。程序員

二、行高爲1.42857143（line-height），大約是20px(你們看到一串的小數或許會有疑惑，其實他是經過LESS編譯器計算出來的，固然Sass也有這樣的功能)。github

三、顏色爲深灰色（#333）；web

四、字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）,該設置都定義在<body>元素上，因爲這幾個屬性都是繼承屬性，因此Web頁面中文本（包括段落p元素）如無重置都會具備這些樣式效果。bootstrap

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
p {
 margin: 0 0 10px;
}
根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。

LESS版本：

@font-size-base: 14px; //設置字體大小
@line-height-base: 1.428571429; // 20/14 //設置行高

Sass版本：

$font-size-base: 14px !default; //設置字體大小
$line-height-base: 1.428571429 !default; // 20/14 //設置行高
1.21強調內容
類名lead
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/
.lead {
font-size: 21px;
  }
}

元素標籤:<small>、<strong>、<em>和<cite>
b,strong {
  font-weight: bold; /*文本加粗*/
}
small,.small {
  font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差很少12px*/
}
cite {
font-style: normal;
}

 加粗

font-weight:blold;

b,strong {
  font-weight: bold; /*文本加粗*/
}

斜體
font-weight：italic；
i,em{
font-weight:italic;
}
顏色強調（hover顏色加深）
.text-muted {
color: #999; //淺灰色
}
.text-primary {
color: #428bca;//藍色
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;//淺綠色
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;//淺藍色
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442; //褐色
}
a.text-danger:hover {
color: #843534;
}
文本對齊風格（考慮到各瀏覽器解析不同，尤爲是中文項目，慎用）
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

1.4列表(六種形式)

   1 普通列表

   2 有序列表

不嵌套

ul,ol {
  margin-top: 0;
  margin-bottom: 10px;
}
嵌套
ul ul,ol ul,ul ol,ol ol {
  margin-bottom: 0;
}

   3 去點列表

.list-unstyled {
padding-left: 0;
list-style: none;
}

4 內聯列表(把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示--->水平製表)

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

  5 描述列表

定義列表(調整了行間距，外邊距和字體加粗效果)
<dl><dt></dt><dd></dd></dl>
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

   6 水平描述列表

   解析：

此處添加了一個媒體查詢。也就是說，只有屏幕大於768px的時候，添加類名「.dl-horizontal」才具備水平定義列表效果。其實現主要方式：
一、將dt設置了一個左浮動，而且設置了一個寬度爲160px
二、將dd設置一個margin-left的值爲180px，達到水平的效果
三、當標題寬度超過160px時，將會顯示三個省略號

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;//顯示省略號來表明被修剪的文本
white-space: nowrap;//處理元素內空白，此處爲不換行直到遇到<br>
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}


1.5代碼(無論使用哪一種代碼風格，在代碼中碰到小於號（<）要使用硬編碼「&lt;」來替代，大於號(>)使用「&gt;」來替代。)
一、使用<code></code>來顯示單行內聯代碼
二、使用<pre></pre>來顯示多行塊代碼

能夠控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
三、使用<kbd></kbd>來顯示用戶輸入代碼
表格(Bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格)

1.6表格

在<tr>元素中添加上表對應的類名

特別提示：除了」.active」以外，其餘四個類名和」.table-hover」配合使用時，Bootstrap針對這幾種樣式也作了相應的懸浮狀態的樣式設置，因此若是須要給tr元素添加其餘顏色樣式時，在」.table-hover」表格中也要作相應的調整。

注意要實現懸浮狀態，須要在<table>標籤上加入table-hover類。

 

☑  .table：基礎表格（.table）
 

 「.table」主要有三個做用：
 

   給表格設置了margin-bottom:20px以及設置單元內距
 

  在thead底部設置了一個2px的淺灰實線
 

  每一個單元格頂部設置了一個1px的淺灰實線
 

  ☑  .table-striped：斑馬線表格(.table .table-striped)
 

CSS3的結構性選擇器「:nth-child」來實現，因此對於IE8以及其如下瀏覽器，沒有背景條紋效果。
 

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
 

  ☑  .table-bordered：帶邊框的表格(.table .table-bordered)
 

.table-bordered {
  border: 1px solid #ddd;/*整個表格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每一個單元格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表頭底部邊框*/
}
 

  ☑  .table-hover：鼠標懸停高亮的表格(.table .table-hover)
 

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}
 

  ☑  .table-condensed：緊湊型表格(.table .table-condensed)
 

就是單元格沒內距或者內距較其餘表格的內距更小。換句話說，要實現緊湊型表格只須要重置表格單元格的內距padding的值只是將單元格的內距由8px調至5px
 

  ☑  .table-responsive：響應式表格
 

當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。
 

Bootstrap提供了一個容器，而且此容器設置類名「.table-responsive」
 

在table的外一個容器
 

 
 

 2、表單
 

2.1基礎表單（3種）1fieldset {
 

min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}

label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
1基礎表單
 

.form-control定製效果。
 

一、寬度變成了100%
 

二、設置了一個淺灰色（#ccc）的邊框
 

三、具備4px的圓角
 

四、設置陰影效果，而且元素獲得焦點之時，陰影和邊框效果會有所變化
 

五、設置了placeholder的顏色爲#999
 

 
 

 2 水平表單
 

一、在<form>元素是使用類名「form-horizontal」。
 

在<form>元素上使用類名「form-horizontal」主要有如下幾個做用：
設置表單控件padding和margin值。
改變「form-group」的表現形式，相似於網格系統的「row」。
 

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
 

二、配合Bootstrap框架的網格系統。
 

 3 內聯表單
 

在<form>元素中添加類名「form-inline」
 

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
隱藏元素
form-control 控制表單按照樣式輸出

 

2.2表單控件
 

下拉選擇框select
 

multiple
 

沒有 默認一行
 

有   多行
 

文本域textarea
 

.form-control 表單控件寬度爲100%或auto。

 

複選框checkbox和單選擇按鈕radio
 

藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
 

<div class=""checkbox/radio>
    <labal></labal>
</div>
 

複選框和單選按鈕水平排列
 

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}


 

<div class="form-group">
　　<labal class=「checkBox-inline/radio-inline」>
</div>
 

按鈕
 

在Bootstrap框架中的按鈕都是採用<button>來實現。
 

表單控件大小
 

一、input-sm:讓控件比正常大小更小
二、input-lg:讓控件比正常大小更大
 

.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}

1.表單使用了類名「form-horizontal」，其中「form-group」就至關於網格系統中的「row」
<form role="form" class="form-horizontal">
    <div class=""form-group>
        <div class=""col-xs-4>
　　　　      <input>
        </div>
 

　　　　　<div class=""col-xs-4>
　　　　      <input>
        </div>
 

    </div>
</div>
 

2.經過網格系統來控制表單控件寬度
<div class="row">
 

    <div class=""col-xs-4>
　　　　  <input>
    </div>
 

    <div class=""col-xs-4>
　　　　  <input>
    </div>
 

</div>
 

表單控件狀態:焦點狀態
 

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的input控件不太同樣
 

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
 

表單控件狀態(禁用狀態)
 

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
 

input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
被禁用：<input>在使用了「form-control」的表單控件中，樣式設置了禁用表單背景色爲灰色，並且手型變成了不許輸入的形狀。若是控件中不使用類名「form-control」，禁用的控件只會有一個不許輸入的手型出來。
1.<input disabled>
2.<form role="form">
    <fieldset disabled>
        <div class="from-group">
            <input>//被禁用
            <input>//被禁用
        </div>
    </fieldset>
</form>
3.
<form role="form">
 

   <fieldset disabled>
        <div class="from-group">
            <legend>
                <input>//未被禁用
            </legend>
            <input>//被禁用
        </div>
    </fieldset>
</form>
 

表單控件狀態(驗證狀態)
 

不帶圖標:has-success hsa-error has-warning
 

<form role="form">
  <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">成功狀態</label>
      <input type="text" class="form-control" placeholder="成功狀態" >
  </div>
</form>
帶圖標：span
 

<form role="form">
  <div class="form-group has-success has-feedback">
     <label class="control-label" for="inputSuccess1">成功狀態</label>
     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
     <span class="glyphiconglyphicon-ok form-control-feedback"></span>
  </div>
</form>
 

表單提示信息
 

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
 

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}
1.提示信息在框下
在表單控制狀態下div內再加一個span
2.提示信息在框同行右邊
 

<form role="form">
    <div class="form-group">
        <label class="control-label" for="inputSuccess1">成功狀態</label>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
            </div>
            <span class="col-xs-6 help-block">你輸入的信息是正確的</span>
        </div>
    </div>
</form>
 

3、按鈕
 

基本按鈕
 

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
 

默認按鈕
 

.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
 

多標籤支持(button/a最好)
 

<button class="btn btn-default" type="button">button標籤按鈕</button>
<input type="submit" class="btn btn-default" value="input標籤按鈕"/>
<a href="##" class="btn btn-default">a標籤按鈕</a>
<span class="btn btn-default">span標籤按鈕</span>
<div class="btn btn-default">div標籤按鈕</div>
 

定製風格
 

 

 

 
 

按鈕大小
 

 

.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
 

塊狀按鈕
 

按鈕寬度充滿整個父容器（width:100%）
 

.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
 

按鈕狀態——活動狀態
 

.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
 

 

按鈕狀態——禁用狀態
 

背景顏色的透明度作了必定的處理，opcity的值從100%調整爲65%
 

在Bootstrap框架中，要禁用按鈕有兩種實現方式：
 

方法1：在標籤中添加disabled屬性 
 

「.disabled」樣式不會禁止按鈕的默認行爲，好比說提交和重置行爲等。若是想要讓這樣的禁用按鈕也能禁止按鈕的默認行爲，則須要經過JavaScript這樣的語言來處理。對於<a>標籤也存在相似問題，若是經過類名「.disable」來禁用按鈕，其連接行爲是沒法禁止。
 

方法2：在元素標籤中添加類名「disabled」
 

而在元素標籤中添加「disabled」屬性的方法是能夠禁止元素的默認行爲的。
 

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
  -webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
 

4、圖像
 

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、img-thumbnail：縮略圖片
 

設置圖片大小：
 

因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過css樣式直接修改img圖片的大小，這樣操做就不響應了）
 

<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
 

img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
 

圖標
 

這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

 

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
….
 


   任何內聯元素上應用所對應的樣式便可 

 
 


  Font Awesome： 

 


  http://www.bootcss.com/p/font-awesome 

 

 
 
5、網格系統
 
 
實現原理
 將容器平分紅12份 

 

工做原理
 

在Bootstrap框架的網格系統中帶有響應式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點（像素的分界點）是768px、992px和1220px。
 

容器(.container)。針對不一樣的瀏覽器分辨率，其寬度也不同：自動、750px、970px和1170px。
 

不能超過12行，若是超過就把超過的行放到下一行
 

 

<div class="container">
    <div class="row">
         <div class="col-md-4"></div>
         <div class="col-md-8"></div>
    </div>
</div>

 

.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;
 

.row {
  margin-right: -15px;
  margin-left: -15px;
 

}
 

 

基本用法
 

 

一、列組合
 

只涉及兩個CSS兩個特性：浮動與寬度百分比
 

二、列偏移
 

只須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移
 

使用」col-md-offset-*」對列進行向右偏移時，要保證列與偏移列的總數不超過12，否則會致列斷行顯示
 

三、列排序
 

改變列的方向，就是改變左右浮動，而且設置浮動的距離。在Bootstrap框架的網格系統中是經過添加類名「col-md-push-*」和「col-md-pull-*」 (其中星號表明移動的列組合數)。
col-md-push-* 向右移動*個距離
col-ma-pull-* 想作移動*個距離
四、列的嵌套
 

 

<div class="contianer">
 

　　<div class="row">
 

　　　　<div class="col-md-8">3
 

　　　　　　<div class="row">
 

　　　　　　　　<div class="col-md-8">1</div>
 

　　　　　　　　<div class="col-md-4">2</div>
 

　　　　　　</div>
 

　　　　</div>
 

　　　　<div class="col-md-4">4</div>
 

　　</div>
 

</div>
 

第5章 菜單、按鈕及導航
 

6、下拉菜單
 

（基本用法）
 

在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件
 

由於Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，因此在使用bootstrap.min.js以前必定要先加載jquery.min.js纔會生效果。
 

<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" >下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
 

下拉菜單（原理分析）
 

.dropdown-menu {
  position: absolute;/*設置絕對定位，相對於父元素div.dropdown*/
  top: 100%;/*讓下拉菜單項在父菜單項底部，若是父元素不設置相對定位，該元素相對於body元素*/
  left: 0;
  z-index: 1000;/*讓下拉菜單項不被其餘元素遮蓋住*/
  display: none;/*默認隱藏下拉菜單項*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 

下拉菜單（下拉分隔線）
 

添加一個空的<li>，而且給這個<li>添加類名「divider」來實現添加下拉分隔線的功能
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
 

下拉菜單（菜單標題）
 

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
 

下拉菜單（對齊方式）
 

在ul中使用，同時必定要爲.dropdown添加css樣式。
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}float:left
 

下拉菜單（菜單項狀態）
 

默認不用設置的：懸浮狀態（:hover）和焦點狀態（:focus）
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
li添加類名可實現的：當前狀態（.active）和禁用狀態（.disabled）
 

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #428bca;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
 

7、按鈕
 

（按鈕組）
 

依賴於button.js插件才能正常運行。不過咱們一樣能夠直接只調用bootstrap.js文件。由於這個文件已集成了button.js插件功能。
 

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
  outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
   margin-left: -1px;
}

 

一、默認全部按鈕都有圓角
 

  二、除第一個按鈕和最後一個按鈕（下拉按鈕除外），其餘的按鈕都取消圓角效果
 

  三、第一個按鈕只留左上角和左下角是圓角
 

  四、最後一個按鈕只留右上角和右下角是圓角
 

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
 

<div class="btn-group">
<button class="btn">
<span></span>
</button>
</div>
 

按鈕（按鈕工具欄）
 

實現原理主要是讓容器的多個分組「btn-group」元素進行浮動，而且組與組以前保持5px的左外距，注意清除浮動
只須要在「.btn-group」類名上追加對應的類名，就能夠獲得不一樣大小的按鈕組：.btn-group-lg:大按鈕組.btn-group-sm:小按鈕組 .btn-group-xs:超小按鈕組
 


<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>
源碼
 

.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}
 

按鈕（嵌套分組）
 

按鈕和下拉菜單的組合造成一個導航欄
 

按鈕（垂直分組）
 

只須要把水平分組的「btn-group」類名換成「btn-group-vertical」便可
 

和水平分組按鈕不同的是：
 

  ☑  水平分組按鈕第一個按鈕左上角和左下角具備圓角以及最後一個按鈕右上角和右下角具備圓角
 

  ☑  垂直分組按鈕第一個按鈕左上角和右上角具備圓角以及最後一個按鈕左下角和右下角具備圓角
 

 
 

按鈕（等分按鈕）
 

整個按鈕組寬度是容器的100%，而按鈕組裏面的每一個按鈕平分整個容器寬度。例如，若是你按鈕組裏面有五個按鈕，那麼每一個按鈕是20%的寬度，若是有四個按鈕，那麼每一個按鈕是25%寬度，以此類推。
 

將btn-group換成btn-group-justified
 

實現原理:把「btn-group-justified」模擬成表格（display:table），並且把裏面的按鈕模擬成表格單元格（display:table-cell）
 

儘可能使用<a>標籤元素來製做按鈕，由於使用<button>標籤元素時，使用display:table在部分瀏覽器下支持並不友好。

 

按鈕下拉菜單
 

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="##">按鈕下拉菜單項</a></li>
 <li><a href="##">按鈕下拉菜單項</a></li>
 <li><a href="##">按鈕下拉菜單項</a></li>
 <li><a href="##">按鈕下拉菜單項</a></li>
 </ul>
 </div>
 

 
 

與以前的下拉菜單惟一不一樣的是 將dropdown換成了btn-group
 

按鈕的向下向上三角形
 

 
 

有的時候咱們的下拉菜單會向上彈起,這個時候咱們的三角方向須要朝上顯示
 

實現方法：須要在「.btn-group」類上追加「dropup」類名（這也是作向上彈起下拉菜單要用的類名）。
 

向下的三角形（向上三角與向下三角的區別：其實就是改變了一個border-bottom的值）
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

按鈕中的三角形
 

.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}
向上彈起：
 

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}
 

向上彈起的下拉菜單
 

注意：若是是向上的三角形-->dropup則下拉菜單框會向上顯示
 

實現方法爲：主要將「dropdown-menu」的top值變成了auto，而把bottom值換成了100%
 

8、導航
 

（基礎樣式）
 

.nav
 

.nav-tabs
 

導航（標籤形tab導航）
 

當前選中項：active
當前不可選擇項: disabled

 

導航（膠囊形(pills)導航）
 

只須要把類名「nav-tabs」換成「nav-pills」
 

 
 

導航（垂直堆疊的導航）
 

nav-stacked
組之間有一個分隔線。其實在垂直堆疊導航也具備這樣的效果，只須要添加在導航項之間添加「<li class=」nav-divider」></li>」
 

自適應導航（使用）
 

「nav-justified」。固然他須要和「nav-tabs」或者「nav-pills」配合在一塊兒使用
 

效果:當寬度小於某個值時，垂直
 

當寬度大於時，水平自適應
 

有一個媒體查詢條件：「@media (min-width:768px){…}」表示自適應導航僅在瀏覽器視窗寬度大於768px才能水平顯示。當你的瀏覽器視窗寬度小於768px的時候，將會垂直顯示
 

自適應導航（實現原理）
 

實現原理：列表（<ul>）上設置寬度爲「100%」，而後每一個菜單項(<li>)設置了「display:table-cell」，讓列表項以模擬表格單元格的形式顯示
 

導航加下拉菜單（二級導航）
 

實現原理：只須要將li看成父容器，使用類名「dropdown」，同時在li中嵌套另外一個列表ul，使用前面介紹下拉菜單的方法就能夠
 

可是不能實現三級導航
 

麪包屑式導航
 

breadcrumb
麪包屑(Breadcrumb)通常用於導航，主要是起的做用是告訴用戶如今所處頁面的位置（當前位置）
實現原理：使用實現li與li之間的分隔符，因此這種方案在IE低版本就慘了（不支持）li+li:before
 

導航條基礎
 

在導航條(navbar)中有一個背景色、並且導航條能夠是純連接（相似導航），也能夠是表單，還有就是表單和導航一塊兒結合等多種形式。
 

基礎導航條
 

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">網站首頁</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名師介紹</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">關於咱們</a></li>
 </ul>
</div>
 

解析： 
 

navbar：設置左右padding和圓角等效果
 

navbar-default：導航條的顏色
 

navbar-nav:在導航.nav的基礎上從新調整了菜單項的浮動與內外邊距
 

爲導航條添加標題、二級菜單及狀態
 

<!--加入導航條標題-->
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕課網</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">網站首頁</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名師介紹</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">關於咱們</a></li>
 </ul>
</div>
 

解析：
 

.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
@media (min-width: 768px) {
.navbar> .container .navbar-brand,
.navbar> .container-fluid .navbar-brand {
margin-left: -15px;
}
}
 

帶表單的導航條
 

<div class="navbar navbar-default" role="navigation">
 

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
 

</div>
 

navbar-left 表單向左浮動
 

navbar-right 表單向右浮動
 

導航條中的按鈕、文本和連接
 

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕課網</a>
 　</div>
 <div class="nav navbar-nav">
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 </div>
</div>
 

換成li標籤會出現對齊不當的問題
 

須要和navbar-brand、navbar-nav配合起來使用。並且對數量也有必定的限制，通常狀況在使用一到兩個不會有問題，超過兩個就會有問題。
 

一、導航條中的按鈕navbar-btn
 

二、導航條中的文本navbar-text
 

固定導航條
 

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
實現原理：在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，而且設置navbar-fixed-top的top值爲0,而navbar-fixed-bottom的bottom值爲0
 

解析：
 

navbar-fixed-top：導航條固定在瀏覽器窗口頂部
 

navbar-fixed-bottom：導航條固定在瀏覽器窗口底部
 

三、導航條中的普通連接navbar-link
 

存在bug：
 

頁面主內容頂部和底部都被固定導航條給遮住了
 

解決：
 

1.
 

body {
  padding-top: 70px;/*有頂部固定導航條時設置*/
  padding-bottom: 70px;/*有底部固定導航條時設置*/
}
2.
 

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是內容</div>

 

.navbar-fixed-top ~ .content {
   padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
  padding-bottom: 70px;
}
 

響應式導航條
 

源碼
 

<!--代碼-->
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 　<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
 <button class="navbar-toggle" type="button" 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>
 <!-- 確保不管是寬屏仍是窄屏，navbar-brand都顯示 -->
 <a href="##" class="navbar-brand">慕課網</a>
 </div>
 <!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器裏的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">網站首頁</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名師介紹</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">關於咱們</a></li>
 </ul>
 </div>
</div>
 

反色導航條
 

navbar-inverse：其變化只是導航條的背景色和文本作了修改
 

<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
      <a href="##" class="navbar-brand">慕課網</a>
</div>
<ul class="nav navbar-nav">
      <li class="active"><a href="">首頁</a></li>
      <li><a href="">教程</a></li>
      <li><a href="">關於咱們</a></li>
</ul>
</div>
 

分頁導航（帶頁碼的分頁導航）
 

源碼
 

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>
 

在ul加類（padding大小、font-size大小和圓角大小）
 

pagination-lg 讓分頁導航變大；
 

pagination-sm 讓分頁導航變小：
 

分頁導航（翻頁分頁導航）
 

源碼：
<ul class="pager">
   <li><a href="#">&laquo;上一頁</a></li>
   <li><a href="#">下一頁&raquo;</a></li>
</ul>
在li標籤上加類名（一個進行了左浮動，一個進行了右浮動）
 

  previous：讓「上一步」按鈕居左
 

 next：讓「下一步」按鈕居右
 

disabled：分頁按鈕處於禁用狀態，但一樣不能禁止其點擊功能
 

標籤
 

源碼
 

<h3>Example heading <span class="label label-default">New</span></h3>
 

若是使用的是a標籤元素來製做的話，爲了讓其更美觀，在hover狀態去掉下劃線之類：
 

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
 

有的時候標籤內沒有內容的時候，能夠藉助CSS3的:empty僞元素將其隱藏：
 

.label:empty {
display: none;
}
 

label-default   默認標籤
label-primary  主要標籤
label-success  成功標籤
label-info        信息標籤
label-warning 警告標籤
label-danger   錯誤標籤
 

徽章
 

<a href="#">Inbox <span class="badge">42</span></a>

 

使用:empty僞元素，當沒有內容的時候隱藏：
 

.badge:empty {
display: none;
}

 

9、縮略圖
 

源碼
 

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
 

       <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
 

… 
    </div> 
</div>
解析
經過「thumbnail」樣式配合bootstrap的網格系統來實現
說明
可視區域  >768px 4個
 

可視區域  <768px 2個
源碼
 

<div class="col-xs-6 col-md-3">
 <a href="#" class="thumbnail">
 <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
 </a>
 <div class="caption">
 <h3>Bootstrap框架系列教程</h3>
 <p> Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製做作優美的網站...</p>
 <p>
 <a href="##" class="btn btn-primary">開始學習</a>
 <a href="##" class="btn btn-info">正在學習</a>
 </p>
 </div> 
 </div>
 

10、警示框
 

默認警示框
<div class="alert alert-success" role="alert">恭喜您操做成功！</div>
 

可關閉的警示
 

<div class="alert alert-success alert-dismissable" role="alert">
 <button class="close" type="button" data-dismiss="alert">&times;</button>
 恭喜您操做成功！
</div>
 

警示框的連接
 

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> 
 You successfully read 
 <a href="#" class="alert-link">this important alert message</a>
</div>
 

解析
 

alert ：設置了警示框的背景色、邊框、圓角和文字顏色
 

11、進度條
 

源碼
 

基本進度條
<div class="progress">
 <div class="progress-bar" style="width:40%">
 </div>
</div>
 

彩色進度條
 

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
 

條紋進度
 

<div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
 

動態條紋進度條
 

<div class="progress progress-striped active">
 <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
 

層疊進度條
 

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:20%"></div>
 <div class="progress-bar progress-bar-info" style="width:10%"></div>
 <div class="progress-bar progress-bar-warning" style="width:30%"></div>
 <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div> 
 

帶Label的進度
 

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div> 
</div> 
 

基本進度表實現原理
 

progress：設置進度條容器的背景色，容器高度、間距等
 

progress-bar：設置進度方向，重要的是設置了進度條的背景顏色和過渡效果：
 

動態條紋進度表實現原理
 

爲了讓條紋進度條動起來，Bootstrap框架還提供了一種動態條紋進度條。其實現原理主要經過CSS3的animation來完成。首先經過@keyframes建立了一個progress-bar-stripes的動畫，這個動畫主要作了一件事，就是改變背景圖像的位置，也就是background-position的值。由於條紋進度條是經過CSS3的線性漸變來製做的，而linear-gradient實現的正是對應背景中的背景圖片。
 

12、媒體對象
 

默認媒體對象
<div class="media">
 

//圖片
 <a class="pull-left" href="#">
 <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
 </a>
 

//描述
 <div class="media-body">
 <h4 class="media-heading">系列：十天精通CSS3</h4>
 <div>全方位深入詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
 </div>
</div>
 

媒體對象的嵌套
 

media-body的div中嵌套一個新的media
 

媒體對象列表
 

<ul class="media-list">
 

li.media
 

</ul>
 

 
 

解析
 

媒體對像的容器：常使用「media」類名錶示，用來容納媒體對象的全部內容
 

媒體對像的對象：常使用「media-object」表示，就是媒體對象中的對象，經常是圖片 pull-left」或者「pull-right」來控制媒體對象中的對象浮動方式。
 

媒體對象的主體：常使用「media-body」表示，就是媒體對像中的主體內容，能夠是任何元素，經常是圖片側邊內容
 

媒體對象的標題：常使用「media-heading」表示，就是用來描述對象的一個標題，此部分可選
 

十3、列表組
 

基礎列表組
 

<ul class="list-group">
 <li class="list-group-item">揭開CSS3的面紗</li>
 <li class="list-group-item">CSS3選擇器</li>
 <li class="list-group-item">CSS3邊框</li>
 <li class="list-group-item">CSS3背景</li>
 <li class="list-group-item">CSS3文本</li>
</ul>
 

帶徽章的列表組
 

<ul class="list-group">
 <li class="list-group-item">
 <span class="badge">13</span>揭開CSS3的面
 </li>
 

</ul>
 

帶連接的列表組
 

1.只有文本的地方可以點擊，若是要實現都能點擊，則 li.a.display:block
 

<ul class="list-group">
 <li class="list-group-item">
 <a href="##">揭開CSS3的面</a>
 </li>
 

</ul>
 

2.區域都能點擊，可是要對a標籤進行處理去文本下劃線，增長懸浮效果等
 

<div class="list-group">
    <a href="##" class="list-group-item">圖解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩轉Bootstrap</a>
</div>
 

自定義列表組
 

<div class="list-group">
 <a href="##" class="list-group-item">
 <h4 class="list-group-item-heading">圖解CSS3</h4>
 <p class="list-group-item-text">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性...</p>
 </a>
 

</div>
 

組合列表項的狀態
 

 li.active
 

多彩列表組
 

li.list-group-item-success
 

 
 

解析
 

list-group：列表組容器，經常使用的是ul元素，固然也能夠是ol或者div元素
 

list-group-item：列表項，經常使用的是li元素，固然也能夠是div元
 

帶徽章的列表項
 

實現原理：
 

實現效果：給徽章設置了一個右浮動，固然若是有兩個徽章同時在一個列表項中出現時，還設置了他們之間的距離
 

十4、面板
 

基礎面版
 

<div class="panel panel-default">
 <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div>
</div>
 

帶有頭和尾的面板
 

<div class="panel panel-default">
 <div class="panel-heading">圖解CSS3</div>
 <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性
 </div>
 <div class="panel-footer">做者：大漠</div>
</div>
 

彩色面版
 

<div class="panel panel-default"></div>
 

面板中嵌套表格
 

div.panel-body.<table class="table table-bordered">
 

優化代碼：
 

在實際應用運中，你或許但願表格和麪板邊緣不須要有任何的間距。但因爲panel-body設置了一個padding：15px的值，爲了實現這樣的效果。咱們在實際使用的時候須要把table提取到panel-body外面：
 

十5、導入JavaScript插件（https://github.com/twbs/bootstrap）。
 

由於在Bootstrap中的JavaScript插件都是依賴於jQuery庫，因此不管是單獨導入還一次性導入以前必須先導入jQuery庫。
 

<!—導入jQuery版本庫，由於Bootstrap的JavaScript插件依賴於jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性導入全部Bootstrap的JavaScript插件（壓縮版本） -->
<script src="js/bootstrap.min.js"></script>
單獨導入
 

  ☑ 動畫過渡（Transitions）:對應的插件文件「transition.js」
 

  ☑ 模態彈窗（Modal）:對應的插件文件「modal.js」
 

  ☑ 下拉菜單（Dropdown）：對應的插件文件「dropdown.js」
 

  ☑ 滾動偵測（Scrollspy）：對應的插件文件「scrollspy.js」
 

  ☑ 選項卡（Tab）：對應的插件文件「tab.js」
 

  ☑ 提示框（Tooltips）：對應的插件文件「tooltop.js」
 

  ☑ 彈出框（Popover）：對應的插件文件「popover.js」
 

  ☑ 警告框（Alert）：對應的插件文件「alert.js」
 

  ☑ 按鈕（Buttons）：對應的插件文件「button.js」
 

  ☑ 摺疊/手風琴（Collapse）：對應的插件文件「collapse.js」
 

  ☑ 圖片輪播Carousel：對應的插件文件「carousel.js」
 

  ☑ 自動定位浮標Affix：對應的插件文件「affix.js」
 

動畫過渡（Transitions）
 

 ☑ 模態彈出窗（Modal）的滑動和漸變效果；
 

  ☑ 選項卡（Tab）的漸變效果；
 

  ☑ 警告框（Alert）的漸變效果；
 

  ☑ 圖片輪播（Carousel）的滑動效果。
 

模態彈出框（Modals）
 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 

//頭部
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模態彈出窗標題</h4>
 </div>
 

//主體
 <div class="modal-body">
 <p>模態彈出窗主體內容</p>
 </div>
 

//尾部
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
 

模態彈出框--觸發模態彈出窗2種方法
 

不過建議仍是使用統一使用data-target的方式來觸發。
 

聲明式觸發方法：
 

<!-- 觸發模態彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button>
<!-- 模態彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>
模態彈出窗聲明，只須要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法通常依賴於這些自定義的data-xxx 屬性。好比data-toggle="" 或者 data-dismiss=""）
 

一、data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；
 

二、data-target能夠設置爲CSS的選擇符，也能夠設置爲模態彈出窗的ID值，通常狀況設置爲模態彈出窗的ID值，由於ID值是惟一的值。

 

 
 

 
 

觸發模態彈出窗也能夠是一個連接<a>元素，那麼可使用連接元素自帶的href屬性替代data-target屬性
 

<!-- 觸發模態彈出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>
<!-- 模態彈出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>
 

模態彈出框--爲彈出框增長過分動畫效果
 

最外div.fade
參數說明
 

 

 
 

模態彈出框--模態彈出窗的使用（JavaScript觸發）
 

 

參數設置：
 

 
 

 
  
  
 
   參數 
   使用方法 
   描述 
  
 
  
 
   toggle 
   $(「#mymodal」).modal(「toggle」) 
   觸發時，反轉模態彈出窗的狀態。若是模態彈出窗是顯示的，則關閉；反之，若是模態彈出窗是關閉的，則顯示 
  
 
  
 
   show 
   $(「#mymodal」).modal(「show」) 
   觸發時，顯示模態彈出窗 
  
 
  
 
   hide 
   $(「#mymodal」).modal(「hide」) 
   觸發時，關閉模態彈出窗 
  
 
  

 

 
 

事件設置：
 

 
  
  
 
   事件類型 
   描述 
  
 
  
 
   show.bs.modal 
   在show方法調用時當即觸發（還沒有顯示以前）；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget屬性 
  
 
  
 
   shown.bs.modal 
   該事件在模態彈出窗徹底顯示給用戶以後（而且等CSS動畫完成以後）觸發；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget事件 
  
 
  
 
   hide.bs.modal 
   在hide方法調用時（但還未關閉隱藏）當即觸發 
  
 
  
 
   hidden.bs.modal 
   該事件在模態彈出窗徹底隱藏以後（而且CSS動畫漂完成以後）觸發 
  
 
  



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程