慕课网bootstrap一

jumbotron宽屏
class="h1"
small标签制作副标题
class="lead"突出文本
<small>小、<strong>粗、<em>斜<cite>标签突出文本

.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列表去点，左边距清零，不继承
<ul class="list-inline"水平列表无项目符号（编号）

<dl class="dl-horizontal"><form class="form-horizontal">水平表单<dt>W3cplus</dt><dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd><dt>慕课网</dt><dd>一个专业的，真心实意在做培训的网站</dd><dt>我来测试一个标题，我来测试一个标题</dt><dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd></dl>

屏幕大于768px时，同行显示

1、<code>：一般是针对于单个单词或单个句子的代码2、<pre>：一般是针对于多行代码（也就是成块的代码）3、<kbd>:一般是表示用户要通过键盘输入的内容

<pre>标签中.pre-scrollable代码，代码区域超过340px，出现滚动条

.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

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

.table-condensed：紧凑型表格

.table-responsive：响应式表格（放在div下，宽度小于768px出现水平滚动条）

<table class="table table-striped table-bordered table-hover"><thead>    <tr>        <th>标题</th>    </tr></thead><tbody>    <tr>        <td>内容</td>    </tr></tbody></table>

按钮

button class=”“ 名字 Default btn 默认按钮 Primary btn btn-primary 主要按钮 Info btn btn-info 信息按钮 Success btn btn-success 成功按钮 Warning btn btn-warning 警告按钮 Danger btn btn-danger 危险按钮 Inverse btn btn-inverse

表单

input、select、textarea中设置.form-control有设计上定制效果：
1、宽度变成了100%

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

3、具有4px的圆角

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

5、设置了placeholder的颜色为#999

基础表单

水平表单

form-horizontal

form-group类似网格系统中row，用了form-group也可以col-xs-*

内联表单

<form class="form-inline">
<label>标签放在带有form-group的div下不会换行

表单控件

input

要加form-control

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

select

要加form-control

<form role="form">单行<div class="form-group">  <select class="form-control">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </select>  </div>  <div class="form-group">  <select multiple class="form-control">多行    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option>  </select></div></form>

文本域textarea

<textarea class="form-control" rows="3"></textarea>
可拉伸

复选框和单选按钮水平排列

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

表单控件大小

input-sm``input-lg适用于input,textarea,select控件，加form-control

表单控件状态
1. 焦点状态：.form-control
2. 禁用状态：<input class="" placeholder="" disabled>
如果fieldset设置了desabled属性，整个域将处于禁用状态，但如果<legend>中有输入框的话，这个输入框无法禁用

1. 验证状态：
   .has-warning:警告状态（黄色）
   .has-error：错误状态（红色）
   .has-success：成功状态（绿色）
   在form-group容器上添加类名，如果添加has-feedback则显示图标

   成功状态

   小图标必须添加一个<span>

表单提示信息

<span class="help-block">

按钮

<input><button><a><span><div>都能做成按钮建议button和a
btn-lg大btn-sm小btn-xs超小
btn-block块状按钮

图像

.img-responsive：响应式图片，主要针对于响应式设计
.img-rounded：圆角图片
.img-circle：圆形图片
.img-thumbnail：缩略图片

图标

内联元素class中应用对应的样式即可
glyphicon glyphicon-*