4 E042

Chris Rebert редактировал(а) эту страницу 2016-01-02 00:30:43 -08:00

Содержание

• E042
• .form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button
• .form-control should only be used on <input>s, <textarea>s, and <select>s.

E042

.form-control can only be used on certain HTML elements, and there are further restrictions about which types of <input> elements it can be used on.

.form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button

When used on an <input> element, .form-control can only be used on <input>s whose type is text-like, namely:

• <input type="text">
• <input type="password">
• <input type="search">
• <input type="number">
• <input type="email">
• <input type="url">
• <input type="tel">
• <input type="datetime-local">, <input type="date">, <input type="month">, <input type="week">, <input type="time">
• <input type="color">

Contrastingly, .form-control cannot be used on non-textual <input>s, namely:

• <input type="file">
  • Bootstrap v3 does not offer styling for these.
• <input type="range">
  • Bootstrap v3 does not offer styling for these.
• <input type="image">
  • Bootstrap v3 does not offer styling for these.
  • Note that this essentially turns an image into a button. It has nothing to do with letting the user choose image files to input.
• <input type="button">, <input type="submit">, <input type="submit">
  • Instead of .form-control, use the .btn (and possibly .btn-block) classes for styling button-ish <input>s.
• <input type="checkbox">, <input type="radio">
  • Instead of .form-control, use the .checkbox or .radio classes (which DON'T go on the <input>s themselves) for styling these.
• <input type="hidden">
  • You shouldn't be trying to style this in the first place.

.form-control should only be used on <input>s, <textarea>s, and <select>s.

The .form-control class cannot be used on arbitrary HTML elements. It can only be used on <input>s, <textarea>s, and <select>s.

Wrong:

<button class="form-control">None of</button>
<div class="form-control">these</div>
<span class="form-control">make any</span>
<a class="form-control">sense!</a>

Right:

<input type="text" class="form-control" value="Text input" />
<textarea class="form-control">Text area</textarea>
<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Bootlint documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc.