边框

边框-Bootstrap 5和Material Design 2.0

使用边框工具可以快速设置元素的边框和边框半径的样式。非常适合图片，按钮或其他任何元素。

基本例子

使用边框实用程序添加或删除元素的边框。从所有边界中选择，或从一个边界中选择一个时间。

添加剂

HTML


            <span class="border"></span>
            <span class="border-top"></span>
            <span class="border-end"></span>
            <span class="border-bottom"></span>
            <span class="border-start"></span>

减法

HTML


            <span class="border-0"></span>
            <span class="border-top-0"></span>
            <span class="border-end-0"></span>
            <span class="border-bottom-0"></span>
            <span class="border-start-0"></span>

颜色

使用建立在我们主题颜色上的实用工具来更改边框颜色。

HTML


          <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>

边界半径

将类添加到元素可以轻松地完成操作。

HTML


          <img src="..." class="rounded" alt="..." />
          <img src="..." class="rounded-top" alt="..." />
          <img src="..." class="rounded-end" alt="..." />
          <img src="..." class="rounded-bottom" alt="..." />
          <img src="..." class="rounded-start" alt="..." />
          <img src="..." class="rounded-circle" alt="..." />
          <img src="..." class="rounded-pill" alt="..." />
          <img src="..." class="rounded-0" alt="..." />

尺码

将 .rounded-lg 或 .rounded-sm 用作较大或较小的边框半径。

HTML


          <img src="..." class="rounded-0" alt="..." />
          <img src="..." class="rounded-1" alt="..." />
          <img src="..." class="rounded-2" alt="..." />
          <img src="..." class="rounded-3" alt="..." />