このページでは、ゼロからブートストラップのテーマを作成する方法を示します。

単純な HTML ページから開始して、次に、完全に機能的で、個人的でレスポンシブなウェブサイトになるまで、多くのコンポーネントを追加します。

結果は次のようになります。これの変更、保存、共有、利用などは全てフリーです：

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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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

Try it Yourself »

背景色の追加とテキストの中央揃え

2. jumbotron 内のテキストを中央に揃えるために .text-center クラスを追加します：

フォームを追加

コンテナを追加

2 つのコンテナ (.container-fluid) を追加し、2 番目のコンテナにカスタムクラス (.bg-grey - グレーな背景色を追加) を追加します：

例

結果：

About Company Page

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

Try it Yourself »

パディングを追加

それでは、パディングをいくつか追加して jumbotron とコンテナが見映え良くなるようにしてみましょう：

グリッドを追加

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

2. アイコンと "about text" を 2 つのカラム (.col-sm-8 および .col-sm-4) を作って分割します。

3. 768 ピクセルより小さい画面では、"logo column" を中央に表示するためメディアクエリを追加します。

例

結果：

About Company のページ

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

VISION: Our vision Lorem ipsum..

Try it Yourself »

Services コンテナを追加

新規に、3 つの同幅のカラム (.col-sm-4) を 2 つ追加します：

例

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

Try it Yourself »

アイコンのスタイリング

"Services" コンテナ内の各グリフアイコンにカスタムクラス (.logo-small) を追加します。それをスタイルするために 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;
}

結果：

About Company Page

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

Try it Yourself »

Portfolio コンテナを追加

同じ幅 (.col-sm-4) の 3 つのカラムで、新しい全幅のコンテナを作成します：

次に、画像をサムネイルの形にするため、.img-thumbnail クラスを使用します。

通常は、<img> 要素に直接 .img-thumbnail クラスを追加します。この例では、画像のテキストも指定できるように、画像を囲むように thumbnail コンテナを配置しています。

例

<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

Try it Yourself »

サムネイル画像のスタイリング

画像のスタイルに 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

Try it Yourself »

カルーセルを追加

例

<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">前章へ</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

Try it Yourself »

カルーセルのスタイリング

例

.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

Try it Yourself »

価格コンテナを追加

3 つの等幅カラム（.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

Try it Yourself »

パネルのスタイリング

例

.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

Try it Yourself »

連絡先コンテナを追加

例

<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

Chicago, US

+00 1515151515

myemail@something.com

Try it Yourself »

Google マップを追加

例

<div id="googleMap" style="height:400px;width:100%;"></div>


<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

結果：

Try it Yourself »

ナビゲーションバーを追加

小型の画面では折り畳まれる、ページの上部にナビゲーションバーを追加します：

例

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

結果：

Try it Yourself »

ナビゲーションバーをスタイル

例

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

結果：

Try it Yourself »

Scrollspy を追加

スクロールしたときにナビゲーションバーのリンクを自動的に変更する scrollspy を追加します：

フッターを追加

クリックしたときにページのトップに戻れるように、フッターに「上向き矢印」アイコンを追加します：

スムーズなスクロールを追加

jQuery を使用し、スムーズなスクロールを追加します（ナビゲーションバー内のリンクをクリック時）：

例

Try it Yourself »

最後の仕上げ

好きなフォントを追加して、あなたのテーマを自分専用します。ここでは、Google のフォントライブラリから "Montserrat" と "Lato" を使用しています。

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

スライドイン要素

また、スクロール時に要素がスライドインするアニメーション効果も作成します。これを使用する場合は、スライドイン要素に .slideanim クラスを追加し、次の CSS と jQuery を追加するだけです (所要時間、不透明度、開始する場所、スライドインの時間等々気軽に修正してください)：

CSS の例

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

Bootstrap テーマ "Company"

作成テーマ： "Company"

HTML 最初のページ

Bootstrap CDN と Jumbotron の追加

例

Company

背景色の追加とテキストの中央揃え

例

Company

フォームを追加

例

Company

コンテナを追加

例

About Company Page

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

パディングを追加

例

Company

About Company Page

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

グリッドを追加

例

About Company のページ

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

Services コンテナを追加

例

SERVICES

What we offer

POWER

LOVE

JOB DONE

GREEN

CERTIFIED

HARD WORK

アイコンのスタイリング

例

About Company Page

Lorem ipsum..

Our Values

MISSION: Our mission lorem ipsum..

SERVICES

What we offer

POWER

LOVE

JOB DONE

GREEN

CERTIFIED

HARD WORK

Portfolio コンテナを追加

例

Portfolio

What we have created

サムネイル画像のスタイリング

例

Portfolio

What we have created

カルーセルを追加

例

What our customers say

"This company is the best. I am so happy with the result!"Michael Roe, Vice President, Comment Box

"One word... WOW!!"John Doe, Salesman, Rep Inc

"Could I... BE any more happy with this company?"Chandler Bing, Actor, FriendsAlot

カルーセルのスタイリング

例

What our customers say

"This company is the best. I am so happy with the result!"Michael Roe, Vice President, Comment Box

"One word... WOW!!"John Doe, Salesman, Rep Inc

"Could I... BE any more happy with this company?"Chandler Bing, Actor, FriendsAlot

価格コンテナを追加

例

Pricing

Choose a payment plan that works for you

Basic

"This company is the best. I am so happy with the result!"
Michael Roe, Vice President, Comment Box

"One word... WOW!!"
John Doe, Salesman, Rep Inc

"Could I... BE any more happy with this company?"
Chandler Bing, Actor, FriendsAlot

"This company is the best. I am so happy with the result!"
Michael Roe, Vice President, Comment Box

"One word... WOW!!"
John Doe, Salesman, Rep Inc

"Could I... BE any more happy with this company?"
Chandler Bing, Actor, FriendsAlot