Bootstrap學習筆記上（帶源碼）

時間  2019-11-09
標籤 bootstrap 學習 筆記 源碼 欄目 Bootstarp 简体版
原文   原文鏈接

作好筆記方便往後查閱o(╯□╰)ojavascript

bootstrap簡介：css

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

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

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

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


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

排版

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

         ②<small>標籤來製做副標題
ios

強調內容: class="lead" 另外還有元素標籤:<small>、<strong>、<em>、<cite>、<b>、<em>、<i>給文本作突出樣式處理。
css3

.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：兩端對齊web

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

列表：bootstrap

①無序列表、有序列表<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>&lt;code&gt;</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.表單控件狀態(驗證狀態):一、.has-warning:警告狀態（黃色）  二、.has-error：錯誤狀態（紅色） 三、.has-success：成功狀態（綠色）

：須要類名has-feedback    +     <span class="glyphicon glyphicon-remove form-control-feedback"></span>

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;
}
示例+源碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程