Bootstrap 主題 “Simply Me”
建立主題：“Simply Me”
此頁面將向您展示如何從頭開始構建一個 Bootstrap 主題。
我們將從一個簡單的 HTML 頁面開始，然後不斷新增更多元件，直到我們擁有一個功能齊全、個性化且響應式的網站。
結果將如下所示，您可以隨意修改、儲存、分享、使用或做任何您想做的事情
HTML 啟動頁
我們將從以下 HTML 頁面開始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>我是誰？</h3>
<img src="bird.jpg" alt="鳥">
<h3>我是一名冒險家</h3>
</body>
</html>
新增 Bootstrap CDN 並將元素放入容器
新增 Bootstrap CDN 和 jQuery 連結，並將 HTML 元素放入容器中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>我是誰？</h3>
<img src="bird.jpg" alt="鳥">
<h3>我是一名冒險家</h3>
</div>
</body>
</html>
結果
我是誰？
我是一名冒險家
新增背景色和居中文字
1. 向容器新增自定義類（.bg-1）以新增背景色。
2. 新增 .text-center 類將容器內的文字居中
示例
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* 綠色 */
color: #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>我是誰？</h3>
<img src="bird.jpg" alt="鳥">
<h3>我是一名冒險家</h3>
</div>
</body>
結果
我是誰？
我是一名冒險家
圓形圖片
使用 .img-circle 類將圖片塑造成圓形
更多內容
新增更多內容並將其放入新容器中
示例
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* 綠色 */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* 深藍色 */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* 白色 */
color: #555555;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>我是誰？</h3>
<img src="bird.jpg" class="img-circle" alt="鳥">
<h3>我是一名冒險家</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>我是什麼？</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>在哪裡找到我？</h3>
<p>Lorem ipsum..</p>
</div>
</body>
結果
我是誰？
我是一名冒險家
我是什麼？
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
在哪裡找到我？
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
新增內邊距
讓我們透過新增一些填充來使容器看起來不錯
示例
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
結果
我是誰？
我是一名冒險家
我是什麼？
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
在哪裡找到我？
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
新增一個按鈕
在中間的容器中新增一個按鈕
示例
<div class="container-fluid bg-2 text-center">
<h3>我是什麼？</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">搜尋</a>
</div>
結果
我是什麼？
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
搜尋新增一個圖示
在“搜尋”按鈕上新增一個搜尋圖示
示例
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> 搜尋
</a>
結果
自己動手試一試 »修改第三個容器（新增網格）
在第三個容器（.col-sm-4）中新增三個等寬的列
示例
<div class="container-fluid bg-3 text-center">
<h3>在哪裡找到我？</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds1.jpg" alt="圖片">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds2.jpg" alt="圖片">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds3.jpg" alt="圖片">
</div>
</div>
</div>
結果
在哪裡找到我？
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
使圖片響應式
為所有圖片新增 .img-responsive 類。
新增 display:inline 到第一張圖片，以強制其居中（.img-responsive 類會給圖片新增 display:block，這會使圖片跳到螢幕左側）。
如果您希望圖片在開始堆疊時佔據螢幕的全部寬度，請將 width:100% 新增到圖片中。
開啟示例時，請記住調整螢幕大小以檢視響應式效果
示例
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="鳥">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="圖片">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="圖片">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="圖片">
自己動手試一試 »
新增導航欄
在頁面頂部新增一個標準的導航欄，並使其在小螢幕上可摺疊
示例
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
結果
設定導航欄樣式
使用 CSS 自定義導航欄
示例
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
結果
新增頁尾
新增頁尾並使用 CSS 進行樣式設定
示例
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://w3schools.tw">www.w3schools.com</a></p>
</footer>
結果
最後的潤色
透過新增您喜歡的字型來個性化您的主題。我們使用了 Google 字型庫中的“Montserrat”。
在 <head> 部分連結到字型
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
然後您可以在頁面中使用它
示例
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
我們還建立了一個“輔助”邊距類，用於在我們需要額外空間的地方新增空間；通常在每個 <h3> 和 <img> 元素之後。
