Bootstrap基础 CSS样式 个人总结

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">

栅格系统
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>&lt;section&gt;</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">&times;</span></button>

在上面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X（&times）”字符。
辅助软件并不能知道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>