BootStrap entry responsive fence

Introduction:
1. Note:
bootstrap divides each line into 12 parts
Media query:

If the screen is large, each line displays 6
    Super large computer, screen resolution > 1200 use: col-lg-2

If the screen is small, 4 are displayed in each line
    992 < screen resolution < 1200 use: col-md-3

Smaller, 2 per line
    768 < screen resolution < 992 use: col-sm-6

Continue small, 1 per line  
    Screen resolution < 768 use: col-xs-12


2. Code:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <!--Add mobile conditions viewport-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ha-ha</title>

        <!--Import bootstrap Of css-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--Import jquery.js-->
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <!--Import bootstrap.js-->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container-fluid">
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
        </div>

    </body>

</html>


3. bootstrap divides each line into 12 parts, and then divides them with the size of the screen.

4. Renderings,
col-sm-4 renderings. In this way, there are 12 copies in total. If SM takes 4 copies, 3 will be displayed

The renderings of col-xs-6 are 12 copies in total. If xm takes 6 copies, 2 will be displayed

Tags: Javascript JQuery Mobile

Posted on Sun, 03 May 2020 13:36:41 -0400 by wannalearnit