Bootstrap基础 全局CSS样式， 总结01
BootStrap 框架
官网 www.bootcss.com
主要用于移动端响应式布局
（本文纯属个人根据官方文档总结，对于bootstrap也是初学，如出现问题请不吝提出，共同学习）
学习内容：
bootstrap 全局CSS
bootstrap CSS组件（总结02中）
bootstrap javascript插件（总结03中）
bootstrap引用：
<link rel="stylesheet" href="bs/css/bootstrap.css"> 引用bootstrap CSS样式
(注意：bootstrap基于jquery,因此想要完成导航切换等效果，必须引用JQ，并且jquery必须在bootstrap.js之前被引用）
<script src="js/jquery-3.4.1.min.js"></script> 引用jquery
<script src="js/bootstrap.min.js"></script> 引用bootstrap.js
必须是html5文档类型
<!document html>
移动端 mata标签
<meta name="viewport" content="width=device-width,user-scalable=no,inicial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
全局 CSS 样式
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
第一个宽度1140px padding 15px 第二个全填充满 padding 15px
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，
系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
行（row） 必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
媒体查询
/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { … }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { … }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }
栅格参数：
类前缀: .col-xs- .col-sm- .col-md- .col-lg-
.container 最大宽度: None 750px 970px 1170px
分别针对：超小屏，手机屏 ，平板屏 ，pc屏
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如**.col-md-offset-4** 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
push翻译：推（从左边第一个开始推出去几块，即左对齐右移几块）
pull翻译：拉（从右边第一个开始拉回来几块，即右对齐左移几块）
排版
1.标题（.page-header）
2.段落（.lead）中心内容.lead的class属性会突出显示段落
3.small（<small>123465</small> 缩小显示）
4.mark标记（<mark>123465</mark> 突出标记显示）
5.del删除线
6.文本对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
7.文本大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
8.无样式列表(class="list-unstyled" 清除小点)
9.自定义列表
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
代码
code 变成代码块
pre 按照源格式输出，给了灰色背景框
kbd 输出键盘按键的样子（其实就是给了文字一个背景颜色）
var 跟i标签一样 （主要写数学公式，斜体效果）
例子：
For example <code><section></code><br>
我希望现在能键入<kbd>cmd</kbd>命令
<pre>
if(i<3){
console.log("厉害");
}
</pre>
<var>y</var>=<var>2x</var>+<var>1</var><br>
<samp>hello world</samp>
表格
class=“table table-striped table-bordered table-hover”
table 加上线独立起来
table-striped 条纹状 隔行颜色区别
table-bordered 带上左右边框
table-hover 鼠标放上表格产生一定变化
table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
状态类（表格颜色）
<tr class="active">...</tr> 灰色
<tr class="success">...</tr> 绿色
<tr class="warning">...</tr> 黄色
<tr class="danger">...</tr> 红色
<tr class="info">...</tr> 蓝色
响应式表格
<div class="table-responsive">
<table class="table">
</table>
</div> ----------------其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
<form role="form" class="form-inline"> (role主要用于增强语义)
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group" >
<label>密码</label>
<input type="password" class="form-control" >
</div>
<div class="form-group">
<label class="sr-only">选择文件</label>
<input type="file">
<p class="help-block">选择你需要的文件</p>
</div>
</form>
1.要用<form></form>将内容括起来
2.form-inline 表单一行显示 class="form-horizontal"水平显示
3.form下的div添加form-group 的class属性
3.必须有label标签 不想显示给label标签添加sr-only的class属性
1、role是HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。
简单的说，role是为了给一些特定的浏览工具，比如盲文浏览工具识别
2、下面有其他案例：
Eg1:<div role="button"></div> ，把div元素转换为button按钮功能使用；
Eg2:<div role="navigation"></div>，把div元素转换为navigation导航功能使用；
Eg3:<div role="checkbox" aria-checked="checked"></div>，把div元素转换为checkbox复选框功能使用；
Eg4:<a role="button" class="btn btn-default" href="#" >链接</a>，把a链接元素转换为button按钮功能使用。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>
下拉列表（select）
<select class=" multiple form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
对于标记了 multiple 属性的 控件来说，默认显示多选项。
禁用状态
添加disabled属性
<input class="form-control" id="disabledInput" type="text" placeholder="..." disabled>
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
//（glyphicon glyphicon-ok form-control-feedback）字体图标信息，单词间空格不可以删除
控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
按钮
可作为按钮使用的标签或元素：
<a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
（即给这些标签添加 btn的class属性值）
针对组件的注意事项！！！
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
预定义样式
给按钮添加 btn-primary等class属性值，默认样式为btn-default
尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs class属性值 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。
对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。
然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。
！！即给按钮添加 active的class属性值
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
禁用状态
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。
或者添加 disabled 属性，使其表现出禁用状态。
.row :nth-child(2) {
opacity: 0.3;
} (禁用，不出现禁用符号，按钮:hover样式还在，按钮颜色变淡程度由opacity值决定)
或者
disabled="disabled"(禁用，出现禁用符号)
或者
class="disabled"(禁用，不出现禁用符号，按钮:hover样式消失，按钮颜色变淡)
图片
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
通过为<img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded"> (圆形 ：即圆边角的矩形)
<img src="..." alt="..." class="img-circle"> （圆圈）
<img src="..." alt="..." class="img-thumbnail">（缩略图形式 有个灰色 边框）
情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
添加 text-danger 之类的class属性值更改文本颜色
情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
添加 bg-danger 之类的class属性值更改文本颜色
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
在上面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X（×）”字符。
辅助软件并不能知道X是什么意思，所以需要aria-label标签来为辅助设备**提供相应的标识**来告诉它这个button是close的作用。
aria-labelledby，并将其值为所有读取的元素的id,当获取到焦点时，屏幕阅读器是会读该ID下的内容
PS：如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容
aria-hidden="true" 对屏幕阅读器隐藏，图标本身没什么含义，不需要被屏幕阅读器读取到，因此使用aria-hidden="true"对其隐藏
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。
清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）
显示或隐藏内容
<div class="show">...</div>
<div class="hidden">...</div>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
