w3schools 教程

HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP  教程库参考手册技术文章测验练习 HOWTO FAQ

❮ 上一节下一节 ❯

Bootstrap 模板主题 "公司"

创建一个主题 "公司"

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

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

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

Full Page Demo Full Source Code

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>Company</h1>
<p>We specialize in 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://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="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>

</body>
</html>

结果:

Company

We specialize in blablabla

亲自试一试 »

添加背景色和中间文本

1. 为 jumbotron 添加橙色背景色。

2. 添加 .text-center 类以将文本居中放置在 jumbotron 中:

实例

<style>
.jumbotron {
background-color: #f4511e; /* Orange */
  color: #ffffff;
}
</style>

<body>
<div class="jumbotron text-center">
    <h1>Company</h1>
    <p>We specialize in blablabla</p>
</div>
</body>

结果:

Company

We specialize in blablabla

亲自试一试 »

添加表单

添加带有输入字段和按钮的表单:

实例

<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
    <div class="input-group">
      <input type="email" class="form-control" size="50" placeholder="Email Address" required>
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger">Subscribe</button>
      </div>
    </div>
</form>
</div>

结果:

Company

We specialize in blablabla

亲自试一试 »

添加容器

添加两个容器 (.container-fluid)，并将自定义类添加到第二个容器 (.bg-grey - 添加灰色背景色):

实例

<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>

<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>

<div class="container-fluid bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>

结果:

About Company Page

Lorem ipsum..

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

亲自试一试 »

添加填充

让我们通过添加填充来使 jumbotron 和容器看起来很好:

实例

<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}

.container-fluid {
padding: 60px 50px;
}
</style>

结果:

Company

We specialize in blablabla

About Company Page

Lorem ipsum..

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

亲自试一试 »

添加网格

1. 在每个容器上添加图标（或公司徽标）。

2. 通过创建两列 (.col-sm-8 和 .col-sm-4) 来分隔图标和"文本"

3. 添加媒体查询，以在小于768像素宽的屏幕上居中显示 "logo column" 。

实例

<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>About Company Page</h2>
      <h4>Lorem ipsum..</h4>
      <p>Lorem ipsum..</p>
      <button class="btn btn-default btn-lg">Get in Touch</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>Our Values</h2>
      <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
      <p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
    </div>
</div>
</div>

结果:

About Company Page

Lorem ipsum..

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

亲自试一试 »

添加服务容器

添加一个新容器，包含2x3列等宽 (.col-sm-4):

实例

<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-off"></span>
      <h4>POWER</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-heart"></span>
      <h4>LOVE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-lock"></span>
      <h4>JOB DONE</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>GREEN</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-certificate"></span>
      <h4>CERTIFIED</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-wrench"></span>
      <h4>HARD WORK</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
</div>
</div>

结果:

SERVICES

What we offer

POWER

Lorem ipsum dolor sit amet..

LOVE

Lorem ipsum dolor sit amet..

JOB DONE

Lorem ipsum dolor sit amet..

GREEN

Lorem ipsum dolor sit amet..

CERTIFIED

Lorem ipsum dolor sit amet..

HARD WORK

Lorem ipsum dolor sit amet..

亲自试一试 »

样式图标

向 "Services" 容器中的每个glyphicon添加自定义类 (.logo-small) 。使用CSS设置样式:

实例

/* 为所有图标添加橙色并设置字体大小 */
.logo-small {
color: #f4511e;
font-size: 50px;
}

.logo {
color: #f4511e;
font-size: 200px;
}

结果:

About Company Page

Lorem ipsum..

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

SERVICES

What we offer

POWER

Lorem ipsum dolor sit amet..

LOVE

Lorem ipsum dolor sit amet..

JOB DONE

Lorem ipsum dolor sit amet..

GREEN

Lorem ipsum dolor sit amet..

CERTIFIED

Lorem ipsum dolor sit amet..

HARD WORK

Lorem ipsum dolor sit amet..

亲自试一试 »

添加 Portfolio 容器

创建一个新的全宽容器，三列宽度相等 (.col-sm-4):

在每个列中，添加一个图像。

然后，使用 .img-thumbnail 类将图像塑造成缩略图。

通常，会将 .img-thumbnail 类直接添加到 <img> 元素中。在本例中，我们在图像周围放置了一个缩略图容器，这样我们也可以指定图像文本。

实例

<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="paris.jpg" alt="Paris">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

结果:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

亲自试一试 »

设置缩略图的样式

使用CSS设置图像样式。在我们的示例中，我们试图通过移除边框，并在每个图像上设置 100% 的宽度，使它们看起来像卡片。

实例

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
border-radius: 0;
}

.thumbnail img {
width: 100%;
  height: 100%;
margin-bottom: 10px;
}

结果:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

亲自试一试 »

添加轮播

添加一个轮播:

实例

<h2>What our customers say</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>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
    </div>
    <div class="item">
      <h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
    </div>
    <div class="item">
      <h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, 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">Previous</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">Next</span>
</a>
</div>

结果:

What our customers say

亲自试一试 »

轮播的风格

使用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;
}

结果:

What our customers say

亲自试一试 »

添加全宽容器

创建一个全宽容器，三列宽度相等 (.col-sm-4):

在每列中，添加一个面板:

实例

<div class="container-fluid">
<div class="text-center">
    <h2>Pricing</h2>
    <h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Basic</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>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$19</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Pro</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>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$29</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
   <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Premium</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>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$49</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
</div>
</div>

结果:

Pricing

Choose a payment plan that works for you

Basic

20 Lorem

15 Ipsum

5 Dolor

2 Sit

Endless Amet

$19

per month

Pro

50 Lorem

25 Ipsum

10 Dolor

5 Sit

Endless Amet

$29

per month

Premium

100 Lorem

50 Ipsum

25 Dolor

10 Sit

Endless Amet

$49

per month

亲自试一试 »

设置面板样式

使用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;
}

结果:

Pricing

Choose a payment plan that works for you

Basic

20 Lorem

15 Ipsum

5 Dolor

2 Sit

Endless Amet

$19

per month

Pro

50 Lorem

25 Ipsum

10 Dolor

5 Sit

Endless Amet

$29

per month

Premium

100 Lorem

50 Ipsum

25 Dolor

10 Sit

Endless Amet

$49

per month

亲自试一试 »

添加联系人容器

添加包含联系人信息的新容器:

实例

<div class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
    <div class="col-sm-5">
      <p>Contact us and we'll get back to you within 24 hours.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</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="Name" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
</div>
</div>

结果:

CONTACT

Contact us and we'll get back to you within 24 hours.

Chicago, US

+00 1515151515

myemail@something.com

亲自试一试 »

添加地图/位置图像

添加位置图像或地图（请阅读我们的 Google 地图教程了解谷歌地图）:

实例

<img src="map.jpg" style="width:100%">

结果:

亲自试一试 »

添加导航栏

在页面顶部添加一个导航栏，可在较小的屏幕上折叠:

实例

<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">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">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="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme Made By <a href="https://www.w3ccoo.com" title="Visit w3schools">www.w3ccoo.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>

亲自试一试 »

最后一步

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

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

<link href="/fonts/css.asp?family=Montserrat" rel="stylesheet" type="text/css">

<link href="/fonts/css.asp?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");
    }
});
});

亲自试一试 »

完成 "公司" 主题

整版演示完整源代码

❮ 上一节下一节 ❯

颜色选择器

颜色选择器

Bootstrap 实例

Bootstrap 测验/考试

阿里云99计划，新老同享，低价长效，助力开发者普惠上云！

读后有收获微信请站长喝咖啡

weixinpay

报告错误

打印

关于

学习路线

W3Schools 在线教程提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。

Copyright 2020-2024 关于我们 | 隐私条款 | 学习路线 | 京ICP备14045893号-9