边框

边框-Bootstrap 5和Material Design 2.0

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


基本例子

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

添加剂


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

减法


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

颜色

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


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

边界半径

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


          <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 用作较大或较小的边框半径。


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