繁體中文

Bootstrap 教學

Bootstrap 布局

Bootstrap 內容

Bootstrap 组件

Bootstrap 表單

Bootstrap 輔助工具

Bootstrap 實用工具

Bootstrap 演示

Bootstrap 教學：進入响应式網頁設計的入門

為什麼要學習 Bootstrap？

嘿，未來的網頁設計超級巨星！? 我們來聊聊為什麼 Bootstrap 应該成為你在網頁開發領域的新好朋友。

Bootstrap - Home

想像一下你正在蓋一個房子。你可以從頭開始，親自切割每一塊木材和釘每一顆釘子。或者，你可以使用預製的部件，這些部件能夠完美地組合在一起。這就是 Bootstrap 在網頁設計中的作用——一個使創建美觀、响应式的網站變得輕鬆的套件！

以下是 Bootstrap 成為遊戲規則改變者的原因：

  1. 响应式設計：你的網站在任何設備上（從手機到桌面電腦）都會看起來很棒。
  2. 節省時間：預先構建的組件意味著你可以迅速創建一個專業看起來的網站。
  3. 一致性：Bootstrap 確保你的設計元素在整個網站中保持一致。
  4. 社群支持：廣大的社群意味著幫助總是隨時可得。

你的第一次 Bootstrap 冒險

好，讓我們深入並創建你的第一個由 Bootstrap 驅動的網頁！別擔心如果你從未編過程——我們會一步步來。

步驟 1：設置

首先，讓我們創建一個基本的 HTML 檔案。打開你喜歡的文本編輯器並輸入：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個 Bootstrap 頁面</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，Bootstrap 世界！</h1>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這裡發生了什麼？我們正在創建一個基本的 HTML 構架並連接到 Bootstrap 的 CSS 和 JavaScript 檔案。這樣我們就可以使用 Bootstrap 的所有神奇功能！

步驟 2：添加導航欄

讓我們為頁面增添一個導航欄。在 <body> 標籤後面添加以下代碼：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">我的網站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">關於</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">聯繫</a>
</li>
</ul>
</div>
</div>
</nav>

這段代碼創建了一個响应式的導航欄。在小屏幕上，它會縮小為漢堡菜單——很酷吧？

步驟 3：創建一個英雄區域

現在，讓我們添加一個引人注目的英雄區域。在你的導航欄後面添加以下代碼：

<div class="container mt-5">
<div class="jumbotron">
<h1 class="display-4">歡迎來到我的 Bootstrap 網站！</h1>
<p class="lead">這是一個簡單的英雄單元，一個簡單的橫幅樣式組件，用於為特色內容或信息吸引額外的關注。</p>
<hr class="my-4">
<p>它使用類型設置和間距的實用類別在更大的容器內部分隔內容。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>
</div>

這會在頁面的頂部創建一個突出的區域，完美地吸引注意力！

步驟 4：添加網格佈局

Bootstrap 的網格系統是其最强大的功能之一。讓我們用它來創建一個三列佈局：

<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<h2>列 1</h2>
<p>這是第一列。它會在中型屏幕和更大的屏幕上佔據行的一半。</p>
</div>
<div class="col-md-4">
<h2>列 2</h2>
<p>這是第二列。它也會在中型屏幕和更大的屏幕上佔據行的一半。</p>
</div>
<div class="col-md-4">
<h2>列 3</h2>
<p>這是第三列。像其他列一樣，它會在中型屏幕和更大的屏幕上佔據行的一半。</p>
</div>
</div>
</div>

這段代碼創建了一個响应式的佈局，會根據屏幕大小進行調整。在小屏幕上，這些列會垂直堆疊。

這是給誰的？

這個教學對以下人員來說非常適合：

  • 網頁開發的絕對初學者
  • 想要快速原型設計的設計師
  • 想要加速工作流程的開發者

你需要知道什麼

雖然 Bootstrap 對初學者友好，但對以下內容有基本的了解會有幫助：

  • HTML
  • CSS（基本概念）
  • 網頁是如何工作的

別擔心如果你不是這些方面的專家——我們會在進行的過程中解釋一切！

Bootstrap 方法

這裡是一些常见的 Bootstrap 方法和類別：

方法/類別 描述
.container 創建一個响应式的固定寬度容器
.row 創建一個水平列組
.col-* 創建一個列（與不同的尺寸一起使用，例如 .col-md-4）
.btn 創建一個按鈕
.navbar 創建一個導航欄
.jumbotron 創建一個大橫幅，用於吸引額外的關注
.card 創建一個灵活的内容容器
.form-control 設置表單元素的樣式

記住，Bootstrap 是關於動手學習的。你越多地玩轉它，你就會越熟悉。所以，繼續嘗試不同的類別和組件。在你意識到之前，你將會像專家一樣創建出令人驚艷的响应式網站！

快樂編程，並歡迎來到 Bootstrap 的奇妙世界！?

Credits: Image by storyset

 
下一教程:
Bootstrap - 概覽