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

zheng7426發表於2018-07-30

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

原文作者：SaidHayani@

譯文出自：掘金翻譯計劃

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

譯者：Zheng7426

校對者：Park-ma, Moonliujk

來自 templatetoaster

新人指南

“Bootstrap 是一個為網站及網頁應用設計而生的開源前端程式碼庫。它基於 HTML 和 CSS 的設計模板涵蓋了文字設計、表單、按鈕、導航、其他介面元件以及一些 JavaScript 擴充套件包。與很多其他網頁框架不一樣的是，Bootstrap 對自身的定位是僅僅適用於前端開發而已。” — 維基百科

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

Bootstrap 有不少版本，其中最新的是第四版。在這篇文章裡我們就是要來用 Bootstrap 4 來構建一個網站。

必備知識

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

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

下載及安裝 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;  
}
複製程式碼

新增了部落格版塊之後，網站的設計看起來會是這樣的：

有沒有非常炫？ ?

團隊版塊（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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。

【網站搭建】30分鐘輕鬆搭建網站應用
2018-10-24
網站
30分鐘搭建你的靜態網站
2021-04-02
網站
30 分鐘學 Erlang (一)
2018-03-20
連續假期不無聊，只要 30 分鐘就能學會如何架設一個網站！
2019-02-28
網站
【譯】30 分鐘入門 Typescript
2019-01-25
TypeScript
【譯】5分鐘學習 JS 一些小技巧
2018-07-09
JS
【譯】十五分鐘，學習 Webpack
2019-01-24
Web
[譯] 30 分鐘 Python 爬蟲教程
2018-05-15
Python爬蟲
一定要學習的6個網站
2019-05-08
網站
一個不錯的bootstrap學習視訊
2018-08-25
boot
分類目錄網址收藏網站 Thinkphp + Bootstrap 練習做的專案
2019-05-11
網站PHPboot
如何建立一個 WordPress 網站
2024-08-05
網站
如何建立一個快速的Joomla網站
2019-01-22
OOM網站
前置機器學習（三）：30分鐘掌握常用NumPy用法
2020-12-06
機器學習
前置機器學習（五）：30分鐘掌握常用Matplotlib用法
2020-12-25
機器學習
如何設定一個嚴格30分鐘過期的Session
2019-02-16
Session
JS學習：建立一個演示用的渲染庫4(渲染表面，畫素格式等)
2021-09-09
JS
Git 學習以及建立第一個應用
2019-11-22
Git
Docker虛擬化管理：30分鐘教你學會用Docker
2020-05-01
Docker
30分鐘用Restful ABAP Programming模型開發一個支援增刪改查的Fiori應用
2019-10-09
REST模型
只需3 分鐘，就能建立一個SpreadJS 的 Vue 專案
2018-09-25
JSVue
如何免費建立一個網站？
2018-04-02
網站
.net+bootstrap寫的一個還不錯的音樂網站
2024-02-26
boot網站
一分鐘學習Markdown語法
2024-03-24
【URLOS應用開發基礎】10分鐘製作一個nginx靜態網站環境應用
2019-04-27
Nginx網站
GPTs 初體驗 - 1 分鐘就能建立一個自己的 ChatGPT？
2023-12-04
ChatGPT
直播帶練 | 30 分鐘用阿里雲容器服務和容器網路檔案系統搭建 WordPress 網站
2022-03-01
阿里網站
30分鐘SQL指南
2019-03-22
SQL
30分鐘講清楚深度神經網路
2021-09-09
神經網路
設計師值得學習的分類網站
2020-12-10
網站
1 分鐘學會 30 種程式語言
2021-11-15
自媒體運營4個超實用的網站！速速收藏起來
2022-05-19
網站
如何5分鐘跑起來一個完整專案？
2023-02-24
建立網站或網店的費用
2018-03-31
網站
只需3分鐘，就能輕鬆建立一個SpreadJS的React專案
2018-09-21
JSReact
如何在十分鐘內建立一個Chrome 外掛
2023-09-25
Chrome
十分鐘通過 npm 建立一個命令列工具
2019-02-05
NPM命令列
[譯] 如何用 Flutter 來建立一個帶有底部導航欄的應用程式
2019-03-04
Flutter