bootstrap entry & Grid System

I. Overview

1. Concept: a front-end development framework, Bootstrap, from Twitter, is currently very popular front-end framework. Bootstrap is based on HTML, CSS, JavaScript, and it is simple and flexible, so that Web developers more quickly. 
    * Frame: a semi-finished software, developers can frame basis, during development, simplifying coding. 
    * Benefits: 
        1. Define a lot of js and css style plug-ins. Our developers can use these styles and effects plug-ins get rich pages. 
        2. Response layout. 
            * A page with different resolutions compatible devices.

Second, Getting Started

- the three meta tags * must * on the front, any other content * must * follow later! -> < title


    
    
    
    
    > Bootstrap the HelloWorld </ title > 

    <-! Bootstrap -> 
    < Link the href = "CSS / bootstrap.min.css" the rel = "this stylesheet" > 

    <-! The jQuery (JavaScript all plugins are dependent Bootstrap jQuery, so must be placed in the front) -> 
    < Script src = "JS / jQuery-3.2.1.min.js" > </ Script > 
    <-! all the Bootstrap JavaScript plug-ins loaded. You can also load only a single plug-in needed. -> 
    < Script the src = "JS / bootstrap.min.js" > </ Script > 
</ head >

< H1 > Hello, World! </ H1 of > 

</ body > 
</ HTML >

Third, the grid system

* A page with different resolutions compatible devices. 
* Achieved: the system depends on the grid: the grid line is equally divided into 12, representing several grid elements can be specified 
* steps: 
    1. Define the container. Corresponding to the previous table, 
        * vessel classification: 
            1. Container: both sides of blank 
            2. container-fluid: each device is 100% of the width 
    2 is defined rows. Before the equivalent tr style: Row 
    3. defined elements. The element specified in the different devices, the number of occupied lattice. Style: col- equipment code - the number of lattice 
        * Code equipment: 
            1. XS: ultra-small mobile phone screens ( < 768px ): COL-XS-12 is 
            2. SM: small screen plate (≥768px) 
            3. MD: medium screen desktop monitors (≥992px) 
            4. LG: large screen large desktop monitor (≥1200px) 

    * Note: 
        1. If the number of grid line exceeds 12, the excess wrap. 
        2. Raster upward compatible class attributes. Class is used for the screen grid width greater than or equal to the size of the cut-off point device. 
        3. If the actual width is smaller than the minimum value of the device class attributes raster device code, an element will be covered with a whole line.

<! DOCTYPE HTML > 
< HTML lang = "ZH-the CN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge" > 
    < meta name = "the viewport" content = "width = width-Device, Initial-Scale =. 1" > 
    <-! the three meta tags * * must be placed on top of any other content * * must follow later! -> 
    < title > Grid System </ title > 

    <!
    href = "CSS / bootstrap.min.css" rel = "stylesheet" > 

    <-! jQuery (JavaScript plugin Bootstrap all are dependent on jQuery, it must be placed in the front) -> 
    < Script src = "JS / JQuery 3.2.1.min.js " > </ Script > 
    <-! all the Bootstrap JavaScript plug-ins loaded. You can also load only a single plug-in needed. -> 
    < Script the src = "JS / bootstrap.min.js" > </ Script > 

    < style > 
        .inner { 
            border : 1px Solid Red ; 
        } 
    </ style >
> 
< Body > 
    <-! 1. container defined -> 
    < div class = "Container-Fluid" > 
        <-! 2. definition line -> 
        < div class = "Row" > 
            <-! . 3. define the elements 
            in a large display grid line 12 
            line 6 on grid PAD 
            -> 
            < div class = "COL-LG-COL. 1 Inner-SM-2" > grid </ div > 
            < div class = "COL- COL. 1-SM-LG-2 Inner " > grid </ div > 
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
        </div>
    </div>

</body>
</html>