bootstrap学记 - 标题 文本 列表 表格

1. 文本对齐

text-left

text-right

text-center

2. 文本突出

想p突出显示,添加类名“.lead”实现,其作用就是 增大字号,加粗文本,而且对行高和margin也做相应的处理。

3. 文本颜色样式

Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

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

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

4. ul ol dl

list-unstyled

list-inline

dl-dt-dd-1

bootstrap学记 - 标题 文本 列表 表格_第1张图片
dl-dt-dd代码如上样式如图

dl-dt-dd-2

dt-dd同行(水平样式)

bootstrap学记 - 标题 文本 列表 表格_第2张图片
dt-dd水平显示(同行)

5. 代码之pre

pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

6. table样式

Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

   .table:基础表格

   .table-striped:斑马线表格

   .table-bordered:带边框的表格

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

   .table-condensed:紧凑型表格

   .table-responsive:响应式表格

在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果不添加任何类名,是无任何样式效果的。想得到基础表格,我们只需加“.table”类名

紧凑型表格--简单理解,就是单元格没内距或者内距更小。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。

bootstrap学记 - 标题 文本 列表 表格_第3张图片
table-condensed效果

7. table-tr

bootstrap学记 - 标题 文本 列表 表格_第4张图片
table行的样式

先实现一个小目标。。

你可能感兴趣的:(bootstrap学记 - 标题 文本 列表 表格)