當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap4知识(1)

發布時間：2024/3/24 编程问答 63 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap4知识(1) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.Bootstrap簡介

Bootstrap 是全球最受歡迎的前端組件庫，用于開發響應式布局、移動設備優先的 WEB 項目

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開發的開源工具集。利

用我們提供的 Sass 變量和大量 mixin、響應式柵格系統、可擴展的預制組件、基于 jQuery 的強大

的插件系統，能夠快速為你的想法開發出原型或者構建整個 app?

Sass--CSS擴展語言

Mixin--包含一段合法Sass代碼，類似于C語言的宏定義。調用Mixin時，解釋器會將Mixin擴展成它

所包含的完整的Sass代碼，因此可以有效地減少代碼重復，從而寫出更加干凈的代碼。CSS不支

持Mixin，因此重復和類似的代碼必須挨個書寫

2.Bootstrap4?安裝使用

我們可以通過以下兩種方式來安裝 Bootstrap4

1.使用 Bootstrap 4 CDN

CDN的全稱是Content Delivery Network，即內容分發網絡.

國內推薦使用 Staticfile CDN 上的庫：

href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

?<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

?

注意：popper.min.js 用于設置彈窗、提示、下拉菜單，目前 bootstrap.bundle.min.js 已經包含了?popper.min.js

此外，你還可以使用以下的 CDN 服務：

國內推薦使用 :?Staticfile CDN

國際推薦使用：cdnjs - The #1 free and open source CDN built to make life easier for developers

2.從官網?getbootstrap.com?下載 Bootstrap 4

你可以去官網?Bootstrap · The most popular HTML, CSS, and JS library in the world.?下載?

Bootstrap4 資源庫

此外你還可以通過包的管理工具 npm、 gem、 composer 等來安裝：

npm install bootstrap@4.0.0-beta.2

gem 'bootstrap', '~> 4.0.0.beta2'

composer require twbs/bootstrap:4.0.0-beta.2

3.創建第一個 Bootstrap 4 頁面

1.添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明

HTML5 doctype 在文檔頭部聲明，并設置對應編碼:

<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> </html>

2.移動設備優先

為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪制和觸屏縮放，需要在網頁的 head

之中添加 viewport meta 標簽，如下所示：

width=device-width?表示寬度是設備屏幕的寬度

initial-scale=1?表示初始的縮放比例

shrink-to-fit=no 自動適應手機屏幕的寬度

3.容器類

Bootstrap 4 需要一個容器元素來包裹網站的內容

我們可以使用以下兩個容器類：

.container 類用于固定寬度并支持響應式布局的容器

.container-fluid 類用于 100% 寬度，占據全部視口（viewport）的容器

?4.Bootstrap4 網格系統

ootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的

增加，系統會自動分為最多 12 列

我們也可以根據自己的需要，定義列數：

?Bootstrap 4 的網格系統是響應式的，列會根據屏幕大小自動重新排列

網格類

Bootstrap 4 網格系統有以下 5 個類:

1、.col-? ?針對所有設備

2、.col-sm-? ?平板-屏幕寬度等于或大于 576px

3、.col-md-? ?桌面顯示器---屏幕寬度等于或大于 768px

4、.col-lg-? ?大桌面顯示器---屏幕寬度等于或大于 992px

5、.col-xl-? ?大桌面顯示器---屏幕寬度等于或大于 992px

網格系統規則

Bootstrap4 網格系統規則:

1.網格每一行需要放在設置了.container（固定寬度）或?.container-fluid?（全屏寬度）類的容器

中，這樣就可以自動設置一些外邊距和內邊距

2.使用行來創建水平列組

3、內容需要放置在列中，并且只有列可以是行的直接子節點

4、預定義的類如?.row?和?.col-sm-4?可用于快速制作網格布局

5、列通過填充創建列內容之間的間隙。這個間隙是通過?.rows?類上的負邊距設置第一行和最后一列的偏移

6、網格列是通過跨越指定的 12 個列來創建。例如，設置三個相等的列，需要使用三個?.col-sm-4?來設置

7、Bootstrap 3 和 Bootstrap 4 最大的區別在于 Bootstrap 4 現在使用 flexbox（彈性盒子）而不是浮動。 Flexbox 的一大優勢是，沒有指定寬度的網格列將自動設置為等寬與等高列?

下表總結了 Bootstrap 網格系統如何在不同設備上工作的：

?5.Bootstrap 4 網格的基本結構

1.以下代碼為 Bootstrap 4 網格的基本結構:

<div class="row"><div class="col-*-*"></div></div><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div><div class="col-*-*"></div> </div>  <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div></div>

第一個例子：創建一行(<div class="row">)。然后，添加需要的列(?.col-*-*?類中設置)。第一個星

號 (*) 表示響應的設備: sm, md, lg 或 xl, 第二個星號 (*) 表示一個數字, 同一行的數字相加為 12

第二個例子: 不在每個?col?上添加數字，讓 bootstrap 自動處理布局，同一行的每個列寬度相等：?

兩個?"col"?，每個就為 50% 的寬度。三個?"col"每個就為 33.33% 的寬度，四個?"col"每個就為 25%

的寬度，以此類推。同樣，你可以使用?.col-sm|md|lg|xl?來設置列的響應規則

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>實例</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container-fluid"><h1>相等寬度的列，Bootstrap 自動布局</h1><p>創建三個相等寬度的列! 嘗試在 class="row" 的 div 中添加新的 class="col" div，會顯示四個等寬的列。</p><div class="row"><div class="col" style="background-color: blue;">.col</div><div class="col" style="background-color:blueviolet;">.col</div><div class="col" style="background-color:cadetblue;">.col</div></div><br><h1>等寬響應式列</h1><p>重置瀏覽器大小查效果。</p><p> 在移動設備上，即屏幕寬度小于 576px 時，四個列將會上下堆疊排版</p><div class="row"><div class="col-sm-3" style="background-color: blue;">.col-sm-3</div><div class="col-sm-3" style="background-color:blueviolet;">.col-sm-3</div><div class="col-sm-3" style="background-color:cadetblue;">.col-sm-3</div><div class="col-sm-3" style="background-color:brown;">.col-sm-3</div></div></div></body> </html>

2.偏移列

偏移列通過?offset-*-*?類來設置。第一個星號( * )可以是?sm、md、lg、xl，表示屏幕設備類型，第二個星號( * )可以是?1?到?11?的數字。

為了在大屏幕顯示器上使用偏移，請使用?.offset-md-*?類。這些類會把一個列的左外邊距（margin）增加?*?列，其中?*?范圍是從?1?到?11。

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>實例</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container-fluid"><h1>偏移列</h1><p>.offset-md-4 是把.col-md-4 往右移了四列格</p><div class="container-fluid"><div class="row"><div class="col-md-4 bg-success">.ccol-md-4</div><div class="col-md-4 offset-md-4 bg-warning">.col-md-4 offset-md-4</div></div><div class="row"><div class="col-md-3 offset-md-3 bg-success">.col-md-3 offset-md-3</div><div class="col-md-3 offset-md-3 bg-warning">.col-md-3 offset-md-3</div></div><div class="row"><div class="col-md-6 offset-md-3 bg-success">.col-md-3 offset-md-6</div></div></div></div></body> </html>

6.Bootstrap4 文字排版

Bootstrap 4 默認設置

Bootstrap 4 默認的?font-size?為 16px,?line-height?為 1.5。

默認的?font-family?為 "Helvetica Neue", Helvetica, Arial, sans-serif

此外，所有的?<p>?元素?margin-top: 0?、?margin-bottom: 1rem?(16px)

<h1> - <h6>

Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式

Display 標題類

Bootstrap 還提供了四個 Display 類來控制標題的樣式: .display-1, .display-2, .display-3, .display-4

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>Display標題</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container"><h1>Display標題</h1><p>Display標題可以輸出更大更粗的字體樣式</p><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1></div></body> </html>

<small>

在 Bootstrap 4 中 HTML?<small>?元素用于創建字號更小的顏色更淺的文本

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>small</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container"><h1>更小文本標題</h1><p>small元素用于字號更小的顏色更淺的文本</p><h1>h1標題 <small>副標題</small></h1><h2>h2標題 <small>副標題</small></h2><h3>h3標題 <small>副標題</small></h3><h4>h4標題 <small>副標題</small></h4><h5>h5標題 <small>副標題</small></h5><h6>h6標題 <small>副標題</small></h6></div></body> </html>

<mark>

Bootstrap 4 定義?<mark>?為黃色背景及有一定的內邊距

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>mark</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container"><h1>高亮文本題</h1><p>h1標題<mark>副標題</mark></p></div></body> </html>

<abbr>

Bootstrap 4 定義 HTML?<abbr>?元素的樣式為顯示在文本底部的一條虛線邊框.

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>abbr</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container"></div><h1>abbr</h1><p>abbr元素的樣式為顯示在文本底部的一條虛線邊框</p><p>abbr<abbr title="World Health Organization">元素的樣式為顯示在文本底部的一條</abbr>虛線邊框.</p></body> </html>

<code>

Bootstrap 4 定義 HTML?<code>?元素的樣式如下:

下表提供了 Bootstrap4 更多排版類的實例：

類名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更細的文本
.font-italic	斜體文本
.lead	讓段落更突出
.small	指定更小文本 (為父元素的 85% )
.text-left	左對齊
.text-center	居中
.text-right	右對齊
.text-justify	設定文本對齊,段落中超出屏幕部分文字自動換行
.text-nowrap	段落中超出屏幕部分不換行
.text-lowercase	設定文本小寫
.text-uppercase	設定文本大寫
.text-capitalize	設定單詞首字母大寫
.initialism	顯示在 <abbr> 元素中的文本以小號字體展示，且可以將小寫字母轉換為大寫字母
.list-unstyled	移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。這個類僅適用于直接子列表項 (如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式)
.list-inline	將所有列表項放置同一行
.pre-scrollable	使 <pre> 元素可滾動，代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條

例如：

7.Bootstrap4 顏色

Bootstrap 4 提供了一些有代表意義的顏色類：

.text-muted,?.text-primary,?.text-success,?.text-info,?.text-warning,?.text-danger,?.text-secondary,?.text-white,?.text-dark?and?.text-light

例如：

8.Bootstrap4 表格

Bootstrap4 通過?.table?類來設置基礎表格的樣式

通過添加?.table-striped?類，您將在?<tbody>?內的行上看到條紋

.table-bordered?類可以為表格添加邊框

.table-hover?類可以為表格的每一行添加鼠標懸停效果（灰色背景）

通過指定意義的顏色類可以為表格的行或者單元格設置顏色

例如：

<!DOCTYPE html> <html><head><title>Bootstrap 實例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head><body><div class="container"><h2>基礎表格</h2><p>.table 類來設置基礎表格的樣式</p><table class="table"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>20</td></tr><tr><td>趙麗</td><td>女</td><td>18</td></tr></tbody></table><h2>基礎表格</h2><p>.table-striped 類，來設置條紋表格</p><table class="table table-striped"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>20</td></tr><tr><td>趙麗</td><td>女</td><td>18</td></tr><tr><td>王五</td><td>男</td><td>18</td></tr></tbody></table><h2>帶邊框表格</h2><p>.table-bordered 類可以為表格添加邊框</p><table class="table table-bordered"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>20</td></tr><tr><td>趙麗</td><td>女</td><td>18</td></tr><tr><td>王五</td><td>男</td><td>18</td></tr></tbody></table><h2>鼠標懸停狀態表格</h2><p>.table-hover 類可以為表格的每一行添加鼠標懸停效果（灰色背景）</p><table class="table table-hover"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>20</td></tr><tr><td>趙麗</td><td>女</td><td>18</td></tr><tr><td>王五</td><td>男</td><td>18</td></tr></tbody></table><h2>指定意義的顏色類</h2><p>通過指定意義的顏色類可以為表格的行或者單元格設置顏色：.table-muted, .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-secondary, .table-white, .table-dark and .table-light</p><table class="table"><thead><tr class="table-primary"><th>姓名</th><th>年齡</th><th>性別</th></tr></thead><tbody><tr class="table-success"><th>張三</th><th>18</th><th>男</th></tr><tr class="table-danger"><th>李四</th><th>20</th><th>男</th></tr><tr class="table-info"><th>王五</th><th>22</th><th>男</th></tr></tbody></table></div> </body> </html>

9.Bootstrap4 圖像形狀

.rounded?類可以讓圖片顯示圓角效果

.rounded-circle?類可以設置橢圓形圖片

.img-thumbnail?類用于設置圖片縮略圖(圖片有邊框)

.float-right?類來設置圖片右對齊，使用?.float-left?類設置圖片左對齊

.img-fluid?類來設置響應式圖片

圖像有各種各樣的尺寸，我們需要根據屏幕的大小自動適應

我們可以通過在?<img>?標簽中添加?.img-fluid?類來設置響應式圖片

.img-fluid?類設置了?max-width: 100%;?、?height: auto;?:

例如：

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8"><title>實例</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><div class="container"><h2>圓角圖片</h2><p>.rounded 類可以讓圖片顯示圓角效果</p><img src="../img/1.jpg" class="rounded" alt="Cinque Terre" width="400" height="300"><h2>橢圓圖片</h2><p>.rounded-circle類設置橢圓形圖片</p><img src="../img/1.jpg" class="rounded-circle" alt="Cinque Terre" width="400" height="300"><h2>圖片對齊方式</h2><p>.float-right類設置右對齊 .float-left類設置右對齊</p><img src="../img/1.jpg" class="float-right" alt="Cinque Terre" width="200" height="100"><img src="../img/1.jpg" class="float-left" alt="Cinque Terre" width="200" height="100"><h2>響應式圖片</h2><p>.img-fluid類可以設置響應式圖片，重置瀏覽器查看大小效果</p><img src="../img/1.jpg" class="img-fluid"></div></body> </html>

10.Bootstrap4 信息提示框

提示框可以使用?.alert?類, 后面加上?.alert-success,?.alert-info,?.alert-warning,?.alert-danger,?.alert-

primary,?.alert-secondary,?.alert-light?或?.alert-dark?類來實現

提示框中在鏈接的標簽上添加?alert-link?類來設置匹配提示框顏色的鏈接

關閉提示框

我們可以在提示框中的 div 中添加?.alert-dismissible?類，然后在關閉按鈕的鏈接上添

加?class="close"?和?data-dismiss="alert"?類來設置提示框的關閉操作

提示框動畫

.fade?和?.show?類用于設置提示框在關閉時的淡出和淡入效果

例如：

11.Bootstrap4 按鈕

<!DOCTYPE html> <html><head><title>Bootstrap 實例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head><body><div class="container"><h2>按鈕樣式</h2><button type="button" class="btn">基本按鈕</button><button type="button" class="btn btn-primary">主要按鈕</button><button type="button" class="btn btn-secondary">次要按鈕</button><button type="button" class="btn btn-success">成功</button><button type="button" class="btn btn-info">信息</button><button type="button" class="btn btn-warning">警告</button><button type="button" class="btn btn-danger">危險</button><button type="button" class="btn btn-dark">黑色</button><button type="button" class="btn btn-light">淺色</button><button type="button" class="btn btn-link">鏈接</button><h2>按鈕元素</h2><p>按鈕類可用于 a button 或 input 元素上</p><h2>按鈕元素</h2><a href="#" class="btn btn-info" role="button">鏈接按鈕</a><button type="button" class="btn btn-info">按鈕</button><input type="button" class="btn btn-success" value="輸入框按鈕"><input type="submit" class="btn btn-info" value="提交按鈕"><h2>設置按鈕邊框</h2><button type="button" class="btn btn-outline-primary">按鈕1</button><button type="button" class="btn btn-outline-secondary">按鈕2</button><h2>不同大小的按鈕</h2><button type="button" class="btn btn-primary btn-lg">大號按鈕</button><button type="button" class="btn btn-primary">默認按鈕</button><button type="button" class="btn btn-primary btn-sm">小號按鈕</button><h2>塊級按鈕</h2><p>添加 .btn-block類可以設置塊級按鈕</p><button type="button" class="btn btn-primary btn-block">按鈕1</button><button type="button" class="btn btn-success btn-block">按鈕2</button><h2>大的塊級按鈕</h2><button type="button" class="btn btn-primary btn-lg btn-block">按鈕1</button><button type="button" class="btn btn-success btn-lg btn-block">按鈕2</button><h2>小的塊級按鈕</h2><button type="button" class="btn btn-primary btn-sm btn-block">按鈕1</button><button type="button" class="btn btn-success btn-sm btn-block">按鈕2</button><h2>激活和禁用按鈕</h2><h3>按鈕可設置為激活或者禁止點擊的狀態<br>.active 類可以設置按鈕是可用的<br>.disabled 屬性可以設置按鈕是不可點擊的 <br>注意 a 元素不支持 disabled 屬性，你可以通過添加 .disabled 類來禁止鏈接的點擊</h3><button type="button" class="btn btn-primary ">按鈕1</button><button type="button" class="btn btn-success active">按鈕2</button><button type="button" class="btn btn-success disabled">按鈕3</button><a href="#" class="btn btn-primary disabled">按鈕4</a></div> </body> </html>

12.Bootstrap4 按鈕組

Bootstrap 4 中允許我們將按鈕放在同一行上

可以在?<div>?元素上添加?.btn-group?類來創建按鈕組

可以使用?.btn-group-vertical?類來創建垂直的按鈕組

內嵌按鈕組及下拉菜單

垂直按鈕組及下拉菜單

例如：

<!DOCTYPE html> <html><head><title>Bootstrap 實例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head><body><div class="container"><h2>按鈕組</h2><p> .btn-group 類用于創建按鈕組:</p><div class="btn-group"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><button type="button" class="btn btn-primary">按鈕3</button> </div><h2>按鈕組大小</h2><p> .btn-group-xs/lg 類用于創建按鈕組大小</p><h3>小按鈕</h3><div class="btn-group btn-group-sm"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><button type="button" class="btn btn-primary">按鈕3</button> </div><h3>默認按鈕</h3><div class="btn-group btn-group"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><button type="button" class="btn btn-primary">按鈕3</button> </div><h3>大按鈕</h3><div class="btn-group btn-group-lg"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><button type="button" class="btn btn-primary">按鈕3</button> </div><h2>垂直按鈕</h2><p>.btn-group-vertical類來創建垂直按鈕</p><div class="btn-group-vertical"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><button type="button" class="btn btn-primary">按鈕3</button> </div><h2>內嵌按鈕組</h2><p>按鈕組設置下拉菜單</p><div class="btn-group"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">按鈕3</button><div class="dropdown-menu"><a class="dropdown-item" href="#">按鈕</a><a class="dropdown-item" href="#">按鈕</a></div> </div></div><h2>垂直按鈕組及下拉菜單</h2><div class="btn-group-vertical"><button type="button" class="btn btn-primary">按鈕1</button><button type="button" class="btn btn-primary">按鈕2</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">按鈕3</button><div class="dropdown-menu"><a class="dropdown-item" href="#">按鈕</a><a class="dropdown-item" href="#">按鈕</a></div></div></div></div> </body> </html>

13.Bootstrap4 徽章（Badges）

徽章（Badges）主要用于突出顯示新的或未讀的項。如需使用徽章，只需要將?.badge?類加上帶有

指定意義的顏色類 (如?.badge-secondary) 添加到?<span>?元素上即可。徽章可以根據父元素的大

小的變化而變化

各種顏色類型的徽章

使用?.badge-pill?類來設置藥丸形狀徽章

徽章插入到元素內

例如：

總結

以上是生活随笔為你收集整理的Bootstrap4知识(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

知识

上一篇：一个js写的桌面倒计时（请高手帮忙改一下
下一篇： VAD打断方案