Bootstrap 4 စိတ်ကြိုက်ပုံစံများ

Bootstrap 4 တွင် ဘရောက်ဆာပုံသေများကို အစားထိုးရန် ရည်ရွယ်ထားသော စိတ်ကြိုက်ပုံစံဒြပ်စင်များပါရှိသည်။

စိတ်ကြိုက် အမှန်ခြစ်ပေးပါ။

ပုံသေ အမှန်ခြစ်ခြစ်ပါ။

စိတ်ကြိုက်အပိုင်း-

မူရင်း အတိုင်းအတာ-

စိတ်ကြိုက် အမှန်ခြစ်ပါ။

စိတ်ကြိုက် checkbox တစ်ခုကို ဖန်တီးရန်၊ အမှန်ခြစ်ပုံး တစ်ဝိုက်တွင် အတန်းတစ်ခု .custom-controlနှင့် <div> ကဲ့သို့ ကွန်တိန်နာဒြပ်စင်တစ်ခုကို ခြုံပါ။ .custom-checkboxထို့နောက် .custom-control-inputtype="checkbox" ဖြင့် ထည့်သွင်းမှုတွင် ထည့်သွင်းပါ။

အကြံပြုချက်- တွဲပါစာသားများအတွက် အညွှန်းများကို အသုံးပြုပါက၊ .custom-control-labelအတန်းကို ၎င်းတွင် ထည့်ပါ။ ရည်ညွှန်းချက်၏တန်ဖိုးသည် အမှန်ခြစ်ဘောက်စ်၏ id နှင့် ကိုက်ညီရမည်ကို သတိပြုပါ-

စိတ်ကြိုက် အမှန်ခြစ်ပေးပါ။

ပုံသေ အမှန်ခြစ်ခြစ်ပါ။

ဥပမာ

<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>

စိတ်ကြိုက်ပြောင်းပါ။

စိတ်ကြိုက် "toggle ခလုတ်ကို ဖန်တီးရန်"၊ <div> ကဲ့သို့ ကွန်တိန်နာဒြပ်စင် တစ်ခုကို အမှန်ခြစ် ကွက်လပ်တစ်ခု .custom-controlနှင့် ပတ်ပတ်လည်တွင် အတန်းအစားဖြင့် ခြုံပါ။ .custom-switchထို့နောက် .custom-control-inputအမှတ်ခြစ်ရန် အတန်းကို ပေါင်းထည့်ပါ။

ဥပမာ

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>

စိတ်ကြိုက်ရေဒီယိုခလုတ်များ

.custom-controlစိတ်ကြိုက်ရေဒီယိုခလုတ်တစ်ခု ဖန်တီးရန်၊ ရေဒီယိုခလုတ်ကို အတန်းအစား နှင့် ပတ်ပတ်လည် တွင် <div> ကဲ့သို့ ကွန်တိန်နာဒြပ်စင်တစ်ခုကို ခြုံပါ .custom-radio။ ထို့နောက် .custom-control-inputtype="radio" ဖြင့် input သို့ထည့်ပါ။

အကြံပြုချက်- တွဲပါစာသားများအတွက် အညွှန်းများကို အသုံးပြုပါက၊ .custom-control-labelအတန်းကို ၎င်းတွင် ထည့်ပါ။ ရည်ညွှန်းချက်၏တန်ဖိုးသည် ရေဒီယို၏ id နှင့် ကိုက်ညီရမည်ကို သတိပြုပါ-

ဥပမာ

<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>

Inline စိတ်ကြိုက်ပုံစံ ထိန်းချုပ်မှုများ

စိတ်ကြိုက်ပုံစံထိန်းချုပ်မှုများကို ဘေးချင်းကပ် (inline) တွင်ထိုင်စေလိုပါက၊ .custom-control-inlinewrapper/container သို့ ထည့်ပါ-

ဥပမာ

<form>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>

စိတ်ကြိုက် Menu ကို ရွေးချယ်ပါ။

စိတ်ကြိုက်ရွေးချယ်မီနူးတစ်ခုဖန်တီးရန်၊ .custom-selectအတန်းကို <select> ဒြပ်စင်သို့ ထည့်ပါ-

ဥပမာ

<form>
<select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

စိတ်ကြိုက် Menu Size ကို ရွေးချယ်ပါ။

.custom-select-smသေးငယ်သော ရွေးချယ်မီနူးနှင့် .custom-select-lgအတန်းကြီးတစ်ခုအတွက် အတန်းကို အသုံးပြု ပါ -

ဥပမာ

<form>

<select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

စိတ်ကြိုက်အတိုင်းအတာ

စိတ်ကြိုက် အပိုင်းအခြားမီနူး ဖန်တီးရန် .custom-rangetype="<range>" ပါသော ထည့်သွင်းမှုတစ်ခုသို့ အတန်းကို ထည့်ပါ-

ဥပမာ

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

စိတ်ကြိုက်ဖိုင်ကို အပ်လုဒ်လုပ်ပါ။

စိတ်ကြိုက်ဖိုင်ကို အပ်လုဒ်တစ်ခုဖန်တီးရန်၊ .custom-filetype="file" ဖြင့် ထည့်သွင်းမှုပတ်ပတ်လည်တွင် ကွန်တိန်နာဒြပ်စင်တစ်ခုကို အမျိုးအစားတစ်ခုဖြင့် ထုပ်ပိုးပါ။ ပြီးရင် .custom-file-inputအဲဒါကို ထည့်လိုက်ပါ။

အကြံပြုချက်- တွဲပါစာသားများအတွက် အညွှန်းများကို အသုံးပြုပါက၊ .custom-file-labelအတန်းကို ၎င်းတွင် ထည့်ပါ။ ရည်ညွှန်းချက်၏တန်ဖိုးသည် အမှန်ခြစ်ဘောက်စ်၏ id နှင့် ကိုက်ညီရမည်ကို သတိပြုပါ-

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

ဥပမာ

<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Bootstrap 4 ကျူတိုရီရယ်

Bootstrap 4 Grid

Bootstrap 4 အခြား

Bootstrap 4 Ref

Bootstrap 4 စိတ်ကြိုက်ပုံစံများ