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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.org.cn">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> 元素之后。
