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.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">
<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日星期六
旧金山
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日星期六
旧金山
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>邮箱：[email protected]</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>
结果
尝试一下 »添加可切换标签
在联系容器内添加标签（.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">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross，经理</h2>
<p>兄弟，我们已经上路有一段时间了。期待着lorem ipsum。</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing，吉他手</h2>
<p>很高兴见到大家！希望你们和我一样享受这次演出。我还能再高兴点吗？</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Peter Griffin，贝斯手</h2>
<p>我的意思是，有时候我喜欢这场演出，但有时候我也喜欢其他东西。</p>
</div>
</div>
结果
来自博客
Mike Ross，经理
伙计们，我们已经在路上待了一段时间了。期待着lorem ipsum。
添加地图/位置图片
添加一个位置图片或地图（阅读我们的<a href="/graphics/google_maps_intro.asp">Google 地图教程</a>了解 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="#">Logo</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>
结果
尝试一下 »提示：使用 <code class="w3-codespan">navbar-right</code> 类将导航链接右对齐。
如果你想让导航栏中的某个链接像下拉菜单一样工作，请使用 <code class="w3-codespan">.dropdown</code> 类。
样式化导航栏
使用 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. 创建一个 <code class="w3-codespan"><footer></code> 元素并添加一些文本。
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”。
在 <code class="w3-codespan"><head></code> 部分链接到字体
<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;
}
尝试一下 »
