學(xué)習(xí)來源：https://www.bilibili.com/video/BV1Et411z7xz
一、bootstrap下載
進(jìn)入https://www.bootcss.com/
點(diǎn)擊bootstrap3中文文檔，點(diǎn)擊下載用于生產(chǎn)環(huán)境的bootstrap。
二、bootstrap導(dǎo)入
新建文件夾，命名為bsdemo，把文件夾拖到vscode.
把bootstrap拖到bsdemo，新建HTML文件夾，新建index.html文件。
在HTML輸入doc回車可以得到一個(gè)簡(jiǎn)單的HTML基本樣式。
什么是相對(duì)路徑？
../上一層
什么是絕對(duì)路徑？
html中輸入link回車，可以選擇link css等。
scr回車，選擇script。
下載jquery，把代碼另存為到bsdemo。
html的注釋：<!-- -->
1、創(chuàng)建項(xiàng)目的文件夾
2、把項(xiàng)目的文件夾導(dǎo)入到vscode
3、把bootstrap拖入項(xiàng)目文件夾
4、新建HTML文件夾
5、創(chuàng)建index.html
6、給index.html導(dǎo)入基本樣式
7、導(dǎo)入bootstrap的css
8、導(dǎo)入bootstrap的js
9、下載jquery并導(dǎo)入
基本代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class = "col-md-12">
<p class="text-danger"><!--字體顏色為紅-->
www.hao123.com</p>
</div>
</div>
</div>
</body>
</html>
三、bootstrap的結(jié)構(gòu)樣式
一行最多12列。
代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../jquery.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-3">4</div>
<div class="col-md-9">12</div>
</div>
</div>
</div>
</body>
</html>
四、列中新增子行
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../jquery.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6">a1</div>
<div class="col-md-6">a2</div>
</div>
<div class="row">
<div class="col-md-6">a3</div>
<div class="col-md-6">a4</div>
</div>
</div>
<div class="col-md-9">12</div>
</div>
</div>
</div>
</body>
</html>
五、bootstrap列寬超過12將會(huì)另起一行
代碼：
<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-8">2</div>
<div class="col-md-4">3</div>
</div>
六、針對(duì)不同屏幕bootstrap做自適應(yīng)
代碼：
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-12">1</div>
<div class="col-md-2 col-xs-6">2</div>另起一行
<div class="col-md-2 col-xs-6">3</div>同在一行
</div>
大屏幕顯示在同一行，小屏幕則分行。
七、重置行高度
代碼：
<div>
<div class="container">
<div class="row">
<div class="col-md-6" style="height: 100px;">1</div>
<div class="col-md-4">2</div>
<div class="clearfix"></div>自動(dòng)換行
<div class="col-md-4">3</div>
</div>
</div>
</div>
八、bootstrap移動(dòng)offset列的位置
代碼：
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1" >1</div>
占據(jù)多1個(gè)位置
<div class="col-md-4 col-md-offset-5">2</div>
占據(jù)多5個(gè)位置，超過12個(gè)位置會(huì)換行
</div>
</div>
九、微調(diào)列的位置
代碼：
<div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-4" >1</div>
推4個(gè)位置
<div class="col-md-4 col-md-pull-4">2</div>
拉4個(gè)位置
</div>
</div>
</div>
十、使用small作為副標(biāo)題
代碼：
<div>
<div class="container">
<div class="row">
<h1>I`m title<small>abc</small></h1>
<h1>hello</h1>
</div>
</div>
</div>
十一、bootstrap中改變行高和字體
<body style="line-height: 40px;font-size:30px;">
<div>
<div class="container">
<div class="col-md-12">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>
</div>
</body>
十二、bootstrap段落添加lead
<p class="lead"></p>p標(biāo)簽里面加lrad。
十三、bootstrap文字操作mark、del、s、ins
p標(biāo)簽中把需要高亮的文字放到<mark>標(biāo)簽中即可高亮。
放到<del>和<s>標(biāo)簽中即可顯示被劃掉的效果。
十四、bootstrap文字居中
<div class="col-md-12 text-center">居中</div>
text-right右邊
text-left左邊。
十五、bootstrap文字斜體小號(hào)著重標(biāo)簽的
文字放到<em>標(biāo)簽中顯示斜體。
文字放到<small>標(biāo)簽中顯示斜體。
文字放到<strong>標(biāo)簽中顯示粗體。
十六、無序列表和有序列表
<div class="container">
<div class="row">
<ul>
<li>a</li>
<li>b</li>
c
<ul>
<li>1</li>
<li>2</li>
</ul>
</ul>
</div>
</div>
ol有序號(hào)列表，ul無序列表。
十七、無樣式的無序列表
<ul class="list-unstyled">
十八、帶描述的短語列表
<div class="container">
<div class="row">
<dl>
<dt>123</dt>帶加粗效果的描述
<dd>123</dd>
</dl>
</div>
</div>
十九、水平短語列表
<div class="container">
<div class="row">
<dl class="dl-horizontal">兩個(gè)123放在一行
<dt>123</dt>
<dd>123</dd>
</dl>
</div>
</div>
二十、代碼樣式效果
<div class="container">
<div class="row">
<p>
復(fù)制使用<kbd>ctrl+c</kbd>
換行使用<code><</code>br/<code>></code>
</p>
</div>
</div>
二十一、創(chuàng)建表格
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<tr>
<td>id</td>
<td>content</td>
</tr>
<tr>
<td>1</td>
<td>pig</td>
</tr>
<tr>
<td>2</td>
<td>dog</td>
</tr>
<tr>
<td>3</td>
<td>cat</td>
</tr>
</table>
</div>
</div>
</div>
二十二、表格hover效果，給表格添加邊框
class空格后可以增加樣式
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered">
<tr>
<td>id</td>
<td>content</td>
</tr>
<tr>
<td>1</td>
<td>pig</td>
</tr>
<tr>
<td>2</td>
<td>dog</td>
</tr>
<tr>
<td>3</td>
<td>cat</td>
</tr>
</table>
</div>
</div>
</div>
二十三、給不同行添加背景色，收縮表格
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered table-condensed">收縮
<tr class="active">
<td>id</td>
<td>content</td>
</tr>
<tr class="success">
<td>1</td>
<td>pig</td>
</tr>
<tr class="danger">
<td>2</td>
<td>dog</td>
</tr>
<tr>
<td>3</td>
<td>cat</td>
</tr>
</table>
</div>
</div>
</div>
二十四、table水平相應(yīng)式布局
<div class="container">
<div class="row">
<div class="col-md-12" table-responsive>手機(jī)端可以上下左右拖動(dòng)
<table class="table table-hover table-bordered">
<tr class="active">
<td>id</td>
<td>content</td>
</tr>
<tr class="success">
<td>1</td>
<td>pig</td>
</tr>
<tr class="danger">
<td>2</td>
<td>dog</td>
</tr>
<tr>
<td>3</td>
<td>cat</td>
</tr>
</table>
</div>
</div>
</div>
二十五、創(chuàng)建form表單
<div class="container">
<div class="row">
<div class="col-md-12">
<form style="width: 300px;">
<div class="form-group">
<label for="name">name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="pw">name:</label>
<input type="text" id="pw" name="pw" class="form-control">
</div>
<div class="form-group">
<label for="content" >content:</label>
<textarea name="content" id="content" ></textarea>
<button>提交</button>
<!--
style="float:left"居左側(cè)樣式
-->
</div>
</form>
</div>
</div>
</div>
聯(lián)系客服
