布局实施建议

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种规格定义,使用marginpaddingCSS函数来控制元素和组件的间隔和大小,基于1rem值默认$spacer变量,选择所有视口(例如,值.mr-3对应于margin-right: 1rem),或挑响应变种,以针对特定的视口(例如,.mr-md-3对于margin-right: 1rem处于起步md断点)。

可见性切换

如果不使用 display 对元素进行隐藏(或无法使用时),你可以使用 visibility 这个BootStrap 可见性工具来对网页上的元素进行隐藏,它有collapsehiddenvisible三种属性,对应隐藏展示、隐藏元素、默认展示三种效果,使用它后网页元素对于正常用户是不可见的,但元素的宽高占位依然有效。