边框（Borders）

使用Border通用类别迅速设计一个元素的border和border-radius。可用于图象、按钮、或任何其它元素。

On this page

边框

使用border通用类别增加或移除一个元素的border。选择要四边都使用，或是一次只用一个。

增加

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

边框宽度

<span class="border border-1"></span>
        <span class="border border-2"></span>
        <span class="border border-3"></span>
        <span class="border border-4"></span>
        <span class="border border-5"></span>

边框半径

将元素加入至class可以轻松地替边框增加圆角。

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75 
<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="...">

尺寸

使用缩放的class将圆角放大或缩小。尺寸的范围为0到3，可以透过通用类别的API进行配置。

Example non-rounded image 75x75 Example small rounded image 75x75 Example default rounded image 75x75 Example large rounded image 75x75 
<img src="..." class="rounded-0" alt="...">
        <img src="..." class="rounded-1" alt="...">
        <img src="..." class="rounded-2" alt="...">
        <img src="..." class="rounded-3" alt="...">

Sass

Variables

$border-width:                1px;
        $border-widths: (
        1: 1px,
        2: 2px,
        3: 3px,
        4: 4px,
        5: 5px
        );
        
        $border-color:                $gray-300;
        
$border-radius:               .25rem;
        $border-radius-sm:            .2rem;
        $border-radius-lg:            .3rem;
        $border-radius-pill:          50rem;

Mixins

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
        @if $enable-rounded {
        border-radius: valid-radius($radius);
        }
        @else if $fallback-border-radius != false {
        border-radius: $fallback-border-radius;
        }
        }
        
        @mixin border-top-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-top-left-radius: valid-radius($radius);
        border-top-right-radius: valid-radius($radius);
        }
        }
        
        @mixin border-end-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-top-right-radius: valid-radius($radius);
        border-bottom-right-radius: valid-radius($radius);
        }
        }
        
        @mixin border-bottom-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-bottom-right-radius: valid-radius($radius);
        border-bottom-left-radius: valid-radius($radius);
        }
        }
        
        @mixin border-start-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-top-left-radius: valid-radius($radius);
        border-bottom-left-radius: valid-radius($radius);
        }
        }
        
        @mixin border-top-start-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-top-left-radius: valid-radius($radius);
        }
        }
        
        @mixin border-top-end-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-top-right-radius: valid-radius($radius);
        }
        }
        
        @mixin border-bottom-end-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-bottom-right-radius: valid-radius($radius);
        }
        }
        
        @mixin border-bottom-start-radius($radius: $border-radius) {
        @if $enable-rounded {
        border-bottom-left-radius: valid-radius($radius);
        }
        }

Utilities API

Border utilities are declared in our utilities API in scss/_utilities.scss. 

    "border": (
        property: border,
        values: (
          null: $border-width solid $border-color,
          0: 0,
        )
        ),
        "border-top": (
        property: border-top,
        values: (
          null: $border-width solid $border-color,
          0: 0,
        )
        ),
        "border-end": (
        property: border-right,
        class: border-end,
        values: (
          null: $border-width solid $border-color,
          0: 0,
        )
        ),
        "border-bottom": (
        property: border-bottom,
        values: (
          null: $border-width solid $border-color,
          0: 0,
        )
        ),
        "border-start": (
        property: border-left,
        class: border-start,
        values: (
          null: $border-width solid $border-color,
          0: 0,
        )
        ),
        "border-color": (
        property: border-color,
        class: border,
        values: map-merge($theme-colors, ("white": $white))
        ),
        "border-width": (
        property: border-width,
        class: border,
        values: $border-widths
        ),
        
    "rounded": (
        property: border-radius,
        class: rounded,
        values: (
          null: $border-radius,
          0: 0,
          1: $border-radius-sm,
          2: $border-radius,
          3: $border-radius-lg,
          circle: 50%,
          pill: $border-radius-pill
        )
        ),
        "rounded-top": (
        property: border-top-left-radius border-top-right-radius,
        class: rounded-top,
        values: (null: $border-radius)
        ),
        "rounded-end": (
        property: border-top-right-radius border-bottom-right-radius,
        class: rounded-end,
        values: (null: $border-radius)
        ),
        "rounded-bottom": (
        property: border-bottom-right-radius border-bottom-left-radius,
        class: rounded-bottom,
        values: (null: $border-radius)
        ),
        "rounded-start": (
        property: border-bottom-left-radius border-top-left-radius,
        class: rounded-start,
        values: (null: $border-radius)
        ),
返回顶部