Bootstrap4知识(1)
1.Bootstrap簡介
Bootstrap 是全球最受歡迎的前端組件庫,用于開發(fā)響應式布局、移動設(shè)備優(yōu)先的 WEB 項目
Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 開發(fā)的開源工具集。利
用我們提供的 Sass 變量和大量 mixin、響應式柵格系統(tǒng)、可擴展的預制組件、基于 jQuery 的強大
的插件系統(tǒng),能夠快速為你的想法開發(fā)出原型或者構(gòu)建整個 app?
Sass--CSS擴展語言
Mixin--包含一段合法Sass代碼,類似于C語言的宏定義。調(diào)用Mixin時,解釋器會將Mixin擴展成它
所包含的完整的Sass代碼,因此可以有效地減少代碼重復,從而寫出更加干凈的代碼。CSS不支
持Mixin,因此重復和類似的代碼必須挨個書寫
2.Bootstrap4?安裝使用
我們可以通過以下兩種方式來安裝 Bootstrap4
1.使用 Bootstrap 4 CDN
CDN的全稱是Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò).
國內(nèi)推薦使用 Staticfile CDN 上的庫:
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link?rel="stylesheet"??
href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單,包含了 popper.min.js -->
?<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
?<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
注意:popper.min.js 用于設(shè)置彈窗、提示、下拉菜單,目前 bootstrap.bundle.min.js 已經(jīng)包含了?popper.min.js
此外,你還可以使用以下的 CDN 服務:
國內(nèi)推薦使用 :?Staticfile CDN
國際推薦使用:cdnjs - The #1 free and open source CDN built to make life easier for developers
2.從官網(wǎng)?getbootstrap.com?下載 Bootstrap 4
你可以去官網(wǎng)?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.創(chuàng)建第一個 Bootstrap 4 頁面
1.添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件類型,所以需要添加 HTML5 doctype 聲明
HTML5 doctype 在文檔頭部聲明,并設(shè)置對應編碼:
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> </html>2.移動設(shè)備優(yōu)先
為了讓 Bootstrap 開發(fā)的網(wǎng)站對移動設(shè)備友好,確保適當?shù)睦L制和觸屏縮放,需要在網(wǎng)頁的 head
之中添加 viewport meta 標簽,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width?表示寬度是設(shè)備屏幕的寬度
initial-scale=1?表示初始的縮放比例
shrink-to-fit=no 自動適應手機屏幕的寬度
3.容器類
Bootstrap 4 需要一個容器元素來包裹網(wǎng)站的內(nèi)容
我們可以使用以下兩個容器類:
.container 類用于固定寬度并支持響應式布局的容器
.container-fluid 類用于 100% 寬度,占據(jù)全部視口(viewport)的容器
?4.Bootstrap4 網(wǎng)格系統(tǒng)
ootstrap 提供了一套響應式、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng),隨著屏幕或視口(viewport)尺寸的
增加,系統(tǒng)會自動分為最多 12 列
我們也可以根據(jù)自己的需要,定義列數(shù):
?Bootstrap 4 的網(wǎng)格系統(tǒng)是響應式的,列會根據(jù)屏幕大小自動重新排列
網(wǎng)格類
Bootstrap 4 網(wǎng)格系統(tǒng)有以下 5 個類:
1、.col-? ?針對所有設(shè)備
2、.col-sm-? ?平板-屏幕寬度等于或大于 576px
3、.col-md-? ?桌面顯示器---屏幕寬度等于或大于 768px
4、.col-lg-? ?大桌面顯示器---屏幕寬度等于或大于 992px
5、.col-xl-? ?大桌面顯示器---屏幕寬度等于或大于 992px
網(wǎng)格系統(tǒng)規(guī)則
Bootstrap4 網(wǎng)格系統(tǒng)規(guī)則:
1.網(wǎng)格每一行需要放在設(shè)置了.container(固定寬度)或?.container-fluid?(全屏寬度)類的容器
中,這樣就可以自動設(shè)置一些外邊距和內(nèi)邊距
2.使用行來創(chuàng)建水平列組
3、內(nèi)容需要放置在列中,并且只有列可以是行的直接子節(jié)點
4、預定義的類如?.row?和?.col-sm-4?可用于快速制作網(wǎng)格布局
5、列通過填充創(chuàng)建列內(nèi)容之間的間隙。 這個間隙是通過?.rows?類上的負邊距設(shè)置第一行和最后一列的偏移
6、網(wǎng)格列是通過跨越指定的 12 個列來創(chuàng)建。 例如,設(shè)置三個相等的列,需要使用三個?.col-sm-4?來設(shè)置
7、Bootstrap 3 和 Bootstrap 4 最大的區(qū)別在于 Bootstrap 4 現(xiàn)在使用 flexbox(彈性盒子) 而不是浮動。 Flexbox 的一大優(yōu)勢是,沒有指定寬度的網(wǎng)格列將自動設(shè)置為等寬與等高列?
下表總結(jié)了 Bootstrap 網(wǎng)格系統(tǒng)如何在不同設(shè)備上工作的:
?5.Bootstrap 4 網(wǎng)格的基本結(jié)構(gòu)
1.以下代碼為 Bootstrap 4 網(wǎng)格的基本結(jié)構(gòu):
<!-- 第一個例子:控制列的寬度及在不同的設(shè)備上如何顯示 --> <div class="row"><div class="col-*-*"></div></div><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div><div class="col-*-*"></div> </div> <!-- 第二個例子:讓 Bootstrap 者自動處理布局 --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div></div>第一個例子:創(chuàng)建一行(<div class="row">)。然后, 添加需要的列(?.col-*-*?類中設(shè)置)。 第一個星
號 (*) 表示響應的設(shè)備: sm, md, lg 或 xl, 第二個星號 (*) 表示一個數(shù)字, 同一行的數(shù)字相加為 12
第二個例子: 不在每個?col?上添加數(shù)字,讓 bootstrap 自動處理布局,同一行的每個列寬度相等:?
兩個?"col"?,每個就為 50% 的寬度。三個?"col"每個就為 33.33% 的寬度,四個?"col"每個就為 25%
的寬度,以此類推。同樣,你可以使用?.col-sm|md|lg|xl?來設(shè)置列的響應規(guī)則
例如:
<!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>創(chuàng)建三個相等寬度的列! 嘗試在 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> 在移動設(shè)備上,即屏幕寬度小于 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-*-*?類來設(shè)置。第一個星號( * )可以是?sm、md、lg、xl,表示屏幕設(shè)備類型,第二個星號( * )可以是?1?到?11?的數(shù)字。
為了在大屏幕顯示器上使用偏移,請使用?.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 默認設(shè)置
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>?元素用于創(chuàng)建字號更小的顏色更淺的文本
例如:
<!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>?為黃色背景及有一定的內(nèi)邊距
例如:
<!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>?元素的樣式如下:
<!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"><h1>代碼片段</h1><p>可以將一些代碼元素放到 code 元素里面:</p><p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定義部分文檔內(nèi)容。</p> </div> </body> </html>下表提供了 Bootstrap4 更多排版類的實例:
| 類名 | 描述 |
| .font-weight-bold | 加粗文本 |
| .font-weight-normal | 普通文本 |
| .font-weight-light | 更細的文本 |
| .font-italic | 斜體文本 |
| .lead | 讓段落更突出 |
| .small | 指定更小文本 (為父元素的 85% ) |
| .text-left | 左對齊 |
| .text-center | 居中 |
| .text-right | 右對齊 |
| .text-justify | 設(shè)定文本對齊,段落中超出屏幕部分文字自動換行 |
| .text-nowrap | 段落中超出屏幕部分不換行 |
| .text-lowercase | 設(shè)定文本小寫 |
| .text-uppercase | 設(shè)定文本大寫 |
| .text-capitalize | 設(shè)定單詞首字母大寫 |
| .initialism | 顯示在 <abbr> 元素中的文本以小號字體展示,且可以將小寫字母轉(zhuǎn)換為大寫字母 |
| .list-unstyled | 移除默認的列表樣式,列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用于直接子列表項 (如果需要移除嵌套的列表項,你需要在嵌套的列表中使用該樣式) |
| .list-inline | 將所有列表項放置同一行 |
| .pre-scrollable | 使 <pre> 元素可滾動,代碼塊區(qū)域最大高度為340px,一旦超出這個高度,就會在Y軸出現(xiàn)滾動條 |
例如:
<!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"><h1>Bootstrap 實例</h1><p class="font-weight-bold">加粗文本</p><p class="font-weight-normal text-right">普通文本</p><p class="font-weight-light text-left">更細的文本</p><p class="font-italic text-center">斜體文本</p></div> </body> </html>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
例如:
<!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 class="text-muted">柔和的文本</p><p class="text-primary">重要的文本</p><p class="text-success">執(zhí)行成功的文本</p><p class="text-info">代表一些提示信息的文本</p><p class="text-warning">警告文本</p><p class="text-danger">危險操作文本</p><p class="text-secondary">副標題</p><p class="text-dark">深灰色文字</p><p class="text-light ">淺灰色文本(白色背景上看不清楚)</p><p class="text-white ">白色文本(白色背景上看不清楚)</p></div><div class="container"><h2>文本顏色</h2><p>鼠標移動到鏈接。</p><a href="#" class="text-muted">鏈接1</a><a href="#" class="text-primary">鏈接2</a><a href="#" class="text-success">鏈接3</a><a href="#" class="text-info">鏈接4</a><a href="#" class="text-warning">警告鏈接5</a><a href="#" class="text-danger">鏈接6</a><a href="#" class="text-secondary">鏈接7</a><a href="#" class="text-dark">鏈接8</a><a href="#" class="text-light">鏈接9</a></div><div class="container"><h2>背景顏色</h2><p class="bg-primary text-white">重要的背景顏色。</p><p class="bg-success text-white">執(zhí)行成功背景顏色。</p><p class="bg-info text-white">信息提示背景顏色。</p><p class="bg-warning text-white">警告背景顏色</p><p class="bg-danger text-white">危險背景顏色。</p><p class="bg-secondary text-white">副標題背景顏色。</p><p class="bg-dark text-white">深灰背景顏色。</p><p class="bg-light text-dark">淺灰背景顏色。</p></div> </body> </html>8.Bootstrap4 表格
Bootstrap4 通過?.table?類來設(shè)置基礎(chǔ)表格的樣式
通過添加?.table-striped?類,您將在?<tbody>?內(nèi)的行上看到條紋
.table-bordered?類可以為表格添加邊框
.table-hover?類可以為表格的每一行添加鼠標懸停效果(灰色背景)
通過指定意義的顏色類可以為表格的行或者單元格設(shè)置顏色
例如:
<!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>基礎(chǔ)表格</h2><p>.table 類來設(shè)置基礎(chǔ)表格的樣式</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>基礎(chǔ)表格</h2><p>.table-striped 類,來設(shè)置條紋表格</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>鼠標懸停狀態(tài)表格</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>通過指定意義的顏色類可以為表格的行或者單元格設(shè)置顏色:.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?類可以設(shè)置橢圓形圖片
.img-thumbnail?類用于設(shè)置圖片縮略圖(圖片有邊框)
.float-right?類來設(shè)置圖片右對齊,使用?.float-left?類設(shè)置圖片左對齊
.img-fluid?類來設(shè)置響應式圖片
圖像有各種各樣的尺寸,我們需要根據(jù)屏幕的大小自動適應
我們可以通過在?<img>?標簽中添加?.img-fluid?類來設(shè)置響應式圖片
.img-fluid?類設(shè)置了?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類設(shè)置橢圓形圖片</p><img src="../img/1.jpg" class="rounded-circle" alt="Cinque Terre" width="400" height="300"><h2>圖片對齊方式</h2><p>.float-right類設(shè)置右對齊 .float-left類設(shè)置右對齊</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類可以設(shè)置響應式圖片,重置瀏覽器查看大小效果</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?類來實現(xiàn)
提示框中在鏈接的標簽上添加?alert-link?類來設(shè)置匹配提示框顏色的鏈接
關(guān)閉提示框
我們可以在提示框中的 div 中添加?.alert-dismissible?類,然后在關(guān)閉按鈕的鏈接上添
加?class="close"?和?data-dismiss="alert"?類來設(shè)置提示框的關(guān)閉操作
提示框動畫
.fade?和?.show?類用于設(shè)置提示框在關(guān)閉時的淡出和淡入效果
例如:
<!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>提示框可以使用 .alert類, 后面加上指定特定意義的顏色類來實現(xiàn):</p><div class="alert alert-success"><strong>yes</strong>成功</div><div class="alert alert-success"><strong>no</strong> 失敗</div><p>提示框中在鏈接的標簽上添加 alert-link類來設(shè)置匹配提示框顏色的鏈接</p><div class="alert alert-success"><strong>成功</strong>你應該認真閱讀<a href="#" class="alert">信息</a></div><h2>關(guān)閉提示框</h2><p>1.在提示框中的 div 中添加 .alert-dismissible 類,<br>2.在關(guān)閉按鈕的鏈接上添加 class="close" 和 data-dismiss="alert" 類來設(shè)置提示框的關(guān)閉操作</p><div class="alert alert-success alert-dismissible" ><button type="button" class="close" data-dismiss="alert">yes</button><strong>no</strong> 失敗 </div><h2>提示框動畫</h2><p>.fade 和 .show 類用于設(shè)置提示框在關(guān)閉時的淡出和淡入效果 </p><div class="alert alert-success alert-dismissible fade show" ><button type="button" class="close" data-dismiss="alert">yes</button><strong>no</strong> 失敗 </div></div> </body> </html>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>設(shè)置按鈕邊框</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類可以設(shè)置塊級按鈕</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>按鈕可設(shè)置為激活或者禁止點擊的狀態(tài)<br>.active 類可以設(shè)置按鈕是可用的<br>.disabled 屬性可以設(shè)置按鈕是不可點擊的 <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?類來創(chuàng)建按鈕組
可以使用?.btn-group-vertical?類來創(chuàng)建垂直的按鈕組
內(nèi)嵌按鈕組及下拉菜單
垂直按鈕組及下拉菜單
例如:
<!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 類用于創(chuàng)建按鈕組:</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 類用于創(chuàng)建按鈕組大小</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類來創(chuàng)建垂直按鈕</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>內(nèi)嵌按鈕組</h2><p>按鈕組設(shè)置下拉菜單</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>?元素上即可。 徽章可以根據(jù)父元素的大
小的變化而變化
各種顏色類型的徽章
使用?.badge-pill?類來設(shè)置藥丸形狀徽章
徽章插入到元素內(nèi)
例如:
<!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><h1>測試標題<span class="badge badge-secondary">1</span></h1><h2>測試標題<span class="badge badge-secondary">2</span></h2><h3>測試標題<span class="badge badge-secondary">3</span></h3></div><h2>各種顏色類型的徽章</h2><span class="badge badge-secondary">1</span><span class="badge badge-primary">2</span><span class="badge badge-success">3</span><span class="badge badge-danger">4</span><span class="badge badge-warning">5</span><h2>藥丸形狀徽章</h2><p>使用 .badge-pill 類來設(shè)置藥丸形狀徽章</p><span class="badge badge-secondary badge-pill">1</span><span class="badge badge-primary badge-pill">2</span><span class="badge badge-success badge-pill">3</span><h2>徽章嵌入到按鈕內(nèi)</h2><button type="button" class="btn btn-primary">按鈕1<span class="badge badge-light">3</span></button><button type="button" class="btn btn-danger">按鈕2<span class="badge badge-light">6</span></button> </body> </html>總結(jié)
以上是生活随笔為你收集整理的Bootstrap4知识(1)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一个js写的桌面倒计时(请高手帮忙改一下
- 下一篇: VAD打断方案