bootstrap框架之栅格布局

1、使用bootstrap的框架时,CSS样式引用错误但浏览器不会检查出错误,所以可以使用一个bootlint工具。

要加入文档,只需加入以下代码:

javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();

bootstrap框架之栅格布局

bootstrap框架之栅格布局

2、bootstrap表格的一些样式

bootstrap框架之栅格布局

bootstrap框架之栅格布局

3、bootstrap栅格布局主要有两个类。.container和.container-fluid

bootstrap框架之栅格布局

container类:(1)宽度做了媒体查询。

                       (2)添加了前置后置内容生成,防止子元素的越界,以及浮动造成的影响。(:before:after)

container-fluid类:(1)宽度一直是width:auto;

                       (2)添加了前置后置内容生成,防止子元素的越界,以及浮动造成的影响。(:before:after)

container类一共12列。

bootstrap框架之栅格布局

bootstrap框架之栅格布局

其他特点:

bootstrap框架之栅格布局

4、:before:after的具体使用

bootstrap框架之栅格布局bootstrap框架之栅格布局



相关文章: