Bootstrap basic tutorials

Bootstrap basic tutorials

I. Introduction to Bootstrap

Boostrap is a very popular front-end development framework that greatly improves the development efficiency of front-end teams. Bootstrap completely encapsulates common CSS layout components and JavaScript plug-ins so that developers can use them easily. With Bootstrap, you can quickly create exquisite responsive pages and be compatible with mobile terminals.

Ii. Bootstrap features

Provides a complete set of CSS plug-ins, a rich set of pre-defined style tables, a set of jQuery-based JS plug-in tables, a flexible responsive Delete lattice system, and mobile development based on Less and Sass.

Iii. use Bootstrap

1. Step 1:

Go to http://www.bootcss.com/to download the latest bootstrap. After decompression, there are three folders, including css, js, and font. The CSS and JavaScript files have a compressed version. You can select a version as needed. The uncompressed version is used for development and the compressed version is used for release.

　2. Fixed template code Display

<! DOCTYPE html> 
3. Basic usage:

3.1 overall framework-12 Grid System

The core of bootstrap is the 12-grid system. 12 The raster system divides the content area of a webpage into 12 parts based on the width. webpage developers can combine the content according to the parts to facilitate the layout of the webpage and make the layout look neat and standardized.
Bootstarp provides a style container named container. container is a self-centered and highly adaptive style. Using. container as the div style of the outermost layer of the webpage content, you can easily achieve the layout of the 12-grid webpage. In addition, the 12-grid system is adaptive to the screen size. The. iner automatically adjusts the total width and the average width of the grid according to the screen size.

Col-lg-n maximum column width: 95px. The container12 is equal to or equal to the pixel width: 95px. In other cases, the width of each part is 100%.

Col-md-n maximum width 78px; 100% for the remainder of the case when the pixel is greater than or equal to 992px

Col-sm-n maximum column width: 60 PX. When the pixel is greater than or equal to 768px, The. container12 is divided into 100% of the remaining values.

Col-xs-n column width equals. container 12 in any size on the screen according to the size of the 12-bit View

　　3.2 Basic Style

(1) Bootstrap h1-h6 style removes the bold, redefining the upper and lower margin H1-H3 margin-top: 20px; margin-bottom-10px; H3-h6 margin-top: 10px; margin-bottom-10px;

(2) Four alignment styles are defined, respectively. text-left ,. text-center ,. text-right ,. text-justify. align text-justify English letters

(3) Bootstrap provides five default color styles:-primary highlighted blue,-success green,-info blue-warning orange,-danger dangerous red

　3.3btn component + btn-group　　

<Button type = "button" class = "btn-primary"> key buttons </button> alert component <div class = "alert" class = "alert-danger"> danger Warning </div>
General components have four sizes: Ultra-small xs, small sm, common, large lg uses the component name-size <button type = "button" class = "btn-lg"> oversized buttons </button>. Different types of buttons of the same component can be used in combination.
<Button type = "button" class = "btn-primary btn-lg"> ultra-large key button </button> <! -- Btn-group --> <div class = "btn-group"> <button class = "btn-default"> homepage </button> <button class = "btn- default "> page 2 </button> <button class =" btn-default "> page 3 </button> <button class =" btn-default "> last page </ button> <div class = "btn-group"> <button type = "button" class = "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>
　3.4table table style:

Add a parent div element to the table element, and add class = "table-responsive" to the div to create a corresponding table. When the pixel of the view is smaller than 768px, a horizontal scroll bar will appear.
<! -- The table and table-striped lists are separated by colors, table-responsive table adaptive --> <div class = "table-responsive"> <table class = "table-striped"> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div>
　　3.5Badge badges

<! -- Badges --> <br/> <a href = "#"> special concern <span class = "badge"> 42 </span> </a> <br/>
　　3.6 navigation bar

(1) capsule navigation bar

<Ul class = "nav-pills"> <li class = "active"> <a href = "#"> dynamic <span class = "badge"> 42 </span> </a> </li> <a href = "#"> Profile </a> </li> <a href = "#"> private Message <span class = "badge"> 3 </span> </a> </li> </ul>
(2) label-based navigation bar
<! -- Label navigation menu --> <ul class = "nav-tabs"> <li class = "active"> <a href = "# news1" data-toggle = "tab"> company news </a> </li> <a href = "# news2" data-toggle = "tab"> industry news </a> </li> <li> <a href = "# news3" data-toggle = "tab"> notification announcement </a> </li> </ul> <div class = "tab- content "> <div class =" tab-pane fade "id =" news1 "> <ul> <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> </ul> </div> <div class = "tab-pane fade "id =" news3 "> <ul> <li> notice announcement </li> </ul> </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 carousel

<! DOCTYPE html> 
　3.9 panel-group

<! DOCTYPE html> 
　　3.10 media Query
<! DOCTYPE html> 
Iv. Notes

1. container, col-(GRID), which needs to be wrapped in a separate div, and then other content is defined in it.

2. If you want to set a class or id that cannot be defined in the media query for the element, it cannot be written into a div with the class or id that defines the col-(GRID,

Medio's syntax for defining class Errors for media queries <div class = "medio col-md-6"> aa </div>
Which of the following statements is true?
<Div class = "col-md-6"> <div class = "medio"> aa </div>

3. If iner is used for height self-adaptation, the height cannot be added to the element. overflow-hidden should be set for its parent element.

4. After Position is set for the element, the width of the element is 0. to center the element, you need to add width: 100%; text-align: center;

5. When the input label is used, if col-(GRID) is defined for its parent class, you can add form-control to the input class to set the size of the input to be as large as that of the parent class.