前端基礎 | Bootstrap3 教程
阿新 • • 發佈：2020-08-14
Bootstrap簡介
什麼是Bootstrap
1. Bootstrap是一個用於快速開發Web用用程式和網站的前端框架.
2. Bootstrap是基於 HTML,CSS,JavaScript的
為什麼使用Bootstrap
1. 移動裝置優先 自Bootstrap3起,框架包含了貫穿震哥哥庫的移動裝置優先的樣式. 2. 瀏覽器支援 所有主流的瀏覽器都支援Bootstrap 3. 容易上手 只要具備HTML和CSS的基礎知識,就可以開始學習Bootstrap. 4. 響應式設計 (1) Bootstrap的響應式CSS能夠自適應桌上型電腦,平板電腦和手機. (2) 以往一個網站要開發兩套,一臺PC的前端,一套移動端的前端,但是如果是響應式佈局,則只需要一臺即可
Bootstrap環境安裝
1. 從官網下載Bootstrap的原始碼,一般是下載一個壓縮包
2. 壓縮包解壓後包含3個資料夾 (1) fonts (2) css (3) js ,需要將這3個資料夾原封不動的匯入你的專案中,專案使用的使用需要使用標籤進行匯入
html模板-- Bootstrap的HelloWorld
Bootstrap只需要匯入3個檔案 => 這份模板檔案後面會一直用到
(1)<link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet">
(2)<script src="./jquery-3.2.1.min.js"></script>
(3)<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- code01_Bootstrap_HelloWorld.html --> <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 --> <!-- 注意： 如果通過 file:// 引入 Respond.js 檔案，則該檔案無法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) --> <script src="./jquery-3.2.1.min.js"></script> <!-- 包括所有已編譯的外掛 --> <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> </body> </html>
Bootstrap CSS
Bootstrap CSS概覽
Bootstrap 網格系統
Bootstrap提供了一套響應式,移動裝置優先的流式網格系統,隨著螢幕或視口(viewport)尺寸的增加,系統會自動分為最多12列.
移動裝置優先
1. 在HTML5的專案中,做移動端專案,有一份非常重要的meta,用於設定螢幕和裝置等寬以及是否執行使用者縮放,以及縮放比例的問題.
2. 分別為: 螢幕寬度和裝置一致,初始化縮放比例
<meta name="viewport" content="width=device-width, initial-scale=1>
bootstrap佈局容器
兩種容器
(1)<div class="container"> ... </div>
(2)<div class="container-fluid"> ... </div>
1. Bootstrap需要為頁面內容和柵格系統包裹一個.container容器,但是由於padding等屬性的原因,則兩種容器類不能專案巢狀.
(1) <div class="container"> ... </div> 這是可以指定的固定寬度
1) 1170px => 970px => 750px => 100% (這是響應式容器的寬度變化)
(2) <div class="container-fluid"> ... </div> 這個直接就是100%的寬度
<!-- code02_Bootstrap容器.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"
/>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.container,.container-fluid {
border: 1px solid red;
background-color: gold;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 1. 流體容器,直接寬度100% .container-fluid -->
<div class="container-fluid">流體容器</div>
<br><br><br>
<!-- 2. 響應式容器,固定寬度 .container -->
<div class="container">響應式容器</div>
</body>
</html>
bootstrap柵格系統
柵格系統是用來劃分寬度的,也就是直管橫向,縱向並不管
柵格系統要求一行的列數加起來必須為12
1. bootstrap將頁面橫向分為12等份,按照12等份定義了適應不同寬度的樣式類,這些樣式類組成了一套響應式,移動裝置優先的流式柵格系統
(1) col-lg-列數: 大於1200px排成一行,小於1200px分別佔一行
(2) col-md-列數: 大於992px排成一行,小於992px分別佔一行
(3) col-sm-列數: 大於768px排成一行,小於768px分別佔一行
(4) col-xs-列數: 始終排成一行
2. 柵格系統中,瀏覽器會隨著螢幕的大小的增減自動分配最多12列. => 通過最多一些列的行(row)與列(column)的組合賴建立頁面佈局. 其工作原理如下:
(1) 行(row) 必須包含在 .container(固定寬度)或 .contain-fluid(100%寬度)中,以便為其賦予合適的排列(aligment)和內補(padding).
(2) 通過 行(row) 在水平方向建立一組列(column)
(3) 你的內容應該放置於 列(column) 內,並且只有 列(column) 可以作為 行(row) 的直接子元素
(4) 使用類似 .row 和 .col-xs-4 這種預定義類,可以用來快速建立柵格佈局.
3. 基本的網格結構
<div class="container/container-fluid">
<div class="row">
下面的列數加起來必須為12 => xs,sm,md,lg
<div class="col-lg-4">內容</div>
<div class="col-lg-4">內容</div>
<div class="col-lg-4">內容</div>
<div class="col-lg-4">內容</div>
</div>
<div class="row"> ... </div>
...
</div>
4. 注意事項:
(1) 一行中如果格子數目超過12,則超出部分將自動換行
(2) 柵格類屬性可以向上相容,也就是xs在sm,md,lg中正常顯示,但反過來則不能正常顯示
<!-- code03_Bootstrap柵格系統.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
<style>
/*
(1) div{...} 標籤選擇器
(2) [屬性=...] 屬性選擇器 *= "字元" => 含有字元
*/
div[class*="col-"] {
/* 高度是可以設定的,柵格系統針對的是寬度而不是高度 */
height: 50px;
border: 1px solid red;
background-color: gold;
}
</style>
</head>
<body>
<!-- 柵格系統的最外部的兩個容器 -->
<div class="container-fluid">
<h1>柵格系統</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-3">col-lg-3</div>
</div>
</div>
<div class="container">
<br /><br />
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
<br /><br />
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<br /><br />
<div class="row">
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
</div>
</div>
</body>
</html>
響應式佈局
1. 現在要實現一個簡單效果就是 lg 一行12個, md 兩行 6個, sm 3行 4個, xs 6行 2個
2. 類選擇器可以同時存在多個
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<!-- code04_Bootstrap響應式佈局.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
/* div[class*="col-"] {
border: 1px solid black;
background-color: gold;
} */
.box {
height: 80px;
border: 1px solid red;
background-color: cyan;
margin: 20px auto;
/* 設定一個最大寬度,避免過度拉寬 */
max-width: 240px;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 實現響應式佈局 -->
<!-- 現在要實現的是 桌上型電腦lg 顯示12一行 -->
<!-- 筆記本md 顯示 6個 兩行 -->
<!-- 平板sm 顯示3 3 3 3-->
<!-- 手機xs 顯示 2 2 2 2 2 2 -->
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
</div>
</div>
</body>
</html>
列偏移
1. 偏移是一個用於更專業的佈局的有用功能,它們可用來給列騰出更多的空間.
2. 就是往左邊偏移
(1) col-lg-offer-列數
(2) col-md-offer-列數
(3) col-sm-offer-列數
(4) col-xs-offer-列數
<!-- code06_Bootstrap列偏移.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"
/>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.box {
height: 50px;
border: 1px soild red;
background-color: cyan;
margin: 20px auto;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5"><div class="box"></div></div>
<div class="col-lg-5 col-lg-offset-1"><div class="box"></div></div>
</div>
<br /><br />
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-2"><div class="box"></div></div>
<div class="col-lg-4"><div class="box"></div></div>
</div>
</div>
</body>
</html>
bootstrap隱藏類
1. 隱藏類用於隱藏一些不是很重要的柵格,在縮小螢幕的時候很有作用.
2. hidden-xs, hidden-sm, hidden-md, hidden-lg
<!-- code07_Bootstrap柵格隱藏.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.box {
height: 50px;
border: 1px soild black;
background-color: cyan;
margin: 20px auto;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4"><div class="box">1</div></div>
<div class="col-lg-3 col-md-4"><div class="box">2</div></div>
<div class="col-lg-3 col-md-4"><div class="box">3</div></div>
<div class="col-lg-3 col-md-4 hidden-md"><div class="box">4</div></div>
</div>
</div>
</body>
</html>
Bootstrap 排版
Bootstrap 程式碼
Bootstrap 表格
1. .table 為任意<table>新增基本樣式(只有橫向分割線)
2. .table-striped 為表格的內容<tbody>新增斑馬線形式的條紋
3. .table-bordered 為所有表格的單元格新增邊框
4. .table-hover 在<tbody>內任一行啟用滑鼠懸停狀態
5. .table-condensed 讓表格更加緊湊 (精簡表格)
6. 聯合使用所有表格類 => class="table table-striped table-bordered table-hover table-condensed"
<!-- code13_Bootstrap表格.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>普通表格樣式 .table</h2>
<table class="table">
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>001</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>004</td>
<td>趙六</td>
<td>26</td>
</tr>
</table>
</div>
<br>
<div class="row">
<h2>聯合了幾種表格的樣式</h2>
<ul>
<li>.table 普通表格</li>
<li>.table-striped 表格內部斑馬線樣式</li>
<li>.table-bordered 為表格新增邊框</li>
<li>.table-hover 為表格新增滑鼠懸停按鈕</li>
<li>.table-condensed 讓表格更加緊湊(精簡表格)</li>
</ul>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>001</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>004</td>
<td>趙六</td>
<td>26</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Bootstrap 表單
Bootstrap 按鈕
使用Bootstrap定義好的按鈕樣式
在Bootstrap的樣式都是預先通過各種 class 定義好的
1. 任何帶有 class .btn 的元素棟篤會繼承圓角灰色按鈕的預設外觀. 但是Bootstrap提供了一些選項來定義按鈕的樣式,這些樣式可以作用於 <a>,<button>,<input>標籤上 (這3個都是可以生成按鈕的)
2. 按鈕樣式
(1) .btn .btn-default 預設按鈕
(2) .btn .btn-primary 原始按鈕
(3) .btn .btn-success 成功按鈕
(4) .btn .btn-info 資訊按鈕
(5) .btn .btn-warning 警告按鈕
(6) .btn .btn-danger 危險按鈕
(7) .btn .btn-link 連結按鈕
3. 按鈕大小
(1) .btn-lg 大按鈕
(2) 沒有規定的話就是預設大小的按鈕
(3) .btn-sm 小按鈕
(4) .btn-xs 特別小的按鈕
(5) .btn-block 塊級按鈕(佔滿整個父級元素) => 寬度100%的按鈕一般是在移動端使用
4. 按鈕狀態
(1) 啟用狀態 .active
1) 按鈕元素: 新增 .active 來顯示它是啟用的
2) 超連結元素: 新增 .active 來顯示它是啟用的
(2) 禁用狀態 .disabled 禁用狀態讓連結和按鈕不能被點選
1) 按鈕元素
2) 超連結元素
5. 按鈕組 =>按鈕組就是把幾個按鈕組合在一起,在移動端可以做到一個步驟提示的作用
(1) .btn-group => 在要包圍的按鈕外圍包圍一個這樣標籤
(2) 使用 .btn-group-lg .btn-group-sm .btn-group-xs 來控制按鈕組的大小
(3) 使用 .btn-group-vertical 來設定垂直方向
(4) 使用 .btn-group-justified 來設定自適應大小的按鈕組 (就是佔滿父級元素)
但是注意,如果是button和input元素,需要在巢狀多一層 .btn-group
使用a標籤是正常的
(5) 內嵌下拉的選單的按鈕組
<!-- code08_Bootstrap按鈕樣式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>預設按鈕樣式</h2>
<!-- 這是<input 實現的按鈕> -->
<input type="button" value="預設按鈕 input標籤" class="btn btn-default">
<!-- 使用<a> 實現一個button -->
<a href="" class="btn btn-default">預設按鈕 a標籤</a>
<!-- 使用<button>實現 -->
<button type="button" class="btn btn-default">預設按鈕 button標籤</button>
</div>
<div class="row">
<h2>原始按鈕</h2>
<input type="button" value="原始按鈕" class="btn btn-primary">
</div>
<div class="row">
<h2>成功按鈕</h2>
<input type="button" value="成功按鈕" class="btn btn-success">
</div>
<div class="row">
<h2>資訊按鈕</h2>
<input type="button" value="資訊按鈕" class="btn btn-info">
</div>
<div class="row">
<h2>警告按鈕</h2>
<input type="button" value="警告按鈕" class="btn btn-warning">
</div>
<div class="row">
<h2>危險按鈕</h2>
<input type="button" value="危險按鈕" class="btn btn-danger">
</div>
<div class="row">
<h2>連結按鈕</h2>
<input type="button" value="連結按鈕" class="btn btn-link">
</div>
</div>
</body>
</html>
<!-- code09_Bootstrap按鈕大小.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<input
type="button"
value="大的原始按鈕"
class="btn btn-primary btn-lg"
/>
<input type="button" value="大的按鈕" class="btn btn-lg" />
</div>
<br />
<br />
<br />
<div class="row">
<!-- 沒有給按鈕的大小樣式就是預設的大小 -->
<input
type="button"
value="預設大小的原始按鈕"
class="btn btn-primary"
/>
<input type="button" value="預設大小的按鈕" class="btn" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="小的原始按鈕"
class="btn btn-primary btn-sm"
/>
<input type="button" value="小的按鈕" class="btn btn-sm" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="特別小的原始按鈕"
class="btn btn-primary btn-xs"
/>
<input type="button" value="特別小的按鈕" class="btn btn-xs" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="塊級原始按鈕"
class="btn btn-primary btn-block"
/>
<input type="button" value="塊級的按鈕" class="btn btn-block" />
</div>
</div>
</body>
</html>
<!-- code10_Bootstrap按鈕狀態.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>active 啟用狀態</h2>
<input type="button" value="預設按鈕" class="btn btn-default" />
<input type="button" value="預設按鈕 啟用" class="btn btn-default active" />
</div>
<br />
<div class="row">
<h2>disabled 禁用狀態</h2>
<div class="row">
<input type="button" value="預設按鈕" class="btn btn-default" />
<input type="button" value="預設按鈕 禁用" class="btn btn-default disabled" />
</div>
</div>
</div>
</body>
</html>
<!-- code11_Bootstrap按鈕組.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 1. 按鈕組可以在移動端做一個指示的作用 -->
<div class="container">
<div class="row">
<h2>獨立的三個按鈕</h2>
<input type="button" value="步驟1" class="btn btn-primary active">
<input type="button" value="步驟2" class="btn btn-default">
<input type="button" value="步驟3" class="btn btn-default">
</div>
<br>
<div class="row">
<h2>三個按鈕組成按鈕組</h2>
<div class="btn-group">
<input type="button" value="步驟1" class="btn btn-primary active">
<input type="button" value="步驟2" class="btn btn-default">
<input type="button" value="步驟3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>三個按鈕組成按鈕組 => 步驟2</h2>
<div class="btn-group">
<input type="button" value="步驟1" class="btn btn-primary active">
<input type="button" value="步驟2" class="btn btn-primary active">
<input type="button" value="步驟3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>大的按鈕組 => btn-group-lg,sm,xs</h2>
<div class="btn-group btn-group-lg">
<input type="button" value="步驟1" class="btn btn-primary active">
<input type="button" value="步驟2" class="btn btn-primary active">
<input type="button" value="步驟3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>垂直按鈕組 => btn-group-vertical</h2>
<div class="btn-group btn-group-vertical">
<input type="button" value="步驟1" class="btn btn-primary active">
<input type="button" value="步驟2" class="btn btn-primary active">
<input type="button" value="步驟3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>自適應的按鈕組 => btn-group-justified</h2>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" value="步驟1" class="btn btn-primary active">
</div>
<div class="btn-group">
<input type="button" value="步驟2" class="btn btn-primary active">
</div>
<div class="btn-group">
<input type="button" value="步驟3" class="btn btn-default">
</div>
</div>
</div>
<br>
</div>
</body>
</html>
Bootstrap 圖片
1. .img-rounded 為圖片新增圓角
2. .img-circle 將圖片變為圓形
3. .img-thumbnail 縮圖功能(新增一些內邊距和一個灰色的邊框)
4. .img-responsive 圖片響應式(將很好的擴充套件到父元素) => 寬度100%
<!-- code12_Bootstrap圖片.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>圖片圓角 img-rounded</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-rounded">
</div>
<br>
<div class="row">
<h2>圓形圖片 img-circle</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-circle">
</div>
<br>
<div class="row">
<h2>新增內邊距和一個灰色邊框 img-thumbnail</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-thumbnail">
</div>
<br>
<div class="row">
<h2>img-responsive類讓圖片支援響應式，將很好地擴充套件到父元素 (通過改變視窗大小檢視效果)</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-responsive">
</div>
<br>
</div>
</body>
</html>
Bootstrap 輔助類
Bootstrap 響應式使用工具
Bootstrap 佈局元件
Bootstrap 字型圖示
Bootstrap 下拉列表
Bootstrap 按鈕組
Bootstrap 按鈕下拉選單
Bootstrap 輸入框組
Bootstrap 導航元素
Bootstrap 導航欄
1. 導航欄是一個很好的功能,是Bootstrap網站的一個突出特點. (導航欄挺重要的!而且是Bootstrap的特點)
2. 導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件.
3. 導航欄在移動裝置的檢視中是摺疊的,隨著可用視口寬度的增加,導航欄也會水平展開.
4. 在Bootstrap導航欄的核心中,導航欄包括了站點名稱和基本的導航定義樣式.
bootstrap導航條
1. .navbar 宣告導航條
<div class="navbar">
2. .navbar-default 宣告預設的導航條樣式(灰色)
<div class="navbar navbar-default">
3. .navbar-inverse 宣告反色的導航條樣式(黑色)
<div class="navbar navbar-inverse">
4. navbar-static-top 去除導航條的圓角
<div class="navbar navbar-inverse navbar-static-top">
5. nav navbar-nav 定義導航欄中的選單
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
...
</ul>
6. navbar-form 定義導航條中的表單
<form action="" class="navbar-form "> </form>
7. navbar-left 選單靠左
8. navbar-right 選單靠右
<form action="" class="navbar-form navbar-right">
9. navbar-fixed-top 固定到頂部的導航欄
10. navbar-fixed-bottom 固定到底部的導航欄
11. navbar-header 宣告logo的容器
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
12. navbar-brand 針對logo等固定內容的樣式
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
13. navbar-btn 定義導航欄中的按鈕
14. navbar-text 定義導航條中的文字
程式碼格式說明
1. 基本的導航欄格式
<div class="nav">
<div class="container">
定義logo
<div class="navbar-header">
<a>LOGO</a>
</div>
定義選單
<div class="">
</div>
</div>
</div>
2. 最外面應該是導航欄的div,然後是容器的div
3. LOGO一個是屬於 navbar-header部分,而已一般是圖片的超連結
4. 定義選單內容可以使用無序列表,裡面都是 <li><a></a></li>的形式