Bootstrap學習之按鈕元件（一）

本篇文章跟大家介紹一下Bootstrap中的按鈕元件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《bootstrap教學》

按鈕群組也是獨立的元件，所以可以找到對應的原始碼檔案：

Less：buttons.less

Sass:_buttons.scss

Css:Bootstrap.css    3131行~3291行

按鈕群組與下拉式選單元件一樣，需要依賴button.js插件才能正常運作。

結構方面：使用一個類別名稱為btn-group的容器，把多個按鈕放在這個容器中。

<div>
  <button>
     <span></span>
  </button>
   …
  <button>
     <span></span>
  </button>
</div>

CSS:

.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

#按鈕組四個角都是圓角，除了第一個和最後一個按鈕具有邊上的圓角外，其他的按鈕沒有圓角。

詳解：

1、預設：所有按鈕都是圓角

2、除第一個按鈕和最後一個按鈕，其他的按鈕圓角取消

3、最後一個按鈕只留右上角和右下角為圓角

源碼：

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

按鈕組工具列

#在富文本編輯器中，將按鈕組分組排列在一起，比如說複製，剪切，貼上一組，左對齊，中間對齊，右對齊和兩端對齊一組，這時需要用到bootstrap框架按鈕工具欄btn-toolbar

<div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
</div>

原理：主要是讓容器的多個分組.btn-group元素進行浮動，並且群組與群組之間保持5px的左外距

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

範例:

<div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
       </div>

#按鈕巢狀分組

很多時候，我們把下拉式選單很普通的按鈕組排列在一起，實現類似於導航選單的效果：

使用的時候只需將先前製作下拉式選單的dropdown容器的類別名稱換成btn-group，並且和普通的按鈕放在同一層：

<div>
           <button>首页</button>
           <button>产品展示</button>
           <button>案例分析</button>
           <button>联系我们</button>
           <div>
               <button>
                   关于我们<span></span>
               </button>
               <ul>
                   <li><a>公司简介</a></li>
                   <li><a>企业文化</a></li>
                   <li><a>组织结构</a></li>
                   <li><a>客服服务</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換成.btn-group- vertical即可。

<div>
            <button>首页</button>
            <button>产品展示</button>
            <button>案例分析</button>
            <button>联系我们</button>
            <div>
                <button>
                    关于我们<span></span>
                </button>
                <ul>
                    <li><a>公司简介</a></li>
                    <li><a>企业文化</a></li>
                    <li><a>组织结构</a></li>
                    <li><a>客服服务</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;
}

等分按鈕又稱為自適應分組按鈕：

整個按鈕組的寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器的寬度，例如一個按鈕組裡有五個按鈕，每個按鈕是容器寬度的20%；一個按鈕組裡有四個按鈕，每個按鈕是容器寬度的25%；

#實作方法：只需要在按鈕組.btn-group 上追加一個類別名稱.btn-group-justified

<div>
           <buttton>首页</buttton>
           <buttton>案例分析</buttton>
           <buttton>联系我们</buttton>
           <buttton>关于我们</buttton>
       </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%;
}

把.btn-group-justified模擬成表格（display：table），並且把裡面的按鈕範本模擬成表格儲存格（display：table-cell）。

注意：在製作等分按鈕群組時，盡量使用標籤來製作按鈕，因為使用button標籤元素時，使用display：table在部分瀏覽器下支援並不友好

更多程式相關知識，請造訪：程式設計入門！ ！

以上是Bootstrap學習之按鈕元件（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！