سبد (0)

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

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

Wiki

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

برای ست کردن عرض عناصر می توانید از کلاس های شبکه بندی  col-lg. و col-sm. استفاده کنید. 


تعیین ارتفاع عناصر input در بوت استرپ

Wiki

مثال زیر، عناصر input را با ارتفاع های مختلف، نشان می دهد:

مثال (اندازه دهی input در بوت استرپ)

<form class="form-inline" 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>

خودتان امتحان کنید »

شما می توانید با اضافه کردن کلاس form-group-*. به عنصر <div class="form-group"> برچسب ها و input ها را در داخل یک فرم افقی اندازه دهی کنید: 

مثال (اندازه دهی  به input در بوت استرپ)

<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>

خودتان امتحان کنید »

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

Wiki

مثال زیر عناصر ورودی(input) را با عرض های مختلف، با استفاده از کلاس 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>

خودتان امتحان کنید »

متن راهنما در بوت استرپ

Wiki

برای نوشتن یک متن راهنما در فرم ها، می توانید از کلاس 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>

خودتان امتحان کنید »

 

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه