Bootstrap4 Grid System Bootstrap4 Tutorial

Bootstrap4 Installation and use

We can install Bootstrap in the following two ways4:

Using Bootstrap 4 　CDN.
From the official getbootstrap.com Download Bootstrap 4.

Bootstrap 4 CDN

Domestic recommendations use the libraries on Staticfile CDN:

Bootstrap4 CDN

<!--　New Bootstrap4　Core CSS file　-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　
<!--　jQuery file. It must be included before bootstrap.min.js.　-->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　
<!--　bootstrap.bundle.min.js is used for pop-ups, tips, and dropdown menus and includes popper.min.js.　-->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　
<!--　The latest Bootstrap4　Core JavaScript file　-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Note:popper.min.js is used to set pop-ups, tips, and dropdown menus, and it is already included in bootstrap.bundle.min.js. popper.min.js.

In addition, you can also use the following CDN services:

Domestically recommended to use: https://www.staticfile.org/
Internationally recommended to use:https://cdnjs.com/

Download Bootstrap 4

You can go to the official website https://getbootstrap.com/ Download Bootstrap4 repository.

Note:In addition, you can install it through package management tools such as npm, gem, composer, etc.:
npm install [email protected]
gem 'bootstrap', '~>　4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

create the first Bootstrap 4 Page

1and add HTML5 doctype

Bootstrap requires the use of HTML5 file type, so you need to add HTML5 doctype declaration.

HTML5 doctype is declared in the document header and sets the corresponding encoding:

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">　
　　</head>
</html>

Mobile-first

To ensure that Bootstrap-developed websites are friendly to mobile devices and to ensure proper rendering and touch scaling, the viewport meta tag should be added to the head of the web page, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width indicates that the width is the width of the device screen.

initial-scale=1 represents the initial scaling factor.

shrink-to-fit=no automatically adjusts to the width of the mobile screen.

Container classes

Bootstrap 4 A container element is needed to wrap the content of the website.

We can use the following two container classes:

.container class is used for fixed width and responsive layout containers.
.container-fluid class is used for 100% width, a container that occupies the entire viewport.

two Bootstrap 4 Page

Bootstrap4 .container 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>My First Bootstrap Page</h1>
　　<p>This is some text.</p>　
</div>
</body>
</html>

Test It Out ‹/›

The following examples show containers that occupy the entire viewport.

Bootstrap4 .container-fluid 示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
　　<h1>My First Bootstrap Page</h1>
　　<p>Used .container-fluid,100% Width, Container Occupying the Entire Viewport.</p>　
</div>
</body>
</html>