189 8069 5689

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://jkwzsj.com/article/jhpdjj.html

其他资讯