未分类

布局容器为页面的栅格布局提供一个包裹的容器,有两个容器类。container类会随着屏幕大小改变成相应的宽度,响应式推荐使用响应式布局容器固定宽度大屏(>=1200px)宽度为1170px中屏(>=992px)宽度为970px小屏(>=768px)宽度为750px超小屏(100%)<body><divclass="container"style="background:#2aabd2">大数据男孩</div></body>container-fluid类流式布局容器百分百宽度占据全部视口(viewport)的容器适用于单独的移动端<body><divclass="container-fluid"style="background:#2aabd2">大数据男孩</div></body>栅格系统Boostrap自动把页面划分为最多12格等宽的列,然后通过所占列数进行模块化布局。在不同的屏幕尺寸下小格的宽度是不同的,但一定是等分屏幕宽度。栅格系统选项参数栅格系统用于一系列的行(row)与列(column)的组合来创建页面布局。-超小屏幕(手机)<768px小屏设备(平板)>=768px中等屏幕(桌面显示器)>=992px宽屏设备(大桌面显示器)>=1200pxcontainer最大宽度自动(100%)750px970px1170px类前缀.col-xs.col-sm.col-md.col-lg<!--布局装在容器里--><divclass="container"><!--每一行--><divclass="row"><!--大屏下每一行占12份--><divclass="col-lg-12">大数据男孩</div></div><divclass="row"><!--大屏下每一行占3份--><!--中屏下每一行占6份--><divclass="col-lg-3col-md-6">大数据男孩</div><divclass="col-lg-3col-md-6">大数据男孩</div><divclass="col-lg-3col-md-6">大数据男孩</div><divclass="col-lg-3col-md-6">大数据男孩</div><divclass="col-lg-3col-md-6">大数据男孩</div><divclass="col-lg-3col-md-6">大数据男孩</div></div></div>列嵌套直接嵌套,会有边距<!--布局装在容器里--><divclass="container"><!--每一行--><divclass="row"><divclass="col-md-12"><!--嵌套--><divclass="col-md-6">大数据男孩</div><divclass="col-md-6">大数据男孩</div></div></div></div>套在一个row里<!--布局装在容器里--><divclass="container"><!--每一行--><divclass="row"><divclass="col-md-12"><!--加一个row--><divclass="row"><divclass="col-md-6">大数据男孩</div><divclass="col-md-6">大数据男孩</div></div></div></div></div>列偏移使用col-md-offset-*类可以将列向右偏移,这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。<!--布局装在容器里--><divclass="container"><divclass="row"><!--4+4+4=12格--><divclass="col-md-4">大数据男孩</div><!--中等屏幕向右偏移4格--><divclass="col-md-4col-md-offset-4">大数据男孩</div></div><divclass="row"><!--2+8+2=12格--><divclass="col-md-8col-md-offset-2">大数据男孩</div></div></div>列排序通过使用col-md-push-*和col-md-pull-*类就可以很容易改变column的顺序。col-md-push-*:左-->右col-md-pull-*:右-->左<!--布局装在容器里--><divclass="container"><divclass="row"><!--原本--><divclass="col-md-8">左侧</div><divclass="col-md-4">右侧</div></div><divclass="row"><divclass="col-md-8col-md-push-4">左侧</div><divclass="col-md-4col-md-pull-8">右侧</div></div></div>响应式工具为了方便在不同屏下,实现隐藏和显示元素类名超小屏小屏中屏大屏hidden-xs隐藏可见可见可见hidden-sm可见隐藏可见可见hidden-md可见可见隐藏可见hidden-lg可见可见可见隐藏与之相反的,是visible-xs、visible-sm、visible-md、visible-lg在相应屏下显示。<!--布局装在容器里--><divclass="container"><divclass="row"><divclass="col-md-4hidden-md">中屏隐藏</div><divclass="col-md-4">2</div><divclass="col-md-4">3</div></div></div>

2020-4-8 951 0