Bootstrap layout component application example

This article introduces the Bootstrap layout component application practice, sharing for your reference, the specific content is as follows

Sample application of font ICONS

<button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>

Sample drop-down menu

<div class="dropdown">
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown">
  The theme 
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header"> Drop-down menu titles </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#"> options 1</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#"> options 2</a>
 </li>
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#"> options 3</a>
 </li>
 <li role="presentation" class="divider"></li><!-- The divider -->
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#"> Detached link </a>
 </li>
 </ul>
</div>

Button toolbars and button groups

<div class="btn-toolbar" role="toolbar"><!-- Used to nested btn-group-->
 <div class="btn-group btn-group-lg">
 <!--btn-group-lg Used to control the size of the button group ,bt-group-vertical Is a vertical set of buttons ,bt-group It can also be nested bt-group-->
 <button type="button" class="btn btn-default">Button 1</button>
 <button type="button" class="btn btn-default">Button 2</button>
 <button type="button" class="btn btn-default">Button 3</button>
 </div>
 <div class="btn-group btn-group-sm">
 <button type="button" class="btn btn-default">Button 4</button>
 <button type="button" class="btn btn-default">Button 5</button>
 <button type="button" class="btn btn-default">Button 6</button>
 </div>
 <div class="btn-group btn-group-xs">
 <button type="button" class="btn btn-default">Button 7</button>
 <button type="button" class="btn btn-default">Button 8</button>
 <button type="button" class="btn btn-default">Button 9</button>
 </div>
</div>

Button drop-down menu

 <div class="btn-group"><!-- Add class .dropup It can be a button pull up menu -->
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown"> <!--  Add class .btn-xs Something like that to change the size of the button -->
  The default  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#"> function </a></li>
 <li><a href="#"> On the other 1 A function of </a></li>
 <li><a href="#"> other </a></li>
 <li class="divider"></li><!-- The divider -->
 <li><a href="#"> Detached link </a></li>
 </ul>
 </div>

A group of input fields in a form

<form class="bs-example bs-example-form" role="form">
 <div class="input-group input-group-lg"><!--input-group-lg Resize the input box set -->
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
 </div>
 <br>
 <div class="input-group">
 <span class="input-group-addon">
 <input type="checkbox"><!-- Both check boxes and radio boxes can be applied to input box groups -->
 </span>
 <input type="text" class="form-control">
 </div>
 <br>
 <div class="input-group">
 <input type="text" class="form-control">
 <span class="input-group-btn"><!-- Buttons can also be applied to the input box group notice that the class here has been changed input-group-btn , you can even add the button in front of the drop-down menu -->
 <button class="btn btn-default" type="button">
 Go!
 </button>
 </span>
 </div>
 </form>

If you want to learn more, you can click here to learn more, and there are two wonderful projects for you: Bootstrap learning tutorial Bootstrap practical tutorial

This is part of the Bootstrap layout component application, I hope to help you learn, continue to pay attention to.