bootstrap整理

强调相关的类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

 

文本对齐风格

.text-left：左对齐

 

.text-center：居中对齐

 

.text-right：右对齐

 

.text-justify：两端对齐

 

 

列表–去点列表

.list-unstyled

 

列表–内联列表（把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显

示。）

.list-inline

 

列表–水平定义列表（只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有

水平定义列表效果。）

.dl-horizontal

 

代码（一）

三种代码风格：

1、使用<code></code>来显示单行内联代码，一般是针对于单个单词或单个句子的代码

2、使用<pre></pre>来显示多行块代码，一般是针对于多行代码（也就是成块的代码）

3、使用<kbd></kbd>来显示用户输入代码，一般是表示用户要通过键盘输入的内容

 

代码（二）

“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，

就会在Y轴出现滚动条。

.pre-scrollable

 

表格

.table：基础表格

 

.table-striped：斑马线表格

 

.table-bordered：带边框的表格

 

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

 

.table-condensed：紧凑型表格

 

.table-responsive：响应式表格

 

表格–表格行的类（注意要实现悬浮状态，需要在<table>标签上加入table-hover类）

.active      表示当前活动的信息

.success   表示成功或者正确的行为

.info 表示中立的信息或行为

.warning  表示警告，需要特别注意

.danger    表示危险或者可能是错误的行为

 

单行文本框

<input type=”email” class=”form-control” placeholder=”Enter email”>

 

表单控件(下拉选择框select)（多行选择设置multiple属性的值为multiple）

<select multiple class=”form-control”>

 

表单控件(文本域textarea)

“form-control”样式的表单控件宽度为100%或auto，（高度）rows=“值”。

 

表单控件(复选框checkbox和单选择按钮radio)对齐问题都使用下面一对标签包起来

<label></label>

 

表单控件(复选框和单选按钮水平排列)

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

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

 

表单控件大小

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

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

 

表单控件状态(焦点状态)

.form-control:focus

 

表单控件状态(禁用状态)

相应的表单控件上添加属性“disabled”。

 

表单控件状态(验证状态)

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

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

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

对号（√）has-success has-feedback

叉号（×）has-error has-feedback

警告 has-warning has-feedback

 

表单提示信息

“help-block”样式，将提示信息以块状显示，并且显示在控件底部。

“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。

 

按钮class属性

 

默认按钮.btn-default

主要按钮.btn-primary

成功按钮.btn-success

信息按钮.btn-info

警告按钮.btn-warning

危险按钮.btn-danger

 

 

 

按钮大写

块状按钮

在原按钮类名上添加“.btn-block”类名

按钮状态——活动状态

按钮的状态效果主要分为两种：活动状态和禁用状态。

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

注意：<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

 

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

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

方法2：在元素标签中添加类名“disabled”

图像

使用方法非常简单，只需要在<img>标签上添加对应的类名

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片 注意对于IE8以及其以下版本不支持
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

图标（一）

Bootstrap框架的网格系统工作原理

 

/*定义每个列组合的宽度（使用的百分比）*/

.col-md-12 {

width: 100%;

}

.col-md-11 {

width: 91.66666667%;

}

.col-md-10 {

width: 83.33333333%;

}

.col-md-9 {

width: 75%;

}

.col-md-8 {

width: 66.66666667%;

}

.col-md-7 {

width: 58.33333333%;

}

.col-md-6 {

width: 50%;

}

.col-md-5 {

width: 41.66666667%;

}

.col-md-4 {

width: 33.33333333%;

}

.col-md-3 {

width: 25%;

}

.col-md-2 {

width: 16.66666667%;

}

.col-md-1 {

width: 8.33333333%;

}

 

下拉菜单（基本用法）

使用方法：

在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看：

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

<div class=”dropdown”></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle=”dropdown”

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class=”dropdown-menu“>

下拉菜单（下拉分隔线）

组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

下拉菜单（菜单标题）

class=”dropdown-header”

下拉菜单（对齐方式）

实现右对齐方法：

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

<div class=”dropdown”>  <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown”>  下拉菜单  <span class=”caret”></span>  </button>  <ul class=”dropdown-menu pull-right” role=”menu” aria-labelledby=”dropdownMenu1″>   …  </ul></div>

同时一定要为.dropdown添加float:leftcss样式。

.dropdown{  float: left;}

下拉菜单与父容器左边对齐:

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

下拉菜单（菜单项状态）

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

<div class=”dropdown”>  <button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown”>  下拉菜单  <span class=”caret”></span>  </button>  <ul class=”dropdown-menu” role=”menu” aria-labelledby=”dropdownMenu1″>    <li role=”presentation” class=”active”><a role=”menuitem” tabindex=”-1″ href=”#”>下拉菜单项</a></li>    ….    <li role=”presentation” class=”disabled”><a role=”menuitem” tabindex=”-1″ href=”#”>下拉菜单项</a></li>  </ul></div>

运行效果如下：

按钮（按钮组）

<div class=”btn-group”>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-step-backward”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-fast-backward”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-backward”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-play”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-pause”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-stop”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-forward “></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-fast-forward”></span></button>

    <button type=”button” class=”btn btn-default”><span class=”glyphicon glyphicon-step-forward”></span></button>

</div>

按钮（按钮工具栏）

制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：

<div class=”btn-toolbar”>  <div class=”btn-group”>    …  </div>  <div class=”btn-group”>    …  </div>  <div class=”btn-group”>    …  </div>  <div class=”btn-group”>    …  </div></div>

 

按钮组大小设置

☑  .btn-group-lg:大按钮组

☑  .btn-group-sm:小按钮组

☑  .btn-group-xs:超小按钮组

只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。如下所示：

<div class=”btn-toolbar”>  <div class=”btn-group btn-group-lg“>    …  </div>  <div class=”btn-group”>    …  </div>  <div class=”btn-group btn-group-sm“>    …  </div>  <div class=”btn-group btn-group-xs“>   …  </div></div>

运行效果如下所示：

按钮（嵌套分组）水平

使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<div class=”btn-group”><button class=”btnbtn-default” type=”button”>首页</button><button class=”btnbtn-default” type=”button”>产品展示</button><button class=”btnbtn-default” type=”button”>案例分析</button><button class=”btnbtn-default” type=”button”>联系我们</button><div class=”btn-group”>   <button class=”btnbtn-defaultdropdown-toggle” data-toggle=”dropdown” type=”button”>关于我们<span class=”caret”></span></button>   <ul class=”dropdown-menu“>         <li><a href=”##”>公司简介</a></li>         <li><a href=”##”>企业文化</a></li>         <li><a href=”##”>组织结构</a></li>         <li><a href=”##”>客服服务</a></li>    </ul></div></div>