Bootstrap框架
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
該框架已經幫你寫好了很多頁面樣式，你如果需要使用，只需要下載它對應文件，之后直接cv拷貝即可
在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調節即可
版本選擇建議使用v3版本：<https://v3.bootcss.com/>
注意：
bootstrap的js代碼是依賴于jQuery的，也就意味著你在使用Bootstrap動態效果的時候，一定要先導入jQuery
一、bootstrap環境安裝：
方法一：配置cdn
國內推薦使用 Staticfile CDN 上的庫：
<!-- Bootstrap3 核心 CSS 文件 --> <link rel="stylesheet"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstra拍 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
方法二：本地安裝，建議本地安裝一下，方便pycharm或vscode書寫bootstrap時進行提示
本地安裝：
下載好后，解壓
css：樣式
fonts：字體
js：動畫
css和js文件夾中文件留下面紅色框圈出來的就行：
之后將bootstrap-3.3.7-dist中三個文件夾放到項目文件夾中：
代碼示例：輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3MjM1MjMyNmVlIHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTcyMzUyMzI2ZWUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuNDQzNzUiPkZpcnN0IHNsaWRlPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzIzNTIzMWEzMCB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3MjM1MjMxYTMwIj48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNTkzNzUiIHk9IjI3NS40NDM3NSI+U2Vjb25kIHNsaWRlPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
</div>
<div class="item active">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3MjM1MjMxMzYwIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTcyMzUyMzEzNjAiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NTkzNzUiIHk9IjI3NS40NDM3NSI+VGhpcmQgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
bootstrap css概述
避免跨瀏覽器的不一致
Bootstrap 使用Normalize來建立跨瀏覽器的一致性。
Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。
容器（Container）
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用于固定寬度并支持響應式布局的容器。左右兩邊有留白 <div class="container"> ... </div>
.container-fluid 類用于 100% 寬度，占據全部視口（viewport）的容器。左右兩邊沒有留白 <div class="container-fluid"> ... </div>
柵格系統
簡介：
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過“行（row）”在水平方向創建一組“列（column）”。
你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。
注意：
所有“列（column）必須放在 ”.row內
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>柵格系統</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.c2 {
height: 100px;
background-color: skyblue;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="row"> <!-- 一個row就是一行，并且會將所占的部分等分成12份 -->
<div class="col-md-6 c2 col-xs-6 col-sm-6 ">
<div class="row">
<div class="col-md-1 c2"></div> <!-- col-md-n 一行占了超過12份整個布局就亂了 -->
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
</div>
</div>
<div class="col-md-6 c2"></div>
</div>
<div class="row">
<div class="col-md-1 c2"></div> <!-- col-md-n 一行占了超過12份整個布局就亂了 -->
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
</div>
</div>
</body>
</html>
總結：
<div class="row"></div> # 寫一個row就是將所在的區域劃分成12份 <div class="col-md-6 "> 獲取你所要的份數 # 在使用bootstrap的時候 腦子里面一定要做12的加減法
媒體查詢
柵格參數
通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。
總結：
.col-xs- .col-sm- .col-md- .col-lg-
# 針對不同的顯示器 bootstrap會自動選擇對應的參數 # 如果你想要兼容所有的顯示器 你就全部加上即可
示例：如果想兼容多個設備，就把幾個類名都加進去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>柵格系統</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.c2 {
height: 100px;
background-color: skyblue;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="row"> <!-- 一個row就是一行，并且會將所占的部分等分成12份 -->
<div class="col-md-6 c2 col-xs-6 col-sm-6 "></div>
<div class="col-md-6 c2"></div>
</div>
<div class="row">
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div> <!-- col-md-n 一行占了超過12份整個布局就亂了 -->
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
<div class="col-md-1 c2 col-xs-1 col-sm-1"></div>
</div>
</div>
</body>
</html>
列偏移
使用.col-xs-offset-*，.col-sm-offset-*，.col-md-offset-*，.col-lg-offset-*類可以將列向右側偏移。這些類實際是通過使用*選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4類將.col-md-4元素向右側偏移了4個列（column）的寬度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>柵格系統</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.c2 {
height: 100px;
background-color: skyblue;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="row"> <!-- 一個row就是一行，并且會將所占的部分等分成12份 -->
<div class="col-md-6 c2 col-xs-6 col-md-6"></div>
<div class="col-md-6 c2 col-xs-6 col-md-6"></div>
</div>
<div class="row">
<div class="col-md-1 c2 col-xs-6 col-md-6"></div> <!-- col-md-n 一行占了超過12份整個布局就亂了 -->
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
<div class="col-md-1 c2 col-xs-6 col-md-6"></div>
</div>
<div class="row">
<div class="col-md-8 c2 col-md-offset-2"></div> <!--讓這一行居中-->
</div>
</div>
</body>
</html>
排版
bootstrap將所有原生的HTML標簽的文本字體統一設置成了肉眼可以接受的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.c2 {
height: 100px;
background-color: skyblue;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="container">
<!-- 這是標題 -->
<h1>這是h1</h1>
<h2>這是h2</h2>
<h3>這是h3</h3>
<h4>這是h4</h4>
<h5>這是h5</h5>
<h5>這是h6</h5>
<!-- 這是副標題 -->
<h1>py14<small>這是副標題</small></h1>
</div>
</body>
</html>
表格
基本實例
為任意<table>標簽添加.table類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們為其賦予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
<td>study</td>
</tr>
<tr>
<td>1</td>
<td>tank</td>
<td>456</td>
<td>DBJ</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
條紋狀表格
通過.table-striped類可以給<tbody>之內的每一行增加斑馬條紋樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
<td>study</td>
</tr>
<tr>
<td>1</td>
<td>tank</td>
<td>456</td>
<td>DBJ</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
示例
帶邊框的表格
添加.table-bordered類為表格和其中的每個單元格增加邊框。
<table class="table table-bordered"> ... </table>
鼠標懸停
通過添加.table-hover類可以讓<tbody>中的每一行對鼠標懸停狀態作出響應。
<table class="table table-hover"> ... </table>
緊縮表格
通過添加.table-condensed類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。
<table class="table table-condensed"> ... </table>
狀態類
通過這些狀態類可以為行或單元格設置顏色。
| Class | 描述 |
|---|---|
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動作 |
.info |
標識普通的提示信息或動作 |
.warning |
標識警告或需要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動作 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-bordered">
<thead>
<tr class="success">
<!-- text-center對齊方式居中 -->
<th class="text-center">ID</th>
<th class="text-center">username</th>
<th class="text-center">password</th>
<th class="text-center">hobby</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr class="success">
<td>1</td>
<td>jason</td>
<td>123</td>
<td>study</td>
</tr>
<tr >
<td>1</td>
<td>tank</td>
<td>456</td>
<td>DBJ</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
示例
表單
表單控件詳細：
https://www.cnblogs.com/jnslove/p/5434577.html
基本實例
單獨的表單控件會被自動賦予一些全局樣式。所有設置了.form-control類的<input>、<textarea>和<select>元素都將被默認設置寬度屬性為 100%;。 將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
示例
總結：
# 針對表單標簽 加樣式就用form-control
class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我們一般不會給它加form-control，直接使用原生的即可
"""
校驗狀態
Bootstrap 對表單控件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式。使用時，添加.has-warning、.has-error或.has-success類到這些控件的父元素即可。任何包含在此元素之內的.control-label、.form-control和.help-block元素都將接受這些校驗狀態的樣式。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登陸頁面</h2>
<form action="">
<p class="has-success">username:<input type="text" class="form-control"></p>
<p class="has-error">password:<input type="text" class="form-control"></p>
<input type="submit">
</form>
</div>
</div>
</div>
</body>
</html>
效果：
總結：
# 針對報錯信息 可以加has-error（input的父標簽加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
按鈕
可作為按鈕使用的標簽或元素
為<a>、<button>或<input>元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
預定義樣式
使用下面列出的類可以快速創建一個帶有預定義樣式的按鈕。
<!-- Standard button --> <button type="button" class="btn btn-default">（默認樣式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首選項）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危險）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（鏈接）Link</button> #把按鈕做成鏈接的風格
尺寸
需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。
<p> <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默認尺寸）Default button</button> <button type="button" class="btn btn-default">（默認尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>
通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>
按鈕小練習：點贊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<div class="btn btn-info" type="button">
點贊
<i class="fa fa-thumbs-o-up"></i>
<span class="badge">3</span>
</div>
<script>
let btnEle = $(".btn")
let badgeEle = $(".badge")
btnEle.click(function(){
let num = badgeEle.text()
num++;
badgeEle.text(num);
});
</script>
</body>
</html>
圖片
響應式圖片
在 Bootstrap 版本 3 中，通過為圖片添加.img-responsive類可以讓圖片支持響應式布局。其實質是為圖片設置了max- 100%;、height: auto;和display: block;屬性，從而讓圖片在其父元素中更好的縮放。
如果需要讓使用了.img-responsive類的圖片水平居中，請使用.center-block類，不要用.text-center。請參考助手類章節了解更多關于.center-block的用法。
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
通過為<img>元素添加以下相應的類，可以讓圖片呈現不同的形狀。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1671428887,22416777&fm=26&gp=0.jpg" alt="..." class="img-rounded img-responsive center-block">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1671428887,22416777&fm=26&gp=0.jpg" alt="..." class="img-circle img-responsive center-block">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1671428887,22416777&fm=26&gp=0.jpg" alt="..." class="img-thumbnail img-responsive center-block">
</body>
</html>
輔助類
情境文本顏色
通過顏色來展示意圖，Bootstrap 提供了一組工具類。這些類可以應用于鏈接，并且在鼠標經過時顏色可以還可以加深，就像默認的鏈接一樣。
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
關閉按鈕
通過使用一個象征關閉的圖標，可以讓模態框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符號
通過使用三角符號可以指示某個元素具有下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。
<span class="caret"></span>
快速浮動
通過添加一個類，可以將任意元素向左或向右浮動。!important被用來明確 CSS 樣式的優先級。這些類還可以作為 mixin（參見 less 文檔） 使用。
<div class="pull-left">...</div> <div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
讓內容塊居中
為任意元素設置display: block屬性并通過margin屬性讓其中的內容居中。下面列出的類還可以作為 mixin 使用。
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
bootstrap圖標
使用示例：
1、從bootstrap圖標庫選擇圖標，并復制圖標類代碼
2、在代碼中使用
注意：使用圖標要在span標簽class屬性里，圖標代碼寫在span標簽class屬性中，為什么要用span標簽，因為span標簽是行內標簽，它的文本多大取決于這個圖標的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>排版</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登陸頁面</h2>
<form action="">
<p>username:<span class="glyphicon glyphicon-user"></span><input type="text" class="form-control"></p>
<p>password:<input type="text" class="form-control"></p>
<input type="submit" class="btn btn-info">
</form>
</div>
</div>
</div>
</body>
</html>
這個插入的圖標也可以改樣式，例如顏色
<style>
span {
color: greenyellow;
}
</style>
fontAwesome圖標庫
下載地址：http://www.fontawesome.com.cn/
使用方法一：cdn方式
<link rel="stylesheet"> <!--cdn方式-->
使用方式二：本地引入，一并演示使用
1、下載圖標庫
下載地址：http://www.fontawesome.com.cn/
2、下載到本地后，解壓
只要用里面的css和fonts就可以了，css文件夾里；可以只使用壓縮的css
項目文件夾中：
3、index.html中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<div class="btn btn-info" type="button">
點贊
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <!-- 第四步中選擇圖標，復制代碼-->
<span class="badge">3</span>
</div>
<script>
let btnEle = $(".btn")
let badgeEle = $(".badge")
btnEle.click(function(){
let num = badgeEle.text()
num++;
badgeEle.text(num);
});
</script>
</body>
</html>
4、圖標選擇方式：
點擊圖標庫
在頁面單擊想要的圖標
復制代碼：
效果：
5、更多方法：
步驟4中復制代碼下方，獲取更多使用方法：例如改變圖標大小
導航條
默認樣式的導航條
導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（并且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
反色的導航條
通過添加.navbar-inverse類可以改變導航條的外觀。
<nav class="navbar navbar-inverse"> ... </nav>
分頁器
為您的網站或應用提供帶有展示頁碼的分頁組件，或者可以使用簡單的翻頁組件。
默認分頁
受 Rdio 的啟發，我們提供了這個簡單的分頁組件，用在應用或搜索結果中超級棒。組件中的每個部分都很大，優點是容易點擊、易縮放、點擊區域大。
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
禁用和激活狀態
鏈接在不同情況下可以定制。你可以給不能點擊的鏈接添加.disabled類、給當前頁添加.active類。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
我們建議將 active 或 disabled 狀態的鏈接（即<a>標簽）替換為<span>標簽，或者在向前/向后的箭頭處省略<a>標簽，這樣就可以讓其保持需要的樣式而不能被點擊。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
彈框（警告框啥的）
鏈接：
https://lipis.github.io/bootstrap-sweetalert/
使用方式一：cdn
<link rel="stylesheet" > <script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/1.0.1/sweetalert.min.js"></script>
使用方法二（本地方式）：
1、到github上下載（點擊View on Github）
2、解壓
3、可以將dist文件夾拷貝到項目中，并且dist文件夾中只留css和min.js
4、在文件中引用
只要引用dist里面的css和js(用min.js壓縮的)就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font-awesome.min.css圖標庫4.7版本 -->
<link rel="stylesheet">
<!-- 彈框 -->
<link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
<script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>
</head>
<body>
</body>
</html>
5、測試使用（運行頁面，右擊檢查）
總結
以上是生活随笔為你收集整理的Bootstrap框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习实战（四）——基于概率论的分类方
- 下一篇： 数独技巧——唯一矩形排除法的几种情况