Bootstrap4: installation

I. Overview

Bootstrap is the world's most popular front-end component library for developing responsive layout, mobile devices WEB priority projects.

Bootstrap4 is currently the latest version of Bootstrap, it is a set of open source tools for HTML, CSS and JS development. Sass use variables and we offer a lot of mixin, responsive grid system, scalable prefabricated components, powerful jQuery based plugin system, to quickly develop a prototype for your ideas or to build the entire app.

The first instance:

< Div class = "text-the Jumbotron Center" > 
  < h1 > My first page Bootstrap </ h1 > 
  < the p- > reset your browser to view the effect size! </ The p- >  
</ div > 
 
< div class = "Container " > 
  < div class =" row " > 
    < div class =" SM--COL. 4 " > 
      < H3 > the first column </ H3 > 
      < P > novice tutorial </p>
      <the p- > learn not only technical, but also dream! ! ! </ P > 
    </ div > 
    < div class = "SM--COL. 4" > 
      < H3 > the second column </ H3 > 
      < P > novice tutorial .. </ P > 
      < P > learn not only the technology, it is a dream! ! ! </ P > 
    </ div > 
    < div class = "SM--COL. 4" > 
      < H3 > third column </ H3 >  
      <</ The p- > 
      < the p- > learn not only technical, but also dream! ! ! </ P > 
    </ div > 
  </ div > 
</ div >

Two, Bootstrap4 installation

We can install Bootstrap4 in two ways:

Use Bootstrap 4 CDN.
Domestic recommend using the library on Staticfile 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. Be sure to bootstrap.min.js introduced before -> 
< Script src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" > </ Script > 
 
<-! Bootstrap. bundle.min.js for pop, tips, drop-down menu containing popper.min.js -> 
< Script the 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>

Note: popper.min.js for setting pop, tips, drop-down menu, the current bootstrap.bundle.min.js already contains popper.min.js .

From the official website getbootstrap.com download Bootstrap 4.

Third, create the first page Bootstrap 4

1, add HTML5 doctype

Bootstrap requires HTML5 file type, we need to add HTML5 doctype declaration.

HTML5 doctype declaration in the document head, and set the corresponding code:

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

2、移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。

3、容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

4、Bootstrap 4 页面

< Div class = "Container" > 
  < h1 > My first page Bootstrap </ h1 > 
  < the p- > This is some text. </ P >  
</ div >