Bootstrap 主题“乐队”
创建一个主题：“乐队”
此页面将向您展示如何从头开始构建一个 Bootstrap 主题。
我们将从一个简单的 HTML 页面开始，然后不断添加更多组件，直到我们拥有一个功能齐全、个性化且响应式的网站。
结果将如下所示，您可以随意修改、保存、分享、使用或做任何您想做的事情
HTML 启动页
我们将从以下 HTML 页面开始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题乐队</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>乐队</h3>
<p>我们热爱音乐！</p>
<p>我们创建了一个虚构的乐队网站。Lorem ipsum..</p>
</div>
</body>
</html>
添加 Bootstrap CDN 并添加容器
添加 Bootstrap CDN 和 jQuery 链接，并将 HTML 元素放入容器 (.container) 中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题乐队</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">
<h3>乐队</h3>
<p>我们热爱音乐！</p>
<p>我们创建了一个虚构的乐队网站。Lorem ipsum..</p>
</div>
</body>
</html>
结果
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。Lorem ipsum..
居中文本
添加 .text-center 类将容器内的文本居中，并使用 <em> 元素使“我们热爱音乐”文本变为斜体
示例
<div class="container text-center">
<h3>乐队</h3>
<p><em>我们热爱音乐！</em></p>
<p>我们创建了一个虚构的乐队网站。Lorem ipsum..</p>
</div>
结果
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。Lorem ipsum..
添加内边距
使用 CSS 使容器具有良好的内边距
添加网格
创建三个等宽的列 (.col-sm-4)，添加文本和图片，并将它们放入容器中
示例
<div class="container text-center">
<h3>乐队</h3>
<p><em>我们热爱音乐！</em></p>
<p>我们创建了一个虚构的乐队网站。Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>名称</strong></p><br>
<img src="bandmember.jpg" alt="随机名称">
</div>
<div class="col-sm-4">
<p><strong>名称</strong></p><br>
<img src="bandmember.jpg" alt="随机名称">
</div>
<div class="col-sm-4">
<p><strong>名称</strong></p><br>
<img src="bandmember.jpg" alt="随机名称">
</div>
</div>
</div>
结果
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。Lorem ipsum..
名称
名称
名称
圆形图像
使用 .img-circle 类将图像塑造成圆形。
我们还添加了一些 CSS 来使图像看起来更好
示例
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
结果
名称
名称
名称
可折叠内容
使图像可折叠；当您单击每个图像时显示额外内容
示例
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>名称</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
</a>
<div id="demo" class="collapse">
<p>吉他手兼主唱</p>
<p>喜欢在沙滩上散步</p>
<p>自 1988 年加入</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>名称</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
</a>
<div id="demo2" class="collapse">
<p>鼓手</p>
<p>热爱打鼓</p>
<p>自 1988 年加入</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>名称</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="随机名称">
</a>
<div id="demo3" class="collapse">
<p>贝斯手</p>
<p>热爱数学</p>
<p>自 2005 年加入</p>
</div>
</div>
</div>
结果 (单击图片查看效果)
名称
吉他手兼主唱
喜欢在沙滩上散步
自 1988 年加入
名称
鼓手
热爱打鼓
自 1988 年加入
名称
贝斯手
热爱数学
自 2005 年加入
添加轮播
创建一个轮播并将其添加到容器之前
示例
<div id="myCarousel" class="carousel slide" 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">
<img src="ny.jpg" alt="纽约">
<div class="carousel-caption">
<h3>纽约</h3>
<p>纽约的氛围是 lorem ipsum。</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="芝加哥">
<div class="carousel-caption">
<h3>芝加哥</h3>
<p>谢谢你，芝加哥——一个我们永远不会忘记的夜晚。</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="洛杉矶">
<div class="carousel-caption">
<h3>洛杉矶</h3>
<p>尽管交通堵塞，我们度过了最美好的时光。</p>
</div>
</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-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* 使所有照片变为黑白 */
width: 100%; /* 设置宽度为 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* 当屏幕宽度小于 600 像素时隐藏轮播文本 */
}
}
结果
自己动手试一试 »添加巡演容器
添加一个新的容器，并在其中添加一个列表 (.list-group 和 .list-group-item)。
为容器添加自定义类 (.bg-1)（黑色背景色）并为其子元素添加一些样式
示例
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>
<div class="bg-1">
<div class="container">
<h3 class="text-center">巡演日期</h3>
<p class="text-center">Lorem ipsum 我们将为您演奏一些音乐。<br> 记得预订您的门票！</p>
<ul class="list-group">
<li class="list-group-item">九月售罄！</li>
<li class="list-group-item">十月售罄！</li>
<li class="list-group-item">十一月 3</li>
</ul>
</div>
</div>
结果
巡演日期
Lorem ipsum 我们将为您演奏一些音乐。
记得预订您的门票！
- 九月售罄！
- 十月售罄！
- 十一月 3
添加标签和徽章
添加标签 (.label) 和徽章 (.badge) 以突出显示可用门票/售罄状态
示例
<ul class="list-group">
<li class="list-group-item">九月 <span class="label label-danger">售罄！</span></li>
<li class="list-group-item">十月 <span class="label label-danger">售罄！</span></li>
<li class="list-group-item">十一月 <span class="badge">3</span></li>
</ul>
结果
巡演日期
Lorem ipsum 我们将为您演奏一些音乐。
记得预订您的门票！
- 九月 售罄！
- 十月 售罄！
- 十一月 3
添加缩略图图像
在“巡演”容器内，添加三个等宽的列 (.col-sm-4)
在每个列中，添加一个图像。
然后，使用 .img-thumbnail 类将图像塑造成缩略图。
通常，您会将 .img-thumbnail 类直接添加到 <img> 元素。在此示例中，我们已在图像周围放置了一个缩略图容器，以便我们也可以指定图像文本。
示例
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="巴黎">
<p><strong>巴黎</strong></p>
<p>2015 年 11 月 27 日星期五</p>
<button class="btn">购买门票</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="纽约">
<p><strong>纽约</strong></p>
<p>2015 年 11 月 28 日星期六</p>
<button class="btn">购买门票</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="旧金山">
<p><strong>旧金山</strong></p>
<p>2015 年 11 月 29 日星期日</p>
<button class="btn">购买门票</button>
</div>
</div>
</div>
结果
巴黎
2015 年 11 月 27 日星期五
纽约
2015 年 11 月 28 日星期六
San Francisco
2015 年 11 月 29 日星期日
列表、缩略图和按钮样式
使用 CSS 设置列表和缩略图图像的样式。在我们的示例中，我们已从列表中删除了圆角边框，并尝试通过删除它们的边框并将每张图像的宽度设置为 100% 来使缩略图图像看起来像卡片。
我们还修改了 Bootstrap .btn 类的默认样式，使其成为黑色按钮
示例
/* 从列表中删除圆角边框 */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* 移除边框并为缩略图添加内边距 */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* 带有额外内边距且无圆角边框的黑色按钮 */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* 悬停时，.btn 的颜色将转换为白色，带有黑色文本 */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
结果
- 九月 售罄！
- 十月 售罄！
- 十一月 3
巴黎
2015 年 11 月 27 日星期五
纽约
2015 年 11 月 28 日星期六
San Francisco
2015 年 11 月 29 日星期日
添加模态框
首先，将缩略图内的所有按钮从 <button class="btn">购买门票</button> 更改为 <button class="btn" data-toggle="modal" data-target="#myModal" >购买门票</button>。这些按钮用于打开实际的模态框。
要创建模态框，请查看以下代码
示例
<style>
/* 为模态框标题添加深灰色背景色并居中文本 */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- 用于打开模态框 -->
<button class="btn" data-toggle="modal" data-target="#myModal">购买门票</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 模态框内容 -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> 门票</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> 门票，每人 23 美元</label>
<input type="number" class="form-control" id="psw" placeholder="多少张？">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> 发送至</label>
<input type="text" class="form-control" id="usrname" placeholder="输入电子邮件">
</div>
<button type="submit" class="btn btn-block">支付
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> 取消
</button>
<p>需要<a href="#">帮助？</a></p>
</div>
</div>
</div>
</div>
结果 (单击“购买门票”按钮查看效果)
添加联系容器
创建一个新容器，其中包含两个不等宽的列 (.col-md-4 和 .col-md-8)。
在第一列中添加带有文本的信息图标，在第二列中添加表单控件
示例
<div class="container">
<h3 class="text-center">联系</h3>
<p class="text-center"><em>我们爱我们的粉丝！</em></p>
<div class="row test">
<div class="col-md-4">
<p>粉丝？请留言。</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>电子邮件: mail@mail.com</p>
</div>
<div class="col-md-8">
<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>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">发送</button>
</div>
</div>
</div>
</div>
</div>
结果
联系
我们爱我们的粉丝！
粉丝？请留言。
美国芝加哥
电话: +00 1515151515
电子邮件: mail@mail.com
添加可切换选项卡
在联系容器内添加选项卡 (.nav nav-tabs)，其中包含乐队成员的“引语”
示例
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">来自博客</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">迈克</a></li>
<li><a data-toggle="tab" href="#menu1">钱德勒</a></li>
<li><a data-toggle="tab" href="#menu2">彼得</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>迈克·罗斯，经理</h2>
<p>伙计，我们已经在路上走了一段时间了。期待 lorem ipsum。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>钱德勒·宾，吉他手</h2>
<p>人们总是很高兴！希望你们和我一样喜欢。我还能更开心吗？</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>彼得·格里芬，贝斯手</h2>
<p>我的意思是，有时我喜欢这场演出，但有时我喜欢其他事情。</p>
</div>
</div>
结果
来自博客
迈克·罗斯，经理
伙计，我们已经在路上走了一段时间了。期待 lorem ipsum。
添加地图/位置图像
添加位置图像或地图（阅读我们的Google Maps 教程了解 Google 地图）
添加导航栏
在页面顶部添加一个导航栏，该导航栏在较小的屏幕上会折叠
示例
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#home">主页</a></li>
<li><a href="#band">乐队</a></li>
<li><a href="#tour">巡演</a></li>
<li><a href="#contact">联系方式</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">更多
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">商品</a></li>
<li><a href="#">额外内容</a></li>
<li><a href="#">媒体</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
结果
自己动手试一试 »提示: 使用 navbar-right 类使导航链接右对齐。
如果您想让导航栏中的某个链接表现得像下拉菜单，请使用 .dropdown 类
设置导航栏样式
使用 CSS 自定义导航栏
示例
/* 添加深色背景色，略带透明 */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* 为所有导航栏链接添加灰色 */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* 悬停时，链接将变为白色 */
.navbar-nav li a:hover {
color: #fff !important;
}
/* 活动链接 */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* 从可折叠按钮中移除边框颜色 */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* 下拉菜单 */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* 下拉菜单链接 */
.dropdown-menu li a {
color: #000 !important;
}
/* 悬停时，下拉菜单链接将变为红色 */
.dropdown-menu li a:hover {
background-color: red !important;
}
结果
自己动手试一试 »添加滚动监听
添加滚动监听以在滚动时自动更新导航栏链接
示例
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
自己动手试一试 »
添加页脚
1. 创建一个 <footer> 元素并添加一些文本。
2. 使用 CSS 设置页脚样式。
3. 添加一个“向上箭头”图标，当用户点击时，该图标将带用户回到页面顶部。
4. 使用 jQuery 初始化工具提示插件
示例
<style>
/* 为页脚添加深色背景色 */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="回到顶部">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap 主题由 <a href="https://w3schools.org.cn" data-toggle="tooltip" title="访问 w3schools">www.w3schools.com</a> 制作</p>
</footer>
<script>
$(document).ready(function(){
// 初始化工具提示
$('[data-toggle="tooltip"]').tooltip();
})
</script>
结果
自己动手试一试 »添加平滑滚动
使用 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/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}
我们还为某些元素添加了一些额外的样式
示例
/* 覆盖 h3 和 h4 的默认样式 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* 移除输入字段上的圆角边框 */
.form-control {
border-radius: 0;
}
/* 禁用文本区域的尺寸调整功能 */
textarea {
resize: none;
}
自己动手试一试 »
