This is the 7th day of my participation in the August Text Challenge.More challenges in August

Introduction of the Bootstrap

Bootstrap, from Twitter, is the most popular front-end framework. It is based on HTML/ CSS and JavaScript. It is simple and flexible, making Web development faster.

The framework

As the name implies is a set of architecture, it has a relatively complete web function solution, and control in the framework itself, with prefabricated style library, components and plug-ins. Users develop according to some specification specified by the framework.

  • Chinese official website: www.bootcss.com/
  • Liverpoolfc.tv: getbootstrap.com/

advantages

The standard HTML+CSS coding specification provides a set of simple, intuitive, powerful components have their own ecosystem, continuous update and iteration make development easier, improve the development efficiency

The Bootstrap version

  • 2. X.x: stop maintenance, compatibility is good, the code is not simple enough, the function is not perfect
  • 3. X.x: currently the most used, stable, but abandoned ie6-ie7. IE8 is supported but has a poor interface and tends to be used to develop responsive layouts or mobile-first Web projects
  • 4. X.x: the latest version, not very popular at present

The use of Bootstrap

Using its style library as an example, Bootstrap is divided into four steps:

  1. Create folder structure
  2. Create the HTML skeleton structure
  3. Introduce related style files
  4. Writing content

1. Create a folder structure

2. Create the HTML skeleton structure

You need to add the following statements to the generated HTML:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Copy the code

The web site is required to use the latest Edge version of the kernel when loading in Internet Explorer to ensure that it can be successfully loaded in Internet Explorer

<! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" > < / script > <! [endif]-->Copy the code

Some properties set specifically for browsers below IE9.

  • The first one is to solve the problem that the following browsers of IE9 do not recognize the new HTML5 tags and cause CSS to not work
  • The second section resolves the unrecognition of CSS3 Media Query by Internet Explorer 9

** Bootstrap does not need to import normalize.css files **

3. Introduce relevant style files

< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >Copy the code

Import the Bootstrap compressed version of the file

4. Write content

The key to learning Bootstrap well is what styles are defined and what effects can these styles achieve

Bootstrap Layout container

Bootstrap involves wrapping a. Container container around the page content and raster system. When we want to use the layout container in the future, we can simply add a. Container class to it

Bootstrap provides two similar classes:

The container class

  • Responsive layout of the container with fixed width
  • The large screen (>=1200px) is 1170px wide
  • The middle screen (>=992px) is 970px wide
  • The small screen (>=768px) is 750px wide
  • Super small screen (100%)

The container – fluid type

  • The flow layout container is 100 percent wide
  • A container that occupies all the viewpoints
  • Suitable for mobile page development

Bootstrap Grid Systems

It simply divides the page layout into columns of equal width, and then modularizes the page layout by defining the number of columns.

Bootstrap provides a responsive, mobile-first streaming grid system that automatically splits into up to 12 columns as the screen or viewpoint size increases.

The official website describes the working principle of the grid system as follows:

  • “Row” must be included in the.container(Fixed width) or.container-fluid(100% width) in order to give it proper aligment and padding.
  • Row creates a set of columns horizontally.
  • Your content should be placed inside a column, and only a column can be a direct child of a row.
  • similar.row 和 .col-xs-4This predefined class can be used to quickly create raster layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts.
  • By setting for columnpaddingProperty to create a gutter between columns. By providing.rowElement setting negative valuemarginAnd that cancels out with theta.containerElement setpadding“, which indirectly cancels out the column contained in “row”padding.
  • A negative margin is why the following example is highlighted outwards. The contents of the grid column are arranged in a row.
  • Columns in a grid system indicate the range they span by specifying values from 1 to 12. For example, three columns of equal width can be used.col-xs-4To create.
  • If a row contains a column greater than 12, the elements of the extra column are grouped on a separate row as a whole.
  • The grid class applies to devices with screen width greater than or equal to the size of the cut-off point and overrides the grid class for small screen devices. Therefore, apply any.col-md-*The grid class applies to devices with screen width greater than or equal to the size of the cut-off point and overrides the grid class for small screen devices. Therefore, apply any.col-lg-*Does not exist, also affects large screen devices.

Method of use of grid system

Grid option parameter

The grid system is used to create a page layout through a series of rows and columns into which our content can be placed

  • Xs – Extra small Super small

  • Sm – small small

  • Md-medium Medium

  • Lg – large

  • The row class removes 15px margins from the parent container

  • Each column defaults to about 15px padding

  • If the number of columns in a row is more than 12, a line break is displayed

  • If it’s less than 12, it’s empty

  • You can specify the class names of multiple devices in a column, for example, class = “col-mD-4 col-SM-6”.

<! DOCTYPEhtml>
<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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" > < / script > <! [endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <! Add four column elements inside -->
            <div class="col-lg-3 col-md-6">1</div>
            <div class="col-lg-3 col-md-6">2</div>
            <div class="col-lg-3 col-md-6">3</div>
            <div class="col-lg-3 col-md-6">4</div>
        </div>

        <div class="row">
            <! Add four column elements inside -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <div class="row">
            <! If there are less than 12 columns, it will be empty -->
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <div class="row">
            <! If there are more than 12 columns, newline will be displayed -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
    </div>
</body>
</html>
Copy the code

The effect

Big screen:

When the screen shrinks:

Part of the screenshot when zooming out again:

Raster system – column nesting

The built-in grid system nested the content again, subdividing a column into several columns.

The sample

Column nesting in 1:

First add a row class name for column 1, and the next step is the same as before.

<! DOCTYPEhtml>
<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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" > < / script > <! [endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
        p {
            border: 1px solid red;
            height: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <! -- column nesting -->
            <div class="col-lg-3 row">
                <p class="col-lg-6"></p>
                <p class="col-lg-6"></p>
            </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>
Copy the code

Grid system – Column offset

Columns can be compiled to the right using the.cl-md-offset-* (md is interchangeable) class. These classes actually add a margin to the left of the current element by using the * selector.

The sample

Move 2 to the right:

<! DOCTYPEhtml>
<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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" > < / script > <! [endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <! -- column offset -->
            <div class="col-lg-4">1</div>
            <div class="col-lg-4 col-lg-offset-4">2</div>
        </div>
    </div>
</body>
</html>
Copy the code

In addition, we can use column offsets to provide more possibilities for layout, such as mimicking left float, right float, type center, etc.

Add a new line to the code above:

<div class="col-lg-8 col-lg-offset-2">3</div>
Copy the code

Raster system – column sorting

Col-md-push -* to the right and col-md-pull-* to the left make it easy to change the order of columns.

The sample

Transpose the left and right elements

<! DOCTYPEhtml>
<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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" > < / script > <! [endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <! -- Column sorting -->
            <div class="col-lg-4 col-lg-push-8">1</div>
            <div class="col-lg-8 col-lg-pull-4">2</div>
        </div>
    </div>
</body>
</html>
Copy the code

In addition, column sorting can also achieve centrality:

<div class="col-lg-8 col-lg-push-2">3</div>
Copy the code

Bootstrap Responsive tool

In order to speed up the development of mobile devices, the media query function and some tools can be used to easily show or hide page content for different devices.