[譯] 用 30 分鐘創建一個網站的方式來學習 Bootstrap 4

時間 2019-11-16

原文原文鏈接

原文地址：Learn Bootstrap 4 in 30 minutes by building a landing page website

原文做者：SaidHayani@

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：Zheng7426

校對者：Park-ma, Moonliujk

來自 templatetoasterjavascript

新人指南

「Bootstrap 是一個爲網站及網頁應用設計而生的開源前端代碼庫。它基於 HTML 和 CSS 的設計模板涵蓋了文字設計、表單、按鈕、導航、其餘界面組件以及一些 JavaScript 擴展包。與不少其餘網頁框架不同的是，Bootstrap 對自身的定位是僅僅適用於前端開發而已。」 — 維基百科css

嘿嘿，在咱們開始以前，你能夠看看我開設的學習 Bootstrap 4 的完整課程，你不只能夠學到 bootstrap 的新特性，還能學到如何藉助這些特性來實現更棒的用戶體驗。。html

Bootstrap 有很多版本，其中最新的是第四版。在這篇文章裏咱們就是要來用 Bootstrap 4 來構建一個網站。前端

必備知識

在開始學習和使用 Bootstrap 框架以前，有一些知識你得先掌握：java

HTML 基本知識
CSS 基本知識
以及對 JQuery 略懂一二

下載及安裝 Bootstrap 4

想要在你的項目中添上 Bootstrap 4 一共有三種辦法：ios

經過 npm（Node 包管理器）

你可使用這行命令來安裝 Bootstrap 4 —— npm install bootstrap。git

經過 CDN（內容分發網絡）

你能夠在你項目的 head 標籤之間添上這個連接：github

<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 代碼庫並在本地使用。

整個項目的結構應該看起來像這樣： web

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;  
}
複製代碼

添加了博客版塊以後，網站的設計看起來會是這樣的：

有沒有很是炫？ 😄

團隊版塊（Team）

在這個版塊裏咱們會使用網格系統來平均地分配圖片與圖片之間的空間。每一張圖片佔據容器的 3 列（.col-md-3）—— 等因而整個空間的 25%。我們的 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>
複製代碼

如今加上一些風格樣式：

.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;
}

複製代碼

在圖片的懸浮效果上用動畫加上一個覆蓋層會很不錯 😄。

爲了達到這個效果，在 main.css 中加入如下風格樣式：

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

超級酷炫有木有！ 😙

聯絡表單（Contact Form)

在我們完事以前，聯絡表單是須要添加的最後一個版塊 😃。

這個版塊會包含一個訪問者能夠發送電子郵件或提出反饋的表單。我們將使用一些 Bootstrap classes 來使設計看起來又漂亮又具備響應性。

就像 Bootstrap 3 那樣，對於對輸入欄，Bootstrap 4 也運用了名爲 .form-control 的 class，可是還有些新的特性可使用 —— 好比說從使用 .input-group-addon（已經停用）轉換到 **.input-group-prepend**（像使用 label 那樣來使用 icon）。

想要了解更多這方面的資料的話能夠查看 Bootstrap 4 文檔。在我們的聯絡表單中咱們將封裝每個擁有 class .form-group 的 div 之間的輸入欄。如今 index.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>
複製代碼

聯絡版塊的風格樣式：

main.css

.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。這是個不錯的字體並且很適合我們的樣板。

在你的 main.css 文件中添上這個連接：

@import url('https://fonts.googleapis.com/css?family=Raleway');
複製代碼

而後設置 HTML 和標題標籤的全局風格樣式：

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}
複製代碼

划動效果（Scroll Effect）

最後缺席的就是划動效果了。如今咱們將要用到一些 JQuery。若是你對 JQuery 不是很熟悉，不要擔憂，直接複製粘貼如下的代碼到你的 main.js 文件：

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

而後給每個導航欄連接加上 data-value 特性：

<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 屬性。

記住: 爲了使拉動效果正常工做，id 必需要和導航欄連接中的 data-value 屬性如出一轍：

<div class="about" id="about"></div>
複製代碼

總結

Bootstrap 4 是一個構建你網頁應用很棒的選擇。它提供高質量的 UI 元素並且易於自定義調整、與其餘框架組合以及使用。不但如此，它也幫助你在網頁中加入響應性，因此可以給你的用戶帶來很是棒的體驗。

關於這個項目的文件均可以在這裏找到。

要想學習 Bootstrap 4，也能夠查看個人 Bootstrap 課程：

Bootstrap 4 crash course: 從基礎到進階 | Said Hayani | Skillshare: 在這個課程裏你將學習 Bootstrap 的第四版，是一個 CSS 框架用以構建靈活的頁面以及……

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到掘金翻譯計劃對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

掘金翻譯計劃是一個翻譯優質互聯網技術文章的社區，文章來源爲掘金上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。