創建一個主題： "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>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>結果：
我是誰？
我是一個冒險家
添加背景顏色和文字中心
1.添加自定義類（.bg-1）的容器添加背景顏色。
2.添加.text-center類中心集裝箱內的文本：
例
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>結果：
我是誰？
我是一個冒險家
圓形意象
塑造形象與一圈.img-circle類：
更多內容
添加更多的內容，並把它裡面的新容器：
例
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
.bg-2 {
background-color:
#474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
/* White */
color: #555555;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>結果：
我是誰？
我是一個冒險家
我是什麼？
Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
哪裡可以找到我的？
Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
添加填充
讓我們使容器好看，加入一些填充：
例
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>結果：
我是誰？
我是一個冒險家
我是什麼？
Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
哪裡可以找到我的？
Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
添加一個按鈕
添加一個按鈕到中間容器：
例
<div class="container-fluid bg-2
text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
結果：
我是什麼？
Lorem存有悲坐阿梅德，consectetur adipiscing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
搜索添加圖標
添加了“搜索”按鈕搜索圖標：
例
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
結果：
試一試»修改第三容器（添加網格）
添加第三容器（內部寬度相等的三列.col-sm-4
例
<div class="container-fluid bg-3 text-center">
<h3>Where
To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>結果：
哪裡可以找到我的？
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。
Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納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="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img
src="birds2.jpg" class="img-responsive" style="width:100%"
alt="Image">
<img
src="birds3.jpg" class="img-responsive" style="width:100%"
alt="Image"> 試一試» 新增導航欄
在與頁面的頂部添加一個標準的導航欄，並使其可折疊的小屏幕：
例
<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="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>結果：
試一試»最後的觸摸
通過添加你喜歡的字體，個性化您的主題。 我們已經從谷歌的字體庫中使用“蒙特塞拉特”。
鏈接到字體<head>部分：
<link href="http://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>元素。