参考手册
Bootstrap 3 模板(高级篇)
Bootstrap 主题 "Company"
返回 Bootstrap 3 模板(高级篇)

Bootstrap 主题 "Simply Me"

创建一个主题: "Simply Me"

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

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

结果如下，你可以自由地修改、保存、共享、使用或做任何你想用它做的事情:

HTML 页面开始

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap Theme Simply Me</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  10. <h3>Who Am I?</h3>
  11. <img src="/images/bird.jpg" alt="Bird">
  12. <h3>I'm an adventurer</h3>
  14. </body>
  15. </html>

添加 Bootstrap CDN 并将元素放入容器中

添加 Bootstrap CDN 和 jQuery 的链接，并将 HTML 元素放入容器中:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Bootstrap 主题 Simply Me</title>
  5.  <meta charset="utf-8">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  8.  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  9.  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  11.  </head>
  12. <body>
  14. <div class="container-fluid">
  16.  <h3>Who Am I?</h3>
  17.  <img src="/images/bird.jpg" alt="Bird">
  18.  <h3>I'm an adventurer</h3>
  19. </div>
  21. </body>
  22. </html>
运行一下

结果:

Who Am I?

Bird

I'm an adventurer

添加背景色与文本居中

  1. 通过对容器添加一个自定义样式 (.bg-1) 来添加一个背景色
  2. 通过添加 .text-center 样式在容器内部居中文本:
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <style>
  5.  .bg-1 {
  6.   background-color: #1abc9c; /* Green */
  8.    color: #ffffff;
  9.  }
  10.  </style>
  12.  </head>
  14. <body>
  15.  <div class="container-fluid bg-1 text-center">
  16.   <h3>Who Am I?</h3>
  18.    <img src="/images/bird.jpg" alt="Bird">
  19.   <h3>I'm an adventurer</h3>
  20.  </div>
  21. </body>
  22. </html>
运行一下

结果:

Who Am I?

Bird

I’m an adventurer

圆形图片

使用 .img-circle 样式将图片变成圆形:

实例
  1.  <img src="bird.jpg" class="img-circle" alt="Bird">

结果:

Who Am I?

Bird

I’m an adventurer

更多内容

添加更多内容并将其放入新容器中:

实例
  1. <head>
  3. <style>
  4.  .bg-1 {
  5.   background-color: #1abc9c; /* Green */
  6.   color: #ffffff;
  7.  }
  8.  .bg-2 {
  9.   background-color: #474e5d; /* Dark Blue */
  11.    color: #ffffff;
  12.  }
  13.  .bg-3 {
  14.   background-color: #ffffff; /* White */
  16.    color: #555555;
  17.  }
  18. </style>
  20. </head>
  22. <body>
  24. <div class="container-fluid bg-1 text-center">
  25.  <h3>Who Am I?</h3>
  27.   <img src="bird.jpg" class="img-circle" alt="Bird">
  28.  <h3>I'm an adventurer</h3>
  29. </div>
  31. <div class="container-fluid bg-2 text-center">
  32.  <h3>What Am I?</h3>
  34.   <p>Lorem ipsum..</p>
  35. </div>
  37. <div class="container-fluid bg-3 text-center">
  38.  <h3>Where To Find Me?</h3>
  40.   <p>Lorem ipsum..</p>
  41. </div>
  43. </body>

结果:

Who Am I?

Bird

I’m an adventurer

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

添加一个填充 Padding

让我们通过添加一些填充使容器看起来更好:

实例
  1. <style>
  2. .container-fluid {
  3.  padding-top: 70px;
  4.  padding-bottom: 70px;
  5. }
  6. </style>

结果:

Who Am I?

Bird

I’m an adventurer

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

添加一个按钮

在中间容器中添加一个按钮:

实例
  1. <div class="container-fluid bg-2 text-center">
  2.  <h3>What Am I?</h3>
  4.   <p>Lorem ipsum..</p>
  5.  <a href="#" class="btn btn-default btn-lg">Search</a>
  6. </div>

结果:

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Search

添加一个图标

在为 "Search" 按钮添加一个图标:

实例
  1. <a href="#" class="btn btn-default btn-lg">
  2.  <span class="glyphicon glyphicon-search"></span> Search
  3. </a>

结果:

修改第 3 个容器 (添加网格)

在第 3 个容器中添加 3 列宽度相等的列 (.col-sm-4):

实例
  1. <div class="container-fluid bg-3 text-center">
  2.  <h3>Where To Find Me?</h3>
  3.  <div class="row">
  4.   <div class="col-sm-4">
  5.    <p>Lorem ipsum..</p>
  6.    <img src="/znadmin/md/4636/5.jpg" alt="Image">
  7.   </div>
  9.    <div class="col-sm-4">
  10.    <p>Lorem ipsum..</p>
  11.    <img src="/znadmin/md/4636/6.jpg" alt="Image">
  12.   </div>
  14.    <div class="col-sm-4">
  15.    <p>Lorem ipsum..</p>
  16.    <img src="/znadmin/md/4636/7.jpg" alt="Image">
  18.    </div>
  19.  </div>
  20. </div>

结果:

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

让图片自适应

对所有图片添加 .img-responsive 样式，将 display:inline 添加到第一个图像以强制其居中（.img-responsive 类将 display:block 添加到图像中，使其在屏幕左侧）。

如果希望图像在开始堆叠时覆盖整个屏幕宽度，请在图像中添加宽度 width:100%。打开实例时，请记住调整屏幕大小以查看响应式效果:

实例
  1. <!-- The circular bird -->
  2. <img src="/images/bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">
  4. <!-- The birds in our grid: -->
  5. <img src="/znadmin/md/4636/5.jpg" class="img-responsive" style="width:100%" alt="Image">
  7. <img src="/znadmin/md/4636/6.jpg" class="img-responsive" style="width:100%" alt="Image">
  8. <img src="/znadmin/md/4636/7.jpg" class="img-responsive" style="width:100%" alt="Image">
运行一下

添加一个导航条

在页面顶部添加一个标准导航条，使其在较小的屏幕上可折叠:

实例
  1. <nav class="navbar navbar-default">
  2.  <div class="container">
  4.  <div class="navbar-header">
  5.    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  6.     <span class="icon-bar"></span>
  7.     <span class="icon-bar"></span>
  8.     <span class="icon-bar"></span>
  9.    </button>
  10.    <a class="navbar-brand" href="#">Me</a>
  12.  </div>
  13.   <div class="collapse navbar-collapse" id="myNavbar">
  14.    <ul class="nav navbar-nav navbar-right">
  15.     <li><a href="#">WHO</a></li>
  17.  <li><a href="#">WHAT</a></li>
  18.     <li><a href="#">WHERE</a></li>
  19.    </ul>
  21.  </div>
  22.  </div>
  23. </nav>

结果:

给导航条添加样式

使用 CSS 自定义导航条:

实例
  1. .navbar {
  2.  padding-top: 15px;
  3.  padding-bottom: 15px;
  5.  border: 0;
  6.  border-radius: 0;
  8.  margin-bottom: 0;
  9.  font-size: 12px;
  10.  letter-spacing: 5px;
  11. }
  13. .navbar-nav li a:hover {
  14.  color: #1abc9c !important;
  15. }

结果:

添加一个页脚

添加页脚并使用 CSS 设置样式:

实例
  1. <style>
  2. .bg-4 {
  3.  background-color: #2f2f2f;
  4.  color: #ffffff;
  5. }
  6. </style>
  8. <footer class="container-fluid bg-4 text-center">
  9.  <p>More Theme at <a href="https://cankaoshouce.com">cankaoshouce.com</a></p>
  11. </footer>

结果:

最后一步

通过添加你喜欢的字体来个性化你的主题。我们使用了谷歌字体库中的 "Montserrat"。

在 <head> 部分引入字体文件:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

然后您就可以在页面中使用该字体了:

实例
  1. body {
  2.  font: 20px "Montserrat", sans-serif;
  3.  line-height: 1.8;
  5.   color: #f5f6f7;
  6. }
  8. p {font-size: 16px;}

我们还创建了一个 "helper" 边距类，在我们认为需要的地方添加额外的空间；通常在每个 <h3> 和 <img> 元素之后。

实例
  1.  .margin {margin-bottom: 45px;}
运行一下

完整的 “Simply Me” 主题

完整代码
Bootstrap 主题 "Company"

分类导航