Bootstrap 主题 "公司"
创建一个主题："公司"
本页将向您展示如何从头开始构建一个 Bootstrap 主题。
我们将从一个简单的 HTML 页面开始，然后逐步添加更多组件，直到我们拥有一个功能齐全、个性化和响应式的网站。
最终结果将如下所示，您可以随意修改、保存、分享、使用或对其进行任何操作。
HTML 起始页
我们将从以下 HTML 页面开始
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题 公司</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 和添加巨型页眉
添加 Bootstrap CDN 和一个指向 jQuery 的链接，并将 HTML 元素放入一个 .jumbotron 中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题 公司</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="jumbotron">
<h1>公司</h1>
<p>我们专注于 blablabla</p>
</div>
</body>
</html>
结果
公司
我们专注于 blablabla
添加背景颜色和居中文本
1. 为巨型页眉添加橙色背景颜色。
2. 添加 .text-center 类来居中巨型页眉内的文本。
示例
<style>
.jumbotron {
background-color: #f4511e; /* 橙色 */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>公司</h1>
<p>我们专注于 blablabla</p>
</div>
</body>
结果
公司
我们专注于 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>
结果
公司
我们专注于 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..
添加填充
让我们通过添加一些填充使巨型页眉和容器看起来更好。
示例
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>
结果
公司
我们专注于 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>
结果
服务
我们提供什么
力量
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..
样式图标
为“服务”容器中的每个图示字体添加一个自定义类 (.logo-small)。使用 CSS 对其进行样式设置。
示例
/* 为所有图标添加橙色并设置字体大小 */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
结果
关于公司页面
Lorem ipsum..
Lorem ipsum..
我们的价值观
使命： 我们的使命 lorem ipsum..
愿景： 我们的愿景 Lorem ipsum..
服务
我们提供什么
力量
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>
结果
作品集
我们的作品
巴黎
是的，我们建造了巴黎
纽约
我们建造了纽约
旧金山
是的，旧金山是我们的
为缩略图图片添加样式
使用 CSS 为图片添加样式。在我们的示例中，我们尝试通过移除边框并为每张图片设置 100% 的宽度来使它们看起来像卡片。
示例
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
结果
作品集
我们的作品
巴黎
是的，我们建造了巴黎
纽约
我们建造了纽约
旧金山
是的，旧金山是我们的
添加轮播
添加一个轮播
示例
<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;">迈克尔·罗伊，副总裁，评论框</span></h4>
</div>
<div class="item">
<h4>"一个字... 哇！"<br><span style="font-style:normal;">约翰·道，销售员，瑞普公司</span></h4>
</div>
<div class="item">
<h4>"我能... 比这公司更满意吗？" <br><span style="font-style:normal;">钱德勒·宾，演员，朋友很多</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> [email protected]</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>
结果
联系我们
添加地图/位置图片
添加位置图片或地图（阅读我们的 Google 地图教程 了解谷歌地图）。
添加导航栏
在页面顶部添加一个导航栏，在较小的屏幕上会折叠起来
示例
<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;
});
} // End 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");
}
});
});
亲自尝试 »
