0
点赞
收藏
分享

微信扫一扫

关于bootstrap栅格系统

全栈学习笔记 2022-05-02 阅读 75

栅格系统

栅格参数

bootstrap排版



bootstrap下载地址 :   v3.bootcss.com

栅格系统

bootstrap提供了一套响应式,移动设备优先的流式栅格系统,会随着屏幕或者视口尺寸的增加

最多自动分为12列

栅格参数

类前缀: .col-xs-4 (.col固定样式 xs表示大小 数字代表所占的列数)

                .col-xs-offset-4(.col固定样式   xs表示大小   offset 向右移动    4表示向右移动4列)

container: 最大宽度

屏幕尺寸对应类前缀:

超小屏幕手机(<768px)------ .col-xs-数字

小屏幕平板(>=768px)------.col-sm-数字

中等屏幕桌面(>992px)------.col-md-数字

大屏幕大桌面显示器(>=1200px)------.col-lg-数字

列数≯12列 否则换行

bootstrap排版

lead:突出显示       <lead>文本</lead>   //突出显示文本

mark:突出显示(带有阴影)<mark>文本</mark>

text-left 靠左对齐

text-right 靠右对齐

text-align 居中

table-striped>tbody>tr:nth-of-type(odd){background:pink}

table-striped       隔行变色  奇数行变粉色

table-bordered  表格添加边框

举报

相关推荐

0 条评论