布局容器

 

　　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-stripedtr:nth-child(odd){

 

　　background:red;

 

　　}

 

　　/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

 

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

 

　　table.table-hovertr:hover{

 

　　background:red;

 

　　}

 

　　/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

 

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

 

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

 

　　状态类

 

　　只能给tr或者td或者th来设置，不能给table标记来设置

 

　　通过这些状态类可以为行或单元格设置颜色

 

　　类 描述 实例

 

　　.active 将悬停的颜色应用在行或者单元格上 尝试一下

 

　　.success 表示成功的操作 尝试一下

 

　　.info 表示信息变化的操作 尝试一下

 

　　.warning 表示一个警告的操作 尝试一下

 

　　.danger 表示一个危险的操作 尝试一下

 

　　具体请看：

 

　　商品名称 商品价格 商品状态 success颜色

 

　　小米手机 1499 代发货 active颜色

 

　　小米手机 1499 代发货 info颜色

 

　　小米手机 1499 代发货 warning颜色

 

　　小米手机 1499 代发货

 

　　danger颜色

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。






本文转载自中文网