အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
Check
in English

နယ်နိမိတ်များ

ဒြပ်စင်တစ်ခု၏ နယ်နိမိတ်နှင့် နယ်ခြား-အချင်းဝက်ကို အမြန်ပုံစံသတ်မှတ်ရန် နယ်စပ်အသုံးအဆောင်များကို အသုံးပြုပါ။ ရုပ်ပုံများ၊ ခလုတ်များ၊ သို့မဟုတ် အခြားအရာများအတွက် ကောင်းမွန်သည်။

ဤစာမျက်နှာတွင်

နယ်စပ်

ဒြပ်စင်တစ်ခု၏ နယ်နိမိတ်များကို ပေါင်းထည့်ရန် သို့မဟုတ် ဖယ်ရှားရန် နယ်စပ် အသုံးဝင်မှုများကို အသုံးပြုပါ။ နယ်နိမိတ်အားလုံးမှ သို့မဟုတ် တစ်ကြိမ်လျှင် တစ်ခုကို ရွေးချယ်ပါ။

ပေါင်းထည့်ပါ။

စိတ်ကြိုက်ဒြပ်စင်များသို့ ဘောင်များထည့်ပါ-

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>

အရောင်

ကျွန်ုပ်တို့၏ အပြင်အဆင်အရောင်များကို အသုံးပြု၍ ဘောင်အရောင်ကို ပြောင်းပါ။

html 
<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-colorအစိတ်အပိုင်းတစ်ခု၏ ပုံသေကို မွမ်းမံပြင်ဆင်ပါ-

အန္တရာယ်ရှိသောခေါင်းစဉ်
ဘောင်အရောင်နှင့် အကျယ်ကို ပြောင်းလဲခြင်း။
html 
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

အလင်းပိတ်

v5.2.0 တွင် ထည့်သွင်းထားသည်။

Bootstrap border-{color}utilities များကို CSS variables များအသုံးပြု၍ Sass ဖြင့်ထုတ်ပေးပါသည်။ ၎င်းသည် စုစည်းမှုနှင့် တက်ကြွသော အယ်ဖာမြင်သာသောပြောင်းလဲမှုများမပါဘဲ အချိန်နှင့်တပြေးညီ အရောင်ပြောင်းလဲမှုများကို ပြုလုပ်နိုင်စေပါသည်။

ဘယ်လိုအလုပ်လုပ်လဲ

ကျွန်ုပ်တို့၏ မူရင်း .border-successအသုံးဝင်မှုကို သုံးသပ်ကြည့်ပါ။

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

--bs-successကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ (တန်ဖိုးနှင့် ) CSS variable ၏ RGB ဗားရှင်းကို အသုံးပြုပြီး alpha ပွင့်လင်းမြင်သာမှုအတွက် ( ဒေသခံ CSS variable ကြောင့် မူရင်းတန်ဖိုးဖြင့် 25, 135, 84) ဒုတိယ CSS variable ကို ပူးတွဲထားသည် ။ ဆိုလိုသည်မှာ သင် ယခုအသုံးပြုသည့်အချိန်တိုင်း၊ သင်၏တွက်ချက်ထားသော တန်ဖိုးဖြစ်သည် ။ class တစ်ခုစီရှိ local CSS variable သည် အမွေဆက်ခံခြင်းဆိုင်ရာ ပြဿနာများကို ရှောင်ရှားနိုင်သောကြောင့် အသုံးချပရိုဂရမ်များ၏ nested instance များသည် အလိုအလျောက် ပြုပြင်ထားသော alpha ပွင့်လင်းမြင်သာမှု မရှိနိုင်ပါ။--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).border-*

ဥပမာ

ထိုပွင့်လင်းမြင်သာမှုကို ပြောင်းလဲရန်၊ --bs-border-opacityစိတ်ကြိုက်စတိုင်များ သို့မဟုတ် လိုင်းစတိုင်များမှတစ်ဆင့် အစားထိုးပါ။

၎င်းသည် မူရင်းအောင်မြင်မှုဘောင်ဖြစ်သည်။
ဤသည်မှာ 50% အလင်းပိတ်အောင်မြင်မှုဘောင်ဖြစ်သည်။
html 
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

သို့မဟုတ် အသုံးဝင်မှုတစ်ခုခုမှ ရွေးချယ်ပါ .border-opacity-

၎င်းသည် မူရင်းအောင်မြင်မှုဘောင်ဖြစ်သည်။
ဤသည်မှာ 75% အလင်းပိတ်အောင်မြင်မှုဘောင်ဖြစ်သည်။
ဤသည်မှာ 50% အလင်းပိတ်အောင်မြင်မှုဘောင်ဖြစ်သည်။
ဤသည်မှာ 25% opacity အောင်မြင်မှုဘောင်ဖြစ်သည်။
ဤသည်မှာ 10% အလင်းပိတ်အောင်မြင်မှုဘောင်ဖြစ်သည်။
html 
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

အကျယ်

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

အချင်းဝက်မျဉ်း

၎င်း၏ထောင့်များကို အလွယ်တကူလှည့်ပတ်နိုင်ရန် အတန်းများထည့်ပါ။

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
html 
<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ရှိပြီး 5utilities API ကို ပြုပြင်မွမ်းမံခြင်းဖြင့် သတ်မှတ်နိုင်ပါသည်။

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

CSS

ကိန်းရှင်များ

v5.2.0 တွင် ထည့်သွင်းထားသည်။ 
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
  --#{$prefix}border-color: #{$border-color};
  --#{$prefix}border-color-translucent: #{$border-color-translucent};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass ကိန်းရှင်များ

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);

$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);

$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

Sass 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);
  }
}

အသုံးအဆောင်များ API

Border utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။

    "border": (
      property: border,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-end": (
      property: border-right,
      class: border-end,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-start": (
      property: border-left,
      class: border-start,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
      local-vars: (
        "border-opacity": 1
      ),
      values: $utilities-border-colors
    ),
    "border-width": (
      css-var: true,
      css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
    "border-opacity": (
      css-var: true,
      class: border-opacity,
      values: (
        10: .1,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),
    
    "rounded": (
      property: border-radius,
      class: rounded,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-2xl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: var(--#{$prefix}border-radius))
    ),