Bootstrap4 小工具

2020-06-19 08:31:34易采站长站整理

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%

相关文章 大家在看