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>
测试代码。
结果：(如下图)
分析：当前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知识点的更多相关文章
- bootstrap 知识点
1.datetimepicker //带分钟选择 $('.form_datetime').datetimepicker({ format: 'yyyy-mm-dd HH:mm:ss', languag ...
- Bootstrap知识点梳理
- Bootstrap实战 - 瀑布流布局
讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多.这里用一些当前流行的网页布局为导向,使用 B ...
- BootStrap基础入门概述总结
是否还值得学习BootStrap 因为自己还是学生,自己在学习之前就先在网上看了看BootStrap是否在现在依旧流行,是否还值得学习. 以下是网友的一些评价: 20年11月 Bootstrap作为入 ...
- bootstrap实战练习中涉及的知识点（很有用哦！）
看的有关视频做的笔记,对bootstrap中涉及的知识点做了一定的解析,很有用哦!(新手上路,有不合适的地方可以指出哦!) 下面进入正题: Bootstrap是当下最流行的前端框架(界面工具集) 特点 ...
- bootstrap基础知识点YI
<!DOCTYPE html> <html lang="en"> ... </html> bootstrap页面都应该包含html5声明. 框架 ...
- bootstrap 架构知识点
.col-md-pull-2 向右相对定位偏移量 .col-md-push-2 向左相对定位偏移量 .pull-left 左浮动 .pull-right 右浮动 改变大小写 通过这几个类可以改 ...
- bootstrap常用知识点总结
api地址:https://v3.bootcss.com/css/#forms 栅格参数: bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏 幕 大小 把屏 幕分 ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
随机推荐
- [HDU 3625]Examining the Rooms (第一类斯特林数)
[HDU 3625]Examining the Rooms (第一类斯特林数) 题面 有n个房间,每个房间有一个钥匙,钥匙等概率的出现在n个房间内,每个房间中只会出现且仅出现一个钥匙.你能炸开门k次, ...
- 6、numpy——高级索引
NumPy 比一般的 Python 序列提供更多的索引方式.除了之前看到的用整数和切片的索引外,数组可以由整数数组索引.布尔索引及花式索引. 1.整数数组索引 1.1 以下实例获取数组中(0,0),( ...
- POJ 2528 Mayor's posters(线段树,区间覆盖,单点查询)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 45703 Accepted: 13239 ...
- txt_to_csv
import csv def txt2csv(inf, outf): with open(inf,'r') as fin, open(outf,'w',newline='') as fout: wrt ...
- （转载）python判断一个字符串是否是小数
转载自:牛牛杂货铺 最近在写代码的时候,发现一个问题,想判断一个字符串是不是一个合法的小数,发现字符串没有内置判断小数的方法,然后就写了一个判断字符串是否是小数,可以判断正负小数,代码如下: def ...
- categorical_crossentropy VS. sparse_categorical_crossentropy
From:https://jovianlin.io/cat-crossentropy-vs-sparse-cat-crossentropy/ categorical_crossentropy 和 sp ...
- svnkit 异常：Exception in thread "main" org.tmatesoft.svn.core.SVNException: svn: E200030: SQLite error
https://stackoverflow.com/questions/16063105/org-tmatesoft-sqljet-core-sqljetexception-busy-error-co ...
- 【串线篇】Mybatis之缓存原理
所谓二级缓存是名称空间级别的缓存,什么意思呢? TeacherDao.xml首行 <mapper namespace="com.atguigu.dao.TeacherDao" ...
- word里输入英文字母间距变宽，字体改变，怎么回事？
word里输入英文字母间距变宽,字体改变,怎么回事? 你有没有遇到下面这种情况,在word里输入英文,变的很奇怪,就像下面图中那样: 是不是很蛋疼?看起来很别扭. 那是因为输入法是全角状态 我们只要把 ...
- B/S架构和C/S架构介绍
一.C/S架构 C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架 ...