in English
Borders
Karûbarên sînor bikar bînin da ku bi lez li ser sînor û tîrêj-radyoya hêmanek şêwaz bikin. Ji bo wêne, bişkok, an hêmanek din mezin e.
Li ser vê rûpelê
Hidûd
Karûbarên sînor bikar bînin ku sînorên hêmanek zêde bikin an jêbirin. Ji hemî sînoran an yek di demekê de hilbijêrin.
Tiştênbiserre
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Subtractive
<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>
Rengê sînor
Bi karanîna karûbarên ku li ser rengên mijara me hatine çêkirin, rengê sînor biguhezînin.
<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>
Border-width
<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>
Sînor-radyus
Dersan li hêmanekê zêde bikin da ku bi hêsanî quncikên wê dorpêç bikin.
<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="...">
Sizes
Dersên pîvandinê ji bo quncikên girover ên mezin an piçûktir bikar bînin. Mezinahî ji 0
, 3
û dikare bi guheztina karûbarên API-ê ve were mîheng kirin.
<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
Karûbarên sînor di API-ya karûbarên me de têne ragihandin scss/_utilities.scss
. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.
"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)
),