1. button

# Add a button class (button) to the < a >, < button > or < input > element class)Can use Bootstrap Styles provided
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<button type="button" class="btn btn-default">(Default style) Default</button>
<button type="button" class="btn btn-primary">(Preferred item) Primary</button>
<button type="button" class="btn btn-success">(Success) Success</button>
<button type="button" class="btn btn-info">(General information) Info</button>
<button type="button" class="btn btn-warning">(Warning) Warning</button>
<button type="button" class="btn btn-danger">(Danger) Danger</button>
<button type="button" class="btn btn-link">(Link) Link</button>

2. dimensions

# Use. BTN LG,. BTN SM, or. BTN XS to get buttons of different sizes
<p>
  <button type="button" class="btn btn-primary btn-lg">(Big button Large button</button>
  <button type="button" class="btn btn-default btn-lg">(Big button Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">(Default size) Default button</button>
  <button type="button" class="btn btn-default">(Default size) Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">(Small button Small button</button>
  <button type="button" class="btn btn-default btn-sm">(Small button Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">(Super small size) Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">(Super small size) Extra small button</button>
</p>

# You can stretch a button to its parent by adding a. BTN block class to it100%The width of the button is changed to block level( block)element
<button type="button" class="btn btn-primary btn-lg btn-block">(Block level elements) Block level button</button>

3. pictures

By adding the following corresponding classes to the < img > element, you can make the image take on different shapes

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

4. auxiliary class

Context text color:

<p class="text-muted">111</p>
<p class="text-primary">222</p>
<p class="text-success">333</p>
<p class="text-info">444</p>
<p class="text-warning">555</p>
<p class="text-danger">666</p>

Context background color:

<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Close button:

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Triangle symbol:
By using triangle symbols, you can indicate that an element has the function of a drop-down menu. Note that the triangle in the up pop-up menu is in the opposite direction

<span class="caret"></span>

Fast float:

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Clear float:
You can easily clear floats by adding a. clearfix class to the parent element

<div class="clearfix">...</div>

Show or hide content:

<div class="show">...</div>
<div class="hidden">...</div>