BootStrap网页制作框架学习笔记
学习来源：https://www.bilibili.com/video/BV1Et411z7xz
一、bootstrap下载
进入https://www.bootcss.com/
点击bootstrap3中文文档，点击下载用于生产环境的bootstrap。
二、bootstrap导入
新建文件夹，命名为bsdemo，把文件夹拖到vscode.
把bootstrap拖到bsdemo，新建HTML文件夹，新建index.html文件。
在HTML输入doc回车可以得到一个简单的HTML基本样式。
什么是相对路径？
../上一层
什么是绝对路径？
html中输入link回车，可以选择link css等。
scr回车，选择script。
下载jquery，把代码另存为到bsdemo。
html的注释：<!-- -->
1、创建项目的文件夹
2、把项目的文件夹导入到vscode
3、把bootstrap拖入项目文件夹
4、新建HTML文件夹
5、创建index.html
6、给index.html导入基本样式
7、导入bootstrap的css
8、导入bootstrap的js
9、下载jquery并导入
基本代码：
<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的结构样式
一行最多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将会另起一行
代码：
<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>
六、针对不同屏幕bootstrap做自适应
代码：
<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>自动换行
<div class="col-md-4">3</div>
</div>
</div>
</div>
八、bootstrap移动offset列的位置
代码：
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1" >1</div>
占据多1个位置
<div class="col-md-4 col-md-offset-5">2</div>
占据多5个位置，超过12个位置会换行
</div>
</div>
九、微调列的位置
代码：
<div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-4" >1</div>
推4个位置
<div class="col-md-4 col-md-pull-4">2</div>
拉4个位置
</div>
</div>
</div>
十、使用small作为副标题
代码：
<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标签里面加lrad。
十三、bootstrap文字操作mark、del、s、ins
p标签中把需要高亮的文字放到<mark>标签中即可高亮。
放到<del>和<s>标签中即可显示被划掉的效果。
十四、bootstrap文字居中
<div class="col-md-12 text-center">居中</div>
text-right右边
text-left左边。
十五、bootstrap文字斜体小号着重标签的
文字放到<em>标签中显示斜体。
文字放到<small>标签中显示斜体。
文字放到<strong>标签中显示粗体。
十六、无序列表和有序列表
<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有序号列表，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">两个123放在一行
<dt>123</dt>
<dd>123</dd>
</dl>
</div>
</div>
二十、代码样式效果
<div class="container">
<div class="row">
<p>
复制使用<kbd>ctrl+c</kbd>
换行使用<code><</code>br/<code>></code>
</p>
</div>
</div>
二十一、创建表格
<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水平相应式布局
<div class="container">
<div class="row">
<div class="col-md-12" table-responsive>手机端可以上下左右拖动
<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>
二十五、创建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"居左侧样式
-->
</div>
</form>
</div>
</div>
</div>