bootstrap 问题

less; sass: css预处理：可以直接使用.css，也可以修改.less，生成定制化的css

CDN: 服务，使用这个效果会更好。theme一般不引入，jquery一般在js之前引入。

使用bower管理less，css，js，字体。

bootstrap可以单独引入某个js

如果自己编译less，使用自带的gruntfile会更好。

JavaScript Source Map 详解：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

grunt命令：grunt dist，重新生成dist文件，其他命令都不常用。

已安装好；
其他的命令，深入研究时才用。

bootlint：只有对bootstrap的页面有用，有一定的局限性。自己学习bootstrap时，可以使用它

javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();

全局css

移动设备上，可以通过设置禁用缩放功能。

container和container-fluid的区别：

前者是固定宽度且响应式布局，后者是100%宽度

栅格系统

container的子元素是row，row的子元素是col

媒体查询：bootstrap使用了media query。

@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

xs超小，手机；sm小，平板；md中等，桌面，；lg大桌面

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局

列偏移：.col-md-offset-*

嵌套列

列排序：.col-md-push-*, .col-md-pull-*d

less mixin和变量 不知道该怎么用？没看懂。

实例精选：

role无障碍阅读，所包含的值有：http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

jumbotron：超大屏幕

»   >>

page-header:页面最顶部

thumbnails：缩略图

badges：徽章

img data-src：延迟加载

nav-pills：加样式

tabindex=-1 tab无效

sr-only：隐藏标签

data-toggle：让目标对象表现某一类控件

nav-tabs nav-pills：导航的不同样式

well：内容凹陷显示

css细节

排版

h1内可以包含<small>，用来标记副标题；或者.h1 和 .small

.lead 让段落突出显示

高亮<mark>, 删除<del>, 无用<s>, 插入<ins>, 下划线<u>,   小号文本<small>父子体的85%, 着重<strong>, 斜体<em>,

对齐：text-left, left-center, text-right, text-justify, text-nowrap

大小写：text-lowercase, text-uppercase, text-capitalize

缩略：基本<attr> 添加title属性；首字母.initialism,

<a href="mailto:#">

引用

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

//有引用源
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

//引用右对齐
<blockquote class="blockquote-reverse">
  ...
</blockquote>

无样式列表：.list-unstyled 只针对直接子元素；内联列表（所有元素放置在同一行）：.line-inline；水平列表的描述：.dl-horizontal（可以让 <dl> 内的短语及其描述排在一行）

代码

内联代码<code>; 用户输入<kbd>; 代码块<pre> .pre-scrollable（设置 max-height 为 350px ，并在垂直方向展示滚动条）。 code pre都需要转义。 变量<var>；输出<samp>

表格

table.table 基本样式

条纹状.table-striped, 边框.table-bordered, 鼠标悬停.table-hover, 紧缩.table-condensed, 响应.table-responsive

状态类 .active .success .info .warning .danger:通过这些状态类可以为行或单元格设置颜色

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

表单

form   --   div.form-group   --   label input.form-control

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
</form>

.form-control width:100%

.help-block .checkbox

内联表单：form.form-inline  一定要添加label，使用.sr-only隐藏

.input-group 给input元素加前后的标示

水平排列的表单：form.form-horizontal  label和input水平排列

.control-label 在form-inline 和 form-horizontal 下有效果；常加在label标签上。

支持html5类型的输入控件

多选和单选框，禁止选择，可以添加disabled，这样label也会被禁止点击。.checkbox-inline, .radio-inline单选或者多选的控件排在一行

下拉列表：multiple 可以选择多项

静态控件：静态字符串与label放在同一行，静态.form-control-static

焦点状态：看不到效果；禁用状态：disabled

只读状态：readonly

校验状态：给表单控件的父元素添加如下类，父元素可以是.form-control

.has-warning .has-feedback
.has-error .has-feedback
.has-success .has-feedback
这三种状态会给.control-label, .form-control, .help-block添加样式

控制尺寸：

高度：.input-lg, .input-sm
水平排列的表单组的尺寸：通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
宽度：.col-lg-* .col-sm-*

按钮

为<a><button><input>加.btn 即可使用提供的样式

导航和导航条组件 只 支持button

a用做button使用，需要添加role="button";

预定义样式：.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link

尺寸：.btn-lg, .btn-sm, .btn-xs, .btn-block(宽100%，块级元素)

激活：.active

图片

响应式：.img-responsive 让图片在父元素中更好的缩放

居中：.center-block 辅助类

形状：.img-rounded, .img-circle, .img-thumbnail

辅助类

文字颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger

背景色: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger

关闭按钮：.close

<button class='close'><span>&times;</span></button>

三角符号：.caret

左右浮动：.pull-left, .pull-right

内容块居中：.center-block

清除浮动：.clearfix

.text-hide 文本内容不显示，只显示背景效果，不知道什么时候使用

阶段总结

<abbr>:简称，class='initialism'，把内容大写，看官网上的一些说明，会全面详细些。

<blockquote></blockquote>  <cite></cite>  <small class='pull-right'></small>：向右浮动

<dl class='dl-horizontal'>：对齐方式发生变化

<code>一个</code>  <pre>一段</pre>：<转为&lt;   >转为&gt;

使用Google prettify可以使代码更漂亮：但是还存在一个问题。

<table class='table'>

使用过程中碰到的问题

使用标签页：

问题：home.active的情况下，home tab没有突出显示，跟没active的状态一样。

原因：自己给tab加了背景色，覆盖了bootstrap.css的颜色变化

办法：自己添加背景色时，权重一定不要大于bootstrap.css的active权重。

添加disabled属性，需要是button或者a，如果是input的话，又会潜在的问题。