2015年12月28日
bootstrap
标题
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<!-- 也可以写成下面的效果 -->
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div><h1>Bootstrap标题一<small>我是副标题</small></h1>效果如下
文本
强调内容
b和<strong>标签加粗; <em>和<i>斜体显示;
<b>和<i> 仅用来使文本呈现粗体和斜体，区别其它文本，不会产生任何语义的变化。<em>是句意强调，加与不加会引起语义变化。<strong>是重要性强调，和局部还是全局无关，局部强调用<strong>也可以，<strong>强调的是重要性，不会改变句意。
强调内容的类
Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
.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来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名.dl-horizontal给定义列表实现水平显示效果。
宽屏下的效果（屏幕大于768px）：
当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态: 
代码风格
<code>：一般是针对于单个单词或单个句子的代码<pre>：一般是针对于多行代码（也就是成块的代码）<kbd>:一般是表示用户要通过键盘输入的内容
类名.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
表格 Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
.table：基础表格.table-striped：斑马线表格.table-bordered：带边框的表格.table-hover：鼠标悬停高亮的表格.table-condensed：紧凑型表格.table-responsive：响应式表格,当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。
Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
表单
在<form>元素是使用类名“form-horizontal”。
在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名form-inline。
为了让控件在各种表单风格中样式不出错，需要添加类名form-control。
多行选择设置multiple属性的值为multiple。
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名form-control类名，则无需设置cols属性。
复选框与单选框
1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为.checkbox的容器内 3、radio连同label标签放置在一个名为.radio的容器内
1、如果checkbox需要水平排列，只需要在label标签上添加类名checkbox-inline
2、如果radio需要水平排列，只需要在label标签上添加类名radio-inline
按钮
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：
input[type=“submit”]
input[type=“button”]
input[type=“reset”]
< button>
Last updated
Was this helpful?