ブートストラップテーマ「会社」

❮ 前次 ❯

テーマを作成する：「会社」

このページでは、Bootstrapテーマを最初から作成する方法を説明します。

単純なHTMLページから始めて、完全に機能し、個人的でレスポンシブなWebサイトができるまで、コンポーネントを追加していきます。

結果は次のようになり、自由に変更、保存、共有、使用、または好きなことを行うことができます。

フルページデモ

HTMLスタートページ

次のHTMLページから始めます。

ブートストラップCDNを追加し、ジャンボトロンを追加します

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.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>Company</h1>
<p>We specialize in blablabla</p>
</div>

</body>
</html>

結果：

会社

私たちはblablablaを専門としています

背景色と中央のテキストを追加する

1.ジャンボトロンにオレンジ色の背景色を追加します。

2..text-centerジャンボトロン内のテキストを中央に配置するクラスを追加します。

例

結果：

会社

私たちは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>

結果：

会社

私たちはblablablaを専門としています

コンテナを追加する

2つのコンテナ（.container-fluid）を追加し、2番目のコンテナにカスタムクラスを追加します（.bg-grey -灰色の背景色を追加します）：

例

結果：

会社ページについて

Lorem Ipsum ..

私達の価値

ミッション：私たちのミッションへようこそ。

ビジョン：私たちのビジョンをチェックしてください。

パディングを追加

いくつかのパディングを追加して、ジャンボトロンとコンテナの見栄えを良くしましょう。

例

結果：

会社

私たちはblablablaを専門としています

会社ページについて

Lorem Ipsum ..

私達の価値

ミッション：私たちのミッションへようこそ。

ビジョン：私たちのビジョンをチェックしてください。

グリッドを追加する

1.各コンテナにアイコン（または会社のロゴ）を追加します。

.col-sm-8 2. 2つの列（および.col-sm-4）を作成して、アイコンと「テキストについて」を区切ります。

3.メディアクエリを追加して、幅768ピクセル未満の画面の「ロゴ列」を中央に配置します。

例

結果：

会社ページについて

Lorem Ipsum ..

私達の価値

ミッション：私たちのミッションへようこそ。

ビジョン：私たちのビジョンをチェックしてください。

サービスコンテナの追加

同じ幅（.col-sm-4）の2x3列の新しいコンテナを追加します。

例

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

結果：

サービス

私たちが提供するもの

パワー

本当にありがとうございました。

愛

本当にありがとうございました。

仕事は終わりました

本当にありがとうございました。

緑

本当にありがとうございました。

認証済み

本当にありがとうございました。

ハードワーク

本当にありがとうございました。

スタイリングアイコン

.logo-small「Services」コンテナ内の各グリフィコンにカスタムクラス（）を追加します。CSSを使用してスタイルを設定します。

例

/* Add an orange color to all icons and set the font-size */
.logo-small {
color: #f4511e;
font-size: 50px;
}

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

結果：

会社ページについて

Lorem Ipsum ..

私達の価値

ミッション：私たちのミッションへようこそ。

ビジョン：私たちのビジョンをチェックしてください。

サービス

私たちが提供するもの

パワー

本当にありがとうございました。

愛

本当にありがとうございました。

仕事は終わりました

本当にありがとうございました。

緑

本当にありがとうございました。

認証済み

本当にありがとうございました。

ハードワーク

本当にありがとうございました。

ポートフォリオコンテナを追加する

.col-sm-4同じ幅（）の3つの列を持つ新しい全幅コンテナを作成します。

Inside each column, add an image.

Then, use the .img-thumbnail class to shape the image to a thumbnail.

Normally, you would add the .img-thumbnail class directly to the <img> element. In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.

Example

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

Result:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Styling Thumbnail Images

Use CSS to style the images. In our example, we have tried to make them look like cards, by removing their border, and set a 100% width on each image.

Example

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

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

Result:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Add a Carousel

Add a carousel:

Example

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

Result:

What our customers say

Style The Carousel

Use CSS to style the carousel:

Example

.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;
}

Result:

What our customers say

Add Pricing Container

Create a full width container, with three columns of equal width (.col-sm-4):

Inside each column, add a panel:

Example

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

Result:

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

Styling Panels

Use CSS to style the panels:

Example

.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;
}

Result:

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

Add Contact Container

Add a new container with contact information:

Example

<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> [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="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>

Result:

CONTACT

Chicago, US

+00 1515151515

[email protected]

Add Map/Location Image

Add a location image or a map (read our Google Maps Tutorial for google maps):

Example

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

Result:

Add a Navbar

Add a navbar at the top of the page that collapses on smaller screens:

Example

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

Result:

Tip: Right-align the navigation buttons with the navbar-right class.

Style The Navbar

Use CSS to customize the navigation bar:

Example

.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;
}

Result:

Add Scrollspy

Add scrollspy to automatically update navbar links when scrolling:

Example

Add a Footer

Add an "Up Arrow" icon to the footer, which will take the user to the top of the page when clicked on:

Example

Result:

Adding Smooth Scrolling

Use jQuery to add smooth scrolling (when clicking on the links in the navbar):

Example

Final Touch

Personalize your Theme by adding a font that you like. We have used "Montserrat" and "Lato" from Google's Font Library.

Link to the font in the <head> section:

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

Then you can use them in the page:

Example

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

We have also added some extra style to some elements:

Example

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

Slide In Elements

We have also created an animation effect which will slide in elements on scroll. If you want to use it, just add the .slideanim class to the element you want to slide in, and add the following to your CSS and jQuery (feel free to modify the duration, opacity, where to start, when to slide in, and so on):

CSS Example

.slideanim {visibility:hidden;}
.slide {
  /* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@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 Example

$(window).scroll(function() {
$(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
});
});

Complete "Company" Theme

Full Page Demo

❮ Previous Next ❯

ブートストラップ3チュートリアル

ブートストラップグリッド