Bootstrap 模板主题 "个人"

创建一个主题 "个人"

本页将向您展示如何从头开始创建一个 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 并放入HTML中

添加 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://www.w3schools.cn/lib/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://www.w3schools.cn/lib/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>

结果:

Who Am I?

Bird

I'm an adventurer

亲自试一试 »

添加背景色和中间文本

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>

结果:

Who Am I?

Bird

I'm an adventurer

亲自试一试 »

圆形图像

使用 .img-circle 类将图像塑造成圆形:

实例

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

结果:

Who Am I?

Bird

I'm an adventurer

亲自试一试 »

更多内容

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

实例

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

结果:

Who Am I?

Bird

I'm an adventurer

What Am I?

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

亲自试一试 »

添加填充

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

实例

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

结果:

Who Am I?

Bird

I'm an adventurer

What Am I?

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 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>

结果:

What Am I?

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Search
亲自试一试 »

添加一个图标

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

结果:

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% 添加到图像中。

打开示例时,请记住调整屏幕大小以查看响应式效果:

实例

<!-- 圆形的鸟 -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">

<!-- 我们网格中的鸟: -->
<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.w3schools.cn">www.w3schools.cn</a></p>
</footer>

结果:

亲自试一试 »

最后一步

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

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

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

完成 "个人" 主题