テーマの作成： "Simply Me"
このページでは、構築する方法を紹介しますBootstrap最初からテーマを。
我々は完全に、機能的な個人情報や応答性のウェブサイトを持ってまで、私たちは、単純なHTMLページで開始し、その後、より多くのコンポーネントを追加します。
結果は次のようになります、あなたは、修正、保存、共有、使用するか、それでやりたいことは自由です。
HTMLスタートページ
私たちは、次の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">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>結果：
私は誰？
私は冒険家です
背景色とセンターのテキストを追加します。
1.背景色を追加するためにコンテナにカスタムクラス（.bg-1）を追加します。
2.追加.text-centerコンテナ内のテキストを中央にクラス：
例
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>結果：
私は誰？
私は冒険家です
サークルイメージ
円にイメージを形作る.img-circleクラス：
より多くのコンテンツ
より多くのコンテンツを追加し、新しいコンテナの中に置きます：
例
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
.bg-2 {
background-color:
#474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
/* White */
color: #555555;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>結果：
私は誰？
私は冒険家です
私は何でしょう？
Loremのイプサムの悲しみは、AMET座るconsectetur adipiscing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
私を見つけるためにどこに？
Loremのイプサムの悲しみは、AMET座るconsectetur adipiscing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
パディングを追加します。
いくつかのパディングを追加することにより、容器が良い見えるようにすることができます：
例
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>結果：
私は誰？
私は冒険家です
私は何でしょう？
Loremのイプサムの悲しみは、AMET座るconsectetur adipiscing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
私を見つけるためにどこに？
Loremのイプサムの悲しみは、AMET座るconsectetur adipiscing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
ボタンを追加します。
ミッドコンテナにボタンを追加します。
例
<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>
結果：
私は何でしょう？
Loremのイプサムの悲しみは、AMET座るconsectetur adipiscing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
サーチアイコンを追加します。
「検索」ボタンを検索アイコンを追加します。
例
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
結果：
»それを自分で試してみてください第三の容器を（グリッドを追加）を変更
第三の容器（内側に同じ幅の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>結果：
私を見つけるためにどこに？
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。
画像は応答してください
追加.img-responsiveすべての画像にクラスを。
追加display:inline最初の画像には、センタリングされるように強制する（ .img-responsiveクラスが追加されますdisplay:block 、画面の左側にジャンプさせる画像に）。
あなたはそれがスタックを開始したときの画像が画面の幅全体に及ぶようにしたい場合は、追加width:100%イメージに。
例を開くと、応答性の効果を確認するには、画面のサイズを変更することを忘れないでください：
例
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive
img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<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"> »それを自分で試してみてください ナビゲーションバーを追加します。
ページの上部に標準のナビゲーションバーを追加し、それが小さな画面に折りたたみ可能にします：
例
<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>結果：
»それを自分で試してみてくださいスタイルザ・ナビゲーションバー
ナビゲーションバーをカスタマイズするために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;
}結果：
»それを自分で試してみてくださいフッターを追加
フッターを追加し、それをスタイルするためにCSSを使用します。
例
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>結果：
»それを自分で試してみてください最後の仕上げ
あなたが好きなフォントを追加することで、あなたのテーマをパーソナライズ。 私たちは、Googleのフォントライブラリから「モントセラト」を使用しています。
内のフォントへのリンク<head>セクション：
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
次に、ページにそれを使用することができます。
例
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} 我々はまた、我々はそれが必要だと思うの余分なスペースを追加するために「ヘルパー」余裕のクラスを作成しています。 通常、各後<h3>と<img>要素。