Bootstrap 主题 “Simply Me”
创建主题：“Simply Me”
此页面将向您展示如何从头开始构建 Bootstrap 主题。
我们将从一个简单的 HTML 页面开始，然后添加越来越多的组件，直到我们拥有一个功能齐全、个性化且响应式的网站。
结果将如下所示，您可以随意修改、保存、共享、使用或对它做任何您想做的事情
HTML 起始页面
我们将从以下 HTML 页面开始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题 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 主题 Simply Me</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-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%。
打开示例时，请记住调整屏幕大小以查看响应式效果
示例
<!-- 圆形鸟 -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="鸟">
<!-- 我们网格中的鸟： -->
<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="#">我</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">谁</a></li>
<li><a href="#">什么</a></li>
<li><a href="#">哪里</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 主题由 <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;}
我们还创建了一个名为 "helper" 的边距类，用于在需要添加额外空间的地方添加，通常是在每个 <h3> 和 <img> 元素之后。
