新建 HTML 頁(yè)面侣诺，復(fù)制下方代碼粘入
BootStrap4 基礎(chǔ)模版
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" >
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<h1>添加上你的代碼</h1>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e){
});
</script>
</html>
實(shí)例精選
很多很多的現(xiàn)成的例子：http://v3.bootcss.com/getting-started/#examples
表格
<div class="container">
<table class="table table-striped">
<tr><th>序號(hào)</th><th>姓名</th><th>年齡</th></tr>
<tr><td>888</td><td>張三</td><td>1000</td></tr>
</table>
</div>
加上table基礎(chǔ)樣式之后才會(huì)附加表格樣式
表格樣式
| 屬性 | 作用 |
|---|---|
| table | 基礎(chǔ)樣式 |
| table-striped | 條紋狀 表格 |
| table-bordered | 帶邊框的表格 |
| table-hover | 鼠標(biāo)懸停 |
| table-condensed | 緊縮表格 |
狀態(tài)類
| 屬性 | 描述 作用 | |
|---|---|---|
| active | 活動(dòng)灰 | 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色 |
| success | 成功綠 | 標(biāo)識(shí)成功或積極的動(dòng)作 |
| info | 提示藍(lán) | 標(biāo)識(shí)普通的提示信息或動(dòng)作 |
| warning | 警告黃 | 標(biāo)識(shí)警告或需要用戶注意 |
| danger | 危險(xiǎn)紅 | 標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作 |
響應(yīng)式表格
將任何 .table 元素包裹在 .table-responsive 元素內(nèi)益楼，即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)寻行。當(dāng)屏幕大于 768px 寬度時(shí)霍掺，水平滾動(dòng)條消失。
按鈕
按鈕樣式可以添加給a標(biāo)簽拌蜘，但是避免使用除botton之外的其他標(biāo)簽杆烁，不同設(shè)備兼容性方面可能會(huì)出現(xiàn)問(wèn)題
<div class="container">
<button type="button" class="btn btn-danger">按鈕</button>
</div>
預(yù)定義樣式
btn-default 默認(rèn)樣式 白
btn-primary 首選項(xiàng) 紫
btn-success 成功 綠
btn-info 一般信息 藍(lán)
btn-warning 警告 橙
btn-danger 危險(xiǎn) 紅
btn-link 鏈接 藍(lán)字下劃線
尺寸
btn-lg 大按鈕
btn-default 默認(rèn)尺寸
btn-sm 小按鈕
btn-xs 超小尺寸
<a href="" class="btn btn-default btn-lg" role="button">default</a>
通過(guò)給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變?yōu)榱藟K級(jí)（block）元素简卧。
激活狀態(tài)
<button type="button" class="btn btn-primary btn-lg **active**">Primary button</button>
<a href="#" class="btn btn-primary btn-lg **active**" role="button">Primary link</a>
禁用狀態(tài)
<button type="button" class="btn btn-lg btn-primary" **disabled**>Primary button</button>
圖片
為圖片添加** .img-responsive **類可以讓圖片支持響應(yīng)式布局店展。
如果需要讓使用了 .img-responsive 類的圖片水平居中月褥，請(qǐng)使用 .center-block 類，不要用 .text-center。
圖片形狀
<img src="girl.jpg" class="img-rounded">
<img src="girl.jpg" class="img-circle">
<img src="girl.jpg" class="img-thumbnail">
