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>