2015年12月28日
Last updated
Last updated
效果如下
强调内容
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需要水平排列,只需要在labe
l标签上添加类名checkbox-inline
2、如果radio需要水平排列,只需要在label
标签上添加类名radio-inline
按钮
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:
input[type=“submit”]
input[type=“button”]
input[type=“reset”]
< button>
当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态: