引导表单控件类有什么用？

Question

I'm having trouble wrapping my brain around the strategy for how to use the form-control class offered by Bootstrap.

On one hand I have this rather bland comment from the Bootstrap documentation:

Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Ref: https://getbootstrap.com/docs/4.0/components/forms/#form-controls

While on the other hand I have rather in-the-weeds code to look at:

.form-control {
  display: block;
  width: 100%;
  height: $input-height;
  padding: $input-padding-y $input-padding-x;
  // ... 40-some lines elided ...
}

ref: https://github.com/twbs/bootstrap/blob/275cd7f91eed9f4051d85c295e5c14ef08937804/scss/_forms.scss

My question: How can I holistically approach modifying existing code or writing new code with form-control .

Answer 1

You add that class to text input elements (input, select, textarea), eg <input type="email" class="form-control" value="" placeholder="Your email address" /> This is Bootstrap's way of forcing form elements to look the same.

The CSS is so long because they're accounting for all the differences in how browsers natively render those elements.

Answer 2

Bootstrap form-control class is use to make an element fit it container

<div>
<input type='text' class='form-control'>
</div>



div{
width: 400px; 
background: gray;
}

Answer 3

Define a .form-control class again. It will override properties in existing .form-control of Bootstrap.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .form-control { border-radius: unset; } </style> <input class="form-control" type="text" value="Test">