Bootstrap 主題 “Company”
建立一個主題：“Company”
此頁面將向您展示如何從頭開始構建一個 Bootstrap 主題。
我們將從一個簡單的 HTML 頁面開始，然後不斷新增更多元件，直到我們擁有一個功能齊全、個性化且響應式的網站。
結果將如下所示，您可以隨意修改、儲存、分享、使用或做任何您想做的事情
HTML 啟動頁
我們將從以下 HTML 頁面開始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>公司</h1>
<p>我們專注於 blablabla</p>
</body>
</html>
新增 Bootstrap CDN 和新增一個 Jumbotron
新增 Bootstrap CDN 和一個指向 jQuery 的連結，並將 HTML 元素放入 .jumbotron 中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</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="jumbotron">
<h1>公司</h1>
<p>我們專注於 blablabla</p>
</div>
</body>
</html>
結果
Company（公司）
我們專注於 blablabla
新增背景顏色和居中文字
1. 給 jumbotron 新增橙色背景。
2. 新增 .text-center 類來居中 jumbotron 內部的文字
示例
<style>
.jumbotron {
background-color: #f4511e; /* 橙色 */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>公司</h1>
<p>我們專注於 blablabla</p>
</div>
</body>
結果
Company（公司）
我們專注於 blablabla
新增表單
新增一個帶輸入欄位和按鈕的表單
示例
<div class="jumbotron text-center">
<h1>公司</h1>
<p>我們專注於 blablabla</p>
<form class="form-inline">
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="電子郵件地址" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">訂閱</button>
</div>
</div>
</form>
</div>
結果
Company（公司）
我們專注於 blablabla
新增容器
新增兩個容器 (.container-fluid)，併為第二個容器新增一個自定義類 (.bg-grey - 新增灰色背景)
示例
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>關於公司頁面</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">聯絡我們</button>
</div>
<div class="container-fluid bg-grey">
<h2>我們的價值觀</h2>
<h4><strong>使命：</strong> 我們的使命 lorem ipsum..</h4>
<p><strong>願景：</strong> 我們的願景 Lorem ipsum..
</div>
結果
關於公司頁面
Lorem ipsum..
Lorem ipsum..
我們的價值觀
使命： 我們的使命 lorem ipsum..
願景： 我們的願景 Lorem ipsum..
新增內邊距
讓我們透過新增一些內邊距來使 jumbotron 和容器看起來更好
示例
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>
結果
Company（公司）
我們專注於 blablabla
關於公司頁面
Lorem ipsum..
Lorem ipsum..
我們的價值觀
使命： 我們的使命 lorem ipsum..
願景： 我們的願景 Lorem ipsum..
新增一個網格
1. 為每個容器新增一個圖示（或公司標誌）。
2. 透過建立兩列 (.col-sm-8 和 .col-sm-4) 來分隔圖示和“關於文字”。
3. 新增媒體查詢，在寬度小於 768 畫素的螢幕上居中“標誌列”。
示例
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>關於公司頁面</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">聯絡我們</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>我們的價值觀</h2>
<h4><strong>使命：</strong> 我們的使命 lorem ipsum..</h4>
<p><strong>願景：</strong> 我們的願景 Lorem ipsum..</p>
</div>
</div>
</div>
結果
關於公司頁面
Lorem ipsum..
Lorem ipsum..
我們的價值觀
使命： 我們的使命 lorem ipsum..
願景： 我們的願景 Lorem ipsum..
新增服務容器
新增一個新容器，包含 2x3 個等寬的列 (.col-sm-4)
示例
<div class="container-fluid text-center">
<h2>服務</h2>
<h4>我們提供什麼</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off"></span>
<h4>力量</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart"></span>
<h4>愛心</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock"></span>
<h4>工作完成</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf"></span>
<h4>綠色環保</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate"></span>
<h4>認證</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench"></span>
<h4>努力工作</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
結果
服務
我們提供什麼
POWER
Lorem ipsum dolor sit amet..
愛心
Lorem ipsum dolor sit amet..
工作完成
Lorem ipsum dolor sit amet..
綠色環保
Lorem ipsum dolor sit amet..
認證
Lorem ipsum dolor sit amet..
努力工作
Lorem ipsum dolor sit amet..
設定圖示樣式
為“服務”容器中的每個 glyphicon 新增一個自定義類 (.logo-small)。使用 CSS 來設定它們的樣式
示例
/* 為所有圖示新增橙色並設定字型大小 */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
結果
關於公司頁面
Lorem ipsum..
Lorem ipsum..
我們的價值觀
使命： 我們的使命 lorem ipsum..
願景： 我們的願景 Lorem ipsum..
服務
我們提供什麼
POWER
Lorem ipsum dolor sit amet..
愛心
Lorem ipsum dolor sit amet..
工作完成
Lorem ipsum dolor sit amet..
綠色環保
Lorem ipsum dolor sit amet..
認證
Lorem ipsum dolor sit amet..
努力工作
Lorem ipsum dolor sit amet..
新增作品集容器
建立一個新的全寬容器，包含三個等寬的列 (.col-sm-4)
在每列內部，新增一張圖片。
然後，使用 .img-thumbnail 類將圖片塑造成縮圖。
通常，您會直接將 .img-thumbnail 類新增到 <img> 元素。在本例中，我們在圖片周圍放置了一個縮圖容器，以便我們也可以指定圖片文字。
示例
<div class="container-fluid text-center bg-grey">
<h2>作品集</h2>
<h4>我們創造了什麼</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="巴黎">
<p><strong>巴黎</strong></p>
<p>是的，我們建造了巴黎</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="紐約">
<p><strong>紐約</strong></p>
<p>我們建造了紐約</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="舊金山">
<p><strong>舊金山</strong></p>
<p>是的，舊金山是我們的</p>
</div>
</div>
</div>
結果
作品集
我們創造了什麼
巴黎
是的，我們建造了巴黎
紐約
我們建造了紐約
San Francisco
是的，舊金山是我們的
設定縮圖樣式
使用 CSS 來設定圖片樣式。在我們的示例中，我們試圖透過移除邊框併為每張圖片設定 100% 的寬度，使它們看起來像卡片。
示例
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
結果
作品集
我們創造了什麼
巴黎
是的，我們建造了巴黎
紐約
我們建造了紐約
San Francisco
是的，舊金山是我們的
新增一個輪播
新增一個輪播
示例
<h2>我們的客戶怎麼說</h2>
<div id="myCarousel" class="carousel slide text-center" 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">
<h4>“這家公司是最好的。我對結果非常滿意！”<br><span style="font-style:normal;">Michael Roe, 副總裁, Comment Box</span></h4>
</div>
<div class="item">
<h4>“一個詞……哇哦！！”<br><span style="font-style:normal;">John Doe, 銷售員, Rep Inc</span></h4>
</div>
<div class="item">
<h4>“我……還能比現在對這家公司更滿意嗎？”<br><span style="font-style:normal;">Chandler Bing, 演員, FriendsAlot</span></h4>
</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-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
結果
我們的客戶怎麼說
自己動手試一試 »新增定價容器
建立一個全寬容器，包含三個等寬的列 (.col-sm-4)
在每列內部，新增一個面板
示例
<div class="container-fluid">
<div class="text-center">
<h2>定價</h2>
<h4>選擇適合您的付款計劃</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>基礎版</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>無限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>每月</h4>
<button class="btn btn-lg">註冊</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>專業版</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>無限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>每月</h4>
<button class="btn btn-lg">註冊</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>高階版</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>無限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>每月</h4>
<button class="btn btn-lg">註冊</button>
</div>
</div>
</div>
</div>
</div>
結果
定價
選擇適合您的付款計劃
基礎版
20 Lorem
15 Ipsum
5 Dolor
2 Sit
無限 Amet
專業版
50 Lorem
25 Ipsum
10 Dolor
5 Sit
無限 Amet
高階版
100 Lorem
50 Ipsum
25 Dolor
10 Sit
無限 Amet
設定面板樣式
使用 CSS 來設定面板樣式
示例
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
結果
定價
選擇適合您的付款計劃
基礎版
20 Lorem
15 Ipsum
5 Dolor
2 Sit
無限 Amet
專業版
50 Lorem
25 Ipsum
10 Dolor
5 Sit
無限 Amet
高階版
100 Lorem
50 Ipsum
25 Dolor
10 Sit
無限 Amet
新增聯絡人容器
新增一個包含聯絡資訊的新容器
示例
<div class="container-fluid bg-grey">
<h2 class="text-center">聯絡我們</h2>
<div class="row">
<div class="col-sm-5">
<p>聯絡我們，我們會在 24 小時內回覆您。</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> myemail@something.com</p>
</div>
<div class="col-sm-7">
<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><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">傳送</button>
</div>
</div>
</div>
</div>
</div>
結果
聯絡方式
聯絡我們，我們會在 24 小時內回覆您。
芝加哥, 美國
+00 1515151515
myemail@something.com
新增地圖/位置圖片
新增位置圖片或地圖（請閱讀我們的 谷歌地圖教程 瞭解谷歌地圖）
新增導航欄
在頁面頂部新增一個導航欄，該導航欄在較小的螢幕上會摺疊
示例
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">關於</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#pricing">定價</a></li>
<li><a href="#contact">聯絡我們</a></li>
</ul>
</div>
</div>
</nav>
結果
自己動手試一試 »提示： 使用 navbar-right 類將導航按鈕右對齊。
設定導航欄樣式
使用 CSS 自定義導航欄
示例
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
結果
自己動手試一試 »新增滾動監聽
新增滾動監聽，以便在滾動時自動更新導航欄連結
示例
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
自己動手試一試 »
新增頁尾
在頁尾新增一個“向上箭頭”圖示，點選後將使用者帶到頁面頂部
示例
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="到頂部">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap 主題由 <a href="https://w3schools.tw" title="訪問 w3schools">www.w3schools.com</a> 製作</p>
</footer>
結果
自己動手試一試 »新增平滑滾動
使用 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 Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
我們還為一些元素添加了額外的樣式
示例
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
自己動手試一試 »
滑入元素
我們還建立了一個動畫效果，它將在滾動時滑入元素。如果您想使用它，只需將 .slideanim 類新增到您想要滑入的元素，並將以下程式碼新增到您的 CSS 和 jQuery 中（您可以隨意修改持續時間、不透明度、從哪裡開始、何時滑入等等）
CSS 示例
.slideanim {visibility:hidden;}
.slide {
/* 動畫的名稱 */
animation-name: slide;
-webkit-animation-name: slide;
/* 動畫的持續時間 */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* 使元素可見 */
visibility: visible;
}
/* 從 0% 到 100% 的不透明度（透明）並指定元素沿 Y 軸滑入的百分比 */
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
jQuery 示例
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
自己動手試一試 »
