Bootstrap学习-排版-表单

1、标题

<h1>~<h6>，所有标题的行高都是1.1（也就是font-size的1.1倍）。

2、副标题

<small>，行高都是1，灰色（#999）

<h1>主标题

　　<small>副标题</small>

</h1>

3、Body样式

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

4、<p>，段落样式

p { margin: 0 0 10px; }

5、强调样式 .lend

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}

6、粗体<b><strong>

b,strong {
  font-weight: bold; /*文本加粗*/
}

7、斜体<i><em>

<em> <strong> 一般是展现给爬虫看的（偏重语义），<i><b>是展现给用户的（偏重视觉效果）。

8、字体颜色

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

9、文字对齐方式

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

10、列表去点 .list-unstyled

.list-unstyled {
padding-left: 0;
list-style: none;
}

11、水平导航.list-inline

<ul class="list-inline">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

12、定义列表

<dl>

<dt>主题一</dt>

<dd>内容一</dd>

<dt>主题二</dt>

<dd>内容二</dd>

</dl>

水平定义列表.dl-horizontal

13、输入代码样式

（1）<code>：一般是针对于单个单词或单个句子的代码

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

（3）<kbd>:一般是表示用户要通过键盘输入的内容

14、表格样式

.table：基础表格-不可缺少

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格-可以与其他表格样式叠加使用

.table-condensed：紧凑型表格

.table-responsive：响应式表格-小屏添加滚动条

表格背景颜色

15、基础表单

role是一个html5的属性，role="form"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单

16、水平表单

.form-horizontal

17、内联表单

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>

18、输入框input

输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时，会自动地对 email 字段的值进行验证。

19、复选框checkbox和单选择按钮radio

.checkbox

<div class="checkbox">

<label>

<input type="checkbox" value="">

QQQ

</label>

</div>

.radio

<div class="radio">

<label>

<input type="radio" value="love" checked>

CCC

</label>

</div>

水平显示

<div class="form-group">

<label class="radio-inline">

<input type="radio" value="mazey" name="mazey">男性

</label>

<label class="radio-inline">

<input type="radio" value="mazey" name="mazey">中性

</label>

<label class="radio-inline">

<input type="radio" value="mazey" name="mazey">女性

</label>

</div>

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

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

20、表单控件大小-仅改变高度

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

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

21、表单验证状态

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

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

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

显示勾号叉号要加.has-feedback

<div class="form-group has-success has-feedback">

<label class="control-label" for="qqq">E-Mail地址</label>

<input type="text" class="form-control" ></span>

</div>

表单提示文字.help-block

<div class="form-group has-error has-feedback">

<label class="control-label" for="inputError1">错误状态</label>

<input type="text" class="form-control" ></span>

</div>

22、按钮样式

.btn

.btn-default

可以用在a，span，div等标签中。

<button class="btn" type="button">基础按钮.btn</button>

<button class="btn btn-default" type="button">默认按钮.btn-default</button>

<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

<button class="btn btn-success" type="button">成功按钮.btn-success</button>

<button class="btn btn-info" type="button">信息按钮.btn-info</button>

<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>

<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>

<button class="btn btn-link" type="button">链接按钮.btn-link</button>

HTML <button> 标签的 type 属性

值 描述

submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。

button 该按钮是可点击的按钮（Internet Explorer 的默认值）。

reset 该按钮是重置按钮（清除表单数据）

23、按钮大小

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

24、块状按钮

.btn-block 使按钮充满整个容器（父级元素）。

25、按钮状态

当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

禁用状态.disabled

disabled="disabled" 用类禁用可能有禁用样式，但没有禁用效果，依然可以点。

26、图像

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

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。

27、图标

这里说的图标就是Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

<span class="glyphicon glyphicon-search"></span>

<span class="glyphicon glyphicon-asterisk"></span>

<span class="glyphicon glyphicon-plus"></span>

<span class="glyphicon glyphicon-cloud"></span>

还有Font Awesome字体。

定制图标网站：Link

链接