Bootstrap Basic Usage (cont.)

There are a lot of components in bootstrap that can help us to write some nice-looking styles faster, and here are some of the styles:

Navigation box :

<ul class= "Nav nav-tabs" >  <li class= "active" ><a href= "#" >Home</a></li>  < Li><a href= "#" >Profile</a></li>  <li><a href= "#" >messages</a></li ></ul>

Style:

　　　　　　　　　　

Disable & Activate link:

<ul class= "Nav nav-pills" > ... <li class= "disabled" ><a href= "#" >disabled link</a></li>& lt;! -class= "disabled" to disable links-
<li class="active" ><a href="#" >1 <span class=" Sr-only "> (current)</span></a></li>    <!-class="active" You can link to

</ul>

Drop- down menu

<div class= "dropdown" >  <button class= "btn dropdown-toggle sr-only" type= "button" id= "DropdownMenu1" data-toggle= "dropdown" >    dropdown    <span class= "caret" ></span>  </button>  <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "dropdownMenu1" >    <li role= "Presentation" > <a role= "MenuItem" tabindex= "-1" href= "#" >Action</a></li>    <li role= "Presentation" >< A role= "MenuItem" tabindex= "-1" href= "#" >another action</a></li>    <li role= "Presentation" > <a role= "MenuItem" tabindex= "-1" href= "#" >something else here</a></li>    <li role= " Presentation "class=" divider "></li>    <li role=" presentation "><a role=" MenuItem "tabindex="-1 "Href=" # ">separated link</a></li>  </ul></div>

Default paging:

　　

<ul class= "pagination" >  <li><a href= "#" >«</a></li>  <li><a href= "#" >1</a></li>  <li><a href= "#" >2</a></li>  <li><a href= "#" >3</a></li>  <li><a href= "#" >4</a></li>  <li><a href= "#" >5</a></li>  <li><a href= "#" >»</a></li></ul>

Style:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Progress bar:

　　

<div class= "Progress" > <div class= "Progress-bar progress-bar-success" role= "ProgressBar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "style=" width:40% "> <span class=" sr-only ">40% Complete (Success) </ Span> </div></div><div class= "Progress" > <div class= "Progress-bar progress-bar-info" role= " ProgressBar "aria-valuenow=" "aria-valuemin=" 0 "aria-valuemax=" style= "width:20%" > <span class= "sr-only" >20% complete</span> </div></div><div class= "Progress" > <div class= "Progress-bar Progress-bar-warning "role=" ProgressBar "aria-valuenow=" aria-valuemin= "0" aria-valuemax= "style=" > <span class= "sr-only" >60% Complete (warning) </span> </div></div><div class= "Progress "> <div class=" Progress-bar progress-bar-danger "role=" ProgressBar "aria-valuenow=" "aria-valuemin=" 0 " aria-valuemax= "style=" width:80% "> <span class=" sr-Only ">80% complete</span> </div></div> 

Style:

　　　　　　　　　　　　　　　　　　　

　　

customizing content

Inside you can add almost any HTML, even a list group with links like the one below.

　　

<div class= "List-group" >  <a href= "#" class= "List-group-item active" >    
Style:
　　　　　　　　
These are more commonly used in bootstrap, there are more CSS styles here are not listed here, to these styles only need to directly copy the code, you can change some of the details of the style can change the class;
Bootstrap Basic Usage (cont.)