bootstrap的基础的个人总结

Bootstrap

准备

//IE中运行最新的渲染模式
//移动端虚拟视口中viewport，content="width=device-width宽度等于设备的宽度，initial-scale缩放比例为1，不缩放
Bootstrap的HTML标准模板

2.全局
bootstrap设置了全局的一些标签，需要更改一些样式直接覆盖；
标题：

行高是1.1，文本颜色字体继承父元素.
标题,标题
副标题：标签
行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同
时颜色被设置为灰色（#999）,由于内的文本字体在h1~h3内，其大
小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的
75%；
3.段落（正文）
全局文本字号为14px(font-size)，行高为1.42857143（line-height），颜色为深灰色（#333），字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）；
p标签设置了一个margin值margin：0 0 10px;
4.强调内容
让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
通过元素标签:、、和给文本做突出样式处理。
b，strong:文本加粗；small.small：标准字体的85%，差不多12px；
标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
5.加粗（,）
6.斜体（,）
7.强调相关的类：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
8.对齐方式：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
9.列表：
去除小点的列表加入.list-unstyled；
内联列表：没有小点的水平列表：list-inline；
定义列表只是变动了行间距，外边距，字体加粗
10.代码：
：一般是针对于单个单词或单个句子的代码

：一般是针对于多行代码（也就是成块的代码）

:一般是表示用户要通过键盘输入的内容虽然不同的类型风格不一样，但其使用方法是类似的。

当代码块太大了，篇幅过长么就需要用   .pre-scrollable来规定超出340px之后加入滚动条

11.表格：

.table:基础表格

.table-striped:斑马线表格

.table-bordered:带边框的表格

.table-hover:鼠标悬停高亮的表格

.table-condensed:紧凑型表格

.table-responsive:响应式表格

表格背景颜色（在tr中加入对应的类名即可）：
基本表格：

如果table中不加.table那表格将没有任何效果；

加入.table之后给表格设置了一个margin-bottom:20px以及设置单元内边距；

在thead地步设置了一个2px的浅灰色实线；

每个单元格顶部设置了1px的浅灰实线；

斑马线表格：

在tbody各行一个浅色的背景色，李永乐css3的：nth-child；

带边框表格：

表格所有边框为1px；

鼠标悬浮高亮表格：

鼠标悬停的单元行高亮，可以与前面的表格类型一

起用；

紧凑型表格：

重置了单元格内边距值；内边距8变成5；

响应式表格：

提供了一个容器.table-responsive,把table放入容器内，当浏览器可视区域小于768px时，底部会出现水平滚动条，大于768px滚动条消失；
12.表单：

fieldset 元素可将表单内的相关元素分组。

legend 元素表示作为 legend 元素的父元素的 fieldset 元素的其余内容的标题

（caption）。
.form-control:

宽度变成100%；

设置了一个浅灰色的（#ccc）的边框

具有4px的圆角

设置阴影想过，并且元素得到焦点之时，阴影和边框效果就会有所变化

设置了placeholder的颜色为#999

水平表单：满足的条件

1、在
元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

.form-horizontal的作用：

1、设置表单控件padding和margin值。

2、改变“form-group”的表现形式，类似于网格系统的“row”。

type="email"可以对邮箱进行验证

如果需要将表单控件放到一行中，只要在form加入类名form-inline即可，input

全部展示在一行中。原理是将控件设置了display:inline-block;

在input之前加入label，（教程上说label和input如果想让他们不换行显示，需要放在form-group？可是如果不放在form-group中也不会发生换行？那为什么要放进去呢？）需要把它放到容器.form-group中。在label中加入.sr-only为残障人士考虑的，如果没有设置label，那么无法识别，所以label就不会显示???

input的属性：.form-control加入后会美化样式。

下拉框：多行选择设置multiple属性值为multiple，

记住密码





多个复选框和单选按钮水平排列：

1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

按钮：
表单控件的大小：

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

栅格：

被分成12分，要设置表单控件的大小则需要col-xs-（1-12）；

焦点状态：

通过：focus来实现了，添加阴影和边框的效果加入.form-control

禁用：

样式中加入disabled；

域禁用：





据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

验证状态：

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起http://www.imooc.com/code/2362

需要在form-group中加入has-feedback，然后还要加入span

成功：

警告：

错误：

错误提示：

class中加入help-block





你输入的信息是正确的


两种方法使信息显示在input框的后面;

3x中没有help-inline，需要自己写css样式。

1.加入一个样式help-inline，样式中需要定义css

.help-inline{

display:inline-block;

padding-left:5px;

color: #737373;

}

2.利用栅格，col-xs-6

你输入的信息是正确的

按钮：

class="btn"//基本按钮

class="btn btn-default"//修改了按钮的背景颜色、边框颜色和文本颜色，默认样式

按钮的种类：



a标签按钮

span标签按钮

div标签按钮 
按钮大小：
按钮禁用：

要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”//链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

图像：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

图标：

Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码；

网格：

将界面分成了12份

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：







2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：









3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
列偏移:

col-md-offset-(1-12)

列排列：

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

列嵌套：

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。

下拉菜单（基本用法）：

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:



2、使用了一个

bootstrap的基础的个人总结

Media Header …

CSS教程相关栏目本月热门文章

Media Header
…