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 ...
随机推荐
- [暑假集训Day3T3]平板涂色
同样是搜索经典题. 优化并不多,只需在当前步数已经大于目前答案时剪枝就可以了. 此题重点在于如何判断第k个矩形能不能选. 设矩形i的左上坐标为i(squ[i].upx,squ[i].upy),右下角坐 ...
- Codeforces - 1195D2 - Submarine in the Rybinsk Sea (hard edition) - 组合数学
https://codeforc.es/problemset/problem/1195/D2 很明显可以看出,任意一个长度为\(l_1\)的数串\(s_1\)和任意一个长度为\(l_2\)的数串\(s ...
- JS 数组 学习笔记
什么是数组 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始),整个数组用方括号表示.本质上数组属于一种特殊的,由Array构造出来的对象,typeof运算符返回数组的类型是 o ...
- javascript：变量声明&&赋值的提升和函数声明&&定义的提升在不同情况下的表现
console.log(a); //undefined console.log(show); //函数的定义 show(); //aaa123 var a = 1; function ...
- idea 创建 SSM + maven Java Web 项目流程
idea 创建 SSM + maven Java Web 项目流程 一.idea 中选择File,New Project 新建项目 二.选择Maven,勾选上面的Create from archety ...
- GeneXus笔记本—常用函数（上）
国庆放假没事怎么办?写点笔记充会儿电! ≖‿≖✧ 哈哈哈 !!最近在参与公司的其中一个项目中,发现了一些函数自己没见过 也没使用过,但是这些函数都是GeneXus中自带的一些 这此记录的目的就是为 ...
- 广义Fibonacci数列找循环节 学习笔记
遇到了2019ICPC南昌赛区的网络赛的一道题,fn=3*fn-1+2*fn-2,有多次询问求fn.总结起来其实就是在模P意义下,O(1)回答广义斐波那契额数列的第n项,可以说是一道模板题了. 这道题 ...
- Ubunton
Ubunton 装完机后 root账户进不去 没密码 在自己账号下 sudo passwd 输入两次密码就是root的密码 之后就可以su root 密码进入了 外部客户端sftp方式连接: sudo ...
- [AtCoder] Yahoo Programming Contest 2019
[AtCoder] Yahoo Programming Contest 2019 很遗憾错过了一场 AtCoder .听说这场是涨分场呢,于是特意来补一下题. A - Anti-Adjacency ...
- [BZOJ5073] [Lydsy1710月赛]小A的咒语 后缀数组+dp+贪心
题目链接 首先这种题一看就是dp. 设\(dp[i][j]\)表示\(A\)序列中到\(i\)位之前,取了\(j\)段,在\(B\)中的最长的长度. 转移也比较简单 \[ dp[i][j] \to d ...