Bootstrap v3 The components of the learning notes

1. How to use the font icon:

<span class= "Glyphicon Glyphicon-star" aria-hidden= "true" ></span>

class= "The name below the corresponding icon can be"

2. Button group:

<div class= "Btn-group" role= "group" aria-label= "..." >
  <button type= "button" class= "Btn Btn-default" > left</button>
  <button type= "button" class= "btn btn-default" >Middle</button>
  <button Type= "button" class= "btn btn-default" >Right</button>
</div>

3. Push-button drop-down menu:

<!--single button--
<div class= "Btn-group" >
  <button type= "button" class= "Btn Btn-default Dropdown-toggle "data-toggle=" dropdown "aria-haspopup=" true "aria-expanded=" false ">
    Action <span class=" Caret "></span>
  </button>
  <ul class=" Dropdown-menu ">
    <li><a href=" # " >Action</a></li>
    <li><a href= "#" >another action</a></li>
    <li ><a href= "#" >something else here</a></li>
    <li role= "separator" class= "divider" ></ li>
    <li><a href= "#" >separated link</a></li>
  </ul>
</div>

4. Add extra elements to the left or right of the input box:

<div class= "Input-group" >
  <span class= "Input-group-addon" id= "Basic-addon1" >@</span>
  <input type= "text" class= "Form-control" placeholder= "Username" aria-describedby= "Basic-addon1" >
</div >

<div class= "Input-group" >
  <input type= "text" class= "Form-control" placeholder= "Recipient ' s Username "aria-describedby=" basic-addon2 ">
  <span class=" Input-group-addon "id=" Basic-addon2 ">@ example.com</span>
</div>

<div class= "Input-group" >
  <span class= " Input-group-addon ">$</span>
  <input type=" text "class=" Form-control "aria-label=" Amount (to the Nearest dollar) ">
  <span class=" Input-group-addon ">.00</span>
</div>

5, the badge display:

<a href= "#" >inbox <span class= "badge" >42</span></a>

<button class= "Btn btn-primary" Type= "button" >
  Messages <span class= "badge" >4</span>
</button>

6. The warning box can be closed

<div class= "alert alert-warning alert-dismissible" role= "alert" >
  <button type= "button" class= "Close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" >x</span></button>
  < strong>warning!</strong> Better Check yourself, you ' re not looking too good.
</div>