bootstrap布局容器的示例分析

这篇文章主要介绍了bootstrap布局容器的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联建站专注于网站建设，为客户提供成都网站设计、网站制作、外贸营销网站建设、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，品牌网站制作，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。

布局容器

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

Bootstrap 将全局 font-size 设置为 14px ，行高为 1.428（20px），

段落行高设置为等于1/2（10px），颜色为 #333

1） 固定的宽度

.container 类用于固定宽度并支持响应式布局的容器（水平居中）。

2） 百分比宽度

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

排版样式

.text-center 居中对齐

.text-right 居右对齐

.text-left居左对齐

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

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

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

 标签指示简称或缩写，比如 "WWW" 或 "NATO"(有利于搜索引擎搜索)

突出显示文本（加底纹）

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

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

 常见应用表示计算机的源代码（加底纹和边框）
列表样式
列表：有序列表，无序列表，定义列表。
.sr-only 隐藏一个元素，可以是行可以是列，也可以是整个 table
.list-unstyled 用来将列表前面的项目符号去掉，同时去除列表默认的 margin 值
.list-inline 将列表中的内容排列成同一行，并且增加少量的 padding 值
.dl-horizontal 给定义列表来使用，将定义标题与定义描述信息排列在同一行，将 dt 标记与 dd 标记里面的内容排列在同一行
表格样式
.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 标记来设置
通过这些状态类可以为行或单元格设置颜色
类
描述
实例
.active
将悬停的颜色应用在行或者单元格上
尝试一下
.success
表示成功的操作
尝试一下
.info
表示信息变化的操作
尝试一下
.warning
表示一个警告的操作
尝试一下
.danger
表示一个危险的操作
尝试一下
具体请看：
商品名称
商品价格
商品状态
success颜色
小米手机
1499
代发货
active颜色
小米手机
1499
代发货
info颜色
小米手机
1499
代发货
warning颜色
小米手机
1499
代发货
danger颜色
感谢你能够认真阅读完这篇文章，希望小编分享的“bootstrap布局容器的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
            
            
                        

            本文题目：bootstrap布局容器的示例分析            

            文章转载：http://scjbc.cn/article/jhpdjj.html