11e. ドットインストールでBootstrap4入門(CSSフレームワーク)

ひな形ファイルを作成

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

公式サイト
Introduction - Bootstrap
 

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の操作

<!--
&#91;p|m&#93;&#91;location&#93;-&#91;size&#93;

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">
			&times;
		</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>

WebProgramming入門

タイトルとURLをコピーしました