bootstrap有12个网格。Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口尺寸的增加,系统会自动将页面分为最多12个网格。
本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑
Bootstrap提供了一套响应式、移动设备优先的流式网格系统(grip system),随着屏幕或视口尺寸的增加,系统会自动将页面分为最多12个网格,可以根据这十二格进行页面划分,这对于写自适应页面非常方便,只需要配合.row类和.col类即可,.col-xs-超小屏幕 手机 (
例如:如果想在页面实现下列图片的效果,只需将网格分为三份,每份4个网格即可
如果要根据电脑、平板、手机的尺寸来选择显示的行数,就可以使用上面写的col-*-*来分配,例如
这个则表示在手机屏幕上网格分为2份,每份为6个网格,设备上则显示为两列,而平板及电脑桌面的则是分为3份,每份4个网格,设备上显示为三列(下面有网格视图),也就是说.col是根据col-设备参数-网格数进行控制页面划分的。
.col必须包含在.row才能使用,同时.col和.row必须在.container中使用,下面有实例可以参考理解:
标签1使用bootstrap网格系统布局网页
标签3
列表1
内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容
列表2
内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容
列表3
内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容
列表3
内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容
登录后复制
【相关推荐:《bootstrap教程》】
以上就是bootstrap有几个网格的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2940691.html