多语言展示
当前在线:243今日阅读:39今日分享:10

Bootstrap4各种小工具介绍

Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果
工具/原料

Bootstrap4

方法/步骤
1

边框使用 border 类可以添加或移除边框:实例

2

边框颜色Bootstrap4 提供了一些类来设置边框颜色:实例

3

边框圆角设置使用rounded 类可以添加圆角边框:实例

4

浮动.float-right 类用于设置元素右浮动, .float-left 设置元素左浮动, .clearfix 类用于清除浮动:实例

 左浮动  右浮动

5

响应式浮动我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:实例

在大于小屏幕尺寸上右浮动

在大于中等屏幕尺寸上右浮动

在大于大屏幕尺寸上右浮动

在大于超大屏幕尺寸上右浮动

没有浮动

6

居中对齐使用 .mx-auto 类来设置居中对齐:实例

居中显示

7

宽度元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:实例

宽度 25%
宽度 50%
宽度 75%
宽度 100%
最大宽度 100%

8

高度元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:实例

高度 25%
高度 50%
高度 75%
高度 100%
最大高度 100%

注意事项

本经验代码格式适用于Bootstrap4,可能不适用其他版本。