سلام کاربران عزیز ، حالتون چطوره ؟ خوب هستید؟ سلامتید؟ امیدوارمکه شاد باشید
در این آموزش چگونگی ایجاد فرم های زیبا را با تویتر بوت استرپ فرا خواهید گرفت.
ایجاد فرم ها با تویتر بوت استرپ
فرم های HTML بخش داخلی صفحات وب هستند، اما طراحی کنترل های فرم به صورت دستی و یکی یکی با استفاده از CSS می تواند یک فرایند خسته کننده باشد. تویتر بوت استرپ به مقدار زیادی فرایند طراحی کنترل های فرم را ساده می کند، کنترل هایی مانند جعبه ی ورودی، جعبه ی انتخاب، متن و غیره. تویتر بوت استرپ سه نوع مختلف از Layout های فرم را ارائه می دهد. فرم عمودی (فرم پیش فرض Layout) فرم افقی فرم خطی
ایجاد فرم Layout عمودی
شما می توانید سه نوع مختلف لیست تعریف کنید . لیست های بدون ساختار –لیست یارآیتم ها که درآن ترتیب مهم نیست. آیتم های لیست در لیست های بدون ساختار با نقطه های گرد مشخص شده اند. لیست های منظم – لیست یارآیتم ها که در آن ترتیب مشخص میباشد. آیتم های لیست درلیست منظم با اعداد مشخص می شوند. لیست تعریف –لیست یار آیتم ها با توصیفات مربوط به آن ها.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
<div class=”form-group”>
<label for=”inputEmail”>
</label>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
<div class=”form-group”>
<label for=”inputPassword”>
Password
</label>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
<div class=”checkbox”>
<label>
<input type=”checkbox”>
Remember me
</label>
</div>
<button class=”btn btn-primary”>
Login
</button>
خروجی مثال بالا مانند تصویر زیر می باشد.
Bootstrap
نکته:
در bootstrap 3همه ی عناصر متنی مانند input, text area, و select با گروه .form-control به طور پیش فرض ۱۰۰ درصد گسترده می باشند. برای استفاده ی آنها در درون خط باید عرضی روی عنصر کنترل های فرم تنظیم کنند که در داخل استفاده شود.
ایجاد فرم Layout افقیایجاد فرم Layout افقی
در فرم Layout افقی برچسب ها در سمت راست تنظیم شده اند و به سمت چپ شناور می باشند تا روی همان خط ها ظاهر شوند، مانند کنترل های فرم. فرم Layout افقی به تغییرات زیادی در مارک آپ پیش فرض خود نیاز دارد. مراحل رسیدن به این Layout را در زیر مشاهده می کنید.
گروه .form-horizontalرا به عنصر form اضافه کنید. برچسب ها و کنترل های فرم را در عنصر div طبقه بندی کرده و گروه .form-group را به کار بگیرید. گروه های گرید از پیش تعریف شده ی بوت استرپ را برای تنظیم برچسب ها و کنترل های فرم استفاده کنید. گروه .control-label را به عنصر labelاضافه نمایید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
<form class=”form-horizontal”>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputEmail”>
</label>
<div class=”col-xs-10″>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputPassword”>
Password
</label>
<div class=”col-xs-10″>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<div class=”checkbox”>
<label>
<input type=”checkbox”>
Remember me
</label>
</div>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<button class=”btn btn-primary”>
Login
</button>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
نکته:
در bootstrap 3همه ی عناصر متنی مانند input, text area, و select با گروه .form-control به طور پیش فرض ۱۰۰ درصد گسترده می باشند. برای استفاده ی آنها در درون خط باید عرضی روی عنصر کنترل های فرم تنظیم کنند که در داخل استفاده شود.
ایجاد فرم Layout افقی
در فرم Layout افقی برچسب ها در سمت راست تنظیم شده اند و به سمت چپ شناور می باشند تا روی همان خط ها ظاهر شوند، مانند کنترل های فرم. فرم Layout افقی به تغییرات زیادی در مارک آپ پیش فرض خود نیاز دارد. مراحل رسیدن به این Layout را در زیر مشاهده می کنید. گروه .form-horizontalرا به عنصر form اضافه کنید. برچسب ها و کنترل های فرم را در عنصر div طبقه بندی کرده و گروه .form-group را به کار بگیرید. گروه های گرید از پیش تعریف شده ی بوت استرپ را برای تنظیم برچسب ها و کنترل های فرم استفاده کنید. گروه .control-label را به عنصر labelاضافه نمایید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
<form class=”form-horizontal”>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputEmail”>
</label>
<div class=”col-xs-10″>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputPassword”>
Password
</label>
<div class=”col-xs-10″>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<div class=”checkbox”>
<label>
<input type=”checkbox”>
Remember me
</label>
</div>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<button class=”btn btn-primary”>
Login
</button>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیایجاد فرم Layout درون خطی
گاهی اوقات ممکن است لازم باشد برای فشرده کردن جدول، کنترل های فرم را کنار یکدیگر قرار دهید. شما این کار را به راحتی با اضافه کردن گروه بوت استرپ .form-inlineبه عنصر
انجام می دهید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
<div class=”form-group”>
<label class=”sr-only” for=”inputEmail”>
</label>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
<div class=”form-group”>
<label class=”sr-only” for=”inputPassword”>
Password
</label>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
<div class=”checkbox”>
<label>
<input type=”checkbox”>
Remember me
</label>
</div>
<button class=”btn btn-primary”>
Login
</button>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
نکته:
پیشنهاد میشود برای هر فرم ورودی یک برچسب درج شود، در غیر اینصورت خواننده های صفحات با فرم های شما مشکل خواهند داشت. به هرحال در فرم Layout درون خطی شما می توانید این برچسب ها را با استفاده از گروه sr-only پنهان کنید.
ایجاد فرم Layout درون خطیفرم کنترل استاتیک
ممکن است موقعیتی وجود داشته باشد که لازم باشد تنها یک متن ساده را در کنار یک برچسب فرم به جای یک کنترل قرار دهید. شما می توانید این کار را در یک Layout افقی با استفاده از گروه .form-control- static روی یک عنصر pانجام دهید، مانند مثال زیر:
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیاندازه ارتفاع در جعبه های ورودی و انتخاب
شما به سادگی می توانید ارتفاع جعبه های ورودی و انتخاب خود را کنترل کنید تا آنها را با دکمه های سایز هماهنگ کنید. گروه های اندازه گیری بوت استرپ مانند .input-lg و .input-smمی توانند هم بر روی جعبه انتخاب و هم بر رویجعبه ی اندازه گیری استفاده شوند تا اندازه های کوچک تر و بزرگ تر آن را ایجاد کنند.
ایجاد فرم Layout درون خطیانداره ی گرید جعبه های ورودی، متن و انتخاب
شما می توانید اندازه های کنترل های فرم خود را با اندازه های ستون های بوت استرپ گرید هماهنگ کنید. تنها کنترل های فرم خود را در ستون های گرید یا هر عنصر دیگری دسته بندی کنید و گروه های گرید را روی آن به کار بگیرید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
<form>
<div class=”row”>
<div class=”col-xs-6″>
<input class=”form-control input-lg” type=”text”>
</div>
<div class=”col-xs-6″>
<select class=”form-control input-lg”>
<option>
Larger selectoption>
</option></select>
</div>
</div>
<br>
<div class=”row”>
<div class=”col-xs-6″>
<input class=”form-control” type=”text”>
</div>
<div class=”col-xs-6″>
<select class=”form-control”>
<option>
Default select
</option>
</select>
</div>
</div>
<br>
<div class=”row”>
<div class=”col-xs-6″>
<input class=”form-control input-sm” type=”text”>
</div>
<div class=”col-xs-6″>
<select class=”form-control input-sm”>
<option>
Smaller select
</option>
</select>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیگسترش فرم های کنترل با تویتر بوت استرپ
بوت استرپ دارای مولفه های مفید دیگری میباشد که فرم شما را جذاب تر می کند.
ایجاد فرم Layout درون خطیایجاد ورودی های افزوده و اضافه
شما می توانید قبل یا بعد از هر ورودی متن محور متن، آیکن و یا دکمه اضافه کنید.
ایجاد فرم Layout درون خطیبرای افزودن متن یا آیکن به یک ورودی
متن یا آیکن را داخل یک عنصرspan دارای گروه .input-group-addon قرار دهید و آن را قبل و یا بعد از عنصر input قرار دهید. span و عنصر متن محور input را در داخل عنصر div قرار دهید و گروه class .input-groupرا روی آن به کار برید.
نکته:
ویژگی افزوده در بوت استرپ تنها برای ورودی های متن محور قابل دسترسی می باشد و عناصر select یا text areaرا پشتیبانی نمی کند.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
<div class=”bs-example”>
<form>
<div class=”input-group-addon”>
<span class=”glyphicon-user”> </span>
<input class=”input-medium” type=”text”>
</div>
<div class=”input-group-addon”>
<input class=”input-small” type=”text”>
<span class=”add-on”>.00</span>
</div>
<div class=”input-group-addon”>
<span class=”add-on”>$</span>
<input class=”input-small” type=”text”>
<span class=”add-on”>.00</span>
</div>
</form>
</div>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
به طور مشابه می توانید دکمه ی چک باکس یا رادیو را به جای متن در داخل گروه ورودی قرار دهید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
<form>
<div class=”row”>
<div class=”col-xs-6″>
<div class=”input-group”>
<span class=”input-group-addon”>
<input type=”checkbox”>
</span>
<input class=”form-control” type=”text”>
</div>
</div>
<div class=”col-xs-6″>
<div class=”input-group”>
<span class=”input-group-addon”>
<input type=”radio”>
</span>
<input class=”form-control” type=”text”>
</div>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیایجاد دکمه های رو به پایین
اگر بخواهید بیشتر ازیک عمل را با یک دکمه انجام دهید،می توانید به جای متن دکمه های رو به پایین را اضافه کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
<div class=”bs-example”>
<div class=”bs-example”>
<form>
<div class=”input-prepend”>
<div class=”btn-group”>
<button class=”btn dropdown-toggle”>Action <span class=”caret”> </span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</div>
<input class=”input-medium” type=”text”>
</div>
<div class=”input-append”>
<input class=”input-medium” type=”text”>
<div class=”btn-group”>
<button class=”btn dropdown-toggle”>Action <span class=”caret”> </span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</div>
</div>
</form>
</div>
</div>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیایجاد گروه های دکمه های رو به پایین تقسیم
به طور مشابه می توانید زمانیکه دکمه در کنار دکمه های دیگر قرار دارد، گروهی از دکمه های رو به پایین ایجاد کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
<form>
<div class=”input-prepend”>
<div class=”btn-group”>
<button class=”btn”>Action</button>
<button class=”btn dropdown-toggle”>
</button>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</div>
<input type=”text”>
</div>
<div class=”input-append”>
<input type=”text”>
<div class=”btn-group”>
<button class=”btn”>Action</button>
<button class=”btn dropdown-toggle”>
</button>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
ایجاد فرم Layout درون خطیایجاد ورودی های غیرفعال
برای ایجاد ورودی های غیرفعال ویژگی disabled را به عنصر input اضافه کنید. بوت استرپ بقیه ی کارها را انجام خواهد داد.
?
۱
۲
۳
۴
۵
<form>
<input class=”form-control” disabled=”disabled” type=”text”>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
همچنین می توانید ویژگی read only را به عناصر ورودی اضافه کنید و یک ورودی read only ایجاد کنید که مانع ورودی های یوزر شده و همان ویژگی های غیرفعال را داراست.
?
۱
۲
۳
۴
۵
۶
۷
<form>
<input class=”form-control” readonly=”readonly” type=”text”>
</form>
به خای غیرفعال کردن کنترل های فرم به طور تکی، می توانید همه ی کنترل های فرم را در یک مجموعه فیلد با اضافه کردن ویژگی disabled به عنصر
غیرفعال کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
<form class=”form-horizontal”>
<fieldset>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputEmail”>
Email</label>
<div class=”col-xs-10″>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputPassword”>
Password</label>
<div class=”col-xs-10″>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<div class=”checkbox”>
<label>
<input type=”checkbox”>
Remember me</label>
</div>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-2 col-xs-10″>
<button class=”btn btn-primary”>
Login</button>
</div>
</div>
</fieldset>
</form>
خروجی مثال بالا مانند تصویر زیر می باشد.
Bootstrap
قرار دادن متن کمکی در اطراف کنترل های فرمقرار دادن متن کمکی در اطراف کنترل های فرم
قرار دادن متن کمکی برای کنترل های فرم یک راه مناسب برای راهنمایی یوزرها در ورود به داده ی درست می باشد. می توانید با استفاده از گروه .help-blockسطح بلوک متن کمکی را نیز برای کنترل های فرم قرار دهید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
<form>
<input class=”form-control” type=”text”>
<span class=”help-block”>
A block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
قرار دادن متن کمکی در اطراف کنترل های فرمقرار دادن متن کمکی در اطراف کنترل های فرم
بوت استرپ مکانیزم آسان و قدرتمند برای طراحی کنترل های ورودی ارائه می دهد تا وضعیت های مختلف اعتبار را نشان دهد. بوت استرپ دارای طرح های اعتبار برای خطا، هشدار و پیام های موفق می باشد. برای استفاده از آن فقط کافیست گروه مناسب را به پیرامون .form-group اضافه کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
<form class=”form-horizontal”>
<div class=”form-group has-success”>
<label class=”col-xs-2 control-label” for=”inputSuccess”>
Username
</label>
<div class=”col-xs-10″>
<input id=”inputSuccess” class=”form-control” type=”text”>
<span class=”help-block”>
Username is available
</span>
</div>
</div>
<div class=”form-group has-warning”>
<label class=”col-xs-2 control-label” for=”inputWarning”>
Password
</label>
<div class=”col-xs-10″>
<input id=”inputWarning” class=”form-control” type=”password”>
<span class=”help-block”>
Password strength: Weak
</span>
<div>
</div>
<div class=”form-group has-error”>
<label class=”col-xs-2 control-label” for=”inputError”>
</label>
<div class=”col-xs-10″>
<input id=”inputError” class=”form-control” type=”email”>
<span class=”help-block”>
Please enter a valid email address
</span>
</div>
</div>
</div>
</div>
</form>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
همچنین می توانید با استفاده از گروه .has-feedback روی .form-group و گلیفیکن (glyphicon) راست، آیکن های فیدبک اختیاری به ورودی های خود اضافه کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
<form class=”form-horizontal”>
<div class=”form-group has-success has-feedback”>
<label class=”col-xs-2 control-label” for=”inputSuccess”>
Username
</label>
<div class=”col-xs-10″>
<input id=”inputSuccess” class=”form-control” type=”text”>
<span class=”glyphicon glyphicon-ok form-control-feedback”>
</span>
<span class=”help-block”>
Username is available
</span>
</div>
</div>
<div class=”form-group has-warning has-feedback”>
<label class=”col-xs-2 control-label” for=”inputWarning”>
Password
</label>
<div class=”col-xs-10″>
<input id=”inputWarning” class=”form-control” type=”password”>
<span class=”glyphicon glyphicon-warning-sign form-control-feedback”>
</span>
<span class=”help-block”>
Password strength: Weak
</span>
</div>
</div>
<div class=”form-group has-error has-feedback”>
<label class=”col-xs-2 control-label” for=”inputError”>
</label>
<div class=”col-xs-10″>
<input id=”inputError” class=”form-control” type=”email”>
<span class=”glyphicon glyphicon-remove form-control-feedback”>
</span>
<span class=”help-block”>
Please enter a valid email address
</span>
</div>
</div>
</form>
کنترل های پشتیبانی شده در تویتر بوت استرپ
بوت استرپ همه ی کنترل های فرم استاندارد و انواع ورودی های HTML5 جدید از جمله تاریخ زمان، اعداد، ایمیل، url، جستجو، tel رنگ و غیره را پشتیبانی می کند. مثال زیر موارد استفاده از کنترل های فرم استاندارد با تویتر بوت استرپ را نشان خواهد داد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
۱۳۰
۱۳۱
۱۳۲
۱۳۳
۱۳۴
۱۳۵
۱۳۶
۱۳۷
۱۳۸
۱۳۹
۱۴۰
۱۴۱
۱۴۲
۱۴۳
۱۴۴
۱۴۵
۱۴۶
۱۴۷
۱۴۸
۱۴۹
۱۵۰
۱۵۱
۱۵۲
۱۵۳
۱۵۴
۱۵۵
۱۵۶
۱۵۷
۱۵۸
۱۵۹
۱۶۰
۱۶۱
۱۶۲
۱۶۳
۱۶۴
۱۶۵
۱۶۶
۱۶۷
۱۶۸
۱۶۹
۱۷۰
۱۷۱
۱۷۲
۱۷۳
۱۷۴
۱۷۵
۱۷۶
۱۷۷
۱۷۸
۱۷۹
۱۸۰
۱۸۱
۱۸۲
۱۸۳
۱۸۴
۱۸۵
۱۸۶
۱۸۷
۱۸۸
۱۸۹
۱۹۰
۱۹۱
۱۹۲
۱۹۳
۱۹۴
۱۹۵
۱۹۶
۱۹۷
۱۹۸
۱۹۹
۲۰۰
۲۰۱
۲۰۲
۲۰۳
۲۰۴
۲۰۵
۲۰۶
۲۰۷
۲۰۸
۲۰۹
۲۱۰
۲۱۱
۲۱۲
۲۱۳
۲۱۴
۲۱۵
۲۱۶
۲۱۷
۲۱۸
۲۱۹
۲۲۰
۲۲۱
۲۲۲
۲۲۳
۲۲۴
۲۲۵
۲۲۶
۲۲۷
۲۲۸
۲۲۹
۲۳۰
۲۳۱
۲۳۲
۲۳۳
۲۳۴
۲۳۵
۲۳۶
۲۳۷
۲۳۸
۲۳۹
۲۴۰
۲۴۱
۲۴۲
۲۴۳
۲۴۴
۲۴۵
۲۴۶
۲۴۷
۲۴۸
۲۴۹
۲۵۰
۲۵۱
۲۵۲
۲۵۳
۲۵۴
۲۵۵
۲۵۶
۲۵۷
۲۵۸
۲۵۹
۲۶۰
۲۶۱
۲۶۲
۲۶۳
۲۶۴
۲۶۵
<form class=”form-horizontal” style=”margin-top: 20px;”>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputEmail”>
Email:
</label>
<div class=”col-xs-9″>
<input id=”inputEmail” class=”form-control” type=”email”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”inputPassword”>
Password:
</label>
<div class=”col-xs-9″>
<input id=”inputPassword” class=”form-control” type=”password”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”confirmPassword”>
Confirm Password:
</label>
<div class=”col-xs-9″>
<input id=”confirmPassword” class=”form-control” type=”password”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”firstName”>
First Name:
</label>
<div class=”col-xs-9″>
<input id=”firstName” class=”form-control” type=”text”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”lastName”>
Last Name:
</label>
<div class=”col-xs-9″>
<input id=”lastName” class=”form-control” type=”text”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”phoneNumber”>
Phone:
</label>
<div class=”col-xs-9″>
<input id=”phoneNumber” class=”form-control” type=”tel”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″>
Date of Birth:
</label>
<div class=”col-xs-2″>
<select class=”form-control”>
<option>
Date
</option>
</select>
</div>
<div class=”col-xs-2″>
<select class=”form-control”>
<option>Month</option>
</select>
</div>
<div class=”col-xs-2″>
<select class=”form-control”>
<option>
Year
</option>
</select>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”postalAddress”>
Address:
</label>
<div class=”col-xs-9″>
<textarea id=”postalAddress” class=”form-control” rows=”3″></textarea>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″ for=”ZipCode”>
Zip Code:
</label>
<div class=”col-xs-9″>
<input id=”ZipCode” class=”form-control” type=”text”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-xs-2″>
Gender:
</label>
<div class=”col-xs-2″>
<label class=”radio-inline”>
<input name=”genderRadios” value=”male” type=”radio”>
Male
</label>
</div>
<div class=”col-xs-2″>
<label class=”radio-inline”>
<input name=”genderRadios” value=”female” type=”radio”>
Female
</label>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-3 col-xs-9″>
<label class=”checkbox-inline”>
<input value=”news” type=”checkbox”>
Send me latest news and updates.
</label>
</div>
</div>
<div class=”form-group”>
<div class=”col-xs-offset-3 col-xs-9″>
<label class=”checkbox-inline”>
<input value=”agree” type=”checkbox”>
I agree to the <a href=”#”>
Terms and Conditions
</a>
</label>
</div>
</div>
<br>
<div class=”form-group”>
<div class=”col-xs-offset-3 col-xs-9″>
<input class=”btn btn-primary” value=”Submit” type=”submit”>
<input class=”btn btn-default” value=”Reset” type=”reset”>
</div>
</div>
</form>
