Bootstrap 主题 "乐队"

创建主题："乐队"

本页将向您展示如何从头开始构建 Bootstrap 主题。

我们将从一个简单的 HTML 页面开始，然后添加越来越多的组件，直到我们拥有一个功能齐全、个性化且响应迅速的网站。

结果将如下所示，您可以随意修改、保存、共享、使用或做任何您想做的事情：

HTML 起始页

我们将从以下 HTML 页面开始:

添加 Bootstrap CDN 并添加容器

添加 Bootstrap CDN 和 jQuery 链接，并将 HTML 元素放入容器(.container):

中心文本

添加 .text-center 类以使容器内的文本居中，并使用 <em> 元素使 "We love music" 文本变为斜体:

添加填充

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

结果:

THE BAND

We love music!

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

Name

Name

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

Name

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

Guitarist and Lead Vocalist

Loves long walks on the beach

Member since 1988

Name

Drummer

Loves drummin'

Member since 1988

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>

结果:

New York

The atmosphere in New York is lorem ipsum.

Chicago

Thank you, Chicago - A night we won't forget.

LA

Even though the traffic was a mess, we had the best time playing at Venice Beach!

Previous Next

亲自试一试 »

设置轮播样式

使用 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 像素时隐藏轮播文本 */
  }
}

结果:

New York

The atmosphere in New York is lorem ipsum.

Chicago

Thank you, Chicago - A night we won't forget.

LA

Even though the traffic was a mess, we had the best time playing at Venice Beach!

Previous Next

亲自试一试 »

添加 Tour 容器

添加一个新容器并在其中添加一个列表 (.list-group 和 .list-group-item) 。

将自定义类 (.bg-1) 添加到容器（黑色背景颜色）并为其子项添加一些样式:

添加标签和徽章

添加标签 (.label) 和徽章 (.badge) 以突出显示可用门票/售罄:

添加缩略图图像

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

结果:

Paris

Fri. 27 November 2015

Buy Tickets

New York

Sat. 28 November 2015

Buy Tickets

San Francisco

Sun. 29 November 2015

Buy Tickets

亲自试一试 »

样式列表、缩略图和按钮

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

Paris

Fri. 27 November 2015

Buy Tickets

New York

Sat. 28 November 2015

Buy Tickets

San Francisco

Sun. 29 November 2015

Buy Tickets

亲自试一试 »

添加模态

首先，将缩略图中的所有按钮从 <button class="btn">Buy Tickets</button> 更改为 <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button>。 这些按钮用于打开实际的模态。

要创建模态，请查看以下代码:

添加 Contact 联系人容器

创建一个新容器，具有两列不等宽 (.col-md-4 和 .col-md-8)。

在第一列中添加带有文本的信息图标，在第二列中添加表单控件:

添加可切换选项卡

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

添加地图/位置图像

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

实例

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

结果:

亲自试一试 »

添加导航栏

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

样式导航栏

使用 CSS 自定义导航栏:

添加 Scrollspy 滚动监听

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

添加页脚

1. 创建一个 <footer> 元素并添加一些文本。

2. 使用 CSS 设置页脚样式。

3. 添加一个"向上箭头"图标，点击该图标会将用户带到页面顶部。

4. 使用jQuery初始化tooltip插件:

添加平滑滚动

使用 jQuery 添加平滑滚动（单击导航栏中的链接时）:

最后的一步

通过添加您喜欢的字体来个性化您的主题。 我们使用了 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">

然后你可以在页面中使用它们:

我们还为一些元素添加了一些额外的样式:

完成"乐队"主题