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

مقالات

اندازه input در فرم ها

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

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

اندازه ارتفاع input

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

<form>
  <div class="form-group">
    <label for="inputsm">Small input</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
   <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">Large input</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
</form>

<form>

<label for="inputsm">Small input</label>

</div>

<label for="inputdefault">Default input</label>

</div>

<label for="inputlg">Large input</label>

</div>

</form>

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

شما همچنین می توانید تمام input ها و عناصر دیگر را درون یک .input-group با مقادیر .input-group-sm یا .input-group-lg اندازه بگیرید:

مثال:

<div class="input-group input-group-lg">

1	<div class="input-group input-group-lg">

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

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

مثال:

<div class="form-group row">
  <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>
</div>

</div>

</div>

</div>

Help Text

با استفاده از کلاس “.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>

<label for="pwd">Password:</label>

</div>

Rate this post

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

اندازه input در فرم ها

اندازه ارتفاع input

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

Help Text

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

اندازه input در فرم ها

اندازه ارتفاع input

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

Help Text

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ