Bootstrap 主题 "乐队"


创建主题:"乐队"

本页将向您展示如何从头开始构建 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://cdn.staticfile.org/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>

结果:

THE BAND

We love music!

We have created a fictional band website. Lorem ipsum..

亲自试一试 »

中心文本

添加 .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>

结果:

THE BAND

We love music!

We have created a fictional band website. Lorem ipsum..

亲自试一试 »

添加填充

使用 CSS 使容器看起来不错并带有填充:

实例

.container {
  padding: 80px 120px;
}

结果:

THE BAND

We love music!

We have created a fictional band website. Lorem ipsum..

亲自试一试 »

添加网格

创建三列等宽 (.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>

结果:

THE BAND

We love music!

We have created a fictional band website. Lorem ipsum..


Name


Random Name

Name


Random Name

Name


Random Name
亲自试一试 »

圆形图像

使用 .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">

结果:

Name


Random Name

Name


Random Name

Name


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>

Result (click on the images to see the effect):

Name


Random Name

Guitarist and Lead Vocalist

Loves long walks on the beach

Member since 1988

Name


Random Name

Drummer

Loves drummin'

Member since 1988

Name


Random Name

Bass player

Loves math

Member since 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="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>

  <!-- 左右控制 -->
  <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%); /* 将所有照片设为黑白 */
  width: 100%; /* 将宽度设置为 100% */
  margin: auto;
}

.carousel-caption h3 {
  color: #fff !important;
}

@media (max-width: 600px) {
  .carousel-caption {
    display: none; /* 当屏幕宽度小于 600 像素时隐藏轮播文本 */
  }
}

结果:

亲自试一试 »

添加 Tour 容器

添加一个新容器并在其中添加一个列表 (.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>

结果:

TOUR DATES

Lorem ipsum we'll play you some music.
Remember to book your tickets!

  • September Sold Out!
  • October Sold Out!
  • November 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>

结果:

TOUR DATES

Lorem ipsum we'll play you some music.
Remember to book your tickets!

  • September Sold Out!
  • October Sold Out!
  • November 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>

结果:

Moustiers Sainte Marie

Paris

Fri. 27 November 2015

Moustiers Sainte Marie

New York

Sat. 28 November 2015

Moustiers Sainte Marie

San Francisco

Sun. 29 November 2015

亲自试一试 »

样式列表、缩略图和按钮

使用 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;
}

结果:

  • September Sold Out!
  • October Sold Out!
  • November 3
Moustiers Sainte Marie

Paris

Fri. 27 November 2015

Moustiers Sainte Marie

New York

Sat. 28 November 2015

Moustiers Sainte Marie

San Francisco

Sun. 29 November 2015

亲自试一试 »

添加模态

首先,将缩略图中的所有按钮从 <button class="btn">Buy Tickets</button> 更改为 <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</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>


<!-- 用于打开 Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</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">&times;</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"按钮查看效果):

亲自试一试 »

添加 Contact 联系人容器

创建一个新容器,具有两列不等宽 (.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>

结果:

Contact

We love our fans!

Fan? Drop a note.

Chicago, US

Phone: +00 1515151515

Email: mail@mail.com


亲自试一试 »

添加可切换选项卡

在 contact 联系人容器内添加标签(.nav nav-tabs) ,并带有来自乐队成员的"引号":

实例

<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>

结果:

From The Blog

Mike Ross, Manager

Man, we've been on the road for some time now. Looking forward to lorem ipsum.

亲自试一试 »

添加地图/位置图像

添加位置图像或地图(阅读我们的 Google 地图教程 以获取谷歌地图信息):

实例

<!-- 位置/地图的图像 -->
<img src="map.jpg" style="width:100%">

结果:

亲自试一试 »

添加导航栏

在页面顶部添加一个在较小屏幕上折叠的导航栏:

实例

<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 自定义导航栏:

实例

/* 添加带有一点透视的深色背景颜色 */
.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;
}

/* Dropdown */
.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;
}

结果:

亲自试一试 »

添加 Scrollspy 滚动监听

添加 scrollspy 滚动监听以在滚动时自动更新导航栏链接:

实例

<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初始化tooltip插件:

实例

<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="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a><br><br>
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.cn" data-toggle="tooltip" title="Visit w3schools">www.w3schools.cn</a></p>
</footer>

<script>
$(document).ready(function(){
  // 初始化 Tooltip
  $('[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;
      });
    } // End if
  });
})
</script>
亲自试一试 »

最后的一步

通过添加您喜欢的字体来个性化您的主题。 我们使用了 Google 字体库中的 "和 "Lato" 。

链接到 <head> 部分中的字体:

<link href="/fonts/css.asp?family=Montserrat" rel="stylesheet" type="text/css">

<link href="/fonts/css.asp?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;
}
亲自试一试 »

完成"乐队"主题