Bootstrap use basic tutorials to explain _javascript skills

One: Bootstrap introduction

Boostrap is a very popular front-end development framework that greatly improves the development efficiency of the front-end team. Bootstrap a complete encapsulation of common CSS layout components and JavaScript plug-ins, making it easy for developers to use. With Bootstrap, you can quickly produce beautifully responsive pages and are compatible with the mobile side.

Two: Bootstrap characteristics

Provides a complete set of CSS Plug-ins rich predefined style sheets a set of jquery based JS plug-in table flexible Response-type-deletion system mobile first based on less and sass development.

Third: Using bootstrap

1. First step:

Download the latest bootstrap to http://www.bootcss.com/. After decompression, there are three folders, placed Css,js and fonts respectively. CSS and JavaScript files each have a compressed version, you can select a version as needed. Use uncompressed version at development time, and use compressed versions when publishing.

　2. Fixed template code display

<! DOCTYPE html>  

3. Basic usage:

3.1 Whole frame-12 grid system

The core of Bootstrap is a 12 grid system. 12 grid system is the content area of the Web page in accordance with the width of 12, page developers can be free to mix, convenient layout of the Web page, so that typesetting looks neat norms.

Bootstarp provides a style container named container. Container is an automatically centered, highly adaptive style. Using. Container as the outermost div style of the content of the Web page, you can easily implement the page layout of the 12 grid. And, this 12 grid system is adaptive to the size of the screen,. Container automatically adjusts the total width and the average width of the grid according to the screen size.

Col-lg-n Maximum column width 95px in >=1200px pixels. Container12 equal to each width 95px the rest of the width is 100%

Col-md-n Maximum width 78px; In the case of >=992px pixels. Container12 the rest of the 100%

Col-sm-n Maximum column width 60px in >=768px pixels. Container12 the rest of the 100%

The col-xs-n width is divided by the viewport size 12 equal to the screen of any size. Container 12 halves

　　3.2 Basic Styles

(1) The H1-h6 style of the bootstrap is cancelled and the upper and lower outer margin h1-h3 margin-top:20px are redefined; margin-bottom-10px; H3-h6 margin-top:10px; margin-bottom-10px;

(2) Defines 4 alignment styles, respectively, of. Text-left,. Text-center,. text-right,.text-justify. Text-justify the justification of the English alphabet

(3) Bootstrap offers five kinds of default color styles,-primary key blue,-success success Green,-info information Blue-warning warning orange,-danger dangerous red

　3.3BTN Component +btn-group　　

<button type= "button" class= "Btn btn-primary" > Key button </button> Alert component <div class= "alert" class= "alert Alert-danger "> Danger warning </div>

General components have four sizes, super small xs, small sm, ordinary, large LG use method is component name-size <button type= "button" class= "btn btn-lg" > Oversized button </button> Different types of buttons for the same component can be used in combination

<button type= "button" class= "btn btn-primary btn-lg" > Super Key button </button>
<!--btn-group-->
<div class= "Btn-group" >
<button class= "btn btn-default" > Home </button>
<button class= " BTN Btn-default "> second page </button>
<button class=" Btn Btn-default "> third page </button>
< Button class= "Btn Btn-default" > Last </button>
<div class= "Btn-group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" > Product list
<span class= "caret" ></span>
</button>
<ul class= "Dropdown-menu" >
<li class= "Dropdown-header" > Lenovo </li>
<li> asus </li>
<li> Apple </li>
</ul>
</div>
</div >

　3.4table Table Style:

Add a div parent element to the table element, add class= "table-responsive" to the div and create the corresponding table, and the horizontal scroll bar appears when the viewport pixel is less than 768px

<!--table, table-striped list with interval color, table-responsive table adaptive-->
<div class= "table-responsive" >
<table class= "Table table-striped" >
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td >
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3 </td>
<td>3</td>
</tr>
</table>
</div>

　　3.5Badge badge

<!--badges badge-->
<br/>
<a href= "#" >
Special Care <span class= "badge" >42</span >
</a>
<br/>

　　3.6 Navigation Bar

(1) Capsule-type navigation bar

<ul class= "Nav nav-pills" >
<li class= "active" ><a href= "#" > Dynamic <span class= "badge" >42</ span></a></li>
<li><a href= "#" >Profile</a></li>
<li><a href= "#" > DMs <span class= "badge" >3</span></a></li>

(2) Tagged navigation bar

<!--tabbed navigation menu-->
<ul class= "Nav nav-tabs" >
<li class= "active" ><a "#news1" data-toggle= "tab" > Company news </a></li>
<li><a href= "#news2" data-toggle= "tab" > Industry news </a ></li>
<li><a href= "#news3" data-toggle= "tab" > Notice announcement </a></li>
</ul>
<div class= "tab-content" >
<div class= "Tab-pane fade" id= "news1" >
<ul>
<li > Company News </li>
<li> Company News </li>
<li> Company news </li>
</ul>
</ div>
<div class= "Tab-pane fade" id= "News2" >
<ul>
<li> Industry news </li>
<li> Industry News </li>
<li> industry news </li>
</ul>
</div>
<div class= "Tab-pane Fade" id= "News3" >
<ul>
<li> notice Notice </li>
<li> notice Notice </li>
<li> Announcement </li>
</ul>
</div>
</div>

　　3.7 Input-group

<!--Input+button combination-->
<div class= "Input-group" >
<input type= "text" class= "Form-control" >
<span class= "input-group-btn" >
<button class= "btn" > Search </button>
</span>
</div>

　3.8 Wheel Broadcast

<! DOCTYPE html>  

3.9 Panel panel-group

<! DOCTYPE html>  

　　3.10 Media Enquiries

<! DOCTYPE html>
 
 

Four: Attention matters

1.container,col-(GRID), you need to use a separate div package, and then define the other content.

2. If you want to set the elements of the media query can not be defined class or ID can not and define Col-(grid) class or ID into a div,

Medio to define the class error for a media query <div class= "Medio col-md-6" >aa</div>

The correct wording is

<div class= "col-md-6" > <div class= "medio" >aa</div> </div>

3. If you use container to achieve a high degree of adaptability, you cannot add heights to the element, and should set Overflow-hidden for its parent element.

4. When the element is position positioned, the width of the element is 0, and if you want to center the element, you need to add width:100%;text-align:center to it;

5. When you use the input label again, if you define a col-(grid) for its parent class, you can add Form-control to the input to set the size of input as large as the parent class.