Bootstrap學習筆記上（帶源碼）

本文轉載自查看原文 2016-08-11 23:25 3509 學習筆記/ 前端/ bootstrap/ FE

做好筆記方便日后查閱o(╯□╰)o

bootstrap簡介：

☑ 簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。

☑ 基於html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔。

☑ 自定義JQuery插件，完整的類庫，基於Less等。

bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標簽，引入下面代碼文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>


使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

兼容IE6、7、8的標簽

排版

標題：①.h1=36px，h2=30px，h3=24px，h4=18px，h5=14px、h6=12px

②標簽來制作副標題

強調內容: class="lead" 另外還有元素標簽:、、、<cite>、、、給文本做突出樣式處理。

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/
.lead {
font-size: 21px;
  }
}

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

small,.small {
  font-size: 85%; /*標准字體的85%,也就是14px * 0.85px，差不多12px*/
}

cite {
font-style: normal;
}

源碼

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

強調相關的類（顏色）

文本對齊風格：.text-left：左對齊 .text-center：居中對齊 .text-right：右對齊 .text-justify：兩端對齊

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

源碼

列表：

①無序列表、有序列表<ul>、<ol>

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

源碼

②去點列表類名".list-unstyled"

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

源碼

③內聯列表類名“.list-inline” ：把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示

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

源碼

④定義列表 <dl><dt><dd>

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

源碼

⑤水平定義列表類名“.dl-horizontal”：針對<dt><dd>

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

源碼

代碼：

1：①、使用<code></code>來顯示單行內聯代碼：<code><code></code>

②、使用<pre></pre>來顯示多行塊代碼

③、使用<kbd></kbd>來顯示用戶輸入代碼：比如<kbd>ctrl+x</kbd>

2：類名“.pre-scrollable”：高度超出340px，就會在Y軸出現滾動條。

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

源碼

表格：

表格行的類：<tr>元素中添加上表對應的類名，就能達到你自己需要的效果

1.基礎表格類名“.table”:后面各種表格都要加上這個類名。

2.斑馬線表格類名“table-striped”

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

View Code

3.帶邊框的表格類名“.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;/*表頭底部邊框*/
}

源碼

4.鼠標懸浮高亮的表格類名“table-hover”

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

源碼

5.緊湊型表格類名“table-condensed”

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

源碼

6.響應式表格類名“.table-responsive”:當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。

Bootstrap提供了一個容器，並且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置於這個容器當中，這樣表格也就具有響應式效果

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

示例

表單

1.基礎表單：對於基礎表單，Bootstrap並未對其做太多的定制性效果設計，僅僅對表單內的fieldset、legend、label標簽進行了定制。

fieldset {
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;
}

源碼

2.水平表單類名“form-horizontal”

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

源碼

3.內聯表單類名“form-inline”

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="exampleInputEmail2">郵箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址">
</div>
<div class="form-group">
  <label class="sr-only" for="exampleInputPassword2">密碼</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼">
</div>
<div class="checkbox">
<label>
   <input type="checkbox">記住密碼
</label>
</div>
<button type="submit" class="btnbtn-default">進入郵箱</button>
</form>


<--  .sr-only:給殘障人員用的 -->
<-- .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}  -->

示例

表單控件

1.輸入框input: 為了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”，下面各個表單控件都能加。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單控件——輸入框input</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
    <input type="text" class="form-control" placeholder="Enter Username">
  </div>
</form>   
</body>
</html>

示例

type類型：text button checkbox date datetime datetime-local img file hidden month number password radio range reset search submit tel time url week hidden

2.下拉選擇框select：多行選擇設置multiple屬性的值為multiple

<form>  
  <div class="form-group">
      <select multiple class="form-control">  //如果是下拉框就不要加multiple
          <option>踢足球</option>
          <option>游泳</option>
          <option>慢跑</option>
          <option>跳舞</option>
      </select>
  </div>
</form>

示例

3.文本域textarea：添加了類名“form-control”類名，則無需設置cols屬性。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

示例

4.復選框checkbox和單選擇按鈕radio：水平排列加類名“checkbox-inline”||類名“radio-inline”

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單控件——表單控件大小</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      記住密碼
    </label>
  </div>
  <div class="radio">           //如果要水平class=“radio-inline”
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜歡
    </label>
  </div>
    <div class="radio">         //如果要水平class=“radio-inline”
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜歡
    </label>
  </div>

  
</form>     
</body>
</html>

示例

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

源碼

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

水平排列源碼

5.控件大小：類名input-sm:讓控件比正常大小更小；類名input-lg:讓控件比正常大小更大；寬度配合Bootstrap的網格系統

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

源碼

6.表單控件狀態（焦點狀態）：類名form-control

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

源碼

7.表單控件狀態(禁用狀態)：form-control別忘記加①在需要禁用的表單控件上加上“disabled”；②fieldset設置了disabled屬性，整個域都將處於被禁用狀態。

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

源碼

8.表單控件狀態(驗證狀態):1、.has-warning:警告狀態（黃色） 2、.has-error：錯誤狀態（紅色） 3、.has-success：成功狀態（綠色）

：需要類名has-feedback + 

9.表單提示信息："help-block"

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

源碼

按鈕

建議使用button或a標簽來制作按鈕

1.基本按鈕：類名“btn”

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

源碼

2.默認按鈕: 類名“btn” + 類名“btn-default”

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

源碼

3.定制風格：

4.按鈕大小: .btn-lg:大型按鈕 .btn-sm:小型按鈕 .btn-cs:超小型按鈕

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

源碼

5.塊狀按鈕: 類名“btn-block”

6.禁用狀態: 使用disabled類或disabled屬性

圖像 1.img-responsive：響應式圖片，主要針對於響應式設計 2.img-rounded：圓角圖片 3.img-circle：圓形圖片 4.img-thumbnail：縮略圖片

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%;
}

源碼

圖標

http://getbootstrap.com/components/#glyphicons :查看全部圖標

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

<!--使用-->
.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";
}

源碼

網格系統

1.列組合

<768px: .col-xs-     >=768: .col-sm-     >=992: .col-md-     >=1200: .col-lg-

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

/*確保所有列左浮動*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
 }


/*定義每個列組合的寬度（使用的百分比）*/
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }

源碼

2.列偏移：類名“col-md-offset-”

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>
</div>
</div>

例子

  .col-md-offset-12 {
   margin-left: 100%;
}
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }

源碼

3.列排序：交換位置 “col-md-push-*”(右)和“col-md-pull-*”(左)

.col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }

  .col-md-pull-4 {
    right: 33.33333333%;
  }

  .col-md-pull-3 {
    right: 25%;
  }

  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: 0;
  }

  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: 0;
  }

源碼

4.列的嵌套：

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的里面嵌套了一個網格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
</div>

例子

菜單、按鈕

小提示：1.90以上版本的jquery才可以和bootstrap.js配合使用

下拉菜單

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></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);
}

//通過點擊調用js添加或移除js
.open > .dropdown-menu {
  display: block;
}

源碼分析

下拉分割線：添加一個空的<li>，並且給這個<li>添加類名“divider”

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

源碼

下拉菜單標題： class="dropdown-header"

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
…
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
…
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
</ul>
</div>

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

示例

下拉菜單（對齊方式）：在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜單
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>




源碼
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
同時一定要為.dropdown添加float:leftcss樣式。
.dropdown{
  float: left;
}

示例+源碼

下拉菜單（菜單項狀態）：class="active"、class="disabled"

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜單
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div>



//源碼
.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);
}

示例+源碼

按鈕

按鈕組 類名btn-group

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>





源碼
.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;
}



  1、默認所有按鈕都有圓角
  2、除第一個按鈕和最后一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果
  3、第一個按鈕只留左上角和左下角是圓角
  4、最后一個按鈕只留右上角和右下角是圓角
對應的源碼如下：
.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;
}

示例+源碼

按鈕（按鈕工具欄） 類名btn-toolbar

.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-toolbar”上清除浮動。
.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
  clear: both;
}

示例 + 源碼

按鈕（嵌套分組）： “btn-group”和普通的按鈕放在同一級。

<div class="btn-group">
<button class="btnbtn-default" type="button">首頁</button>
<button class="btnbtn-default" type="button">產品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯系我們</button>
<div class="btn-group">
   <button class="btnbtn-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>
</div>

源碼
.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;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

示例 + 源碼

按鈕（垂直分組）：類名“btn-group-vertical”

<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首頁</button>
<button class="btnbtn-default" type="button">產品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯系我們</button>
<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>
</div>




源碼
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;

示例 + 源碼

按鈕（等分按鈕） “btn-group-justified”類名

特別聲明：在制作等分按鈕組時，請盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持並不友好。
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
  <a class="btnbtn-default" href="#">首頁</a>
  <a class="btnbtn-default" href="#">產品展示</a>
  <a class="btnbtn-default" href="#">案例分析</a>
  <a class="btnbtn-default" href="#">聯系我們</a>
</div>
</div>




源碼
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}

示例+源碼

按鈕下拉菜單

按鈕下拉菜單從外觀上看和下拉菜單效果基本上是一樣的；簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單
<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>

源碼：
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}

示例+源碼

按鈕的向下向上三角形 類名.dropup向上

<div class="btn-group dropup">
  <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>


解析
按鈕的向下三角形，我們是通過在<button>標簽中添加一個“<span>”標簽元素，並且命名為“caret”:
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>

源碼：
.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;
}

在按鈕中的三角形“caret”做了一定的樣式處理：
.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;
}

向上三角與向下三角的區別：其實就是改變了一個border-bottom的值。
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

示例+源碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap~學習筆記索引 BootStrap學習筆記 AngularJs學習筆記--bootstrap Bootstrap學習筆記(一) 排版 bootstrap源碼學習與示例：bootstrap-alert bootstrap源碼學習與示例：bootstrap-modal bootstrap源碼學習與示例：bootstrap-collapse bootstrap源碼學習與示例：bootstrap-carousel bootstrap源碼學習與示例：bootstrap-popover flask-bootstrap學習筆記