首先，声明本次笔记是来自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>
测试代码。
结果：(如下图)

分析：当前button按钮的样式比较老套。可应用bootstrap规则来修改样式。

操作：修改部分代码如下：

<div class="well">

<button class="btn btn-default">戳我</button>

</div>

结果：(如下图)

分析：当前button按钮底色变白且边角由直线变为曲线，同时按钮周围出现比较大的padding。

接着：除了样式类"btn btn-default"外，还有样式类"btn btn-primary"的用法和前者一致。直接替换然后调式代码。

结果：(如下图)

分析：当前button按钮底色为网站主色调一般用来表示登录或提交。

接着：样式类"btn btn-danger"的用法同上。直接替换然后调式代码。

结果：(如下图)

分析：当前button按钮一般用来表示危险操作比如说：删除操作、不可撤销的操作。

接着：样式类"btn btn-warning"的用法同上。直接替换然后调式代码。

结果：(如下图)

分析：当前button按钮一般用来表示警告

最后：上述讲的这些button按钮的样式还可作用在<a>、<input>元素中。

接着：通过样式类"btn-lg"、"btn-sm"、"btn-xs"还可以改变按钮的大小(注意默认样式类为"btn-md");

通过样式类"btn-block"可使整个按钮占其母元素的整宽(用于页面中只有一张表单时的提交)。

然后：如某用户来自哪里，我们使那个地方高亮显示。

操作：修改部分代码如下：

<button class="btn btn-default">背背村</button>

<button class="btn btn-default active">栓蛋村</button>

<button class="btn btn-default">花花村</button>

比如这里选中"栓蛋村"调式代码。

结果：(如下图)

分析：鼠标还未选中第二个按钮就已经激活说明用户已经选中该按钮。这里可理解为用户选中哪里就"active"那里。(用于管理页面)

接着：还可以通过属性disabled="disabled"来禁用button按钮。

操作：修改部分代码如下：

<button disabled="disabled" class="btn btn-default">戳我</button>

结果：(如下图)

分析：当前按钮(颜色变淡)已禁用且光标移上去是不能点击的。

总结：需要记住的样式类包括"btn"、"btn-default"、"btn-primary"、"btn-danger"、"active"。

bootstrap知识点的更多相关文章

  1. bootstrap 知识点

    1.datetimepicker //带分钟选择 $('.form_datetime').datetimepicker({ format: 'yyyy-mm-dd HH:mm:ss', languag ...

  2. Bootstrap知识点梳理

  3. Bootstrap实战 - 瀑布流布局

    讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 B ...

  4. BootStrap基础入门概述总结

    是否还值得学习BootStrap 因为自己还是学生,自己在学习之前就先在网上看了看BootStrap是否在现在依旧流行,是否还值得学习. 以下是网友的一些评价: 20年11月 Bootstrap作为入 ...

  5. bootstrap实战练习中涉及的知识点（很有用哦！）

    看的有关视频做的笔记,对bootstrap中涉及的知识点做了一定的解析,很有用哦!(新手上路,有不合适的地方可以指出哦!) 下面进入正题: Bootstrap是当下最流行的前端框架(界面工具集) 特点 ...

  6. bootstrap基础知识点YI

    <!DOCTYPE html> <html lang="en"> ... </html> bootstrap页面都应该包含html5声明. 框架 ...

  7. bootstrap 架构知识点

    .col-md-pull-2 向右相对定位偏移量 .col-md-push-2 向左相对定位偏移量 .pull-left 左浮动 .pull-right 右浮动     改变大小写 通过这几个类可以改 ...

  8. bootstrap常用知识点总结

    api地址:https://v3.bootcss.com/css/#forms 栅格参数: bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏 幕 大小 把屏 幕分 ...

  9. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. 动态规划——稀疏表求解RMQ问题

    RMQ (Range Minimum/Maximum Query)问题,即区间最值查询问题,是求解序列中的某一段的最值的问题.如果只需要询问一次,那遍历枚举(复杂度O(n))就是最方便且高效的方法,但 ...

  2. luoguP1081 开车旅行 题解(NOIP2012)

    这道题是真滴火!(一晚上加一节信息课!) 先链接一下题目:luoguP1081 开车旅行 首先,这个预处理就极其变态,要与处理出每一个点往后走A会去哪里,B会去哪里.而且还必须O(nlogn)给它跑出 ...

  3. python学习第五天流程控制分支if和循环while

    所有的逻辑结构围绕分支和循环进行,比如登陆注册,支付成功与否等等,下面讲述分支if用法和while用法 if age>30: print("www.96net.com.cn" ...

  4. codeforces 448CPainting Fence

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y990041769/article/details/37935237 题目:codeforces 4 ...

  5. Kafka、ActiveMQ、RabbitMQ、RocketMQ 都有什么区别，消息队列有什么优点和缺点

    面试题 为什么使用消息队列? 消息队列有什么优点和缺点? Kafka.ActiveMQ.RabbitMQ.RocketMQ 都有什么区别,以及适合哪些场景? 面试官心理分析 其实面试官主要是想看看: ...

  6. Linux学习笔记4-CentOS7中redis3.2.9安装教程

    redis下载地址:http://www.redis.cn/download.html 1.将下载过来的redis-3.2.9.tar.gz文件复制到/usr/local文件夹下 2.tar xzf ...

  7. 369-双路千兆网络PCIe收发卡

    双路千兆网络PCIe收发卡 一.产品概述 PCIe网络收发卡要求能支持千兆光口,千兆电口:半高板卡.板卡插于服务器,室温工作. 支持2路千兆光口,千兆电口. FPGA选用型号 XC7A50T-1FGG ...

  8. Codecraft-17 and Codeforces Round #391 - A

    题目链接:http://codeforces.com/contest/757/problem/A 题意:给定一个字符串,问你从这个字符串中选出一些字符然后重新排序后最多能组成多少个 Bulbasaur ...

  9. Makefile中几种变量赋值运算符

    Makefile中几种变量赋值运算符: =      :最简单的赋值 :=     :一般也是赋值 以上这两个大部分情况下效果是一样的,但是有时候不一样. 用 = 赋值的变量,在被解析时他的值取决于最 ...

  10. vue-ivew input 框 回车搜索功能

    1. 添加事件 <FormItem prop="> <Input type="text" v-model="formInline.produc ...