اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

اندازه بندی عناصر ورودی بوت استرپ

سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش اندازه بندی عناصر ورودی بوت استرپ رو خدمت دوستان ارائه می نماییم. لطفا با ما همراه باشید…

اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

با استفاده از کلاس هایی مانند .input-sm و .input-lg ارتفاع عناصر ورودی را در بوت استرپ تنظیم کنید.

مثال های زیر عناصر ورودی را با اندازه های مختلف در بوت استرپ را به شما دوستان عزیز نشان میدهد :

<form role="form">
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

میتوانید به سرعت برچسب ها و کنترل فرم های درون یک فرم افقی را با اضافه کردن کلاس <div class=”form-group”>به عنصر .form-group-* تنظیم کنید.

 <form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="lg">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="sm">
    </div>
  </div>
</form>

جهت مشاهده مثال دیگر کلیک نمایید

سایز بندی به ستون ها در بوت استرپ

مثال های زیر عنصر های ورودی را با عرض های مختف در بوت استرپ نشان میدهد. برای این کار از کلاس col-xs-* استفاده کنید

<div class="col-xs-2">
  <label for="ex1">col-xs-2</label>
  <input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
  <label for="ex2">col-xs-3</label>
  <input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
  <label for="ex3">col-xs-4</label>
  <input class="form-control" id="ex3" type="text">
</div>

متن کمکی و راهنما

برای اضافه کردن یک فیلد به عنوان پسورد و یا ستاره دار که کاراکتر های فیلد مورد نظر بصورت قابل مشاهده نباشد از کلاس.help-block استفاده کنید. این فیلد اغلب در فیلدهای وارد نمودن پسورد استفاده می شود

 <div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is some help text...</span>
</div>

مشاهده مثال دیگر

برای تازه شدن دیر نیست

موفق و پیروز باشید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.