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

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

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

HTML 最初のページ

Bootstrap CDN の追加とコンテナ内に要素を配置

Bootstrap CDN と jQuery へのリンクを追加し、HTML 要素をコンテナ内に配置します：

例

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</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="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>

</body>
</html>

結果：

Who Am I?

I'm an adventurer

Try it Yourself »

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

1. 背景色を追加するために、コンテナへカスタムクラス (.bg-1) を追加します。

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

例

結果：

Who Am I?

I'm an adventurer

Try it Yourself »

画像を円形に

その他のコンテンツ

その他のコンテンツを追加し、それを新しいコンテナ内に配置します：

例

結果：

Who Am I?

I'm an adventurer

What Am I?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Where To Find Me?

Try it Yourself »

パディングを追加

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

例

結果：

Who Am I?

I'm an adventurer

What Am I?

Where To Find Me?

Try it Yourself »

ボタンを追加

例

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
  <a href="#" class="btn btn-default btn-lg">Search</a>
</div>

結果：

What Am I?

Try it Yourself »

アイコンを追加

3 番目のコンテナを変更 (グリッド追加)

3 番目のコンテナ内に 3 つの等幅なカラム (.col-sm-4) を追加します：

例

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds1.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds2.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds3.jpg" alt="Image">
    </div>
</div>
</div>

結果：

Where To Find Me?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Try it Yourself »

画像をレスポンシブ化する

強制的に中央揃えにするため、最初の画像に display:inline を追加します（.img-responsive クラスは、画面の左にジャンプさせるため、イメージに display:block を追加します）。

スタックを開始したときに、イメージが画面いっぱいに広がるようにしたい場合は、イメージに width:100% を追加します。

レスポンシブ効果を確認するには、例を開くときに画面のサイズを変更することを忘れないでください：

例

<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">


<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">

Try it Yourself »

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

ページ上部に標準のナビゲーションバーを追加し、小型画面では折りたたみできるようにします：

例

<nav class="navbar navbar-default">
<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="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
</div>
</nav>

結果：

Try it Yourself »

ナビゲーションバーのスタイル設定

ナビゲーションバーをカスタマイズするために CSS を使用します：

例

.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
}

.navbar-nav li a:hover {
    color: #1abc9c !important;
}

結果：

Try it Yourself »

フッターを追加

例

結果：

Try it Yourself »

最後の仕上げ

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

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

通常、各 <h3> と <img> の後に必要と思われる特別なスペースを追加するため、 "helper" マージンクラスを作成しました。

Bootstrap テーマ "Simply Me"

作成テーマ： "Simply Me"

HTML 最初のページ

Bootstrap CDN の追加とコンテナ内に要素を配置

例

Who Am I?

I'm an adventurer

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

例

Who Am I?

I'm an adventurer

画像を円形に

例

Who Am I?

I'm an adventurer

その他のコンテンツ

例

Who Am I?

I'm an adventurer

What Am I?

Where To Find Me?

パディングを追加

例

Who Am I?

I'm an adventurer

What Am I?

Where To Find Me?

ボタンを追加

例

What Am I?

アイコンを追加

例

3 番目のコンテナを変更 (グリッド追加)

例

Where To Find Me?

画像をレスポンシブ化する

例

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

例

ナビゲーションバーのスタイル設定

例

フッターを追加

例

最後の仕上げ

例

例

完成した "Simply Me" テーマ