【Bootstrap5】精細學習記錄
【Bootstrap5】精細學習記錄
Bootstrap模板
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件，則該文件無法起效果 -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap一切以源碼為重，大體和html差不多（其中網格系統算是創新且重要的），需要時查源碼。
Bootstrap特性
移動設備優先
響應式影像
全局顯示、排版和鏈接
等……
具體可見菜鳥教程
多閱讀源碼！
Bootstrap網格系統
網格系統將container容器分為12列，行row最好在container內，列在行row內，再通過”col-–“定義在不同視口情況下占的列數。
基本網格結構：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
Bootstrap v5.0.0源碼：
可以通過以下程式碼，不斷調整視口大小自己感覺。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>bootstrap-learning</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>hello world</h1>
<div class="container">
<div class="row">
<div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</div>
</body>
</html>
列偏移
即設置列的margin-left，通過查閱源碼，bootstrap5.0.0可以通過
offset-i i偏移的列數（0，11）
offset-xx-i xx:md,sm,···
列嵌套
顧名思義，在row裡面再填列row就可以了。
新列的網格系統均參考父元素。
列排序
Bootstrap5.0.0中，排序使用order
order-i i表示順序
order-xx-i xx:md,sm,···
默認順序層級相同，層級相同時，靠前的排前面
Bootstrap排版
text
Bootstrap5.0.0源碼：
.text-start {
text-align: left !important;
}
.text-end {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-line-through {
text-decoration: line-through !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-wrap {
white-space: normal !important;
}
.text-nowrap {
white-space: nowrap !important;
}
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
.text-primary {
color: #0d6efd !important;
}
.text-secondary {
color: #6c757d !important;
}
.text-success {
color: #198754 !important;
}
.text-info {
color: #0dcaf0 !important;
}
.text-warning {
color: #ffc107 !important;
}
.text-danger {
color: #dc3545 !important;
}
.text-light {
color: #f8f9fa !important;
}
.text-dark {
color: #212529 !important;
}
.text-white {
color: #fff !important;
}
.text-body {
color: #212529 !important;
}
.text-muted {
color: #6c757d !important;
}
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important;
}
.text-reset {
color: inherit !important;
}
更多可參考這裡，然後多閱讀源碼就行了。
Bootstrap基礎組件
程式碼
<code>內聯程式碼</code>
<pre>
程式碼塊
</pre>
程式碼中<: <
>: >
表格
實測：Bootstrap5.0.0還有一些bug😅
最好先使用Bootstrap3或者4。
——————–後面以bootstrap3為準——————–
一些樣式就不說了。
表單
-
垂直表單（默認）
<form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <button type="submit" class="btn btn-default">提交</button> </form> -
內聯表單
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <button type="submit" class="btn btn-default">提交</button> </form> -
水平表單
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form>
按鈕
圖片
輔助類
Bootstrap組件
字體圖標
Customize 字形圖標（Glyphicons） – 菜鳥教程 (runoob.com)
下拉菜單
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜單標題</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
</li>
</ul>
</div>
通過向 .dropdown-menu 添加 class .pull-right 來向右對齊下拉菜單。
···太多了，不想寫了😭，菜鳥教程已經寫得很全了，只需要自己注意一下版本問題就行了，下面就記錄一下關鍵類吧！（相信xdm都會vscode的Emmet吧）···
按鈕組
#基本按鈕組
div.btn-group>button[type=button].btn.btn-defualt*3
#按鈕工具欄
div.btn-tool[role=toolbar]>(div.btn-group>button[type=button].btn.btn-default)*3
#按鈕大小
btn-group-xx xx:sm,lg···
#嵌套
#垂直按鈕組
div.btn-group-vertical>(···)
按鈕下拉菜單
基本：
<div class="btn-group">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">原始
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
</ul>
</div>
按鈕下拉菜單大小：
調整按鈕的類即可。
<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">
按鈕上拉菜單
向父 .btn-group 容器添加 .dropup 即可。
<div class="btn-group dropup">
</div>
輸入框組
基本輸入框組：
1.把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。
2.接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
3.把該 <span> 放置在 <input> 元素的前面或者後面。
div.input-group>(span.input-group-addon{@}+input[type=text].form-control)
按鈕插件：
使用.input-group-addon替代.input-group-btn來包裹按鈕
div.input-group>(span.input-group-button{@}+input[type=text].form-control)
導航元素
標籤式導航菜單
ul.nav.nav-tabs>(li.active>a[href=#]+(li>a[href=#])*5)
膠囊式導航菜單
ul.nav.nav-pills>(li.active>a[href=#]+(li>a[href=#])*5)
垂直導航菜單
在使用.nav、.nav-pills或.nav-tabs的同時使用.nav-stacked
兩端對齊導航
在使用.nav、.nav-pills或.nav-tabs的同時使用.nav-justified
菜單項內容
.tab-content與.tab-pane和data-toggle="tab" (data-toggle="pill" ) 一同使用, 設置標籤頁對應的內容隨標籤的切換而更改。
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首頁</a></li>
<li><a data-toggle="tab" href="#menu1">菜單 1</a></li>
<li><a data-toggle="tab" href="#menu2">菜單 2</a></li>
<li><a data-toggle="tab" href="#menu3">菜單 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首頁</h3>
<p>菜鳥教程 —— 學的不僅是技術，更是夢想！！！</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜單 1</h3>
<p>這是菜單 1 顯示的內容。這是菜單 1 顯示的內容。這是菜單 1 顯示的內容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜單 2</h3>
<p>這是菜單 2 顯示的內容。這是菜單 2 顯示的內容。這是菜單 2 顯示的內容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜單 3</h3>
<p>這是菜單 3 顯示的內容。這是菜單 3 顯示的內容。這是菜單 3 顯示的內容。</p>
</div>
</div>
導航欄
默認導航欄
1.向 <nav> 標籤添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation"，有助於增加可訪問性。
3.向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
4.為了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。
響應式導航欄
# <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
# <div class="collapse navbar-collapse" id="example-navbar-collapse"></div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
表單導航欄
# 在原本標籤位置：
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
導航欄按鈕
# 不在form中的button
# .navbar-btn 可被使用在 <a> 和 <input> 元素上。
<button type="button" class="btn btn-default navbar-btn">
導航欄按鈕
</button>
導航欄文本
<p class="navbar-text">Runoob 用戶登錄</p>
導航欄組件對齊
.navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航鏈接、表單、按鈕或文本 這些組件。
導航欄固定在頂底部
# 頂部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
</nav>
# 底部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
</nav>
# 隨著頁面移動的頂底部
<nav class="navbar navbar-default navbar-static-top" role="navigation">
</nav>
反色導航欄
<nav class="navbar navbar-inverse" role="navigation">
</nav>
麵包屑組
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
分頁
分頁（Pagination）
ul.pagination>(li>a[href=#]{«}+(li>a[href=#]{$}*5)+li>a[href=#]{»})
翻頁（Pager）
ul.pager>(li.previous>a[href=#]{←pre}+li.next>a[href=#]{next→})
標籤
<span class="label label-default">默認標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">資訊標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>
徽章
<span class="badge">50</span>
# 當內部為空時，自動隱藏
<span class="badge pull-right">42</span>
# pull-right、pull-left 調整徽章位置
# 相對標籤更圓潤
超大螢幕
1.創建一個帶有 class .jumbotron. 的容器 <div>
2.除了更大的 <h1>，字體粗細 font-weight 被減為 200
頁面標題
如需使用頁面標題（Page Header），請把您的標題放置在帶有 class .page-header 的 <div> 中
div.page-header
縮略圖
1.在影像周圍添加帶有 class .thumbnail 的 <a> 標籤。
2.這會添加四個像素的內邊距（padding）和一個灰色的邊框。
3.當滑鼠懸停在影像上時，會動畫顯示出影像的輪廓。
警告
普通：
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">資訊！請注意這個資訊。</div>
<div class="alert alert-warning">警告！請不要提交。</div>
<div class="alert alert-danger">錯誤！請進行一些更改。</div>
可取消：
# 同時添加alert-dismissable
<div class="alert alert-success alert-dismissable">
進度條
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
其他樣式：
# 在 progress-bar 基礎上添加 progress-bar-* ( * = success、info、warning、danger)
決定進度條顏色
# 條紋的進度條
在 progress 基礎上添加 progress-striped
# 運動起來
在 progress 基礎上添加 active
# 堆疊起來
div.progress元素內部 添加多個 div.progress-bar
多媒體對象
媒體對象可以用更少的程式碼來實現媒體對象（如：影像、影片、音頻等）與文字的混排。
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">左對齊</h4>
<p>這是一些示例文本...</p>
</div>
</div>
列表組
ul.list-group>(li.list-group-item)*5
列表組豎直排列，可以使用一下css程式碼獲得水平排列列表組。
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
面板
基本
<div class="panel panel-default">
<div class="panel-body">
這是一個基本的面板
</div>
</div>
其他樣式：
panel-primary
panel-success
panel-info
panel-warning
panel-danger
面板內部結構：
panel-heading
1.使用 .panel-heading class 可以很簡單地向面板添加標題容器。
2.使用帶有 .panel-title class 的 <h1>-<h6> 來添加預定義樣式的標題。
panel-body
panel-footer
其他結構：如： table、ul……
Well
Well 是一種會引起內容凹陷顯示或插圖效果的容器 <div>。
div.well
