input های بیشتر فرم بوت استرپ

مقالات

Static Control

اگر شما نیاز به وارد کردن متن ساده در کنار label فرم bootstrap در یک فرم افقی دارید، از کلاس .form-control-static در یک عنصر <p> استفاده کنید.

مثال:

Bootstrap Input Groups

input ها گروهی بوت استرپ

کلاس ininput-group ظرفی است برای افزایش ورودی با اضافه کردن آیکون، متن یا یک دکمه در جلو یا پشت آن به عنوان یک “متن راهنما”.

کلاس addin-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>

<form>

</div>

</div>

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

<form>

</button>

</div>

</form>

Bootstrap Form Control States

INPUT FOCUS:طرح کلی input حذف می شود و یک box-shadow روی فوکوس اعمال می شود
DISABLED INPUTS :یک ویژگی disable را برای غیرفعال کردن فیلد input اضافه کنید
DISABLED FIELDSETS:یک ویژگی disable را به یک فیلد اضافه کنید تا تمام کنترلهای آن را غیرفعال کنید
READONLY INPUTS :یک خصیصه readonly را در input برای جلوگیری از ورودی کاربر اضافه کنید
VALIDATION STATES :بوت استرپ شامل سبک های اعتبارسنجی برای پیام هایerror, warning, و success است. برای استفاده، افزودن .has-warning، .has-error، یا .has-success به عنصر پدر یا parrent اضافه کنید
ICONS :شما می توانید آیکون های بازخورد با کلاس “.has-feedback و یک آیکون اضافه کنید
HIDDEN LABELS :یک کلاس .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>

<label class="col-sm-2 control-label">Focused</label>

</div>

<label for="disabledInput" class="col-sm-2 control-label">Disabled</label>

</div>

<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>

</div>

<option>Disabled select</option>

</select>

</div>

</fieldset>

Input with success and icon</label>

</div>

Input with warning and icon</label>

</div>

Input with error and icon</label>

</div>

</form>

مثال

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

<label for="focusedInput">Focused</label>

</div>

<label for="inputPassword">Disabled</label>

</div>

<label for="inputSuccess2">Input with success</label>

</div>

<label for="inputWarning2">Input with warning</label>

</div>

<label for="inputError2">Input with error</label>

</div>

</form>

Rate this post

input های بیشتر فرم بوت استرپ

Static Control

Bootstrap Input Groups

Bootstrap Form Control States

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

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

Static Control

Bootstrap Input Groups

Bootstrap Form Control States

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

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

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

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

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

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

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

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