创建一个主题： "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>元素。