码农教程 - 一技在手,衣食无忧! tools

Bootstrap主题 "Simply Me"

❮ 上一节 下一节 ❯

创建主题："Simply Me"

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

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

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

全页演示 完整源代码

HTML 起始页

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Simply Me</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>

</body>
</html>

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

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Simply Me</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-fluid">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

</body>
</html>

结果：

我是谁？

Bird

我是冒险家

亲自试一试 »

添加背景颜色和中心文本

1.向容器添加自定义类（.bg-1）以添加背景颜色。

2. 添加.text-center使文本在容器内居中的类：

示例

 <head>
  <style>
  .bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  </style>
</head>

<body>
  <div class="container-fluid bg-1 text-center">
    <h3>Who Am I?</h3>
    <img src="bird.jpg" alt="Bird">
    <h3>I'm an adventurer</h3>
  </div>
</body>

结果：

我是谁？

Bird

我是冒险家

亲自试一试 »

圆形图片

将图片塑造为圆形.img-circle类：

示例

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

结果：

我是谁？

Bird

我是冒险家

亲自试一试 »

更多内容

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

示例

<head>
  <style>
  .bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  .bg-2 {
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 {
    background-color: #ffffff; /* White */
    color: #555555;
  }
  </style>
</head>

<body>

<div class="container-fluid bg-1 text-center">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" class="img-circle" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
</div>

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <p>Lorem ipsum..</p>
</div>

</body>

结果：

我是谁？

Bird

我是冒险家

我是什么？

Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

在哪里可以找到我？

Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

亲自试一试 »

添加填充

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

示例

<style>
.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
}
</style>

结果：

我是谁？

Bird

我是冒险家

我是什么？

Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

在哪里可以找到我？

Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

亲自试一试 »

添加按钮

将按钮添加到中间容器：

示例

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

结果：

我是什么？

Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

搜索
亲自试一试 »

添加图标

在 "Search" 按钮上添加搜索图标：

示例

<a href="#" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-search"></span> Search
</a>

结果：

亲自试一试 »

修改第三个容器（添加网格）

在第三个容器内添加三列等宽的列（.col-sm-4）：

示例

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds1.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds2.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds3.jpg" alt="Image">
    </div>
  </div>
</div>

结果：

在哪里可以找到我？

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

Image

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

Image

Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。

Image
亲自试一试 »

使图片具有响应能力

添加.img-responsive对所有图片进行分类。

添加display:inline到第一张图片以强制其居中（.img-responsive类添加display:block到图片，这使其跳到屏幕左侧）。

如果您希望图片在开始堆叠时跨越屏幕的整个宽度，请添加width:100%到图片。

打开示例时，记得调整屏幕大小以查看响应效果：

示例

<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">

<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">
亲自试一试 »

添加导航栏

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

示例

<nav class="navbar navbar-default">
  <div class="container">
    <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="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
  </div>
</nav>

结果：

亲自试一试 »

导航栏样式

使用CSS自定义导航栏：

示例

.navbar {
  padding-top: 15px;
  padding-bottom: 15px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 5px;
}

.navbar-nav li a:hover {
  color: #1abc9c !important;
}

结果：

亲自试一试 »

添加页脚

添加页脚并使用 CSS 对其进行样式设置：

示例

<style>
.bg-4 {
  background-color: #2f2f2f;
  color: #ffffff;
}
</style>

<footer class="container-fluid bg-4 text-center">
  <p>Bootstrap Theme Made By <a href="https://www.91xjr.com">www.91xjr.com</a></p>
</footer>

结果：

亲自试一试 »

最后的接触

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

链接到字体<head>部分：

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

然后就可以在页面中使用了：

示例

body {
  font: 20px "Montserrat", sans-serif;
  line-height: 1.8;
  color: #f5f6f7;
}

p {font-size: 16px;}

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

示例

.margin {margin-bottom: 45px;}
亲自试一试 »

完成 "Simply Me" 主题


全页演示 完整源代码

❮ 上一节 下一节 ❯