跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

边框

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

查看原文
本页目录
类名样式
.边框border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-0border: 0;
.border-topborder-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-top-0border-block-start: 0;
.border-endborder-inline-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-end-0border-inline-end: 0;
.border-bottomborder-block-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-bottom-0border-block-end: 0;
.border-startborder-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-start-0border-inline-start: 0;
.border-keylineborder-width: var(--bs-border-width-keyline);
.border-1border-width: 1px;
.border-2border-width: 2px;
.border-3border-width: 3px;
.border-4border-width: 4px;
.border-5border-width: 5px;

边界

使用边框工具来添加或删除元素的边框。可以选择所有边框或单独选择其中一个边框。

添加剂

为自定义元素添加边框：

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 border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

宽度

边框宽度工具以 1px 为增量提供，从 0 到 5px。这些设置在所有边上border-width。

HTML
<span class="border border-keyline"></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>

每边宽度

我们不提供按边界宽度的单边工具。当某一边需要更厚的边框时，请将单边工具与宽度工具结合使用：

HTML
<span class="border-top border-2"></span>
<span class="border-end border-3"></span>
<span class="border-bottom border-4"></span>
<span class="border-start border-5"></span>

扩展工具类

当你需要在不同边使用不同宽度时，可以使用我们的工具类 API扩展边框类，而无需像上面那样合并类。下面是一个示例，使用边框宽度的长手属性而不是边框简写属性，这样$border-widths的值可以干净地应用。

SCSS
          // _my-utilities.scss
@use "sass:map";
@use "bootstrap/scss/config" as *;
@use "bootstrap/scss/utilities";

$border-width-values: map.merge($border-widths, (keyline: var(--border-width-keyline)));

$utilities: map.merge(
  $utilities,
  (
    "border-top-width": (
      property: border-block-start-width,
      class: border-t,
      values: $border-width-values
    ),
    "border-end-width": (
      property: border-inline-end-width,
      class: border-e,
      values: $border-width-values
    ),
    "border-bottom-width": (
      property: border-block-end-width,
      class: border-b,
      values: $border-width-values
    ),
    "border-start-width": (
      property: border-inline-start-width,
      class: border-s,
      values: $border-width-values
    )
  )
);

在加载 Bootstrap 之前加载该部分模板：

SCSS
          // my-bootstrap.scss
@use "my-utilities";
@use "bootstrap/scss/bootstrap";

这会添加像 .border-t-5、.border-e-5、.border-b-5 和 .border-s-5 这样的类。将它们与 .border 或像 .border-bottom 这样的边用工具类配合使用，这样边框仍然有样式和颜色。

CSS

变量

scss/_root.scss
--border-width: #{$border-width},
--border-width-keyline: .5px,
--border-style: #{$border-style},
--border-color: light-dark(var(--gray-200), var(--gray-700)),
--border-color-translucent: color-mix(in oklch, var(--fg-body) 15%, transparent),

Sass 变量

scss/_config.scss
$border-width:                1px;
$border-widths: ();
// stylelint-disable-next-line scss/dollar-variable-default
$border-widths: defaults(
  (
    keyline: .5px,
    1: 1px,
    2: 2px,
    3: 3px,
    4: 4px,
    5: 5px
  ),
  $border-widths
);
$border-style:                solid;
$border-color:                color-mix(in oklch, var(--gray-100), var(--gray-200));

Sass 混入

scss/mixins/_border-radius.scss
@mixin border-radius($radius: var(--radius-5), $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: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-end-start-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
  }
}

Sass 工具 API

边界工具类在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss
"border": (
  property: border,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-top": (
  class: border-top,
  property: border-block-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-end": (
  property: border-inline-end,
  class: border-end,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-bottom": (
  property: border-block-end,
  class: border-bottom,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-start": (
  property: border-inline-start,
  class: border-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-y": (
  class: border-y,
  property: border-block,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-x": (
  class: border-x,
  property: border-inline,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),