Bootstrap 主題“樂隊”
建立一個主題：“樂隊”
此頁面將向您展示如何從頭開始構建一個 Bootstrap 主題。
我們將從一個簡單的 HTML 頁面開始，然後不斷新增更多元件，直到我們擁有一個功能齊全、個性化且響應式的網站。
結果將如下所示，您可以隨意修改、儲存、分享、使用或做任何您想做的事情
HTML 啟動頁
我們將從以下 HTML 頁面開始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主題樂隊</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>樂隊</h3>
<p>我們熱愛音樂！</p>
<p>我們建立了一個虛構的樂隊網站。Lorem ipsum..</p>
</div>
</body>
</html>
新增 Bootstrap CDN 並新增容器
新增 Bootstrap CDN 和 jQuery 連結，並將 HTML 元素放入容器 (.container) 中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主題樂隊</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">
<h3>樂隊</h3>
<p>我們熱愛音樂！</p>
<p>我們建立了一個虛構的樂隊網站。Lorem ipsum..</p>
</div>
</body>
</html>
結果
樂隊
我們熱愛音樂！
我們建立了一個虛構的樂隊網站。Lorem ipsum..
居中文字
新增 .text-center 類將容器內的文字居中，並使用 <em> 元素使“我們熱愛音樂”文字變為斜體
示例
<div class="container text-center">
<h3>樂隊</h3>
<p><em>我們熱愛音樂！</em></p>
<p>我們建立了一個虛構的樂隊網站。Lorem ipsum..</p>
</div>
結果
樂隊
我們熱愛音樂！
我們建立了一個虛構的樂隊網站。Lorem ipsum..
新增內邊距
使用 CSS 使容器具有良好的內邊距
新增網格
建立三個等寬的列 (.col-sm-4)，新增文字和圖片，並將它們放入容器中
示例
<div class="container text-center">
<h3>樂隊</h3>
<p><em>我們熱愛音樂！</em></p>
<p>我們建立了一個虛構的樂隊網站。Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>名稱</strong></p><br>
<img src="bandmember.jpg" alt="隨機名稱">
</div>
<div class="col-sm-4">
<p><strong>名稱</strong></p><br>
<img src="bandmember.jpg" alt="隨機名稱">
</div>
<div class="col-sm-4">
<p><strong>名稱</strong></p><br>
<img src="bandmember.jpg" alt="隨機名稱">
</div>
</div>
</div>
結果
樂隊
我們熱愛音樂！
我們建立了一個虛構的樂隊網站。Lorem ipsum..
名稱
名稱
名稱
圓形影像
使用 .img-circle 類將影像塑造成圓形。
我們還添加了一些 CSS 來使影像看起來更好
示例
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
結果
名稱
名稱
名稱
可摺疊內容
使影像可摺疊；當您單擊每個影像時顯示額外內容
示例
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>名稱</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
</a>
<div id="demo" class="collapse">
<p>吉他手兼主唱</p>
<p>喜歡在沙灘上散步</p>
<p>自 1988 年加入</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>名稱</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
</a>
<div id="demo2" class="collapse">
<p>鼓手</p>
<p>熱愛打鼓</p>
<p>自 1988 年加入</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>名稱</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="隨機名稱">
</a>
<div id="demo3" class="collapse">
<p>貝斯手</p>
<p>熱愛數學</p>
<p>自 2005 年加入</p>
</div>
</div>
</div>
結果 (單擊圖片檢視效果)
名稱
吉他手兼主唱
喜歡在沙灘上散步
自 1988 年加入
名稱
鼓手
熱愛打鼓
自 1988 年加入
名稱
貝斯手
熱愛數學
自 2005 年加入
新增輪播
建立一個輪播並將其新增到容器之前
示例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 滑塊的包裝器 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="紐約">
<div class="carousel-caption">
<h3>紐約</h3>
<p>紐約的氛圍是 lorem ipsum。</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
<div class="carousel-caption">
<h3>芝加哥</h3>
<p>謝謝你，芝加哥——一個我們永遠不會忘記的夜晚。</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="洛杉磯">
<div class="carousel-caption">
<h3>洛杉磯</h3>
<p>儘管交通堵塞，我們度過了最美好的時光。</p>
</div>
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一張</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一張</span>
</a>
</div>
結果
自己動手試一試 »
設定輪播樣式
使用 CSS 設定輪播樣式
示例
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* 使所有照片變為黑白 */
width: 100%; /* 設定寬度為 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* 當螢幕寬度小於 600 畫素時隱藏輪播文字 */
}
}
結果
自己動手試一試 »新增巡演容器
新增一個新的容器，並在其中新增一個列表 (.list-group 和 .list-group-item)。
為容器新增自定義類 (.bg-1)（黑色背景色）併為其子元素新增一些樣式
示例
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>
<div class="bg-1">
<div class="container">
<h3 class="text-center">巡演日期</h3>
<p class="text-center">Lorem ipsum 我們將為您演奏一些音樂。<br> 記得預訂您的門票！</p>
<ul class="list-group">
<li class="list-group-item">九月售罄！</li>
<li class="list-group-item">十月售罄！</li>
<li class="list-group-item">十一月 3</li>
</ul>
</div>
</div>
結果
巡演日期
Lorem ipsum 我們將為您演奏一些音樂。
記得預訂您的門票！
- 九月售罄！
- 十月售罄！
- 十一月 3
新增標籤和徽章
新增標籤 (.label) 和徽章 (.badge) 以突出顯示可用門票/售罄狀態
示例
<ul class="list-group">
<li class="list-group-item">九月 <span class="label label-danger">售罄！</span></li>
<li class="list-group-item">十月 <span class="label label-danger">售罄！</span></li>
<li class="list-group-item">十一月 <span class="badge">3</span></li>
</ul>
結果
巡演日期
Lorem ipsum 我們將為您演奏一些音樂。
記得預訂您的門票！
- 九月 售罄！
- 十月 售罄！
- 十一月 3
新增縮圖影像
在“巡演”容器內，新增三個等寬的列 (.col-sm-4)
在每個列中，新增一個影像。
然後，使用 .img-thumbnail 類將影像塑造成縮圖。
通常，您會將 .img-thumbnail 類直接新增到 <img> 元素。在此示例中，我們已在影像周圍放置了一個縮圖容器，以便我們也可以指定影像文字。
示例
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="巴黎">
<p><strong>巴黎</strong></p>
<p>2015 年 11 月 27 日星期五</p>
<button class="btn">購買門票</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="紐約">
<p><strong>紐約</strong></p>
<p>2015 年 11 月 28 日星期六</p>
<button class="btn">購買門票</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="舊金山">
<p><strong>舊金山</strong></p>
<p>2015 年 11 月 29 日星期日</p>
<button class="btn">購買門票</button>
</div>
</div>
</div>
結果
巴黎
2015 年 11 月 27 日星期五
紐約
2015 年 11 月 28 日星期六
San Francisco
2015 年 11 月 29 日星期日
列表、縮圖和按鈕樣式
使用 CSS 設定列表和縮圖影像的樣式。在我們的示例中，我們已從列表中刪除了圓角邊框，並嘗試透過刪除它們的邊框並將每張影像的寬度設定為 100% 來使縮圖影像看起來像卡片。
我們還修改了 Bootstrap .btn 類的預設樣式，使其成為黑色按鈕
示例
/* 從列表中刪除圓角邊框 */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* 移除邊框併為縮圖新增內邊距 */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* 帶有額外內邊距且無圓角邊框的黑色按鈕 */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* 懸停時，.btn 的顏色將轉換為白色，帶有黑色文字 */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
結果
- 九月 售罄！
- 十月 售罄！
- 十一月 3
巴黎
2015 年 11 月 27 日星期五
紐約
2015 年 11 月 28 日星期六
San Francisco
2015 年 11 月 29 日星期日
新增模態框
首先，將縮圖內的所有按鈕從 <button class="btn">購買門票</button> 更改為 <button class="btn" data-toggle="modal" data-target="#myModal" >購買門票</button>。這些按鈕用於開啟實際的模態框。
要建立模態框，請檢視以下程式碼
示例
<style>
/* 為模態框標題新增深灰色背景色並居中文字 */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- 用於開啟模態框 -->
<button class="btn" data-toggle="modal" data-target="#myModal">購買門票</button>
<!-- 模態框 -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 模態框內容 -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> 門票</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> 門票，每人 23 美元</label>
<input type="number" class="form-control" id="psw" placeholder="多少張？">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> 傳送至</label>
<input type="text" class="form-control" id="usrname" placeholder="輸入電子郵件">
</div>
<button type="submit" class="btn btn-block">支付
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> 取消
</button>
<p>需要<a href="#">幫助？</a></p>
</div>
</div>
</div>
</div>
結果 (單擊“購買門票”按鈕檢視效果)
新增聯絡容器
建立一個新容器，其中包含兩個不等寬的列 (.col-md-4 和 .col-md-8)。
在第一列中新增帶有文字的資訊圖示，在第二列中新增表單控制元件
示例
<div class="container">
<h3 class="text-center">聯絡</h3>
<p class="text-center"><em>我們愛我們的粉絲！</em></p>
<div class="row test">
<div class="col-md-4">
<p>粉絲？請留言。</p>
<p><span class="glyphicon glyphicon-map-marker"></span>美國芝加哥</p>
<p><span class="glyphicon glyphicon-phone"></span>電話: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>電子郵件: mail@mail.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="姓名" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="電子郵件" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="評論" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">傳送</button>
</div>
</div>
</div>
</div>
</div>
結果
聯絡
我們愛我們的粉絲！
粉絲？請留言。
美國芝加哥
電話: +00 1515151515
電子郵件: mail@mail.com
新增可切換選項卡
在聯絡容器內新增選項卡 (.nav nav-tabs)，其中包含樂隊成員的“引語”
示例
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">來自部落格</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">邁克</a></li>
<li><a data-toggle="tab" href="#menu1">錢德勒</a></li>
<li><a data-toggle="tab" href="#menu2">彼得</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>邁克·羅斯，經理</h2>
<p>夥計，我們已經在路上走了一段時間了。期待 lorem ipsum。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>錢德勒·賓，吉他手</h2>
<p>人們總是很高興！希望你們和我一樣喜歡。我還能更開心嗎？</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>彼得·格里芬，貝斯手</h2>
<p>我的意思是，有時我喜歡這場演出，但有時我喜歡其他事情。</p>
</div>
</div>
結果
來自部落格
邁克·羅斯，經理
夥計，我們已經在路上走了一段時間了。期待 lorem ipsum。
新增地圖/位置影像
新增位置影像或地圖（閱讀我們的Google Maps 教程瞭解 Google 地圖）
新增導航欄
在頁面頂部新增一個導航欄，該導航欄在較小的螢幕上會摺疊
示例
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">標誌</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">主頁</a></li>
<li><a href="#band">樂隊</a></li>
<li><a href="#tour">巡演</a></li>
<li><a href="#contact">聯絡方式</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">更多
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">商品</a></li>
<li><a href="#">額外內容</a></li>
<li><a href="#">媒體</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
結果
自己動手試一試 »提示: 使用 navbar-right 類使導航連結右對齊。
如果您想讓導航欄中的某個連結表現得像下拉選單，請使用 .dropdown 類
設定導航欄樣式
使用 CSS 自定義導航欄
示例
/* 新增深色背景色，略帶透明 */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* 為所有導航欄連結新增灰色 */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* 懸停時，連結將變為白色 */
.navbar-nav li a:hover {
color: #fff !important;
}
/* 活動連結 */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* 從可摺疊按鈕中移除邊框顏色 */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* 下拉選單 */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* 下拉菜單鏈接 */
.dropdown-menu li a {
color: #000 !important;
}
/* 懸停時，下拉菜單鏈接將變為紅色 */
.dropdown-menu li a:hover {
background-color: red !important;
}
結果
自己動手試一試 »新增滾動監聽
新增滾動監聽以在滾動時自動更新導航欄連結
示例
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
自己動手試一試 »
新增頁尾
1. 建立一個 <footer> 元素並新增一些文字。
2. 使用 CSS 設定頁尾樣式。
3. 新增一個“向上箭頭”圖示，當用戶點選時，該圖示將帶使用者回到頁面頂部。
4. 使用 jQuery 初始化工具提示外掛
示例
<style>
/* 為頁尾新增深色背景色 */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="回到頂部">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap 主題由 <a href="https://w3schools.tw" data-toggle="tooltip" title="訪問 w3schools">www.w3schools.com</a> 製作</p>
</footer>
<script>
$(document).ready(function(){
// 初始化工具提示
$('[data-toggle="tooltip"]').tooltip();
})
</script>
結果
自己動手試一試 »新增平滑滾動
使用 jQuery 新增平滑滾動（當點選導航欄中的連結時）
示例
<script>
$(document).ready(function(){
// 為導航欄中的所有連結 + 頁尾連結新增平滑滾動
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// 在覆蓋預設行為之前確保 this.hash 有一個值
if (this.hash !== "") {
// 阻止預設的錨點點選行為
event.preventDefault();
// 儲存雜湊值
var hash = this.hash;
// 使用 jQuery 的 animate() 方法新增平滑頁面滾動
// 可選數字 (900) 指定滾動到指定區域所需的時間（毫秒）
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// 滾動完成後將雜湊值 (#) 新增到 URL（預設點選行為）
window.location.hash = hash;
});
} // 結束 if
});
})
</script>
自己動手試一試 »
最後的潤色
透過新增您喜歡的字型來個性化您的主題。我們使用了 Google 字型庫中的“Montserrat”和“Lato”。
在 <head> 部分連結到字型
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
然後您可以在頁面中使用它們
示例
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}
我們還為某些元素添加了一些額外的樣式
示例
/* 覆蓋 h3 和 h4 的預設樣式 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* 移除輸入欄位上的圓角邊框 */
.form-control {
border-radius: 0;
}
/* 停用文字區域的尺寸調整功能 */
textarea {
resize: none;
}
自己動手試一試 »
