bootstrap--css全局样式
###Welcome to use MarkDown
一、HTML5文档类型（Doctype）
Bootstrap使用了一些HTML5元素和CS属性。如下面代码
<!DOCTYPE html>#这一句就是标志着当前文档为html5
HTML模板：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
二、移动设备优先
1.移动设备优先是 Bootstrap 3 的最显著的变化。
2.在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。
3.Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
4.为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width属性控制设备的宽度，结社网站将被带有不同屏幕的分辨率的设备浏览，那么将它设置为device-width
可以确保它能正确的呈现在不同设备上
initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何缩放
在移动设备上可以通过在上面标签中content中添加user-scalable=no可以禁用其缩放（zoming）功能
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。
这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
三、Bootstrp网格系统（Gird System）
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
1.什么是网格（Gird）
在平面设计中，网格是由一种由一系列用于组织内容的相交直线（垂直的、水平的）组成的结构。
2.什么是Bootstrap网络系统（Gird System）
官方描述：
Boostrap包含了一个响应式的、移动设备优先的、不固定的网络系统，可以随着设备或
视口大小的增加或减少而适当地扩展到12列，它包含了用于简单的布局选项的预定义类，也包含了用于生成更多
语义布局的功能强大的混合类。
3.移动设备优先策略
内容：
决定什么是最重要的
布局：
优先设计更小的宽度
基础的CSS是移动设备优先，媒体查询是针对平板电脑、台式电脑
渐进增强
随着屏幕的大小的增加而添加元素
响应式的网络系统随着屏幕或视口(viewport)尺寸的增加，系统会自动分为做多12列
四、Bootstrap网络系统(Gird System)的工作原理
网络系统通过一系列包含内容的行和列来创建页面布局
--行必须放置在.container class内，以便获得适当的对其(alignment)和内边距(padding)
--使用行来创建列的水平组
--内容应该放在列内，且唯有列可以是行的直接子元素。
--如下基本布局：
<div class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1">12</div>
</div>
</div>
其中外面的div有两种class定义
1.container---------整个网络系统居中
2.container-fluid---铺满整个视口
.row用来定义一行，其高度根据内容来撑起
.col-xx-num
col定义列
xx表示视口的大小
num指横跨多少列，但其总数不能超过12，否则将会在下一行
五、网格选项
超小设备手机(screen-size < 768px)
网格行为 一直是水平的
最大容器宽度 None (auto)
Class 前缀 .col-xs-
列数量和 12
最大列宽 Auto
间隙宽度 30px（一个列的每边分别 15px）
可嵌套、偏移量、可排序
平板电脑(screen-size >=768px)
网格行为 以折叠开始，断点以上是水平的
最大容器宽度 750px
Class 前缀 .col-sm-
列数量和 12
最大列宽 60px
间隙宽度 30px（一个列的每边分别 15px）
可嵌套、偏移量、可排序
中型设备台式电脑(screen-size >=992px)
网格行为 以折叠开始，断点以上是水平的
最大容器宽度 970px
Class 前缀 .col-md-
列数量和 12
最大列宽 78px
间隙宽度 30px（一个列的每边分别 15px）
可嵌套、偏移量、可排序
大型设备台式电脑(screen-size>=1200px
网格行为 以折叠开始，断点以上是水平的
最大容器宽度 1170px
Class 前缀 .col-lg-
列数量和 12
最大列宽 95px
间隙宽度 30px（一个列的每边分别 15px）
可嵌套、偏移量、可排序
六、基本网络结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
几个简单的网格实例
1.从堆叠到水平排列
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
2.流式布局容器
使用.container-fluid,就可以将固定宽度的栅格布局转换为100%宽度的布局
3.移动设备和桌面屏幕
设置两个class col-xs-num col-sm-num
4.手机、平板、桌面
主要应用响应式工具类
响应式工具类如下
超小屏幕（手机 <768px） 小屏幕（平板>=768px） 中等屏幕（桌面屏幕>=992px） 大屏幕（桌面>=1200px）
.visible-xs-* 可见内容 隐藏内容 隐藏内容 隐藏内容
.visible-sm-* 隐藏内容 可见内容 隐藏内容 隐藏内容
.visible-md-* 隐藏内容 隐藏内容 可见内容 隐藏内容
.visible-lg-* 隐藏内容 隐藏内容 隐藏内容 可见内容
.visible-xs 隐藏内容 可见内容 可见内容 可见内容
.visible-sm 可见内容 隐藏内容 可见内容 可见内容
.visible-md 可见内容 可见内容 隐藏内容 可见内容
.visible-lg 可见内容 可见内容 可见内容 隐藏内容
列偏移
使用.col-md-offset-*类可以将列向右侧便宜。这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)
如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
嵌套列
为了使内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内，被嵌套的同样列不能超过12个
列排序
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column)的顺序
以上所有*表示的数字范围均在（1-12）之间
七、排版
1.标题
HTML中的所有标题标签，<h1>到<h6>均可以使用。另外还提供了.h1到h6的类，
为的是给内联(inline)属性文本赋予标题样式
标题标签 字体大小
<h1>--------36px
<h2>--------30px
<h3>--------24px
<h4>--------18px
<h5>--------14px
<h6>--------12px
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
2.基本文本操作
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，
<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<p>标签内可以设置.lead类可以让段落突出显示
使用内联标签<mark>可以使其内文本变得高亮
被删除的文本使用标签<del>
无用文本使用标签<s>
插入文本使用<ins>文本的下面出现一条下划线
带下划线的文本<u>
小号文本可以使用<small>标签也可以给元素赋予.small类
着重用<strong>
斜体<em>
对齐有五类
1. .text-left ---- 左对齐
2. .text-right ---- 右对齐
3. .text-center ---- 居中
4. .text-justify ---- 左对齐
5. .text-nowrap ---- 左对齐
改变大小写三类
1. .text-lowercase --- 变小写
2. .text-uppercase --- 变大写
3. .text-capitalize --- 首字母变大写
基本缩略语
使用标签<abbr>
并为此标签定义一个属性title，其属性值，就是缩略语的解释信息
首字母缩略语
为<abbr>定义一个类.initialism 同样也定义一个title属性，其属性值也是首字母缩略语的描述信息
用户输入
通过<kwd>标签标记用户通过键盘输入的内容
如：press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
变量
通过 <var> 标签标记变量。
如：<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序输出
通过 <samp> 标签来标记程序输出的内容。
八、表格
1.基本表格定义.table类
2.条纹状表格定义.table-striped类
3.带边框的表格定义.table-bordered类
4.通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
5.通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
6. 状态类
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
九、表单
基本实例：
单独的表单控件会被自动赋予一些全局样式。
设置.form-control类的<input>、<texttarea>和<select>元素都将被默认设置宽度属性为
width:100%. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
水平排列的表单
在<form>添加类.form-horizontal
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>
多选和单选
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
如果想禁用某个框可以设置disabled 如：
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
内联多选和单选
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
如：
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
下拉列表
注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。
如：
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
如：
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可
如：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
只读状态
为input设置 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">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
如：
<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>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
按钮
可以作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
如：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
预定于样式
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
按钮尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
图片形状
<img src="..." alt="..." class="img-rounded">圆角
<img src="..." alt="..." class="img-circle">圆
<img src="..." alt="..." class="img-thumbnail">有边框的正方形
情景类文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情景类背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失
如：
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
如：
<span class="caret"></span>
快速浮动
设置 .pull-left .pull-right标签向左向右浮动
内容块居中
设置.center-block
清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
浙公网安备 33010602011771号