詳解Bootstrap按鈕組件

来源:http://www.cnblogs.com/jnslove/archive/2016/04/22/5422393.html
-Advertisement-
Play Games

按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。 結構方面：使用一個類名為btn-gr ...


按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件：

Less：buttons.less

Sass:_buttons.scss

Css:Bootstrap.css    3131行~3291行

按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。

結構方面：使用一個類名為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>

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

除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽，唯一要保證的是：不管使用什麼標簽，.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 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-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 class="btn-toolbar">
           <div class="btn-group">
               <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-align-left"></span>
               </button>
               <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-align-center"></span>
               </button>
               <button class="btn btn-default">
                   <span class="glyphicon glyphicon-align-right"></span>
               </button>
               <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-align-justify"></span>
               </button>
           </div>
           <div class="btn-group">
               <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-font"></span>
               </button>
               <button class="btn btn-default" type="button">
                   <span class="glyphicon glyphicon-bold"></span>
               </button>
           </div>
       </div>

按鈕嵌套分組

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

image

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

<div class="btn-group">
           <button class="btn btn-default" type="button">首頁</button>
           <button class="btn btn-default" type="button">產品展示</button>
           <button class="btn btn-default" type="button">案例分析</button>
           <button class="btn btn-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 > .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 class="btn-group-vertical">
            <button class="btn btn-default" type="button">首頁</button>
            <button class="btn btn-default" type="button">產品展示</button>
            <button class="btn btn-default" type="button">案例分析</button>
            <button class="btn btn-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;
}

 

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

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

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

<div class="btn-group btn-group-justified">
           <buttton class="btn btn-default" type="button">首頁</buttton>
           <buttton class="btn btn-default" type="button">案例分析</buttton>
           <buttton class="btn btn-default" type="button">聯繫我們</buttton>
           <buttton class="btn btn-default" type="button">關於我們</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）。

註意：在製作等分按鈕組時，儘量使用<a>標簽來製作按鈕，因為使用button標簽元素時，使用display：table在部分瀏覽器下支持並不友好


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第 3 章 表格和按鈕
    學習要點：1.表格2.按鈕 主講教師：李炎恢 本節課我們主要學習一下 Bootstrap 表格和按鈕功能，通過內置的 CSS 定義，顯示各種豐富的效果。 一．表格Bootstrap 提供了一些豐富的表格樣式供開發者使用。1.基本格式//實現基本的表格樣式<table class="table">註： ...
  • Angularjs基礎(七)
    AngularJS表單 AngularJS表單時輸入控制項的集合HTML控制項 一下HTML input 元素被稱為HTML 控制項： input 元素 select元素 button元素 textarea元素 HTML 表單 AngularjS表單上實例 <div ng-app="myApp" ng-c ...
  • 第 2 章 排版樣式
    學習要點：1.頁面排版 主講教師：李炎恢 本節課我們主要學習一下 Bootstrap 全局 CSS 樣式中的排版樣式，包括了標題、頁面主體、對齊、列表等常規內容。 一．頁面排版Bootstrap 提供了一些常規設計好的頁面排版的樣式供開發者使用。1.頁面主體Bootstrap 將全局 font-si ...
  • JavaScript實現Base64
    簡介 Base64是一種基於64個可列印字元來表示二進位數據的表示方法。由於2的6次方等於64，所以每6個比特為一個單元，對應某個可列印字元。三個位元組有24個比特，對應於4個Base64單元，即3個位元組需要用4個可列印字元來表示。它可用來作為電子郵件的傳輸編碼。在Base64中的可列印字元包括字母A ...
  • 第 1 章 Bootstrap 介紹
    學習要點：1.Bootstrap 概述2.Bootstrap 特點3.Bootstrap 結構4.創建第一個頁面5.學習的各項準備 主講教師：李炎恢 本節課我們主要瞭解一下 Boostrap 歷史、特點、用途，以及為什麼選擇 Boostrap 來開發我們的 Web 項目。 一．Bootstrap 概 ...
  • 前端學習一
    開始學習前端知識，做一些筆記來記錄下～ 之前學習都是使用的dw 現在前端開發工具既輕便功能也夠強大。 下麵記錄下常用的前端工具： 工具安裝： Sublime3安裝 官網下載地址：http://www.sublimetext.com/ 安裝插件步驟： 第一步：安裝插件的包管理器：package con ...
  • h5上傳圖片及預覽
    第一次做圖片上傳，記錄一些問題。 1，圖片的base64編碼就是可以將一副圖片數據編碼成一串字元串，使用該字元串代替圖像地址。而網頁上的每一個圖片，都是需要消耗一個http請求下載而來的，使用base64就不用請求http。 2，上傳圖片： 3，圖片轉base64（readAsDataURL方法用於 ...
  • JavaScript學習筆記 -- sort()的用法
    關於排序問題，第一次看教程/書的時候都是迷迷糊糊的感覺，看完就忘記了。等到看第二遍的時候，才發現自己其實沒有掌握該知識點，其實這些在網上都能搜到，但是只有自己親自整理才會有比較深刻的印象。前面還有許多問題沒有寫在博客上，以後視情況添加。 關於JS的sort()方法和reverse()方法是可以直接用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類