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

BS ပင်မစာမျက်နှာ BS ကို စတင်လိုက်ပါ။ BS Grid အခြေခံ BS စာစီစာရိုက် BS ဇယားများ BS ရုပ်ပုံများ BS Jumbotron BS ဝဲလ် BS သတိပေးချက်များ BS ခလုတ်များ BS ခလုတ်အုပ်စုများ BS Glyphicons BS တံဆိပ်များ/တံဆိပ်များ BS တိုးတက်မှုဘားများ BS Pagination BS ပေဂျာ BS စာရင်းအုပ်စုများ BS Panels များ BS Dropdowns BS ခေါက်သိမ်း BS တက်ဘ်များ/ဆေးပြားများ BS Navbar BS ပုံစံများ BS သွင်းအားစုများ BS သွင်းအားစုများ ၂ BS ထည့်သွင်းမှုအရွယ်အစား BS မီဒီယာအရာဝတ္ထုများ BS ချားရဟတ် BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix BS စစ်ထုတ်မှုများ

Bootstrap Grids

BS Grid စနစ် BS Stacked/Horizontal BS Grid အသေး BS Grid Medium BS Grid အကြီး BS Grid နမူနာများ

Bootstrap အပြင်အဆင်များ

BS ပုံစံများ BS ဆောင်ပုဒ် "ရိုးရှင်းစွာ ကျွန်ုပ်" BS ဆောင်ပုဒ် "ကုမ္ပဏီ" BS Theme "Band"

Bootstrap နမူနာများ

BS နမူနာများ BS Quiz BS လေ့ကျင့်ခန်းများ BS လက်မှတ်

Bootstrap CSS Ref

CSS အတန်းအားလုံး CSS စာစီစာရိုက် CSS ခလုတ်များ CSS ပုံစံများ CSS အကူအညီပေးသူများ CSS ပုံများ CSS ဇယားများ CSS Dropdowns CSS Navs ဂလက်ဖကွန်များ

Bootstrap JS Ref

JS Affix JS သတိပေးချက် JS ခလုတ် JS ချားရဟတ် JS ခေါက်သိမ်းပါ။ JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap Form ထည့်သွင်းမှုများ (နောက်ထပ်)


Static Control

အကယ်၍ သင်သည် အလျားလိုက်ပုံစံတစ်ခုအတွင်း ဖောင်အညွှန်းတစ်ခု၏ဘေးတွင် ရိုးရိုးစာသားကို.form-control-static ထည့်သွင်းရန် လိုအပ်ပါက၊ ဒြပ်စင်တစ်ခု ပေါ်ရှိ အတန်းကို အသုံးပြုပါ <p>-

ဥပမာ

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
</form>

Bootstrap ထည့်သွင်းမှုအုပ်စုများ

အတန်းသည် " .input-groupအကူအညီစာသား" အဖြစ် ရှေ့ သို့မဟုတ် နောက်တွင် အိုင်ကွန်တစ်ခု၊ စာသား သို့မဟုတ် ခလုတ်တစ်ခုကို ပေါင်းထည့်ခြင်းဖြင့် ထည့်သွင်းမှုကို မြှင့်တင်ရန် ကွန်တိန်နာတစ်ခုဖြစ်သည်။

အတန်း သည် .input-group-addonထည့်သွင်းမှုအကွက်ဘေးရှိ အိုင်ကွန် သို့မဟုတ် အကူအညီစာသားကို ပူးတွဲထားသည်။


စာသား

ဥပမာ

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>

ထည့်သွင်းမှု တစ်ခု၏ .input-group-btnဘေးတွင် ခလုတ်တစ်ခုကို ချိတ်ထားသည်။ ၎င်းကို ရှာဖွေမှုဘားတစ်ခုနှင့် တွဲသုံးလေ့ရှိသည်-

ဥပမာ

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>


Bootstrap Form Control States

  • ထည့်သွင်းမှုအာရုံစူးစိုက်မှု - ထည့်သွင်းမှု၏ ကောက်ကြောင်း ကို ဖယ်ရှားပြီး အာရုံစူးစိုက်မှုတွင် ဘောက်စ်အရိပ်ကို အသုံးပြုထားသည်။
  • ပိတ်ထားသော ထည့်သွင်းမှုများ - ထည့် disabledသွင်းမှုအကွက်ကို ပိတ်ရန် ရည်ညွှန်းချက် တစ်ခု ထည့်ပါ။
  • Disabled FIELDSETS - disabledအတွင်းထိန်းချုပ်မှုအားလုံးကိုပိတ်ရန် အကွက်အစုံသို့ ရည်ညွှန်းချက်တစ်ခုထည့်ပါ။
  • ဖတ်ရန်သာ ထည့်သွင်းမှုများ - readonlyအသုံးပြုသူထည့်သွင်းမှုကို တားဆီးရန်အတွက် ထည့်သွင်းမှုတစ်ခုသို့ ရည်ညွှန်းချက်တစ်ခု ထည့်ပါ။
  • တရားဝင် အခြေအနေများ - Bootstrap တွင် အမှားအယွင်း၊ သတိပေးချက်နှင့် အောင်မြင်မှုမက်ဆေ့ချ်များအတွက် တရားဝင်အတည်ပြုခြင်းပုံစံများ ပါဝင်သည်။ အသုံးပြုရန်၊ .has-warning, .has-error, သို့မဟုတ် .has-successပင်မဒြပ်စင် သို့ ထည့်ရန်
  • အိုင်ကွန်.has-feedback များ - အတန်းနှင့် အိုင်ကွန်များဖြင့် တုံ့ပြန်ချက်အိုင်ကွန်များကို သင်ထည့်နိုင်သည်။
  • ဝှက်.sr-only ထားသော တံဆိပ်များ - မမြင်နိုင်သော အညွှန်းများပေါ်တွင် အတန်း တစ်ခုကို ထည့်ပါ။

အောက်ဖော်ပြပါ ဥပမာသည် အထက်ဖော်ပြပါ ပုံစံထိန်းချုပ်မှုအခြေအနေအချို့ကို အလျားလိုက်ပုံစံ ဖြင့် သရုပ်ပြသည် -

ဥပမာ

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

ဤသည်မှာ Inline ပုံစံဖြင့် ပုံစံထိန်းချုပ်မှုပြည်နယ်အချို့၏ ဥပမာတစ်ခုဖြစ်သည်

ဥပမာ

<form class="form-inline">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>