一、警告提示框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>警告提示框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>警告提示框及鏈接樣式</h1><hr>
<div class="alert alert-primary" role="alert">主-<a class="alert-link" href="#">框內的鏈接</a></div>
<div class="alert alert-secondary" role="alert">次-<h4 class="alert-heading" href="#">框內的標題</h4></div>
<div class="alert alert-success" role="alert">成功-<p class="mb-0" href="#">框內的段落</p></div>
<div class="alert alert-danger" role="alert">危險-<hr>框內的分隔符</div>
<div class="alert alert-warning" role="alert">警告-可以在右上角定義一個.close關閉按鈕效果，則需要在容器中引用.alert-dismissible類</div>
<div class="alert alert-info" role="alert">信息-警告按鈕上要增加data-dismiss="alert" 觸發 JavaScript 動作，同時使用button元素，以確保在所有設備上都能獲得正確的行爲響應。</div>
<div class="alert alert-light" role="alert">亮-要在關閉警報時生成警報提示，請確保添加.fade和.show樣式</div>
<div class="alert alert-dark alert-dismissable fade show" role="alert">暗-<button class="close" data-dismiss="alert">×</button></div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
二、徽章
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>徽章</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>外服</h1>
<h5>使用badge實現效果，使用badge-secondary爲徽章指定樣式<span class="badge badge-secondary">徽章</span></h5>
<hr><h1>內用</h1>
<button type="button" class="btn btn-primary">
使用badge實現效果，使用badge-secondary爲徽章指定樣式
<span class="badge badge-light">徽章</span>
</button>
<hr><h1>情景變化</h1>
<span class="badge badge-primary">主</span>
<span class="badge badge-secondary">次</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危險</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">亮</span>
<span class="badge badge-dark">暗</span>
<hr><h1>膠囊形</h1>
<span class="badge badge-pill badge-primary">主</span>
<span class="badge badge-pill badge-secondary">次</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-danger">危險</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-light">亮</span>
<span class="badge badge-pill badge-dark">暗</span>
<hr><h1>應用到鏈接上</h1>
<a href="#" class="badge badge-primary">主</a>
<a href="#" class="badge badge-secondary">次</a>
<a href="#" class="badge badge-success">成功</a>
<a href="#" class="badge badge-danger">危險</a>
<a href="#" class="badge badge-warning">警告</a>
<a href="#" class="badge badge-info">信息</a>
<a href="#" class="badge badge-light">亮</a>
<a href="#" class="badge badge-dark">暗</a>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
三、麪包屑導航
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>麪包屑導航</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
</nav>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
</nav>
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
四、按鈕
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>按鈕</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>基本用法</h1>
<button class="btn btn-primary">主</button>
<button class="btn btn-secondary">次</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危險</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-light">亮</button>
<button class="btn btn-dark">暗</button>
<button class="btn btn-link">鏈接</button>
<hr><h1>其他元素</h1>
<a class="btn btn-primary" href="#" role="button">a</a>
<button class="btn btn-primary">button</button>
<input class="btn btn-primary" type="button" value="input[type='button']">
<input class="btn btn-primary" type="submit" value="input[type='submit']">
<input class="btn btn-primary" type="reset" value="input[type='reset']">
<hr><h1>輪廓按鈕</h1>
<button class="btn btn-outline-primary">主</button>
<button class="btn btn-outline-secondary">次</button>
<button class="btn btn-outline-success">成功</button>
<button class="btn btn-outline-danger">危險</button>
<button class="btn btn-outline-warning">警告</button>
<button class="btn btn-outline-info">信息</button>
<button class="btn btn-outline-light">亮</button>
<button class="btn btn-outline-dark">暗</button>
<hr><h1>尺寸規格</h1>
<button class="btn btn-outline-primary btn-lg">btn btn-primary btn-lg</button>
<button class="btn btn-secondary btn-sm">btn btn-secondary btn-sm</button>
<button class="btn btn-success btn-block">btn btn-success btn-block</button>
<hr><h1>按鈕狀態</h1>
<a href="#" class="btn btn-primary active" role="button">該a擁有焦點</a>
<a href="#" class="btn btn-primary " role="button">該a可用沒有焦點</a>
<a href="#" class="btn btn-primary disabled" role="button">該a不可用</a>
<button href="#" class="btn btn-primary active">該button擁有焦點</button>
<button href="#" class="btn btn-primary">該button可用沒有焦點</button>
<button href="#" class="btn btn-primary" disabled>該button不可用</button>
<button class="btn btn-info" data-toggle="button">點擊切換按鈕狀態樣式</button>
<hr><h1>複選框和單選框</h1>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" autocomplete="off" checked>複選框和單選框的樣式只能通過click事件更新
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">如果使用reset按鈕或者js改變checked屬性
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">則需要手動改變狀態樣式
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-warning active">
<input type="radio" autocomplete="off" name="options" checked>使用btn-group-toggle屬性可以去掉選框
</label>
<label class="btn btn-warning">
<input type="radio" autocomplete="off" name="options">目前不穩定
</label>
<label class="btn btn-warning">
<input type="radio" autocomplete="off" name="options">僅僅是用於改變樣式
</label>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script></body>
</html>
![]()
五、按鈕組
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>按鈕組</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>基本用法</h1>
<div class="btn-group">
<button class="btn btn-secondary">左</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-secondary">右</button>
</div>
<hr><h1>組合用法</h1>
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<button class="btn btn-secondary">3</button>
<button class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2">
<button class="btn btn-secondary">5</button>
<button class="btn btn-secondary">6</button>
<button class="btn btn-secondary">7</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary">8</button>
</div>
</div>
<div class="btn-toolbar mb-3 mt-3">
<div class="btn-group mr-2">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<button class="btn btn-secondary">3</button>
<button class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control">
</div>
</div>
<hr><h1>大小規格和尺寸縮放</h1>
<p>一個btn-toolbar中的所有btn-group大小都相同，如果不同，會選擇最大的那個覆蓋其他</p>
<div class="btn-group btn-group-lg">
<button class="btn btn-secondary">大</button>
<button class="btn btn-secondary">大</button>
<button class="btn btn-secondary">大</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary">中</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-secondary">中</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-secondary">小</button>
<button class="btn btn-secondary">小</button>
<button class="btn btn-secondary">小</button>
</div>
<hr><h1>嵌套</h1>
<div class="btn-group">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">下拉菜單</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">條目一</a>
<a class="dropdown-item" href="#">條目二</a>
</div>
</div>
</div>
<hr><h1>垂直排列</h1>
<div class="btn-group-vertical">
<button class="btn btn-secondary">按鈕</button>
<div class="btn-group-vertical">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">下拉菜單</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">條目一</a>
<a href="#" class="dropdown-item">條目二</a>
</div>
</div>
<button class="btn btn-secondary">按鈕</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
六、卡片
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>卡片</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>基本用法</h1><br>
<div class="row">
<div class="col-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<h6 class="card-subtitle mb-2 text-muted">卡片副標題</h6>
<p class="card-text">內容</p>
<a href="#" class="card-link">卡片鏈接</a>
</div>
</div>
<br>
<div class="card bg-secondary">
<div class="card-body">
<p class="card-text">內容</p>
</div>
<img class="card-img-bottom" src="Koala.jpg" alt="圖片加載失敗">
</div>
</div>
<div class="col-2">
<div class="card">
<ul class="list-group list-group-flush">
<li class="bg-success list-group-item">張三</li>
<li class="bg-success list-group-item">李四</li>
<li class="bg-success list-group-item">羅翔</li>
</ul>
</div>
<br>
<div class="card text-center">
<h5 class="card-header">頁眉</h5>
<div class="card-header bg-transparent">頁眉</div>
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">內容</p>
<a href="#" class="btn btn-primary">卡片鏈接</a>
</div>
<div class="card-footer text-muted">2天前</div>
</div>
</div>
<div class="col-2">
<div class="card bg-warning">
<img class="card-img-top" src="Koala.jpg" alt="圖片加載失敗">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">內容</p>
</div>
<ul class="list-group list-group-flush">
<li class="bg-warning list-group-item">張三</li>
<li class="bg-warning list-group-item">李四</li>
<li class="bg-warning list-group-item">羅翔</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">卡片鏈接</a>
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
<hr><h1>導航</h1>
<div class="row">
<div class="col-3">
<div class="card text-center bg-info">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">一</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">二</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">三</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">標題</h5>
<p class="card-text">內容</p>
<a href="#" class="btn btn-primary">鏈接</a>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-center bg-dark">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">一</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">二</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">三</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">標題</h5>
<p class="card-text">內容</p>
<a href="#" class="btn btn-primary">鏈接</a>
</div>
</div>
</div>
</div>
<hr><h1>圖像疊加覆蓋</h1>
<div class="card text-white w-25">
<img class="card-img" src="Koala.jpg" alt="圖片加載失敗">
<div class="card-img-overlay" style="background-color: #000;opacity: 0.5">
<h5 class="card-title">標題</h5>
<p class="card-text">內容</p>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
七、輪播效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>輪播圖</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="row">
<div class="col-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Desert.jpg" class="d-block w-100" alt="圖片加載失敗">
</div>
<div class="carousel-item">
<img src="Jellyfish.jpg" class="d-block w-100" alt="圖片加載失敗">
</div>
<div class="carousel-item">
<img src="Lighthouse.jpg" class="d-block w-100" alt="圖片加載失敗">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-3">
<h1 class="text-left">左邊：推拉式</h1><br><br><br><br><br><br><br><br><br><br>
<h1 class="text-right">右邊：交替式，有字幕</h1>
</div>
<div class="col-3">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Desert.jpg" class="d-block w-100" alt="圖片加載失敗">
<div class="carousel-caption d-none d-md-block">
<h5>第一張圖</h5>
<p>清明上河圖</p>
</div>
</div>
<div class="carousel-item">
<img src="Jellyfish.jpg" class="d-block w-100" alt="圖片加載失敗">
<div class="carousel-caption d-none d-md-block">
<h5>第二張圖</h5>
<p>春樹秋霜圖</p>
</div>
</div>
<div class="carousel-item">
<img src="Lighthouse.jpg" class="d-block w-100" alt="圖片加載失敗">
<div class="carousel-caption d-none d-md-block">
<h5>第三張圖</h5>
<p>小雞啄米圖</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$('.carousel').carousel({
interval: 1000, // 指定自動切換間隔，爲false時不自動切換
keyboard: false, // 如果爲true可以通過左右方向鍵進行切換控制，前提是切換按鈕獲得焦點。
pause: "hover", // 鼠標懸停時暫停切換，false關閉該功能
ride: false, // 在用戶手動循環第一個項目後自動播放傳送帶， 如果“carousel”則加載時自動播放傳送帶。
wrap: true // true是無限循環，false是循環一次
})
</script>
</body>
</html>
八、摺疊面板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>摺疊面板</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>兩種實現方式</h1>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">帶href的a</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">帶data-target的button</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">使用卡片實現的內容</div>
</div>
<hr><h1>多目標控制</h1>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1"">第一部分</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample2">第二部分</button>
<button class="btn btn-primary" data-toggle="collapse" data-target=".multi-collapse">全部顯示/隱藏</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">全部顯示/隱藏實際上是把所有的狀態置反</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">先顯示1，再點全部顯示/隱藏，會隱藏1顯示2</div>
</div>
</div>
</div>
<hr><h1>手風琴摺疊範例</h1>
<div class="accordion bg-dark w-25" id="accordionExample">
<div class="card">
<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseOne"><h2 class="m-auto">標題1</h2></div>
<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
<div class="card-body">第1部分</div>
</div>
</div>
<div class="card">
<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseTwo"><h2 class="m-auto">標題2</h2></div>
<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
<div class="card-body">第2部分</div>
</div>
</div>
<div class="card">
<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseThree"><h2 class="m-auto">標題3</h2></div>
<div id="collapseThree" class="collapse" data-parent="#accordionExample">
<div class="card-body">第3部分</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
