Bootstrap4 小工具
Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。
边框
使用 border 类可以添加或移除边框:
实例
边框颜色
Bootstrap4 提供了一些类来设置边框颜色:
实例
边框圆角设置
使用rounded 类可以添加圆角边框:
实例
浮动
.float-right 类用于设置元素右浮动, .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
实例
左浮动
右浮动
响应式浮动
我们看可以设置浮动 (.float-*-left|right – * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
实例
在大于小屏幕尺寸上右浮动在大于中等屏幕尺寸上右浮动在大于大屏幕尺寸上右浮动在大于超大屏幕尺寸上右浮动没有浮动
居中对齐
使用 .mx-auto 类来设置居中对齐:
实例
居中显示
宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
实例
宽度 25%宽度 50%宽度 75%宽度 100%最大宽度 100%
高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
实例
高度 25%高度 50%高度 75%高度 100%最大高度 100%










