2. 程式人生 > >【Bootstrap 4】按鈕組

【Bootstrap 4】按鈕組

阿新 • • 發佈：2019-01-04

Table of Contents

 

建立按鈕組（.btn-group） 

設定按鈕組大小（.btn-group-lg/.btn-group-sm）

設定按鈕組垂直（.btn-group-vertical）

內嵌按鈕組及下拉選單

拆分按鈕下拉選單

​ 

Table of Contents

建立按鈕組（.btn-group） 

設定按鈕組大小（.btn-group-lg/.btn-group-sm）

設定按鈕組垂直（.btn-group-vertical）

內嵌按鈕組及下拉選單

拆分按鈕下拉選單

​

垂直按鈕組及下拉選單

 

建立按鈕組（.btn-group） 

設定按鈕組大小（.btn-group-lg/.btn-group-sm）

設定按鈕組垂直（.btn-group-vertical）

<div class="btn-group btn-group-lg btn-group-vertical">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <button type="button" class="btn btn-primary">Sony</button>
</div>

 

內嵌按鈕組及下拉選單

<div class="btn-group">
     <button type="button" class="btn btn-primary">Apple</button>
     <button type="button" class="btn btn-primary">Samsung</button>
     <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              Sony
          </button>
          <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Tablet</a>
               <a class="dropdown-item" href="#">SmartPhone</a>
          </div> 
     </div>
</div>

 

拆分按鈕下拉選單

 <div class="btn-group">
     <button type="button" class="btn btn-primary">Sony</button>
     <button type="button" 
      class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
         <span class="caret"></span>
     </button>
     <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Tablet</a>
         <a class="dropdown-item" href="#">Smartphone</a>
     </div>
 </div>

 

垂直按鈕組及下拉選單

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" 
         data-toggle="dropdown">
             Sony
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Tablet</a>
            <a class="dropdown-item" href="#">SmartPhone</a>
        </div>
    </div>
</div>

 

相關推薦

【Bootstrap 4】按鈕組

Table of Contents   建立按鈕組（.btn-group）  設定按鈕組大小（.btn-group-lg/.btn-group-sm） 設定按鈕組垂直（.btn-group-vertical） 內嵌按鈕組及下拉選單 拆分按鈕下拉選單 ​

【Bootstrap 4】按鈕

設定按鈕 （.btn-*） 按鈕類可用於<a>,<button>,<input>元素上  <a href="#" class="btn btn-info" role="button">連結按鈕</a> <

【Bootstrap 4】文字顏色和背景顏色

Table of Contents   文字顏色 背景顏色 文字顏色 <p class="text-muted">柔和的文字</p> <p class="text-primary">重要的文字</p> &l

【PHP系列】PHP組件詳解

命令行 分享 .cn .com function package etc quest 說我 緣起 楓爺之前做過幾年的PHP的研發，大部分都是在開源框架的引導下，編寫代碼。現在依然，本能的會去讓我使用某個PHP框架開發PHP應用，也是因為懶吧，沒有好好的去研究研究除了框架之外

【noip 2016】普及組

scrip one clu sel b+ -s 位置 ref print T1.買鉛筆 題目鏈接 1 #include<cstdio> 2 #include<algorithm> 3 #include<cstring> 4

【洛谷】2822 組合數問題（遞推）

return bottom 初始化 list main sca set 如果 lld 題目描述 組合數C?n?m??表示的是從n個物品中選出m個物品的方案數。舉個例子，從（1,2,3) 三個物品中選擇兩個物品可以有（1,2),(1,3),(2,3)這三種選擇方法。根據組合

一、.Net基礎【1.7】數組常見問題

.net ble dex float 元素 class post out blog 對於int、double、float等數組，沒有賦值的元素被初始化為0； 對於String等引用類型初始化為null。 如果程序IndexOutOfRangeException那是因為數組

【laravel5.4】DB::table的操作

3.2 數組 clas ice enc spa and echo 簡單 基於laravel5.4版本的查詢構造器的簡單幾個操作：（相對於TP3.2版本） //獲取指定多行多列，二維,,對象 【select】 $names = ‘‘;

【laravel5.4】hasOne和belongsTo的區別

關聯關系 cti col body header func 就是 pro 模型 1、從字面理解：假如A比B大，那麽A hasOne B； B belongsTo A； 2、個人總結： 3、從代碼角度： 主要是看你是在哪一個model（模型）中編寫這個關聯關系，父關

【laravel5.4】安裝predis

echo conn 所有 usr ech redis src 返回 使用 1、服務器先安裝redis-server，這是毋庸置疑的！！！ 2、服務器開啟redis-server，配置相關參數 3、laravel執行 ： $ yourPhpPath composer.pha

UOJ#52. 【UR #4】元旦激光炮(交互)

一段 height algo 成績 owb width assert using space 題意 給出三個已經排好序的數組$a, b, c$ 在$100$次詢問內找出第$k$小的元素 Sol 一種很顯然的$log^2n$的做法：首先在$a$中二分，然後再$b,c$

【php】【特殊案例】數組調用方法

UNC call pri callable array `` type ech static > As of PHP 5.4.0, you can call any callable stored in a variable. ```php <?phpcla

【USACO1.4】解題報告

前言 本章主要考的是貪心和一些比較麻煩的模擬。難度相比上一章有很明顯的提升。但是稍微想一下還是可以想出來的（第五題除外，看了一下題解的思路）。 USACO:http://train.usaco.org 1.4.2.Mixing Milk 思路： 很明顯是一道貪心基礎

【TP5.1】使用者組許可權管理（列表，新增，修改）

author：咔咔 wechat：fangkangfk   在上一篇我們處理了使用者列表的分頁，這一篇文章寫使用者組的管理，也是需要到分頁的，所以我們就花倆分鐘搞一下子   這塊的業務就很簡單的，先上控制器程式碼   建立userG

App端【待現場核查的申請】設計項列表介面上的上的【經營者資訊】按鈕調【經營者設計項】的編輯介面，並且能夠檢視選中的待現場核查的申請對應的經營者資訊

//前端的程式碼 function(button, e) //App端【經營者資訊】設計項編輯介面上的上的【經營者資訊】按鈕調【法人負責人情況】的編輯介面，並且能夠檢視選中的經營者的申請對應的法人負責人情況   { try{ var m

【LeetCode 4】Median of Two Sorted Arrays（Python)

Problem: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median

【DRF框架】路由組件

crete try cti bsp work perf csr his example 視圖組件涉及的路由補充： 　　from rest_framework.viewsets import ViewSetMixin 　　對路由進行了重新的分發，重寫了as_view() 方法

【DRF框架】認證組件

成功 color t對象 是否 query als post tex response DRF框架的認證組件 核心代碼: self.perform_authentication(request) 框架自帶模塊： from rest_framework i

【PAT乙級】1056 組合數的和

給定 N 個非 0 的個位數字，用其中任意 2 個數字都可以組合成 1 個 2 位的數字。要求所有可能組合出來的 2 位數字的和。例如給定 2、5、8，則可以組合出：25、28、52、58、82、85，它們的和為330。 輸入格式： 輸入在第一行中給出 N（1 < 

【程式設計4】插入排序+快速排序+LeetCode.148(排序連結串列)

文章目錄 一、排序連結串列 1、題目描述——LeetCode.148 2、分析 （1）一般的快排 （2）解題思路 3、實現 二、排序演算法 三