Bootstrap主题 "The Band"
创建主题："The Band"
本页将向您展示如何从头开始构建 Bootstrap 主题。
我们将从一个简单的 HTML 页面开始，然后添加越来越多的组件，直到我们拥有一个功能齐全、个性化且响应迅速的网站。
结果将如下所示，您可以自由修改、保存、共享、使用或做任何您想做的事情：
HTML 起始页
我们将从以下 HTML 页面开始：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>
添加 Bootstrap CDN 并添加容器
添加 Bootstrap CDN 和 jQuery 链接，并将 HTML 元素放入容器中（.container）：
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</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>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>
结果：
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。洛雷姆·伊普苏姆..
中心文本
添加.text-center类将文本在容器内居中，并使用<em>使 "We love music" 文本变为斜体的元素：
示例
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
结果：
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。洛雷姆·伊普苏姆..
添加填充
使用 CSS 使容器通过填充看起来不错：
添加网格
创建三列等宽的 (.col-sm-4），添加文本和图片，并将它们放入容器内：
示例
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>
结果：
乐队
我们热爱音乐！
我们创建了一个虚构的乐队网站。洛雷姆·伊普苏姆..
姓名
姓名
姓名
圆形图片
将图片塑造为圆形.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="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
结果：
姓名
姓名
姓名
折叠车
使图片可折叠；单击每个图片时显示额外内容：
示例
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo" class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo2" class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo3" class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member since 2005</p>
</div>
</div>
</div>
结果（点击图片查看效果）：
姓名
吉他手兼主唱
喜欢在海滩上长距离散步
1988年起成为会员
姓名
鼓手
喜欢打鼓
1988年起成为会员
姓名
贝斯手
喜欢数学
自2005年起成为会员
添加轮播
创建一个轮播并将其添加到容器之前：
示例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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">Next</span>
</a>
</div>
结果：
亲自试一试 »
旋转木马样式
使用 CSS 设置轮播样式：
示例
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
结果：
亲自试一试 »添加游览容器
添加一个新容器并添加一个列表（.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">TOUR DATES</h3>
<p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
结果：
巡演日期
Lorem ipsum 我们将为您播放一些音乐。
记得订票哦！
- 九月已售完！
- 十月已售完！
- 11 月 3 日
添加标签和徽章
添加标签（.label）和徽章（.badge）突出显示可用门票/已售完：
示例
<ul class="list-group">
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">November <span class="badge">3</span></li>
</ul>
结果：
巡演日期
Lorem ipsum 我们将为您播放一些音乐。
记得订票哦！
- 九月售罄！
- 十月售罄！
- 十一月3
添加缩略图
在 Tour 容器内，添加三列等宽的 (.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="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>
结果：
巴黎
周五。 2015 年 11 月 27 日
纽约
星期六。 2015 年 11 月 28 日
旧金山
太阳。 2015 年 11 月 29 日
样式列表、缩略图和按钮
使用 CSS 设置列表和缩略图的样式。在我们的示例中，我们从列表中删除了圆形边框，并尝试通过删除边框来使缩略图片卡片一样，并在每个图片上设置 100% 的宽度。
我们还修改了Bootstrap的默认样式.btn类，到一个黑色按钮：
示例
/* Remove rounded borders from list */
.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;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.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">Buy Tickets</button>到<button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button>。这些按钮用于打开实际的模式。
要创建模式，请查看以下代码：
示例
<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<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> Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>
结果（点击"Buy Tickets"按钮查看效果）：
添加联系人容器
创建一个新容器，其中有两列宽度不等（.col-md-4和.col-md-8）。
在第一列中添加带有文本的信息图标，并在第二列中添加表单控件：
示例
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: 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="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
结果：
接触
我们爱我们的粉丝！
扇子？留个便条。
美国芝加哥
电话：+00 1515151515
电子邮件：mail@mail.com
添加可切换选项卡
添加选项卡 (.nav nav-tabs）在联系人容器内，带有来自乐队成员的"quotes"：
示例
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</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, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
</div>
</div>
结果：
来自博客
迈克·罗斯，经理
伙计，我们已经在路上有一段时间了。期待 lorem ipsum。
添加地图/位置图片
添加位置图片或地图（阅读我们的谷歌地图教程对于谷歌地图）：
添加导航栏
在页面顶部添加一个在较小屏幕上折叠的导航栏：
示例
<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">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
结果：
亲自试一试 »提示：将导航链接与navbar-right类。
如果您希望导航栏中的某个链接表现得像下拉菜单，请使用.dropdown类
导航栏样式
使用CSS自定义导航栏：
示例
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.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. 添加"Up Arrow" 图标，单击该图标会将用户带到页面顶部。
4.使用jQuery初始化工具提示插件：
示例
<style>
/* Add a dark background color to the footer */
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="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="https://www.91xjr.com" data-toggle="tooltip" title="Visit 91xjr">www.91xjr.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>
结果：
亲自试一试 »添加平滑滚动
使用 jQuery 添加平滑滚动（单击导航栏中的链接时）：
示例
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End 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;
}
我们还为一些元素添加了一些额外的样式：
示例
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
亲自试一试 »