Bootstrap

Labels and Styles

Bootstrap resets the style of some tags, that is, it sets the style with Bootstrap style for some tags, such as h tags, p tags and so on, which includes HTML5 tags.

The sample code is as follows:
You can annotate Bootstrap's css style file and refresh the browser to see the default style of the label in both cases.

<h1>Love autumn</h1>
<h2>Girlfriend Series</h2>
<h3>Bootstrap Learning documents</h3>
<h4>An ape that writes programs</h4>
<h5>html</h5>
<h6>css</h6>
<p>http://www.jianshu.com</p>
<p><kbd>ctrl+i</kbd></p>
<pre><p>Here's a paragraph of text that won't be parsed.</p><br /><div>kaivon</div></pre>
<code>Hello, word!</code>
<code><span></code>

If you want to use the six-level heading style of the Bootstrap h tag, you can also add the class names of h1-h6 directly to the tag, such as: <span class="h1"> heading style </span>.

form

Bootstrap also resets the tab of the table, adding the usual forms of the table, such as interlacing, adding borders and so on. Below is the table class name of Bootstrap, which can be used in combination.

• table modifies some simple styles
• table-striped interlaced color change
• table-bordered adds borders to tables
• table-hover adds a hover state to each row
• table-condensed makes tables more compact

Note: Pack the table in a div with table-response class, and scroll bars appear when the screen size is less than 768.

In the table, Bootstrap also encapsulates state classes through which rows or cells can be colored.

• The color set when the active mouse hovers over a row or cell
• success identifies successful or positive actions
• info identifies common prompts or actions
• warning Identity warning or User Attention
• danger identifies dangerous or potentially negative actions

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>Chinese  </td>
          <td>Mathematics</td>
          <td>English</td>
          <td>Biology</td>
          <td>Chemistry</td>
        </tr>
        <tr class="success">
          <td>Chinese  </td>
          <td>Mathematics</td>
          <td>English</td>
          <td>Biology</td>
          <td>Chemistry</td>
        </tr>
        <tr class="warning">
          <td>Chinese  </td>
          <td>Mathematics</td>
          <td>English</td>
          <td>Biology</td>
          <td>Chemistry</td>
        </tr>
        <tr class="danger">
          <td>Chinese  </td>
          <td>Mathematics</td>
          <td>English</td>
          <td>Biology</td>
          <td>Chemistry</td>
        </tr>
        <tr class="info">
          <td>Chinese  </td>
          <td>Mathematics</td>
          <td>English</td>
          <td>Biology</td>
          <td>Chemistry</td>
        </tr>
        <tr>
          <td class="active">Chinese </td>
          <td class="success">Mathematics</td>
          <td class="warning">English</td>
          <td class="danger">Biology</td>
          <td class="info">Chemistry</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</div>

form

1. Basic Style

• form-control makes the form 100% wide and adds other styles, such as form rounded effect and focused light.
• form-group adds some distance between forms vertically
• form-inline lets the form be displayed in a row, and you can avoid form-group at this point, but it is recommended to add
  The sample code is as follows:

<div class="container">
  <div class="row">
    <form action="#" class="form-inline">
      <!--<div class="form-group">-->
        <label for="userName">User name</label>
        <input type="text" id="userName" class="form-control" />
      <!--</div>-->
      
      <!--<div class="form-group">-->
        <label for="password">Password</label>
        <input type="password" id="password" class="form-control" />
      <!--</div>-->
    </form>
  </div>
</div>

2. Style Advancement

• form-horizontal lets the form be displayed in a row and can change the style of form-group
• control-label aligns words in label vertically and horizontally

The sample code is as follows:

<div class="container">
  <div class="row">
    <form action="#" class="form-horizontal">
      <div class="form-group">
        <label for="userName" class="col-lg-1 control-label">User name</label>
        <div class="col-lg-11">
          <input type="text" id="userName" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <label for="password" class="col-lg-1 control-label">Password</label>
        <div class="col-lg-11">
          <input type="password" id="password" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <div class="col-lg-1 col-lg-offset-1">
          <input type="button" value="Sign in" class="btn" />
        </div>
      </div>
    </form>
  </div>
</div>

3. Special Styles
The styles of radio boxes, check boxes, text field boxes

• Style settings for checkbox checkbox
• checkbox-inline lets checkbox be displayed in one line
• Style settings for radio radio
• radio-inline lets radio be displayed in one line

Check status class of form

• has-warning form to fill in warnings
• has-error form filling in errors
• has-success Form Completed Successfully

The sample code is as follows:

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox disabled">
      <label><input type="checkbox" disabled /> Remember me</label>
    </div>
    
  </div>
</div>

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox">
      <label><input type="checkbox" /> Forget me</label>
    </div>
    
  </div>
</div>

<!--checkbox Display in a row-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="checkbox">
      <label class="checkbox-inline"><input type="checkbox" /> Forget me</label>
      <label class="checkbox-inline"><input type="checkbox" /> Forget me</label>
    </div>
    
  </div>
</div>


<!--radio Display in a row-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="radio">
      <label class="radio-inline"><input type="radio" /> Forget me</label>
      <label class="radio-inline"><input type="radio" /> Forget me</label>
    </div>
  </div>
</div>

<!--select Drop-down box-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <select multiple class="form-control">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
    </select>
  </div>
</div>

<!--Text input box-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <textarea class="form-control"></textarea>
  </div>
</div>

Button

Bootstrap provides us with a wealth of button styles

• Background color of button
  Default button style for btn-default
  btn-link link style buttons
  Buttons for btn-primary preference color
  btn-success success color button
  Button for general information color of btn-info
  Button for btn-warning warning color
  btn-danger dangerous color button

• Button size
  btn-lg btn-md btn-sm btn-xs

• btn-block
  By changing the button from inline block level element to block level element, the whole parent level element can be filled, that is, the width of the button is set to 100%.

• The status of the button
  active (Activated) disabled (Disabled)

The sample code is as follows:

<div class="container">
  <div class="row">
    <input type="button" value="Button" class="btn" />
    <button type="button" class="btn btn-default">kaivon</button>
    <button type="button" class="btn btn-primary">kaivon</button>
    <button type="button" class="btn btn-success">kaivon</button>
    <button type="button" class="btn btn-info">kaivon</button>
    <button type="button" class="btn btn-warning">kaivon</button>
    <button type="button" class="btn btn-danger">kaivon</button>
    <button type="button" class="btn btn-link">kaivon</button>
  </div>
  
  <!--Button size-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-default btn-lg">kaivon</button>
    <button type="button" class="btn btn-primary btn-md">kaivon</button>
    <button type="button" class="btn btn-success btn-sm">kaivon</button>
    <button type="button" class="btn btn-info btn-xs">kaivon</button>
  </div>
  
  <!--btn-block Change the width of the button to 100%，And it becomes a block-level element.-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary btn-block">kaivon</button>
  </div>
  
  <!--Activation state-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active">kaivon</button>
    <a href="#" class="btn btn-danger active">kaivon</a>
  </div>
  
  <!--Forbidden state-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active" disabled>kaivon</button>
    <button type="button" class="btn btn-info disabled">kaivon</button>
    <a href="#" class="btn btn-danger active disabled">kaivon</a>
  </div>
</div>

picture

Place these classes directly in the img tag, but don't use them indiscriminately.

• img-responsive
  Responsive pictures. The size of the picture changes with the parent container. The maximum size is the real size of the picture.
• Shape of picture
  img-rounded images with rounded corners
  img-circle circular image
  img-thumbnail Bordered Pictures

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      ![](logo.jpg)
    </div>
  </div>
  
  <!--Shape of picture-->
  <div class="row" style="margin-top: 10px;">
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
  </div>
</div>

Auxiliary class

1. Color of fonts
text-muted text-primary text-success text-info text-warning text-danger
It can be found that there is the same place as the back part of the background color of the button before. Bootstrap is named regularly. For different usage scenarios, different prefixes are used.

The sample code is as follows:

<div class="row">
  <p class="text-muted">Aiqiu Yan</p>
  <p class="text-primary">Aiqiu Yan</p>
  <p class="text-success">Aiqiu Yan</p>
  <p class="text-info">Aiqiu Yan</p>
  <p class="text-warning">Aiqiu Yan</p>
  <p class="text-danger">love autumn's beauty</p>
</div>

2. The Background of Text
bg-primary bg-success bg-info bg-warning bg-danger

The sample code is as follows:

<div class="row">
  <p class="bg-primary">Aiqiu Yan</p>
  <p class="bg-success">Aiqiu Yan</p>
  <p class="bg-info">Aiqiu Yan</p>
  <p class="bg-warning">Aiqiu Yan</p>
  <p class="bg-danger">love autumn's beauty</p>
</div>

3. Triangle Symbols and Buttons
Bootstrap provides commonly used triangular symbols and button icons for easy use.
Add caret's class name to the span tag to make it a lower triangle symbol. A closed button can appear by adding the close class name in the button and the * escape symbol in the button.

The sample code is as follows:

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>

4. floating
pull-left floating
pull-right float
Note that the container can be opened by placing the floating part directly in the row, because the row has a clear floating style. If not placed directly in the row, the class name of clearfix can be added outside the floating part to clear the internal floating.

The sample code is as follows:

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>
<div class="row" style="border: 1px solid #f00;">
  <div class="pull-left">Programmer</div>
  <div class="pull-right">Program element</div>
</div>

1. Hiding and Displaying
   hidden is not occupying the position of the document stream
   show normal display
   Invisible is invisible, but still occupies a place

The sample code is as follows:

<style>
.row div{
    height: 100px;
    background: green;
    border: 1px solid #000;
    color: #fff;
  }
</style>

<div class="row">
  <div class="col-lg-3 show">The first column</div>
  <div class="col-lg-3 hidden">The second column</div>
  <div class="col-lg-3">The third column</div>
  <div class="col-lg-2 invisible">The fourth column</div>
  <div class="col-lg-1">The fifth column</div>
</div>

6. Centralized display
center-block is a block-level element in the middle, the principle is very simple, that is, we often write margin: 0 auto; in addition, we add display:block; to make elements become block-level.

The sample code is as follows:

<div class="row" >
  <div style="width: 100px; height: 100px; border: 1px solid #f00;" class="center-block"></div>
</div>

Responsive tools

Display and hide related content for different screen widths

• If the condition is satisfied, it will be displayed.
  visible -- The content of the first * is LG MD SM xs, and the content of the first * is block inline-block.

• Hide if conditions are met
  The content of hidden - ** is lg md sm xs.

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-lg-block">Row 1, column 1</div>
    <div class="col-lg-4 visible-lg-inline">Row 1, column 2</div>
    <div class="col-lg-4 visible-lg-inline-block">Row 1, column 3</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 visible-md-block">Row 2, column 1</div>
    <div class="col-lg-4 visible-md-inline">Row 2, column 2</div>
    <div class="col-lg-4 visible-md-inline-block">Row 2, column 3</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-lg">Row 3, column 1</div>
  </div>
</div>

Printing class

Printing functions (browser shortcut Ctrl + P or right-click function options) are seldom used in our daily life. Bootstrap adds a print style class to make it more comprehensive.

• Display when printing
  The contents of visible-print-** are block inline-block
• Hide (not display) when printing
  hidden-print

The sample code is as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-print-block">Row 1, column 1</div>
    <div class="col-lg-4 visible-print-inline">Row 1, column 2</div>
    <div class="col-lg-4 visible-print-inline-block">Row 1, column 3</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-print">Row 2, column 1</div>
  </div>
</div>

Bootstrap series:

Bootstrap Learning Document for Girlfriend (1)
Bootstrap Learning Document for Girlfriend (2)
Bootstrap Learning Document for Girlfriend (3)
Bootstrap Learning Document for Girlfriend (4)