Bootstrap 模板主题 "个人"

创建一个主题 "个人"

本页将向您展示如何从头开始创建一个 Bootstrap 模板主题。

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

结果如下所示，您可以自由修改、保存、共享、使用:

Full Page Demo Full Source Code

HTML 起始页

我们将从下面的 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.w3ccoo.com/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.w3ccoo.com/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?

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?

I'm an adventurer

亲自试一试 »

圆形图像

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

实例

结果:

Who Am I?

I'm an adventurer

亲自试一试 »

添加填充

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

实例

结果:

Who Am I?

I'm an adventurer

What Am I?

Where To Find Me?

亲自试一试 »

添加一个按钮

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

实例

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

亲自试一试 »

添加一个图标

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

亲自试一试 »

所有图像设置响应式

将 .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设置样式:

实例

结果:

亲自试一试 »

最后一步

通过添加你喜欢的字体来个性化你的主题。我们使用了谷歌字体库中的 "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;}

亲自试一试 »

完成 "个人" 主题

整版演示完整源代码

Bootstrap 3 教程

Bootstrap 网格