下载及安装 Bootstrap 4想要在你的项目中添上 Bootstrap 4 一共有三种办法：

• 通过 npm（Node 包管理器）
  

你可以使用这行命令来安装 Bootstrap 4 —— npm install bootstrap。

• 通过 CDN（内容分发网络）
  

你可以在你项目的 head 标签之间添上这个链接：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">复制代码

• 通过下载这个 Bootstrap 4 代码库并在本地使用。
  

整个项目的结构应该看起来像这样：

Bootstrap 4 的新特性Bootstrap 4 有什么新花样呢？它和 Bootstrap 3 又有何不同？
比起上一个版本，Bootstrap 4 加入了以下一些很棒的新特性：

• Bootstrap 4 是由 Flexbox Grid 写成的，而 Bootstrap 3 是由 float 方法写就。如果你没听过 Flexbox 的话可以查看这个教程。
• Bootstrap 4 使用了 rem CSS 单位，而 Bootstrap 3 使用的是 px。了解这两种单位的区别
• Panels, thumbnails 和 wells 在这个新版本中全被舍弃了。想要更详细地了解在 Bootstrap 4 中被移除的特性和新增的改动吗？点这里.
  

先不要在意这些这些细节，我们来接着谈其他重要的话题吧。
Bootstrap 网格系统 (Grid system)Bootstrap 网格系统有助于创建你的布局以及轻松地构建一个响应式网站。在 Bootstrap 4 里唯一对 class 名称的改动就是去除了 .xs class。
网格一共被分成了 12 列（columns），所以你的布局将会基于这 12 列来实现。使用这个网格系统的前提在于，你得在主要的 div 里加上一个名为 .row 的 class。
col-lg-2 // 这个 class 适用于大型设备（如笔记本电脑）col-md-2 // 这个 class 适用于中型设备（如平板电脑）col-sm-2// 这个 class 适用于小型设备（如手机）复制代码导航栏（Navbar）

Bootstrap 4 中导航栏的封装可以说非常酷炫，它在构建一个响应式导航栏的时候可以帮上大忙。
要想运用导航栏，咱们得在文件 index.html 中加入 navbar 这个 class：
<nav class="navbar navbar-expand-lg fixed-top ">   <a class="navbar-brand" href="#">Home</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse " id="navbarSupportedContent">     <ul class="navbar-nav mr-4">              <li class="nav-item">         <a class="nav-link" href="#">About</a>       </li>       <li class="nav-item">         <a class="nav-link " href="#">Portfolio</a>       </li>       <li class="nav-item">         <a class="nav-link " href="#">Team</a>       </li>       <li class="nav-item">         <a class="nav-link " href="#">Post</a>       </li>       <li class="nav-item">         <a class="nav-link " href="#">Contact</a>       </li>     </ul>        </div></nav>复制代码创建并加入一个 main.css 文件来定义你自己的 CSS 风格。
在你的 index.html 文件中，把以下这行代码塞入两个 head 标签之中：
<link rel="stylesheet" type="text/css" href="css/main.css">复制代码咱们给导航栏添一些色彩：
.navbar{ background:#F97300;}.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}.nav-link{ margin-right: 1em !important;}.nav-link:hover{ background: #f4f4f4; color: #f97300;}.navbar-collapse{ justify-content: flex-end;}.navbar-toggler{  background:#fff !important;}复制代码新的 Bootstrap 网格是基于 Flexbox 构建的，所以你得使用 Flexbox 的性质来进行网站元素的排列。打个比方，若想要把导航栏菜单放在右边，咱得加入一个 justify-content 性质，并且赋值 flex-end。
.navbar-collapse{   justify-content: flex-end;  }复制代码之后，给导航栏加上 .fixed-top class 并且给予其一个固定位置。若想让导航栏的背景变成淡色，加上 .bg-light；若想要一个深色的背景，则加上 .bg-dark。至于淡蓝色的背景，可以加上 .bg-primary。
代码应该看起来如下图：
.bg-dark{  background-color:#343a40!important  }  .bg-primary{  background-color:#007bff!important  }复制代码标题（Header）<header class="header">      </header>复制代码咱们来试试创建一个标题的布局。
为了让标题能够占据 window 对象的高度，我们得用上一点点 JQuery 代码。首先创建一个 main.js 文件，然后将其链接放在 index.html 文件中 body 的前面：
<script type="text/javascript" src='js/main.js'></script>复制代码往 main.js 文件中插入这么一小点 JQuery 代码：
$(document).ready(function(){   $('.header').height($(window).height());})复制代码如果我们往标题页配上一张不错的背景图，看起来会很酷：
/*header style*/.header{ background-image: url('../images/headerback.jpg'); background-attachment: fixed; background-size: cover; background-position: center;}复制代码

为了让标题页看起来更专业，可以加上一个覆盖层：
把以下代码添进你的 index.html 文件：
<header class="header">    <div class="overlay"></div>  </header>复制代码然后在你的 main.css 文件中加入这些代码：
.overlay{   position: absolute;   min-height: 100%;   min-width: 100%;   left: 0;   top: 0;   background: rgba(244, 244, 244, 0.79);  }复制代码现在咱们需要在标题里加上描述的部分。
为了加上描述，首先需要写一个 div 并给它添上叫 .container 的 class。
.container 是一个可以封装你的内容并且使你的布局具有响应性的 Bootstrap class：
<header class="header">    <div class="overlay"></div>     <div class="container">           </div>      </header>复制代码在那之后，另写一个包含描述版块的 div。
<div class="description text-center">     <h3>      Hello ,Welcome To My officail Website      <p>      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      <button class="btn btn-outline-secondary">See more</button>     </h3>    </div>复制代码咱们在这个 div 的 class 里写 .description，并且加上 .text-center 来确保这个描述版块里的内容会出现在整个页面的中央。
按钮（Buttons）现在往 button 元素加一个名为 .btn btn-outline-secondary 的 class。Bootstrap 还有不少其他为按钮而生的 class。
来看看一些例子：

• CodePen Embed — bootstrap 4 中的按钮：各种按钮样式
  

以下是 main.css 文件中 .description 的 CSS 代码：
.description{      position: absolute;      top: 30%;      margin: auto;      padding: 2em;}  .description h1{   color:#F97300 ;  }  .description p{   color:#666;   font-size: 20px;   width: 50%;   line-height: 1.5;  }  .description button{   border:1px  solid #F97300;   background:#F97300;   color:#fff;  }复制代码至此，咱们的标题看起来会是这样的：


有没有很炫？ :)
“关于我”版块（About)

咱们会用一些 Bootstrap 网格来将这个板块一分为二。开始使用网格的前提在于，咱们必须让 .row 这个 class 成为 parent div。（译者注：把这个div放在最外面）
<div class="row></div>复制代码第一个部分会在左边，包含一张图片。第二个部分会在右边，包含一段描述。
每一个 div 会占据 6 列 —— 也就是说整个版块一半的空间。要记住一个网格被分成了 12 列。
在左边第一个 div 里面：
<div class="row">  // 左边<div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/team-3.jpg" class="img-fluid">    <span class="text-justify">S.Web Developer</span> </div></div>复制代码在给右边的版块加入 HTML 元素之后，整个代码的结构看起来会是这样子：
<div class="row">   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/team-3.jpg" class="img-fluid">    <span class="text-justify">S.Web Developer</span>   </div>   <div class="col-lg-8 col-md-8 col-sm-12 desc">         <h3>D.John</h3>    <p>       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </p>   </div></div>复制代码这里是我对其外观的改动：
.about{ margin: 4em 0; padding: 1em; position: relative;}.about h1{ color:#F97300; margin: 2em;}.about img{ height: 100%;    width: 100%;    border-radius: 50%}.about span{ display: block; color: #888; position: absolute; left: 115px;}.about .desc{ padding: 2em; border-left:4px solid #10828C;}.about .desc h3{ color: #10828C;}.about .desc p{ line-height:2; color:#888;}复制代码作品集版块（Portfolio）现在咱们再接再厉，来创建一个包含一个图库的作品集版块。

作品集版块的 HTML 代码的结构看起来是这样子的：
<!-- portfolio --><div class="portfolio">     <h1 class="text-center">Portfolio</h1> <div class="container">  <div class="row">   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port13.png" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port1.png" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port6.png" class="img-fluid">   </div><div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port3.png" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port11.png" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/electric.png" class="img-fluid">   </div><div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/Classic.jpg" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port1.png" class="img-fluid">   </div>   <div class="col-lg-4 col-md-4 col-sm-12">    <img src="images/portfolio/port8.png" class="img-fluid">   </div>  </div> </div></div>复制代码给每一张图片加入 .img-fluid 使其具备响应性。
咱们图库中每一张图片会占据 4 列（记住，col-md-4适用于中型设备，col-lg-4 适用于大型设备），也就是说相当于大型设备（如台式机和大型平板电脑）宽度的  33.3333%。同样的，小型设备上（如手机）的 12 列将占据整个容器宽度的 100%。给咱们的图库加上些风格样式：
/*作品集*/.portfolio{ margin: 4em 0;    position: relative; }.portfolio h1{ color:#F97300; margin: 2em; }.portfolio img{  height: 15rem;  width: 100%;  margin: 1em;}复制代码博客版块（Blog）

卡片（Card）Bootstrap 4 中的卡片使得设计博客简单了好多。这些卡片适用于文章和帖子。
为了创建卡片，咱们使用名为 .card 的 class，并且写在一个 div 元素里。
这个卡片 class 包含不少特性：

• .card-header：定义卡片的标题
• .card-body：用于卡片的主体
• .card-title：卡片的题目
• card-footer：定义卡片的脚注
• .card-image：用于卡片的图像
  

所以呢，咱们网站的 HTML 看起来会是这样的：
<!-- Posts section --><div class="blog"> <div class="container"> <h1 class="text-center">Blog</h1>  <div class="row">   <div class="col-md-4 col-lg-4 col-sm-12">    <div class="card">     <div class="card-img">      <img src="images/posts/polit.jpg" class="img-fluid">     </div>          <div class="card-body">     <h4 class="card-title">Post Title</h4>      <p class="card-text">              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      </p>     </div>     <div class="card-footer">      <a href="" class="card-link">Read more</a>     </div>    </div>   </div>   <div class="col-md-4 col-lg-4 col-sm-12">    <div class="card">     <div class="card-img">      <img src="images/posts/images.jpg" class="img-fluid">     </div>          <div class="card-body">        <h4 class="card-title">Post Title</h4>      <p class="card-text">              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      </p>     </div>     <div class="card-footer">      <a href="" class="card-link">Read more</a>     </div>    </div>   </div>   <div class="col-md-4 col-lg-4 col-sm-12">    <div class="card">     <div class="card-img">      <img src="images/posts/imag2.jpg" class="img-fluid">     </div>          <div class="card-body">     <h4 class="card-title">Post Title</h4>      <p class="card-text">              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      </p>     </div>     <div class="card-footer">      <a href="" class="card-link">Read more</a>     </div>    </div>   </div>  </div> </div></div>复制代码我们需要往卡片里加一些 CSS：
.blog{   margin: 4em 0;   position: relative;   }  .blog h1{   color:#F97300;   margin: 2em;   }  .blog .card{   box-shadow: 0 0 20px #ccc;  }  .blog .card img{   width: 100%;   height: 12em;  }  .blog .card-title{   color:#F97300;      }  .blog .card-body{   padding: 1em;  }复制代码添加了博客版块之后，网站的设计看起来会是这样的：


有没有非常炫？

奈斯，很赞