bootstrap布局之排版样式、列表样式、表格样式介绍

发布时间：09/01 来源：未知浏览：关键词：

本篇文章就给大家介绍bootstrap规划之排版样式、列表样式、表格样式。有必然的参照价值，有需要的伴侣可以参照一下，但愿对你们有所帮忙。假如大家想要学习和猎取更多的bootstrap相关视频教程也可以拜访：bootstrap教程！

规划容器

bootstrap 它认为每一个网页都应当会具有牢固的宽度，它会在容器里面水平垂直居中或者是占满容器的100% 的宽度。

Bootstrap 将全局 font-size 设定为 14px ，行高为 1.428（20px），<p> 段落行高设定为等于1/2（10px），色彩为 #333

1）牢固的宽度

.container 类用于牢固宽度并支撑响应式规划的容器（水平居中）。

2）百分比宽度

.container-fluid 用于 100% 宽度，占据全部可视化窗口的容器。

排版样式

.text-center 居中对齐

.text-right 居右对齐

.text-left 居左对齐

.text-uppercase 用于将小写字母转换为大写字母

.text-lowercase 用于将大写字母转换为小写字母

.text-capitalize 用于实现首字母大写

<abbr> 标签指示简称或缩写，比方 "WWW" 或 "NATO"(有益于搜索引擎搜索)

<mark> 突出显示文本（加底纹）

以下是bootstrap复写过样式的标签

<code> 用于表示运算机源代码或者其他机器可以阅读的文本内容。（加底纹）

<pre> 常见利用表示运算机的源代码（加底纹和边框）

列表样式

列表：有序列表，无序列表，定义列表。

.sr-only 潜藏一个元素，可以是行可以是列，也可以是整个 table

.list-unstyled 用来将列表前面的项目符号去除，同时去除列表默许的 margin 值

.list-inline 将列表中的内容摆列成统一行，并且增添少量的 padding 值

.dl-horizontal 给定义列表来使用，将定义标题与定义描写信息摆列在统一行，将 dt 标志与 dd 标志里面的内容摆列在统一行

表格样式

.table 为任意 <table> 标签增加 .table 类可认为其给予根本的样式，少量的 padding 和水平标的目的的分割线。

.table-bordered 为表格和其中的每个单元格增添边框线

.table-striped 实现各行变色的结果（IE8不支撑）

table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*操纵各行的色彩,odd操纵下标为偶数的行,even操纵下标为奇数的行*/

.table-hover实现鼠标放上的结果

		 table.table-hover tr:hover{
            background:red;
            }
            /*操纵各行的色彩,odd操纵下标为偶数的行,even操纵下标为奇数的行*/

.table-condensed 紧凑型的表格，将 padding 值减半

.table-responsive 给表格父元素设定响应式，当屏幕小于 768px 时，四周显现边框

状态类

只能给 tr 或者 td 或者 th 来设定，不克不及给 table 标志来设定

通过这些状态类可认为行或单元格设定色彩

详细请看：