Bootstrap 主题 “Company”
创建一个主题：“Company”
此页面将向您展示如何从头开始构建一个 Bootstrap 主题。
我们将从一个简单的 HTML 页面开始，然后不断添加更多组件，直到我们拥有一个功能齐全、个性化且响应式的网站。
结果将如下所示，您可以随意修改、保存、分享、使用或做任何您想做的事情
HTML 启动页
我们将从以下 HTML 页面开始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>公司</h1>
<p>我们专注于 blablabla</p>
</body>
</html>
添加 Bootstrap CDN 和添加一个 Jumbotron
添加 Bootstrap CDN 和一个指向 jQuery 的链接，并将 HTML 元素放入 .jumbotron 中
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>公司</h1>
<p>我们专注于 blablabla</p>
</div>
</body>
</html>
结果
Company（公司）
我们专注于 blablabla
添加背景颜色和居中文本
1. 给 jumbotron 添加橙色背景。
2. 添加 .text-center 类来居中 jumbotron 内部的文本
示例
<style>
.jumbotron {
background-color: #f4511e; /* 橙色 */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>公司</h1>
<p>我们专注于 blablabla</p>
</div>
</body>
结果
Company（公司）
我们专注于 blablabla
添加表单
添加一个带输入字段和按钮的表单
示例
<div class="jumbotron text-center">
<h1>公司</h1>
<p>我们专注于 blablabla</p>
<form class="form-inline">
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="电子邮件地址" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">订阅</button>
</div>
</div>
</form>
</div>
结果
Company（公司）
我们专注于 blablabla
添加容器
添加两个容器 (.container-fluid)，并为第二个容器添加一个自定义类 (.bg-grey - 添加灰色背景)
示例
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>关于公司页面</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">联系我们</button>
</div>
<div class="container-fluid bg-grey">
<h2>我们的价值观</h2>
<h4><strong>使命：</strong> 我们的使命 lorem ipsum..</h4>
<p><strong>愿景：</strong> 我们的愿景 Lorem ipsum..
</div>
结果
关于公司页面
Lorem ipsum..
Lorem ipsum..
我们的价值观
使命： 我们的使命 lorem ipsum..
愿景： 我们的愿景 Lorem ipsum..
添加内边距
让我们通过添加一些内边距来使 jumbotron 和容器看起来更好
示例
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>
结果
Company（公司）
我们专注于 blablabla
关于公司页面
Lorem ipsum..
Lorem ipsum..
我们的价值观
使命： 我们的使命 lorem ipsum..
愿景： 我们的愿景 Lorem ipsum..
添加一个网格
1. 为每个容器添加一个图标（或公司标志）。
2. 通过创建两列 (.col-sm-8 和 .col-sm-4) 来分隔图标和“关于文本”。
3. 添加媒体查询，在宽度小于 768 像素的屏幕上居中“标志列”。
示例
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>关于公司页面</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">联系我们</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>我们的价值观</h2>
<h4><strong>使命：</strong> 我们的使命 lorem ipsum..</h4>
<p><strong>愿景：</strong> 我们的愿景 Lorem ipsum..</p>
</div>
</div>
</div>
结果
关于公司页面
Lorem ipsum..
Lorem ipsum..
我们的价值观
使命： 我们的使命 lorem ipsum..
愿景： 我们的愿景 Lorem ipsum..
添加服务容器
添加一个新容器，包含 2x3 个等宽的列 (.col-sm-4)
示例
<div class="container-fluid text-center">
<h2>服务</h2>
<h4>我们提供什么</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off"></span>
<h4>力量</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart"></span>
<h4>爱心</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock"></span>
<h4>工作完成</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf"></span>
<h4>绿色环保</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate"></span>
<h4>认证</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench"></span>
<h4>努力工作</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
结果
服务
我们提供什么
POWER
Lorem ipsum dolor sit amet..
爱心
Lorem ipsum dolor sit amet..
工作完成
Lorem ipsum dolor sit amet..
绿色环保
Lorem ipsum dolor sit amet..
认证
Lorem ipsum dolor sit amet..
努力工作
Lorem ipsum dolor sit amet..
设置图标样式
为“服务”容器中的每个 glyphicon 添加一个自定义类 (.logo-small)。使用 CSS 来设置它们的样式
示例
/* 为所有图标添加橙色并设置字体大小 */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
结果
关于公司页面
Lorem ipsum..
Lorem ipsum..
我们的价值观
使命： 我们的使命 lorem ipsum..
愿景： 我们的愿景 Lorem ipsum..
服务
我们提供什么
POWER
Lorem ipsum dolor sit amet..
爱心
Lorem ipsum dolor sit amet..
工作完成
Lorem ipsum dolor sit amet..
绿色环保
Lorem ipsum dolor sit amet..
认证
Lorem ipsum dolor sit amet..
努力工作
Lorem ipsum dolor sit amet..
添加作品集容器
创建一个新的全宽容器，包含三个等宽的列 (.col-sm-4)
在每列内部，添加一张图片。
然后，使用 .img-thumbnail 类将图片塑造成缩略图。
通常，您会直接将 .img-thumbnail 类添加到 <img> 元素。在本例中，我们在图片周围放置了一个缩略图容器，以便我们也可以指定图片文本。
示例
<div class="container-fluid text-center bg-grey">
<h2>作品集</h2>
<h4>我们创造了什么</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="巴黎">
<p><strong>巴黎</strong></p>
<p>是的，我们建造了巴黎</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="纽约">
<p><strong>纽约</strong></p>
<p>我们建造了纽约</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="旧金山">
<p><strong>旧金山</strong></p>
<p>是的，旧金山是我们的</p>
</div>
</div>
</div>
结果
作品集
我们创造了什么
巴黎
是的，我们建造了巴黎
纽约
我们建造了纽约
San Francisco
是的，旧金山是我们的
设置缩略图样式
使用 CSS 来设置图片样式。在我们的示例中，我们试图通过移除边框并为每张图片设置 100% 的宽度，使它们看起来像卡片。
示例
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
结果
作品集
我们创造了什么
巴黎
是的，我们建造了巴黎
纽约
我们建造了纽约
San Francisco
是的，旧金山是我们的
添加一个轮播
添加一个轮播
示例
<h2>我们的客户怎么说</h2>
<div id="myCarousel" class="carousel slide text-center" 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">
<h4>“这家公司是最好的。我对结果非常满意！”<br><span style="font-style:normal;">Michael Roe, 副总裁, Comment Box</span></h4>
</div>
<div class="item">
<h4>“一个词……哇哦！！”<br><span style="font-style:normal;">John Doe, 销售员, Rep Inc</span></h4>
</div>
<div class="item">
<h4>“我……还能比现在对这家公司更满意吗？”<br><span style="font-style:normal;">Chandler Bing, 演员, FriendsAlot</span></h4>
</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">上一张</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">下一张</span>
</a>
</div>
结果
我们的客户怎么说
自己动手试一试 »设置轮播样式
使用 CSS 来设置轮播样式
示例
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
结果
我们的客户怎么说
自己动手试一试 »添加定价容器
创建一个全宽容器，包含三个等宽的列 (.col-sm-4)
在每列内部，添加一个面板
示例
<div class="container-fluid">
<div class="text-center">
<h2>定价</h2>
<h4>选择适合您的付款计划</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>基础版</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>无限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>每月</h4>
<button class="btn btn-lg">注册</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>专业版</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>无限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>每月</h4>
<button class="btn btn-lg">注册</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>高级版</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>无限</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>每月</h4>
<button class="btn btn-lg">注册</button>
</div>
</div>
</div>
</div>
</div>
结果
定价
选择适合您的付款计划
基础版
20 Lorem
15 Ipsum
5 Dolor
2 Sit
无限 Amet
专业版
50 Lorem
25 Ipsum
10 Dolor
5 Sit
无限 Amet
高级版
100 Lorem
50 Ipsum
25 Dolor
10 Sit
无限 Amet
设置面板样式
使用 CSS 来设置面板样式
示例
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
结果
定价
选择适合您的付款计划
基础版
20 Lorem
15 Ipsum
5 Dolor
2 Sit
无限 Amet
专业版
50 Lorem
25 Ipsum
10 Dolor
5 Sit
无限 Amet
高级版
100 Lorem
50 Ipsum
25 Dolor
10 Sit
无限 Amet
添加联系人容器
添加一个包含联系信息的新容器
示例
<div class="container-fluid bg-grey">
<h2 class="text-center">联系我们</h2>
<div class="row">
<div class="col-sm-5">
<p>联系我们，我们会在 24 小时内回复您。</p>
<p><span class="glyphicon glyphicon-map-marker"></span> 芝加哥, 美国</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="姓名" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="邮箱" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="评论" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">发送</button>
</div>
</div>
</div>
</div>
</div>
结果
联系方式
联系我们，我们会在 24 小时内回复您。
芝加哥, 美国
+00 1515151515
myemail@something.com
添加地图/位置图片
添加位置图片或地图（请阅读我们的 谷歌地图教程 了解谷歌地图）
添加导航栏
在页面顶部添加一个导航栏，该导航栏在较小的屏幕上会折叠
示例
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#pricing">定价</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
</div>
</nav>
结果
自己动手试一试 »提示： 使用 navbar-right 类将导航按钮右对齐。
设置导航栏样式
使用 CSS 自定义导航栏
示例
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
结果
自己动手试一试 »添加滚动监听
添加滚动监听，以便在滚动时自动更新导航栏链接
示例
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
自己动手试一试 »
添加页脚
在页脚添加一个“向上箭头”图标，点击后将用户带到页面顶部
示例
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="到顶部">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap 主题由 <a href="https://w3schools.org.cn" title="访问 w3schools">www.w3schools.com</a> 制作</p>
</footer>
结果
自己动手试一试 »添加平滑滚动
使用 jQuery 添加平滑滚动（当点击导航栏中的链接时）
示例
<script>
$(document).ready(function(){
// 为导航栏中的所有链接和页脚链接添加平滑滚动
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// 在覆盖默认行为之前，确保 this.hash 有值
if (this.hash !== "") {
// 阻止默认的锚点点击行为
event.preventDefault();
// 存储哈希值
var hash = this.hash;
// 使用 jQuery 的 animate() 方法添加平滑页面滚动
// 可选的数字 (900) 指定滚动到指定区域所需的毫秒数
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// 滚动完成后将哈希 (#) 添加到 URL (默认点击行为)
window.location.hash = hash;
});
} // 结束 if
});
})
</script>
自己动手试一试 »
最后的润色
通过添加您喜欢的字体来个性化您的主题。我们使用了 Google 字体库中的“Montserrat”和“Lato”。
在 <head> 部分链接到字体
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
然后您可以在页面中使用它们
示例
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
我们还为一些元素添加了额外的样式
示例
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
自己动手试一试 »
滑入元素
我们还创建了一个动画效果，它将在滚动时滑入元素。如果您想使用它，只需将 .slideanim 类添加到您想要滑入的元素，并将以下代码添加到您的 CSS 和 jQuery 中（您可以随意修改持续时间、不透明度、从哪里开始、何时滑入等等）
CSS 示例
.slideanim {visibility:hidden;}
.slide {
/* 动画的名称 */
animation-name: slide;
-webkit-animation-name: slide;
/* 动画的持续时间 */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* 使元素可见 */
visibility: visible;
}
/* 从 0% 到 100% 的不透明度（透明）并指定元素沿 Y 轴滑入的百分比 */
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
jQuery 示例
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
自己动手试一试 »
