bootstrap框架之栅格布局

本文介绍了Bootstrap框架中的栅格布局,包括.container和.container-fluid两类容器的特点及使用方法,并提供了bootlint工具的使用介绍以帮助检查CSS样式的正确性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)})();

2、bootstrap表格的一些样式

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


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

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

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

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

container类一共12列。

其他特点:


4、:before:after的具体使用



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值