Bootstrap for mobile layout

Responsive principle

使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备

Division of equipment

Smaller than 768 screen (mobile phone)
Small screen devices (tablets) between 768 and 992
992~1200 medium screen (desktop monitor)
Widescreen devices greater than 1200 (large desktop monitors)

Note: Responsive requires a parent element as a container to cooperate with child elements to achieve more effects

The size of the center of the parent container

Ultra-small screen (mobile phone, less than 768px): set the width to 100%
Small screen (tablet, greater than or equal to 768px): set the width to 750px
Medium screen (desktop monitor, greater than or equal to 992px): the width is set to 970px
Large screen (large desktop monitor, greater than or equal to 1200px): the width is set to 1170px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        /* max-width:767 */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
                background-color: blue;
            }
        }
        /* min-width:768px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
                background-color: brown;
            }
        }
        /* min-width:970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
                background-color: yellow;
            }
        }
        /* min-width:1200px */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
                background-color: purple;
            }
        }
    </style>
</head>

<body>
    <div class="container">尧子陌</div>
</body>

</html>

Insert picture description here

Navigation bar case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 常规尺寸 */
        
        .container {
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            float: left;
            width: 100px;
            height:40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            background-color: gray;
        }
        
        li:hover {
            background-color: green;
        }
        /* min-width:900px */
        
        @media screen and (min-width: 900px) {
            .container {
                width: 900px;
                background-color: pink;
            }
            ul li {
                width: 33.3%;
            }
        }
        /* min-width:1200px */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 100%;
                background-color: pink;
            }
            ul li {
                width: 33.3%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>阿里</li>
            <li>腾讯</li>
            <li>京东</li>
            <li>拼多多</li>
            <li>淘宝</li>
            <li>闲鱼</li>
        </ul>
    </div>
</body>

</html>

Insert picture description here

bootstarp

Introduction to bootstrap

Bootstrap comes from Twitter (Twitter) and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT. It is simple and flexible, making Web development faster.

Official website: www.bootcss.com/

Framework: As the name suggests, it is a set of architecture. It has a relatively complete set of webpage functional solutions, and the control is in the framework itself, with pre-made style libraries, components and plug-ins. The user has to develop in accordance with a certain specification stipulated by the framework.

Bootstarp advantages

Standardized html+css coding standard
Provides a set of concise, intuitive and powerful components
Have its own ecosystem, constantly update and iterate
Make development easier and improve the efficiency of development

Use of bootstarp

1. Create a folder structure
Insert picture description here
2. Create an HTML structure


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3. Introduce related style files

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4. Write content

Use Bootstrap's pre-defined styles directly
Modify the original style of Bootstrap, pay attention to the weight issue
The key to learning Bootstrap well is to know which styles it defines and what effects these styles can achieve

Bootstarp case

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 600px;
            margin: auto;
        }
    </style>
</head>

<body>

    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</body>

</html>

Insert picture description here

Note: You can directly use the class defined by bootstarp for direct use

Bootstarp's layout container

Bootstrap needs to wrap a .container or .container-fluid container for the page content and grid system. It provides two classes for this purpose

.container

Fixed width of container with responsive layout
Ultra small screen (100%)
Small screen (greater than or equal to 768px), the width is set to 750px;
Medium screen (greater than or equal to 992px), width is set to 970px
Large screen (greater than or equal to 1200px), the width is set to 1170px

.container-fluid

Flow layout container, occupying 100% width
The container that occupies the entire viewport.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstarp容器的使用</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            font-weight: bolder;
            background-color: purple;
            text-align: center;
            margin-bottom: 60px;
        }
        
        .container-fluid {
            color: white;
            font-weight: bolder;
            background-color: purple;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">container</div>
    <div class="container-fluid">container-flued</div>

</body>

</html>

Insert picture description here

Grid system

The grid system creates a page layout through a series of row and column combinations, and content can be placed in these created layouts

Insert picture description here

Divide into 1~12 equal parts according to different screens
Row can remove the 15px margin of the parent container
col-xs: super small; col-sm: small; col-md: medium; col-lg: large;
The column (column) is greater than 12, the elements of the extra "column" will be arranged as a whole on a new line
Each column has a padding of 15 pixels left and right by default
You can specify the class names of multiple devices for a column at the same time, so as to divide the number of copies. For example, class="col-md-4 col-sm-6"


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
   <![endif]-->

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: black;
            font-weight: 700;
            height: 40px;
            padding: 0;
            text-align: center;
            line-height: 40px;
        }
        
        div[class^=col] {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">2</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">3</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4</div>
        </div>

    </div>
</body>

</html>

Insert picture description here

Other situations of grid system

The grid system is exactly 12 copies, which will occupy the entire width of the parent container.
If the grid system is less than 12 copies, it is less than the width of the parent container, and there will be remaining blanks.
If the grid system is more than 12 copies, a new row will be started.

Column nesting in grid system

Simply put, it is to divide a row into 12 parts, each of which is equivalent to 1 column, and each column can be divided into 12 equal parts.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
            background-color: purple;
        }
        
        .col-lg-3 {
            border-right: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="row">
                    <div class="col-lg-6">6份</div>
                    <div class="col-lg-6">6份</div>
                </div>
            </div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

</body>

</html>

Insert picture description here

Column nesting needs to add a row (row) that can remove the padding value of the parent element and the height will automatically be as high as the parent

Column offset of grid system

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
   <![endif]-->

   <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       
       .container {
           color: white;
           height: 40px;
           text-align: center;
           line-height: 40px;
           font-weight: 700;
       }
       
       .col-lg-3 {
           background-color: purple;
       }
   </style>
</head>

<body>
   <div class="container">
       <div class="row">
           <div class="col-lg-3">3份</div>
           <div class="col-lg-3  col-lg-offset-6">3份</div>
       </div>
   </div>

</body>

</html>

Insert picture description here

Offset score = (12 copies-the score occupied by the current child element)

Column sorting in grid system

You can easily change the order of the columns by using the .col-md-push and .col-md-pull classes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
        }
        
        .col-md-3 {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-md-push-3">左侧</div>
            <div class="col-md-3 col-md-pull-3">右侧</div>
        </div>
    </div>

</body>

</html>

Insert picture description here

Responsive tool of grid system

Using the media query function and using tools can easily display or hide page content for different devices.

Insert picture description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

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


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            font-weight: 700;
            padding: 0;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        .col-lg-3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 hidden-md">3份</div>
            <div class="col-lg-3">3份</div>
            <div class="col-lg-3">3份</div>
            <div class="col-lg-3">3份</div>
        </div>
    </div>
</body>

</html

Insert picture description here

hidden: hide
visible: show