bootstrap知识点

首先，声明本次笔记是来自biaoyansu.com表严肃老师的bootstrap课程视频。

1.基本知识：
1-1.首先，Html(理解：骨骼)、Css(理解：皮肤)、Js(理解：神经)分工不同。
1-2.然后，由于情况是递增的所以造成了上述三者代码量关系：Html<Css<Js。
1-3.对于上述三者代码量的关系，具体来说：
(1).Html仅满足了填写内容功能(即内容有地方放)；
(2).要实现内容更好看这在一开始是不行的但我们想让它行所以就定义了Css这一套标准从而让Css来控制网页样式；
(3).有了更好看的界面之后我还想要一点功能比如说做一个"轮播"然后轮播里可以是图片也可以是Html然后轮播控制
3秒轮播一次这些都需要通过逻辑来实现，Html和Css都无法满足所以只好再开发个Js，由于需求更复杂也就导致了
Js更复杂因为Js要满足我们的需求。
2.栅格系统：
2-1.目的：用于分割页面中的宽度。
2-2.比较之前：
首先：要实现页面中四个块级元素<div>内容在页面平铺开来，不能摞在一起显示。
操作：给四个块级元素添加样式声明“宽度占母元素25%且向左浮动”
结果：四个块级元素<div>内容平铺在页面显示。
操作：打开开发者工具(在右侧显示)然后缩小页面宽度，发现四个块级元素内容仍平铺开来显示。
分析：像上述这种情况，那会给用户带来很大的不便(即一行一个单词)。
比较现在：(bootstrap中栅格系统可以解决上述问题。)
首先：栅格系统会把母元素的宽度看成是12份，最小单位就是1/12。
然后：延用上述代码，引用bootstrap.css文件，注释掉已有样式，在已存在的四个<div>元素中加入样式类
"col-md-3"后测试。(其中"col"为column缩写代表列，"md"表示窗口的宽度为多少时才能作用栅格系统规则
,"3"表示窗口的宽度)
结果：四个块级元素<div>内容平铺在页面显示。
操作：打开开发者工具(在右侧显示)然后缩小页面宽度，发现四个块级元素内容摞在一起显示出来。
分析：栅格系统已经起到作用。
接着：如果用户想要实现在最小页面宽度(即四个块级元素内容刚好摞起来显示)下四个块级元素仍可平铺开
显示。我们可以修改上述样式类"col-md-3"中的"md"为"sm"即可(注："md"为medium缩写代表中尺寸，
"sm"为small缩写代表小尺寸)。
结果：在上述基础上刷新页面发现摞在一起的四个块级元素重新平铺开来显示。
分析：修改样式为"col-sm-3"已起到作用。
2-3.把页面分成3份做一个"左侧栏+内容+右侧栏"页面布局。
操作：修改上述代码,删除掉一个块级元素,然后把剩下三个块级元素的样式类都改为"col-md-4"。然后给三个
块级元素分别加上"左侧栏"、"内容"、"右侧栏"这三个标题。
结果："左侧栏"、"内容"、"右侧栏"这三部分内容平铺在页面显示出来且每个部分都应用"padding-right: 15px"、
"padding-left: 15px"这两个样式自动分割开来。
操作：缩小浏览器宽度时，会发现当前页面布局在手机界面依然友好。
2-4.总结：
(1).横向分割页面上的空间；
(2).分割同时考虑到响应式。
3.表单(常用内容)：
3-1.在页面中代码如下：
<html lang="zh_CN">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"/>
<style>
.container-small
{
max-width: 500px;
}
</style>
</head>
<body>
<form class="container container-small">
<h1>注册</h1>
<div class="form-group">
<label>姓</label>
<input type="text" class="form-control"/>//需熟记"form-group"、"form-control"这两个样式类。
</div>
<div class="form-group">
<label>名</label>
<input type="text" class="form-control"/>//需熟记"form-group"、"form-control"这两个样式类。
</div>
</form>
</body>
</html>
测试上述代码。
结果：第一行显示"注册"，然后"姓"的下一行显示一个输入框，另起一行最后"名"的下一行显示一个输入框。
然后：由于用户"姓"和"名"的总长度不超过浏览器页面一行。所以要实现将"姓"和"名"在一行显示。
操作：在<h1>元素下面添加<div>元素并使其作用样式类"form-inline"，然后将"姓"和"名"及其输入框放入<div>元素
中。再测试代码。具体修改部分代码如下：
<div class="form-inline">
<div class="form-group">
/*...这里是"姓"这一项内容...*/
</div>
<div class="form-group">
/*...这里是"名"这一项内容...*/
</div>
</div>
结果："姓"和"名"及其输入框整行显示。
3-2.样式类"form-control"的第二种用法：
修改上述页面代码(这里只给出修改部分),在"名"这一项后添加以下代码：
<div class="form-group">
<label>来自</label>
<select class="form-control">
<option value="1">背背村</option>
<option value="1">栓蛋村</option>
<option value="1">花花村</option>
</select>
</div>
测试代码。
结果：新添加的下拉框的样式会和上述"姓"和"名"输入框的样式相同。但同时下拉框未和"姓"、"名"这两项分开。
分析：因为下拉框和"姓"、"名"这两项都放在<div class="form-inline"></div>里面。
操作：把下拉框代码重新放到<div class="form-inline"></div>外面<form></form>里面。
结果：实现了下拉框和"姓"、"名"这两项分开。
3-3.表单验证之用户姓名验证：
首先：当用户姓名出现不规则输入时(比如姓输入:“123”)给出高亮样式。
然后：修改代码如下(这里只给出修改部分)：
<div class="form-group has-error">
<label>姓</label>
<input type="text" class="form-control"/>//需熟记"form-group"、"form-control"这两个样式类。
</div>
测试代码。
结果："姓"的输入框显示红色边框。
接着：如想要"姓"的颜色也跟着改变。
操作：修改代码如下(这里只给出修改部分):
<label class="control-label">姓</label>
结果："姓"字体颜色也变为红色。
总结：除了样式类"has-error"，还有"has-success"、"has-warning"等这两个样式类他们三个的用法相同但效果
不同。
分析：样式类"has-success"表示正确提示，样式类"has-warning"表示警告提示。
3-4.如想要实现和现金有关的操作：
在<div class="form-inline"></div>外面以及<form class="container container-small"></form>里面添加如
下代码：
<div class="form-group">
<label>充值金额</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"/>//需熟记"form-group"、"form-control"这两个样式类。
</div>
</div>
测试代码。
结果：在"姓""名"两项的下面出现充值金额然后另起一行首先显示"$"符号且此处不可输入当前行再靠右即可输入指定
货币单位的具体金额。
3-5.可实现样式类"form-control"作用下的<input/>更大或更小：
比如这里修改"姓"这一项的输入框：
<label>姓</label>
<input type="text" class="form-control input-lg"/>//需熟记"form-group"、"form-control"这两个样式类。
测试代码。
结果："姓"这一项的输入框明显变大。
总结：除了样式类"input-lg"，还有样式类"input-sm"的用法与前者相同但效果相反。
4.按钮：
4-1.在页面中代码如下：
<html lang="zh_CN">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"/>
<style></style>
</head>
<body>
<button>戳我</button>
</body>
</html>
测试代码。
结果：(如下图)