テーマの作成：「当社」
このページには、最初からブートストラップのテーマを構築する方法を紹介します。
我々は完全に、機能的な個人情報や応答性のウェブサイトを持ってまで、私たちは、単純なHTMLページで開始し、その後、より多くのコンポーネントを追加します。
結果は次のようになります、あなたは、修正、保存、共有、使用するか、それでやりたいことは自由です。
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>ブートストラップCDNを追加し、ジャンボトロンを追加
ブートストラップ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.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="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>結果：
会社
私たちは、blablablaに特化
背景色とセンターのテキストを追加します。
1.ジャンボトロンにオレンジ色の背景色を追加します。
2.追加.text-centerジャンボトロン内のテキストを中央にクラス：
例
<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>結果：
会社
私たちは、blablablaに特化
フォームを追加
入力フィールドとボタンを持つフォームを追加します。
例
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email
Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>結果：
会社
私たちは、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>結果：
会社ページについて
イプサムLoremの..
イプサムLoremの..
私たちの価値
MISSION：私たちの使命のダミーテキスト..
VISION：私たちのビジョンLoremのイプサム..
パディングを追加します。
ジャンボトロンを作ることができますし、コンテナは、いくつかのパディングを追加することで、よく見ます：
例
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>結果：
会社
私たちは、blablablaに特化
会社ページについて
イプサムLoremの..
イプサムLoremの..
私たちの価値
MISSION：私たちの使命のダミーテキスト..
VISION：私たちのビジョンLoremのイプサム..
グリッドを追加します。
1.各コンテナにアイコン（または会社のロゴ）を追加します。
2. 2列（作成することで、アイコンと「に関するテキストを「区切り.col-sm-8と.col-sm-4
3. 768ピクセルの幅よりも小さい画面で「ロゴ欄を「中央にメディアクエリを追加します。
例
<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>結果：
会社ページについて
イプサムLoremの..
イプサムLoremの..
私たちの価値
MISSION：私たちの使命のダミーテキスト..
VISION：私たちのビジョンLoremのイプサム..
サービスコンテナを追加します。
等しい幅（の2×3列で、新しいコンテナを追加.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>
結果：
サービス
私たちが提供しています
パワー
Loremのイプサムの嘆きAMET座ります..
愛
Loremのイプサムの嘆きAMET座ります..
JOBはDONE
Loremのイプサムの嘆きAMET座ります..
緑
Loremのイプサムの嘆きAMET座ります..
CERTIFIED
Loremのイプサムの嘆きAMET座ります..
ハードワーク
Loremのイプサムの嘆きAMET座ります..
スタイリングアイコン
（カスタムクラスを追加.logo-small 「サービス」コンテナ内の各glyphiconに）。 それらのスタイルを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の..
イプサムLoremの..
私たちの価値
MISSION：私たちの使命のダミーテキスト..
VISION：私たちのビジョンLoremのイプサム..
サービス
私たちが提供しています
パワー
Loremのイプサムの嘆きAMET座ります..
愛
Loremのイプサムの嘆きAMET座ります..
JOBはDONE
Loremのイプサムの嘆きAMET座ります..
緑
Loremのイプサムの嘆きAMET座ります..
CERTIFIED
Loremのイプサムの嘆きAMET座ります..
ハードワーク
Loremのイプサムの嘆きAMET座ります..
ポートフォリオ・コンテナを追加
等しい幅（の3つの列で、新しい全幅コンテナを作成します.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>
結果：
ポートフォリオ
私たちが作成しました
パリ
はい、私たちはパリを内蔵しました
ニューヨーク
私たちは、ニューヨークを内蔵しました
サンフランシスコ
はい、サンフランは我々のもの
スタイリングサムネイル画像
画像のスタイルをCSSを使用します。 この例では、彼らの境界線を除去することによって、カードのように見えるように、各画像に100％の幅を設定しようとしました。
例
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
結果：
ポートフォリオ
私たちが作成しました
パリ
はい、私たちはパリを内蔵しました
ニューヨーク
私たちは、ニューヨークを内蔵しました
サンフランシスコ
はい、サンフランは我々のもの
カルーセルを追加
カルーセルを追加します。
例
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel
slide text-center" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<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>
<!-- Left and right controls -->
<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>結果：
どのようなお客様が言います
»それを自分で試してみてくださいカルーセルのスタイルを設定します
カルーセルのスタイルを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;
}結果：
どのようなお客様が言います
»それを自分で試してみてください価格のコンテナを追加します。
等しい幅（の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>
結果：
価格設定
あなたのために働く支払いプランを選択します。
基本
20 Loremの
15イプサム
5嘆き
2シット
エンドレス AMET
プロ
50 Loremの
25イプサム
10悲しみ
5シット
エンドレス AMET
プレミアム
100 Loremの
50イプサム
25悲しみ
10シット
エンドレス AMET
スタイリングパネル
パネルのスタイルを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;
}
結果：
価格設定
あなたのために働く支払いプランを選択します。
基本
20 Loremの
15イプサム
5嘆き
2シット
エンドレス AMET
プロ
50 Loremの
25イプサム
10悲しみ
5シット
エンドレス AMET
プレミアム
100 Loremの
50イプサム
25悲しみ
10シット
エンドレス AMET
連絡先コンテナを追加
連絡先情報を使用して新しいコンテナを追加します。
例
<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>結果：
接触
Googleマップを追加します。
（私たちの読み、詳細については、Googleマップを追加GoogleマップTutoriaの l）を：
例
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<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>結果：
»それを自分で試してみてくださいナビゲーションバーを追加します。
小さい画面上崩壊ページの上部にあるナビゲーションバーを追加します。
例
<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;
}結果：
»それを自分で試してみてくださいScrollspyを追加
スクロールしたときに自動的にナビゲーションバーのリンクを更新するscrollspyを追加します。
例
<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="http://www.w3ii.com"
title="Visit w3ii">www.w3ii.com</a></p>
</footer>結果：
»それを自分で試してみてくださいスムーズスクロールを追加します
（ナビゲーションバー内のリンクをクリック）スムーズスクロールを追加するには、jQueryのを使用します。
例
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> »それを自分で試してみてください 最後の仕上げ
あなたが好きなフォントを追加することで、あなたのテーマをパーソナライズ。 私たちは、 "モントセラト」とGoogleのフォントライブラリから「ラト」を使用しています。
内のフォントへのリンク<head>セクション：
<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">
次に、ページ内でそれらを使用することができます。
例
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;
} »それを自分で試してみてください Elementsでスライド
また、スクロール上の要素にスライドするアニメーション効果を作成しました。 あなたはそれを使用したい場合は、単に追加.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;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-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");
}
});
}); »それを自分で試してみてください