布局实施建议
Bootstrap包含数十个用于显示、隐藏、对齐和间隔的实用工具,可加快移动设备与响应式界面的开发。
display
块属性定义
我们可以方便的调用 display
属性的定义,与系统的栅格系统结合,来决定模块是否显示,甚至进一步属性如 .display-*
,其中*是可以1-12的任意数字。
Flexbox 选项
Bootstrap 4 基于flexbox流式布局,大多数组件都支持flex流式布局定义, 但不是所有元素的 display
都是默认就启用 display: flex
属性的(如果那样会增加很多不必要的DIV层叠,并会影响到浏览器渲染)。
如果您需要添加display: flex
到DIV元素中,请使用.d-flex
、或其中一个响应变体(如.d-sm-flex
)就有启用。您将需要此类或display值,以允许使用我们的额外的flexbox实用程序来调整大小,对齐,间距等
Margin 和 padding间隙定义
Bootstrap 4包括一个用于音障实用程序的5种规格定义,使用margin
和 padding
CSS函数来控制元素和组件的间隔和大小,基于1rem
值默认$spacer
变量,选择所有视口(例如,值.mr-3
对应于margin-right: 1rem),或挑响应变种,以针对特定的视口(例如,.mr-md-3
对于margin-right: 1rem
处于起步md
断点)。
可见性切换
如果不使用 display
对元素进行隐藏(或无法使用时),你可以使用 visibility
这个BootStrap 可见性工具来对网页上的元素进行隐藏,它有collapse
、hidden
、visible
三种属性,对应隐藏展示、隐藏元素、默认展示三种效果,使用它后网页元素对于正常用户是不可见的,但元素的宽高占位依然有效。