ひな形ファイルを作成
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap4でスタイルを設定
背景色や文字の色を設定
<div class="bg-primary">BOX</div> <!-- 背景色が青 --> <div class="text-warning">BOX</div> <!-- 文字がオレンジ -->
※ 色の種類は下記を参照
※ Utilitiesで紹介されているスタイルは !important という指定が効いていて、他のclassで上書きできなくなっています
Colors – Bootstrap
テキストのスタイリング
<div class="text-right">BOX</div> <!-- 右揃え --> <div class="font-weight-bold">BOX</div> <!-- 太字 --> <h2 class="font-weight-normal">Hello Bootstrap</h2> <!-- 太字の設定を外す --> <h2 class="display-4">Hello Bootstrap</h2> <!-- 表示見出し4に設定(より目立つ大きさ) -->
幅や高さを設定
<div class="bg-primary w-25">BOX</div> <!-- 幅を25%に設定 --> <div class="bg-success h-50">BOX</div> <!-- 高さを50%に設定 -->
paddingやmarginの操作
<!-- [p|m][location]-[size] location: - t, b, l, r - x, y size: - 0 - 1: 0.25rem - 2: 0.5rem - 3: 1.0rem - 4: 1.5rem - 5: 3.0rem - auto --> <div class="bg-primary pt-3">BOX</div> <!-- padding-top: 1rem; --> <div class="bg-success my-0 mx-auto">BOX</div> <!-- margin: 0 auto; -->
ボタンのスタイル設定
<button class="btn btn-primary">OK</button> <!-- hoverした時の効果も付いてます --> <button class="btn btn-info btn-sm">OK</button> <!-- ボタンサイズ：スモール -->
グリッドレイアウトについて
<div class="container"> <div class="row"> <div class="col-4 bg-primary">1</div> <!-- 4:6:2でレイアウト; --> <div class="col-6 bg-secondary">2</div> <div class="col-2 bg-info">3</div> </div> </div>
レスポンシブの仕組み
<!-- ブレークポイント 576px and up: sm 768px and up: md 992px and up: lg 1200px and up: xl --> <div class="container"> <div class="row"> <div class="col-8 bg-primary">1</div> <div class="col-2 d-md-none bg-secondary">2</div> <!-- md以上で非表示 --> <div class="d-none d-md-block col-md-2 bg-secondary">3</div> <!-- md以上で表示 --> </div> </div>
Bootstrap記述例
<header>
<!-- アラートの実装 -->
<div class="alert alert-info text-center mb-0 rounded-0 alertdismissible fade show">
News! News! News! News! News!
<button class="close" data-dismiss="alert">
×
</button>
</div>
<div class="container">
<!-- ナビゲーションバーの実装 -->
<nav class="navbar navbar-expand-sm navbar-light">
<a href="" class="navbar-brand">Logo</a>
<!-- ハンバーガーメニューの実装 -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="" class="nav-link">Link</a></li>
<li class="nav-item"><a href="" class="nav-link">Link</a></li>
<li class="nav-item"><a href="" class="nav-link">Link</a></li>
</ul>
</div>
</nav>
</div>
<div class="text-white text-center py-5">
<h1 class="display-4 mb-4">Dotinstall App</h1>
<a href="" class="btn btn-primary btn-lg">Get It Now!</a>
</div>
</header>
<main>
<section class="py-5">
<h2 class="text-center mb-5">Features</h2>
<div class="container">
<div class="mb-5 row">
<div class="col-sm-8">
<h3>Awesome</h3>
<p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p>
</div>
<div class="col-sm-4">
<img src="img/phone.png" class="w-100 rounded-circle">
</div>
</div>
</div>
</section>
<section class="bg-light text-center py-5">
<h2 class="mb-5">Plans</h2>
<div class="container">
<!-- 表の作成 -->
<table class="table table-hover">
<thead>
<tr><th>Plan A</th><th>Plan B</th></tr>
</thead>
<tbody>
<tr><td>AA</td><td>BB</td></tr>
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td>AAAA</td><td>BBBB</td></tr>
</tbody>
</table>
</div>
</section>
<section class="py-5">
<h2 class="mb-5 text-center">How to use</h2>
<div class="container">
<!-- タブメニューの実装 -->
<ul class="nav nav-tabs">
<!-- タブの切り替えができるように、Bootstrapで実装されているJavaScript(data-toggle)を使用する -->
<li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li>
<li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
</ul>
<div class="tab-content py-4">
<div id="ios" class="tab-pane active">
<!-- ツールチップの実装 -->
<p>Hello iOS. Hello iOS. <span class="font-weight-bold text-info" data-toggle="tooltip" title="This is a awesome">Hello iOS. Hello iOS.</span> Hello iOS. Hello iOS. Hello iOS. Hello iOS.</p>
</div>
<div id="android" class="tab-pane">
<p>Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android.</p>
</div>
</div>
</div>
</section>
<section class="bg-light text-center py-5">
<a href="" class="btn btn-primary btn-lg">Get It Now!</a>
</section>
</main>
<footer class="text-center text-muted py-4">
Copyright YYYY dotinstall.com
</footer>
<script>
$(function(){
'use strict';
$('[data-toggle="tooltip"]').tooltip();
})
</script>
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Search”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Pages”][/siteorigin_widget]
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]