Bootstrap4学习： 30 分钟建立一个网站方式强化

2020-05-2716:09:04WEB前端开发Comments2,434 views字数 12758阅读模式

Bootstrap 有不少版本，其中最新的是第四版。在这篇文章里我们就是要来用 Bootstrap 4 来构建一个网站。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

必备知识

在开始学习和使用 Bootstrap 框架之前，有一些知识你得先掌握：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

HTML 基本知识
CSS 基本知识
以及对 JQuery 略懂一二

下载及安装 Bootstrap 4

想要在你的项目中添上 Bootstrap 4 一共有三种办法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

通过 npm（Node 包管理器）

你可以使用这行命令来安装 Bootstrap 4 —— npm install bootstrap。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

通过 CDN（内容分发网络）

你可以在你项目的 head 标签之间添上这个链接：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<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 代码库并在本地使用。

整个项目的结构应该看起来像这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

Bootstrap 4 的新特性

Bootstrap 4 有什么新花样呢？它和 Bootstrap 3 又有何不同？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

比起上一个版本，Bootstrap 4 加入了以下一些很棒的新特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

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

先不要在意这些这些细节，我们来接着谈其他重要的话题吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

Bootstrap 网格系统 (Grid system)

Bootstrap 网格系统有助于创建你的布局以及轻松地构建一个响应式网站。在 Bootstrap 4 里唯一对 class 名称的改动就是去除了 .xs class。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

网格一共被分成了 12 列（columns），所以你的布局将会基于这 12 列来实现。使用这个网格系统的前提在于，你得在主要的 div 里加上一个名为 .row 的 class。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

col-lg-2 // 这个 class 适用于大型设备（如笔记本电脑）
col-md-2 // 这个 class 适用于中型设备（如平板电脑）
col-sm-2// 这个 class 适用于小型设备（如手机）
复制代码

导航栏（Navbar）

Bootstrap 4 中导航栏的封装可以说非常酷炫，它在构建一个响应式导航栏的时候可以帮上大忙。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

要想运用导航栏，咱们得在文件 index.html 中加入 navbar 这个 class：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<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 风格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

在你的 index.html 文件中，把以下这行代码塞入两个 head 标签之中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<link rel="stylesheet" type="text/css" href="css/main.css">
复制代码

咱们给导航栏添一些色彩：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.navbar-collapse{  
 justify-content: flex-end;  
}
复制代码

之后，给导航栏加上 .fixed-top class 并且给予其一个固定位置。若想让导航栏的背景变成淡色，加上 .bg-light；若想要一个深色的背景，则加上 .bg-dark。至于淡蓝色的背景，可以加上 .bg-primary。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

代码应该看起来如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.bg-dark{  
background-color:#343a40!important  
}  
.bg-primary{  
background-color:#007bff!important  
}
复制代码

标题（Header）

<header class="header">  
    
</header>
复制代码

咱们来试试创建一个标题的布局。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

为了让标题能够占据 window 对象的高度，我们得用上一点点 JQuery 代码。首先创建一个 main.js 文件，然后将其链接放在 index.html 文件中 body 的前面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<script type="text/javascript" src='js/main.js'></script>
复制代码

往 main.js 文件中插入这么一小点 JQuery 代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

$(document).ready(function(){  
 $('.header').height($(window).height());

})
复制代码

如果我们往标题页配上一张不错的背景图，看起来会很酷：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}
复制代码

为了让标题页看起来更专业，可以加上一个覆盖层：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

把以下代码添进你的 index.html 文件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<header class="header">  
  <div class="overlay"></div>  
</header>
复制代码

然后在你的 main.css 文件中加入这些代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.overlay{  
 position: absolute;  
 min-height: 100%;  
 min-width: 100%;  
 left: 0;  
 top: 0;  
 background: rgba(244, 244, 244, 0.79);  
}
复制代码

现在咱们需要在标题里加上描述的部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

为了加上描述，首先需要写一个 div 并给它添上叫 .container 的 class。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.container 是一个可以封装你的内容并且使你的布局具有响应性的 Bootstrap class：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<header class="header">  
  <div class="overlay"></div>  
   <div class="container">  
      
   </div>  
    
</header>
复制代码

在那之后，另写一个包含描述版块的 div。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<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 来确保这个描述版块里的内容会出现在整个页面的中央。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

按钮（Buttons）

现在往 button 元素加一个名为 .btn btn-outline-secondary 的 class。Bootstrap 还有不少其他为按钮而生的 class。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

来看看一些例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

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

以下是 main.css 文件中 .description 的 CSS 代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.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;  
}
复制代码

至此，咱们的标题看起来会是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

有没有很炫？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

“关于我”版块（About)

咱们会用一些 Bootstrap 网格来将这个板块一分为二。开始使用网格的前提在于，咱们必须让 .row 这个 class 成为 parent div。（译者注：把这个div放在最外面）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<div class="row></div>
复制代码

第一个部分会在左边，包含一张图片。第二个部分会在右边，包含一段描述。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

每一个 div 会占据 6 列 —— 也就是说整个版块一半的空间。要记住一个网格被分成了 12 列。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

在左边第一个 div 里面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.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>
复制代码

在给右边的版块加入 HTML 元素之后，整个代码的结构看起来会是这样子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.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>
复制代码

这里是我对其外观的改动：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.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）

现在咱们再接再厉，来创建一个包含一个图库的作品集版块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

作品集版块的 HTML 代码的结构看起来是这样子的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.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 使其具备响应性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

咱们图库中每一张图片会占据 4 列（记住，col-md-4适用于中型设备，col-lg-4 适用于大型设备），也就是说相当于大型设备（如台式机和大型平板电脑）宽度的 33.3333%。同样的，小型设备上（如手机）的 12 列将占据整个容器宽度的 100%。给咱们的图库加上些风格样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

/*作品集*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
}
复制代码

博客版块（Blog）

卡片（Card）

Bootstrap 4 中的卡片使得设计博客简单了好多。这些卡片适用于文章和帖子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

为了创建卡片，咱们使用名为 .card 的 class，并且写在一个 div 元素里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

这个卡片 class 包含不少特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

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

所以呢，咱们网站的 HTML 看起来会是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.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：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.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;  
}
复制代码

添加了博客版块之后，网站的设计看起来会是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

有没有非常炫？ ?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

团队版块（Team）

在这个版块里我们会使用网格系统来平均地分配图片与图片之间的空间。每一张图片占据容器的 3 列（.col-md-3）—— 等于是整个空间的 25%。咱们的 HTML 结构：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<!-- 团队版块 -->
<div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>
复制代码

现在加上一些风格样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
}

复制代码

在图片的悬浮效果上用动画加上一个覆盖层会很不错 ?。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

为了达到这个效果，在 main.css 中加入以下风格样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.team .item:hover .des{  
 height: 100%;  
 background:#f973007d;  
 position: absolute;  
 width: 89%;  
 padding: 5em;  
 top: 0;  
 border-bottom-left-radius: 0;  
}
复制代码

超级酷炫有木有！ ?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

联络表单（Contact Form)

在咱们完事之前，联络表单是需要添加的最后一个版块 ?。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

这个版块会包含一个访问者可以发送电子邮件或提出反馈的表单。咱们将使用一些 Bootstrap classes 来使设计看起来又漂亮又具有响应性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

就像 Bootstrap 3 那样，对于对输入栏，Bootstrap 4 也运用了名为 .form-control 的 class，但是还有些新的特性可以使用 —— 比如说从使用 .input-group-addon（已经停用）转换到 **.input-group-prepend**（像使用 label 那样来使用 icon）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

想要了解更多这方面的资料的话可以查看 Bootstrap 4 文档。在咱们的联络表单中我们将封装每一个拥有 class .form-group 的 div 之间的输入栏。现在 index.html 文件的代码看起来会是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<!-- 联络表单 -->
<div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>
复制代码

联络版块的风格样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

main.css文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

.contact-form{
 margin: 6em 0;
 position: relative;  
}
.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}
复制代码

字体 (Font)

我觉着系统自带的字体比较丑陋，所以使用了 Google Font 接口，然后选择 Google 字体里的 Raleway。这是个不错的字体而且很适合咱们的样板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

在你的 main.css 文件中添上这个链接：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

@import url('https://fonts.googleapis.com/css?family=Raleway');
复制代码

然后设置 HTML 和标题标签的全局风格样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}
复制代码

划动效果（Scroll Effect）

最后缺席的就是划动效果了。现在我们将要用到一些 JQuery。如果你对 JQuery 不是很熟悉，不要担心，直接复制粘贴以下的代码到你的 main.js 文件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

$(".navbar a").click(function(){  
  $("body,html").animate({  
   scrollTop:$("#" + $(this).data('value')).offset().top  
  },1000)  
    
 })
复制代码

然后给每一个导航栏链接加上 data-value 特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<li class="nav-item">  
         <a class="nav-link" data-value="about" href="#">About</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="blog" href="#">Blog</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="team" href="#">  
         Team</a>  
       </li>  
       <li class="nav-item">  
         <a class="nav-link " data-value="contact" href="#">Contact</a>  
       </li>
复制代码

再给每一个版块加上 id 属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

记住: 为了使拉动效果正常工作，id 必须要和导航栏链接中的 data-value 属性一模一样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

<div class="about" id="about"></div>
复制代码

总结

Bootstrap 4 是一个构建你网页应用很棒的选择。它提供高质量的 UI 元素而且易于自定义调整、与其他框架组合以及使用。不但如此，它也帮助你在网页中加入响应性，所以能够给你的用户带来非常棒的体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

作者：zheng7426
链接：https://juejin.im/post/5b5eb7b2e51d451989055d9d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/19305.html