bootstrap学习记录（慕课网教程）

1、当主标题下需要副标题时可在h中嵌套small
<h1>nihao<small>a</samll></h1>

2、当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理 class="lead"

3、在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

4、斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。

5、强调相关的类名
.text-muted： 提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info： 通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger： 危险，使用褐色（#a94442）

6、Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left： 左对齐
.text-center： 居中对齐
.text-right： 右对齐
.text-justify：两端对齐

7、去点无序列表
bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

8、内联列表 用于制作导航条
通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

9、代码风格
在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

10、Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
.table：基础表格
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
.table-striped：斑马线表格
<table class="table table-striped">
.table-bordered：带边框的表格
<table class="table table-bordered">
.table-hover：鼠标悬停高亮的表格
<table class="table table-hover">
.table-condensed：紧凑型表格
<table class="table table-condensed">
.table-responsive：响应式表格
<table class="table table-bordered">

11、<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告 要特别注意
.danger 表示危险或者可能的错误行为

第三章 表单
3.1基础表单
在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999

3.2水平表单
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

3.3内联表单
你只需要在<form>元素中添加类名“form-inline”即可。

3.4表单控件(输入框input)
在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

3.5表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。

3.6表单控件(复选框checkbox和单选择按钮radio)
.checkbox .radio

3.7表单控件(复选框和单选按钮水平排列)
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

3.8表单控件(按钮)
在Bootstrap框架中的按钮都是采用<button>来实现。

3.9表单控件大小
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

3.10表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现
要让控件在焦点状态下有样式效果，需要给控件添加类名“form-control”

3.11表单控件状态(禁用状态)
只需要在需要禁用的表单控件上加上“disabled”即可：
如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

3.12表单控件状态(验证状态)
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名
如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
注意：只有在远程引用css文件时icon图标才会有用

3.13表单提示信息
在Bootstrap框架中使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

3.14基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。
可以通过input a span 等标签实现

3.15默认按钮
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。

3.20按钮大小
按钮可通过.btn-lg .btn-sm .btn-xs来改变按钮的大小

3.21块状按钮
Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。

3.22按钮状态——活动状态
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

3.23按钮状态——禁用状态
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

3.24图像
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

3.25 200个icon：
Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。

第四章 网格系统
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4.4列偏移
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度
不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

4.5列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

4.6列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。

第5章 菜单、按钮及导航
5.1下拉菜单
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
<ul class="dropdown-menu">

5.3下拉菜单（下拉分隔线）
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

5.4下拉菜单（菜单标题）
通过添加dropdown-header类可以给每个组添加一个头部（标题）

5.5下拉菜单（对齐方式）
Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，

5.6下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

5.7按钮（按钮组）
对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中。

5.8按钮（按钮工具栏）
你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

5.9按钮（嵌套分组）
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级

5.10按钮（垂直分组）
我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”

5.11按钮（等分按钮）
自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

5.12按钮下拉菜单
按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”

5.13按钮的向下向上三角形
按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”:
需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

5.15导航
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类
假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”
有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class="disabled"”
胶囊形（pills）导航只需要把类名“nav-tabs”换成“nav-pills”
制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”

5.16自适应导航（使用）
只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

5.17导航加下拉菜单（二级导航）
只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul

5.18面包屑式导航
使用方式就很简单，为ol加入breadcrumb类

第六章 导航条
6.1基础导航条
第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

6.2带表单的导航条
在navbar容器中放置一个带有navbar-form类名的表单

6.3固定导航条
Bootstrap框架提供了两种固定导航条的方式：

? .navbar-fixed-top：导航条固定在浏览器窗口顶部

? .navbar-fixed-bottom：导航条固定在浏览器窗口底部
只需要在制作导航条最外部容器navbar上追加对应的类名
存在bug及解决方法:
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
我们还有其他的解决方法，把固定导航条都放在页面内容前面：

6.4响应式导航条
使用方法：

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3、并为button添加data-target=".类名/#id名"

6.5反色导航条
使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。

6.6分页导航（带页码的分页导航）
在ul标签上加入pagination方法

6.7分页导航（翻页分页导航）
为ul标签加入pager类：
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

? previous：让“上一步”按钮居左

? next：让“下一步”按钮居右

6.8标签
比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。
和按钮元素button类似，label样式也提供了多种颜色：

? label-deafult:默认标签，深灰色

? label-primary：主要标签，深蓝色

? label-success：成功标签，绿色

? label-info：信息标签，浅蓝色

? label-warning：警告标签，橙色

? label-danger：错误标签，红色

6.9徽章
徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用
在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现

第七章：其它内置组件
7.1缩略图（一）
Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。
在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等：

7.2默认警示框
Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

7.3可关闭的警示框
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

7.4警示框的链接
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

7.5进度条--基本样式
Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。

7.6进度条--彩色进度条
? progress-bar-info：表示信息进度条，进度条颜色为蓝色

? progress-bar-success：表示成功进度条，进度条颜色为绿色

? progress-bar-warning：表示警告进度条，进度条颜色为黄色

? progress-bar-danger：表示错误进度条，进度条颜色为红色
具体使用就非常简单了，只需要在基础的进度上增加对应的类名。

7.7进度条--条纹进度条
使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”

7.8进度条--动态条纹进度条
在进度条“progress progress-striped”两个类的基础上再加入“active”类名。

7.9进度条--层叠进度条
仅需要在“progress”容器中添加对应的进度条

7.10进度条--带Label的进度条
只需要在进度条中添加你需要的值

7.11媒体对象--默认媒体对象
? 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

? 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

? 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

? 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

7.11媒体对象--媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”

7.12媒体对象--媒体对象列表
Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”

7.13列表组--基础列表组
? list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
? list-group-item：列表项，常用的是li元素，当然也可以是div元素

7.14列表组--带徽章的列表组
具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：

7.15列表组--自定义列表组
? list-group-item-heading：用来定义列表项头部样式
? list-group-item-text：用来定义列表项主要内容

7.16列表组--列表项的状态设置
? active：表示当前状态
? disabled：表示禁用状态

7.17列表组--多彩列表组
? list-group-item-success：成功，背景色绿色

? list-group-item-info：信息，背景色蓝色

? list-group-item-warning：警告，背景色为黄色

? list-group-item-danger：错误，背景色为红色

如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名：

7.18面板--基础面板
基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容

7.19面板--带有头和尾的面板
? panel-heading：用来设置面板头部样式
? panel-footer：用来设置面板尾部样式

7.20面板--彩色面板
? panel-primary：重点蓝

? panel-success：成功绿

? panel-info:信息蓝

? panel-warning：警告黄

? panel-danger：危险红
使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名

7.21面板--面板中嵌套表格
在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等

第八章JavaScript插件
8.1导入JavaScript插件
? 动画过渡（Transitions）:对应的插件文件“transition.js”

? 模态弹窗（Modal）:对应的插件文件“modal.js”

? 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

? 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

? 选项卡（Tab）：对应的插件文件“tab.js”

? 提示框（Tooltips）：对应的插件文件“tooltop.js”

? 弹出框（Popover）：对应的插件文件“popover.js”

? 警告框（Alert）：对应的插件文件“alert.js”

? 按钮（Buttons）：对应的插件文件“button.js”

? 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

? 图片轮播Carousel：对应的插件文件“carousel.js”

? 自动定位浮标Affix：对应的插件文件“affix.js”

上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。

8.2动画过渡（Transitions）
transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。

8.3模态弹出框（Modals）
? 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

? 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

? 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

8.3模态弹出框--触发模态弹出窗2种方法
方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）
方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性

8.4模态弹出框--为弹出框增加过度动画效果
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。