Bootstrap4 小工具

Bootstrap4 小工具

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

边框

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

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

边框颜色

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

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

边框圆角设置

使用 rounded 类可以添加圆角边框:

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

浮动

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

<div class="clearfix">
  <span class="float-left">左浮动</span>
  <span class="float-right">右浮动</span>
</div>

响应式浮动

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

<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>

居中对齐

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

<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

宽度

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

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>

高度

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

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

间距

间距设置语法如下:

{property}{sides}-{size}

property 代表属性，包含：

• m - 用来设置 margin
• p - 用来设置 padding

sides主要指方向：

• t - 用来设置 margin-top 或 padding-top
• b - 用来设置 margin-bottom 或 padding-bottom
• l - 用来设置 margin-left 或 padding-left
• r - 用来设置 margin-right 或 padding-right
• x - 用来设置 *-left 和 *-right
• y - 用来设置 *-top 和 *-bottom
• blank - 用来设置元素在四个方向的 margin 或 padding

size指的是边距的大小：

• 0 - 设置 margin 或 padding 为 0
• 1 - 设置 margin 或 padding 为 $spacer * .25
• 2 - 设置 margin 或 padding 为 $spacer * .5
• 3 - 设置 margin 或 padding 为 $spacer
• 4 - 设置margin 或 padding 为 $spacer * 1.5
• 5 - 设置 margin 或 padding 为 $spacer * 3
• auto - 设置 margin 为 auto

看下部分边距的源码设置：

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer *.25) !important;
}

.px-2 {
  padding-left: ($spacer *.5) !important;
}

.p-3 {
  padding: $spacer !important;
}

<div class="mx-auto" style="width: 200px;">
  元素设置居中
</div>
<form>
  <div class="form-row">
    <div class="form-group">
      <label for="text" class="mt-2">设置 margin-top：</label>
      <input type="text" class="form-control" id="text" placeholder="email">
      <label for="color" class="mt-2">颜色：</label>
      <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off"
             value="#656565">
    </div>
  </div>
</form>