我和谷歌共成长 - 我的BootStrap学习经历

[nknkna]

如何学习bootstrap框架

Bootstrap中用到一些HTML元素和CSS属性需要将页面设置为HTML5文档类型，即在页面顶部添加“<!DOCTYPEhtml>”布局容器：Bootstrap需要为页面内容和栅格系统包裹一个.container或container-fluid（占据全部视口viewport的容器）容器。栅格系统，Bootstrap提供了一套最多12列的流式栅格系统，通过.row表示行和.col-xs-4这种表示宽度的列快速创建栅格布局。Bootstrap排版、链接样式设置了基本的全局样式。

font-size设置为，line-height设置为1.。

<p>（段落）元素还被设置了等于1/2行高（即）的底部外边距（margin）。

基础样式

[排版]，

1.标题，可以用来.h1到.h6类给内联属性的文本赋予标题样式，标题内通过<small>标签或带.small类的元素标记副标题。

主体文本：.lead类让段落突出显示。

2.联文本，使用<mark>标签表示标注文本，<del>删除，<s>无用，<ins>插入，<u>下划线，<small>小号（父容器字体大小的85%），<strong>着重，<em>斜体。

3.文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap

4.文本大小写类，text-lowercase，text-uppercase，text-capitalize

5.缩略语类，为<abbr>元素设置title属性并使用.initialism类让font-size变得稍微小些。例：<abbrtitle="attribute"class="initialism">attr</abbr>

6.地址，以日常使用的格式呈现，在行结尾加<br>保留需要的样式即可。

7.引用，将HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，建议用<p>标签。

8.列表，list-unstyled类移除默认list-style样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让<dl>的短语及其描述排在一行。

[代码]

<code>标签包裹内联样式的代码片段，

<kbd>标签标记用户通过键盘输入的内容，

<pre>展示代码块。可用pre-scrollable类设置最高带垂直滚动条。

<var>标签标记变量，

<samp>标签标记程序输出的内容。

[表格]

.table类指定基本样式，

.table-striped条纹样式，

.table-bordered类为边框样式，

.table-hover类带鼠标悬停样式，

.table-condensed类紧凑样式。

状态类(行或单元格设置颜色)：active，success，info，warning，info。

将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其

响应式表格:会在小屏幕设备上（小于）水平滚动。当屏幕大于宽度时，水平滚动条消失。

[表单]

1.基本实例，所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。

不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

form-group，input-group，control-group，

2.联表单，<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在宽度时（视口宽度再小的话就会使表单折叠）。

在内联表单中单选/多选框控件的宽度设置为width:auto;

如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。

3.水平排列的表单

通过为表单添加.form-horizontal类改变.form-group的行为，使其表现为栅格系统中的行（row）

4.多选和单选框

.radio、.radio-inline、.checkbox、.checkbox-inline。

5.静态控件

水平布局的表单中，如需将一行纯文本和label元素放置于同一行，为<p>元素添加.form-control-static类即可。

6.控件状态

.disabled类禁用控件，为<fieldset>设置disabled时则禁用包含的所有控件。

a标签不受此类影响。

readonly性可以禁止用户输入

.has-warning、.has-error或.has-success类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block元素都将接受这些校验状态的样式。

你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的.has-feedback类并添加正确的图标即可。

7.控件尺寸

通过.input-lg.input-sm类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度

通过添加.form-group-lg或.form-group-sm类，为.form-horizontal包裹的label元素和表单控件快速设置尺寸。

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

8.辅助文本

help-block类，针对表单控件的“块（block）”级辅助文本。

[按钮]

1.基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2.展现形式，btn-link、btn-block、close

3.尺寸样式，.btn-lg、.btn-sm、.btn-xs。

可通过<a>、<button>或<input>元素应用按钮类，但建议用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。[图片]

图片形状，img-rounded，img-circle，img-thumbnail，IE8不支持CSS3中的圆角属性。[辅助]

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符号，caret居中

组件样式

[图标]

个来自GlyphiconHalflings的字体图标，

图标类只能应用在空元素上，且不可与其它组件联合使用。

<spanclass="glyphiconglyphicon-search"></span>

[菜单]

将下拉菜单触发器和下拉菜单都包裹在.dropdown里

菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为%宽度。为.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐

菜单分组：dropdown-header表描述项，.disabled表禁用项

向上弹出：.dropup类就能使触发的下拉菜单朝上方打开

[按钮组]

按钮组.btn-group，通过.btn-group-*指定组中按钮尺寸。

按钮栏.btn-toolbar

钮垂直堆叠排列显示btn-group-vertical

两端对齐排列的按钮组btn-group-justified

[导航]

标签页.nav-tabs类依赖.nav基类。

胶囊式标签页.nav-pills类，添加.nav-stacked类改为垂直堆叠。

.nav-justified类可以很容易的让标签页或胶囊式标签呈现出同等宽度。

navbarnavbar-default

对于不包含在<form>中的<button>元素，加上.navbar-btn后，可以让它在导航条里垂直居中。

将表单放置于.navbar-form之内可以呈现很好的垂直对齐，

.navbar-text

.navbar-link

.navbar-left和.navbar-right工具类让导航链接、表单、按钮或文本对齐。

.navbar-fixed-top类可以让导航条固定在顶部

.navbar-fixed-bottom类可以让导航条固定在底部

.navbar-static-top类可让导航条随着页面向下滚动而消失。

.navbar-inverse类可以改变导航条的外观。

breadcrumb创建带有层次的导航结构（面包屑）。

[分页]

pagination，并根据情况对页码使用.disabled类、.active类。

.pagination-lg或.pagination-sm类提供了额外可供选择的尺寸。

pager上一页和下一页的简单翻页。并可通过previous，next类标示。

[标签]

label标签基类，可通过label-default,label-primary,label-success,label-info,label-warning,label-danger改变标签的外观。

badge，可以很醒目的展示新的或未读的信息条目。[其它]提示框媒体对象等

定制样式BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。总结本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。