in English
ಗಡಿ
ಅಂಶದ ಗಡಿ ಮತ್ತು ಗಡಿ-ತ್ರಿಜ್ಯವನ್ನು ತ್ವರಿತವಾಗಿ ಶೈಲಿ ಮಾಡಲು ಗಡಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. ಚಿತ್ರಗಳು, ಬಟನ್ಗಳು ಅಥವಾ ಯಾವುದೇ ಇತರ ಅಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ.
ಈ ಪುಟದಲ್ಲಿ
ಗಡಿ
ಅಂಶದ ಗಡಿಗಳನ್ನು ಸೇರಿಸಲು ಅಥವಾ ತೆಗೆದುಹಾಕಲು ಗಡಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. ಎಲ್ಲಾ ಗಡಿಗಳಿಂದ ಅಥವಾ ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದನ್ನು ಆಯ್ಕೆಮಾಡಿ.
ಸಂಯೋಜಕ
<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>
ಗಡಿ-ತ್ರಿಜ್ಯ
ಅಂಶದ ಮೂಲೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಸುತ್ತಲು ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ.
<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="...">
ಗಾತ್ರಗಳು
ದೊಡ್ಡ ಅಥವಾ ಚಿಕ್ಕ ದುಂಡಗಿನ ಮೂಲೆಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಗಾತ್ರಗಳು ನಿಂದ 0
ವರೆಗೆ 3
ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳ API ಅನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು.
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
ಸಾಸ್
ಅಸ್ಥಿರ
$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;
ಮಿಕ್ಸಿನ್ಸ್
@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);
}
}
ಉಪಯುಕ್ತತೆಗಳ API
ಬಾರ್ಡರ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನಲ್ಲಿ ಘೋಷಿಸಲಾಗಿದೆ scss/_utilities.scss
. ಉಪಯುಕ್ತತೆಗಳ API ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.
"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)
),