年末だし、貯めてた本をまとめて読みたい。
軽めのところからってことで Bootstrap4 を試す。
Bootstrapは気軽に使えるけど見た目キレイな部品が多数あるcss。いい感じに使いまわせそう。
ダウンロードした一式は「css」フォルダ直下に格納。
一切のカスタマイズなしに、書籍のとおりに部品を作ってみる。
できた。こんな感じ。
メッセージの横にカウント数を出すのとか、見出しのhタグに小さいパターン(h6)まであるのとか、ジャンボトロン(Jumbotron)でアイキャッチ見出しとか。いろいろ使えそう。
カードに画像を表示してテキストをオーバレイするなんてのも一瞬でできる
カードの中も primary(青)やsecondary(グレー)で色分けできるから色々と使えそう。
LINEクーポンとか、たぶんこれに近い何か使ってるんだろう。
カードヘッダとフッタに綺麗に文字配置できるのもラクでいい。
ボタン要素もたくさんあって、マウスオーバーで色が変わるホバー(hover)設定が予めしてあるから、すぐ使える。良い。
alert-dismission は広告とかcookie使用の注意メッセージでよく見る部品。あんま使いたくない。
グリッドシステムが見栄えをとても良くしてくれる。
便利だが殺風景だった自作phpサイトがこれで生まれ変わりそう。年末ゆっくり触ることにする。
$ vim my_bootstrap01.html
<コピペ用>
1 <!doctype html>
2 <html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <title>bootstrap test 01</title>
8 </head>
9 <body>
10
11 <script src="js/jquery-3.4.1.slim.min.js"></script>
12 <script src="js/bootstrap.bundle.min.js"></script>
13
14 <h1>Hello,my BootStrap!</h1>
15
16 <!-- p118 progressbar -->
17 <div class="progress mb-3">
18 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-v aluemax="100"></div>
19 </div>
20 <div class="progress mb-3">
21 <div class="progress-bar" style="width: 20%" role="progressbar" aria-valuenow="25" aria -valuemin="0" aria-valuemax="100"></div>
22 </div>
23 <div class="progress mb-3">
24 <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
25 </div>
26 <div class="progress">
27 <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
28 </div>
29
30
31 <hr>
32
33 <button type="button" class="btn btn-primary">
34 メッセージ <span class="badge badge-light">9</span>
35 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
36 <span class="sr-only">未読メッセージ</span>
37 </button>
38 <button type="button" class="btn btn-secondary">
39 メッセージ <span class="badge badge-light">ここに未読数を埋め込む</span>
40 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
41 <span class="sr-only">未読メッセージ</span>
42 </button>
43 <button type="button" class="btn btn-success">
44 メッセージ <span class="badge badge-light">ここに未読数を埋め込む</span>
45 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
46 <span class="sr-only">未読メッセージ</span>
47 </button>
48 <button type="button" class="btn btn-warning">
49 メッセージ <span class="badge badge-light">ここに未読数を埋め込む</span>
50 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
51 <span class="sr-only">未読メッセージ</span>
52 </button>
53 <button type="button" class="btn btn-light">
54 メッセージ <span class="badge badge-light">ここに未読数を埋め込む</span>
55 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
56 <span class="sr-only">未読メッセージ</span>
57 </button>
58 <button type="button" class="btn btn-dark">
59 メッセージ <span class="badge badge-light">ここに未読数を埋め込む</span>
60 <!-- sr-onlyクラスで非表示にしたスクリーンリーダー用テキスト -->
61 <span class="sr-only">未読メッセージ</span>
62 </button>
63
64 <hr>
65
66 <h1>h1 <span class="badge badge-primary">p115 badge-primary</span></h1>
67 <h2>h2 <span class="badge badge-secondary">p115 badge-secondary</span></h2>
68 <h3>h3 <span class="badge badge-success">p115 badge-success</span></h3>
69 <h4>h4 <span class="badge badge-danger">p115 badge-danger</span></h4>
70 <h5>h5 <span class="badge badge-warning">p115 badge-warning</span></h5>
71 <h6>h6 <span class="badge badge-light">p115 badge-light</span></h6>
72 <h6>h6 <span class="badge badge-dark">p115 badge-dark</span></h6>
73
74 <hr>
75
76 <span class="badge badge-pill badge-primary">p117 丸みを帯びた ピル型バッチ Primary</span>
77 <span class="badge badge-pill badge-secondary">p117 丸みを帯びた ピル型バッチ secondary</sp an>
78 <span class="badge badge-pill badge-success">p117 丸みを帯びた ピル型バッチ success</span>
79
80 <hr>
81
82 <a href="#" class="badge badge-primary">p117 アクションつきバッジ(hoverやfocus)Primary</a >
83 <br>
84 <a href="#" class="badge badge-secondary">p117 アクションつきバッジ(hoverやfocus)secondar y</a>
85 <br>
86 <a href="#" class="badge badge-success">p117 アクションつきバッジ(hoverやfocus)success</a >
87 <br>
88
89
90
91 <div class="container">
92 <div class="jumbotron">
93 <h1 class="text-success">Hello,my BootStrap Success!</h1>
94 <h1 class="display-3">p109 Jumbotron</h1>
95 <a class="lead">これはジャンボトロンのサンプルです</p>
96 </div>
97 </div>
98
99 <div class="jumbotron jumbotron-fluid">
100 <div class="container">
101 <h1 class="display-3">p109 Jumbotron-fluid</h1>
102 <a class="lead">これは全幅ジャンボトロンのサンプルです</p>
103 <a class="lead">jumbtronの下位層にcontainerが来ているので注意</p>
104 </div>
105 </div>
106
107
108
109
110 <hr>
111 <div class="card" style="max-width: 25rem;">
112 <div class="card-body">
113 <h4 class="card-title">P134 カードのテキストを整列する</h4>
114 <p class="card-text">本文(左詰め 指定不要)</p>
115 <a href="#" class="btn btn-primary">btn-prymariボタン</a>
116 </div>
117 </div>
118 <div class="card text-center" style="max-width: 25rem;">
119 <div class="card-body">
120 <h4 class="card-title">P134 カードのテキストを整列する</h4>
121 <p class="card-text">本文(中央揃え <mark>div class="card-center"</mark>)</p>
122 <a href="#" class="btn btn-primary">btn-prymariボタン</a>
123 </div>
124 </div>
125 <div class="card text-right" style="max-width: 25rem;">
126 <div class="card-body">
127 <h4 class="card-title">P134 カードのテキストを整列する</h4>
128 <p class="card-text">本文(右詰め card-right)</p>
129 <a href="#" class="btn btn-primary">btn-prymariボタン</a>
130 </div>
131 </div>
132
133 <hr>
134
135 <div class="card-columns">
136
137 <div class="card mb-2" style="max-width: 25rem;">
138 <img class="card-img" src="gakki.png" alt="p124 カード">
139 <div class="card-img-overlay">
140 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
141 <p class="card-text">p141 <mark>カードカラムはカードをタイル状にレイアウトする> コンポーネントです</mark></p>
142 </div>
143 <div class="card-footer">
144 カードのフッター card-footer
145 </div>
146 </div>
147
148 <div class="card mb-2 bg-primary text-white text-center p-3">
149 <img class="card-img" src="gakki.png" alt="p124 カード">
150 <div class="card-img-overlay">
151 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
152 <p class="card-text">p141 <mark>カードカラム primary適用</mark></p>
153 </div>
154 <div class="card-footer">
155 カードのフッター card-footer
156 </div>
157 </div>
158
159 <div class="card mb-2 bg-secondary text-white text-center p-3">
160 <img class="card-img" src="gakki.png" alt="p124 カード">
161 <div class="card-img-overlay">
162 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
163 <p class="card-text">p141 <mark>カードカラム secondary適用</mark></p>
164 </div>
165 <div class="card-footer">
166 カードのフッター card-footer
167 </div>
168 </div>
169
170 <div class="card mb-2 bg-warning text-white text-center p-3">
171 <img class="card-img" src="gakki.png" alt="p124 カード">
172 <div class="card-img-overlay">
173 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
174 <p class="card-text">p141 <mark>カードカラム warning適用</mark></p>
175 </div>
176 <div class="card-footer">
177 カードのフッター card-footer
178 </div>
179 </div>
180
181 <div class="card p-3 text-right">
182 <img class="card-img" src="gakki.png" alt="p124 カード">
183 <div class="card-img-overlay">
184 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
185 <p class="card-text">p141 <mark>右詰め text-right</mark></p>
186 </div>
187 <div class="card-footer">
188 カードのフッター card-footer
189 </div>
190 </div>
191
192 <div class="card p-3 text-left" style="max-width: 25rem;">
193 <img class="card-img" src="gakki.png" alt="p124 カード">
194 <div class="card-img-overlay">
195 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
196 <p class="card-text">141 <mark>左詰め card p-3 text-left</mark></p>
197 </div>
198 <div class="card-footer">
199 カードのフッター card-footer
200 </div>
201
202 </div>
203 <div class="card mb-2 bg-dark text-white" style="max-width: 25rem;">
204 <img class="card-img" src="gakki.png" alt="p124 カード">
205 <div class="card-img-overlay">
206 <h4 class="card-title">カードカラムによるレイアウト card-column </h4>
207 <p class="card-text">p141 <mark>カードカラムはカードをタイル状にレイアウトする> コンポーネントです</mark></p>
208 </div>
209 <div class="card-footer">
210 カードのフッター card-footer
211 </div>
212 </div>
213 </div>
214
215
216
217 <hr>
218 <div class="card mb-2" style="max-width: 25rem;">
219 <img class="card-img" src="gakki.png" alt="p124 カード">
220 <div class="card-img-overlay">
221 <h4 class="card-title">画像と重ね合わせるテキストブロック card-img-overlay </h4>
222 <p class="card-text">P137 <mark>カード画像とテキストを重ね合わせ</mark>る</p>
223 </div>
224 <div class="card-footer">
225 カードのフッター card-footer
226 </div>
227 </div>
228
229 <hr>
230 <div class="card mb-2" style="max-width: 25rem;">
231 <div class="card-header">
232 カードのヘッダー card-header
233 </div>
234 <div class="card-body">
235 <h4 class="card-title">P130 カードの見出し</h4>
236 <img class="card-img-top" src="gakki.png" alt="p124 カード">
237 <p class="card-text">
238 <mark>ここに本文</mark>
239 </p>
240 </div>
241 <div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
242 カードの色を指定するために、Colorユーティリティ(P302)のtextクラスやbgクラスを使用
することができます。色の種類にはprimary(青)やsecondary(グレー)などが入ります。
243 </div>
244 <div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
245 これはsecondary
246 </div>
247 <div class="card text-white bg-success mb-3" style="max-width: 25rem;">
248 これはsuccess
249 </div>
250 <div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
251 No live organism can continue for long to exist sanely under conditions of
252 absolute reality; even larks and katydids are supposed, by some, to dream.
253 Hill House, not sane, stood by itself against its hills, holding darkness
254 within; it had stood so for eighty years and might stand for eighty more.
255 Within, walls continued upright, bricks met neatly, floors were firm, and
256 doors were sensibly shut; silence lay steadily against the wood and stone
257 of Hill House, and whatever walked there, walked alone.
258 -- Shirley Jackson, "The Haunting of Hill House"
259 </div>
260 <div class="card-footer">
261 カードのフッター card-footer
262 </div>
263 </div>
264
265 <hr>
266 <div class="card bg-primary mb-3" style="max-width: 25rem;">
267 <div class="card-header">
268 カードのヘッダー card-header
269 </div>
270 <div class="card-body">
271 <h4 class="card-title">P130 カードの見出し</h4>
272 <p class="card-text">
273 <mark>ここに本文</mark>
274 </p>
275 </div>
276 <div class="card-footer">
277 カードのフッター card-footer
278 </div>
279 </div>
280
281 <hr>
282 <div class="card bg-secondary mb-3" style="max-width: 25rem;">
283 <div class="card-header">
284 カードのヘッダー card-header
285 </div>
286 <div class="card-body">
287 <h4 class="card-title">P130 カードの見出し</h4>
288 <p class="card-text">
289 <mark>ここに本文</mark>
290 </p>
291 </div>
292 <div class="card-footer">
293 カードのフッター card-footer
294 </div>
295 </div>
296
297 <hr>
298 <div class="card bg-danger mb-3" style="max-width: 25rem;">
299 <div class="card-header">
300 カードのヘッダー card-header
301 </div>
302 <div class="card-body">
303 <h4 class="card-title">P130 カードの見出し</h4>
304 <p class="card-text">
305 <mark>ここに本文</mark>
306 </p>
307 </div>
308 <div class="card-footer">
309 カードのフッター card-footer
310 </div>
311 </div>
312
313 <hr>
314 <div class="card bg-warning mb-3" style="max-width: 25rem;">
315 <div class="card-header">
316 カードのヘッダー card-header
317 </div>
318 <div class="card-body">
319 <h4 class="card-title">P130 カードの見出し</h4>
320 <p class="card-text">
321 <mark>ここに本文</mark>
322 </p>
323 </div>
324 <div class="card-footer">
325 カードのフッター card-footer
326 </div>
327 </div>
328
329 <hr>
330 <div class="card bg-info mb-3" style="max-width: 25rem;">
331 <div class="card-header">
332 カードのヘッダー card-header
333 </div>
334 <div class="card-body">
335 <h4 class="card-title">P130 カードの見出し</h4>
336 <p class="card-text">
337 <mark>ここに本文</mark>
338 </p>
339 </div>
340 <div class="card-footer">
341 カードのフッター card-footer
342 </div>
343 </div>
344
345 <hr>
346 <div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
347 <div class="card-header">
348 カードのヘッダー card-header
349 </div>
350 <div class="card-body">
351 <h4 class="card-title">P130 カードの見出し</h4>
352 <p class="card-text">
353 <mark>ここに本文</mark>
354 </p>
355 </div>
356 <div class="card-footer">
357 カードのフッター card-footer
358 </div>
359 </div>
360
361 <hr>
362 <div class="card mb-3" style="max-width: 15rem;">
363 <img class="card-img-top" src="icon_PDF.png" alt="p124 カード">
364 <div class="card-body">
365 <h4 class="card-title">
366 <h6 class="card-subtitle">
367 <p class="card-text">カードの上に画像を配置 card-img-top</p>
368 </div>
369 </div>
370 <hr>
371 <div class="card mb-3" style="max-width: 15rem;">
372 <div class="card-body">
373 <h4 class="card-title">
374 <h6 class="card-subtitle">
375 <p class="card-text">カードの下に画像を配置 card-img-buttom</p>
376 </div>
377 <img class="card-img-bottom" src="icon_PDF.png" alt="p124 カード">
378 </div>
379 <hr>
380
381 <div class="card" style="max-width: 15rem;">
382 <img class="card-img-top" src="icon_KEY.svg" alt="p124 カード">
383 <div class="card-body">
384 <h4 class="card-title">
385 <h6 class="card-subtitle">
386 <p class="card-text">p124 カード Bootstrapのカードは、<mark>枠で囲まれたひとまとり> まりのコンテンツを作成するための仕組み</mark>コンポーネントです。コンポーネント内部
387 には画像、テキスト、リスとグループ、リンクなど、さまざまなコンテンツを含めることがで
きます。またこのコンポーネントはflexboxをもとに構築されているため、レイアウトや他のコンポー
ネントとの組み合わせが用意です。
388 <br>
389 なお、カードはBootstrap3 におけるパネル、サムネイル、ウェルが統合されたものです
390 </div>
391 </div>
392
393
394 <hr>
395 <button type="button" class="btn btn-primary">btn-primary</button>
396 <button type="button" class="btn btn-secondary">btn-secondary</button>
397 <button type="button" class="btn btn-success">btn-success</button>
398 <button type="button" class="btn btn-danger">btn-danger</button>
399 <button type="button" class="btn btn-warning">btn-warning</button>
400 <button type="button" class="btn btn-info">btn-info</button>
401 <button type="button" class="btn btn-light">btn-light</button>
402 <button type="button" class="btn btn-dark">btn-dark</button>
403 <button type="button" class="btn btn-link">btn-link</button>
404 <hr>
405 <button type="button" class="btn btn-outline-primary">btn-outline-primary</button>
406 <button type="button" class="btn btn-outline-secondary">btn-outline-secondary</button>
407 <button type="button" class="btn btn-outline-success">btn-outline-success</button>
408 <button type="button" class="btn btn-outline-danger">btn-outline-danger</button>
409 <button type="button" class="btn btn-outline-warning">btn-outline-warning</button>
410 <button type="button" class="btn btn-outline-info">btn-outline-info</button>
411 <button type="button" class="btn btn-outline-light">btn-outline-light</button>
412 <button type="button" class="btn btn-outline-dark">btn-outline-dark</button>
413 <button type="button" class="btn btn-outline-link">btn-outline-link</button>
414 <hr>
415
416 <div class="alert alert-primary" role="alert">
417 p110 alert-primary内の<a href="#" class="alert-link">リンク #002752</a>
418 <h4 class="alert-heading">p113 アラート内の見出し alert-heading </h4>
419 <p> アラート内の段落</p>
420 <hr>
421 <p class="mb-8">アラート内の段落 mb-8</p>
422 </div>
423
424
425 <div class="alert alert-warning alert-dismissible fade show" role="alert">
426 右上の×マークをクリックするとアラートを閉じます aler-dismissible
427 <br>
428 dismiss は a few good men にも出てきた「下がってよい」
429 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
430 <span aria-hidden="true">×</span>
431 </button>
432 <hr>
433 「data-」で始まるデータ属性は、HTML5でカスタムデータ属性として定義されたものです。これ> は、適切な属性や要素がない場合に、ページやアプリケーション固有のデータを格納する目的で使わ> れます。
434 <br>
435 Bootstrapのアラートコンポーネントでは、data-dismiss="alert"を指定して、アラートを閉じる
機能を追加しました。JavaScriptを利用するBootstrapのコンポーネントのほとんどは、このように、
HTMLにデータ属性を追加するだけで利用できます。これを<mark>データ属性API</mark>と言います。
436 <br>
437 データ属性APIを利用して、JavaScriptコードを書かずに、簡単にコンポーネントに動きを追加で
きるのもBootstrapの特徴の1つです。
438 </div>
439
440
441 <div class="alert alert-primary" role="alert">
442 p110 alert-primary内の<a href="#" class="alert-link">リンク #002752</a>
443 </div>
444 <div class="alert alert-secondary" role="alert">
445 p110 alert-secondary内の<a href="#" class="alert-link">リンク #202326</a>
446 </div>
447 <div class="alert alert-success" role="alert">
448 p110 alert-success内の<a href="#" class="alert-link">リンク #0b2e13</a>
449 </div>
450 <div class="alert alert-danger" role="alert">
451 p110 alert-danger内の<a href="#" class="alert-link">リンク #491217</a>
452 </div>
453 <div class="alert alert-warning" role="alert">
454 p110 alert-warning内の<a href="#" class="alert-link">リンク #533f03</a>
455 </div>
456 <div class="alert alert-info" role="alert">
457 p110 alert-info内の<a href="#" class="alert-link">リンク #062c33</a>
458 </div>
459 <div class="alert alert-light" role="alert">
460 p110 alert-light内の<a href="#" class="alert-link">リンク #686868</a>
461 </div>
462 <div class="alert alert-dark" role="alert">
463 p110 alert-dark内の<a href="#" class="alert-link">リンク #040505</a>
464 </div>
465
466
467
468
469 <div class="container">
470 <p>固定幅コンテナクラス container</p>
471 </div>
472
473 <div class="container-fluid">
474 <p>全幅コンテナクラス container-fluid</p>
475 </div>
476 <hr>
477 <div class="container">
478 <div class="row"><!-- 1行目 -->
479 <p>ここにカラム(列)1を入れる</p>
480 </div>
481 <div class="row"><!-- 2行目 -->
482 <p>ここにカラム(列)2を入れる</p>
483 </div>
484 </div>
485 <hr>
486 <div class="container"><!-- container:箱 -->
487 <div class="row"><!-- row:行 -->
488 <!-- <p>ここにカラム(列)3を入れる</p> -->
489 <div class="col">1列目</div><!-- col:カラム -->
490 <div class="col">2列目</div><!-- col:カラム -->
491 <div class="col">3列目</div><!-- col:カラム -->
492 </div>
493 <div class="row"><!-- row:行 -->
494 <!-- <p>ここにカラム(列)3を入れる</p> -->
495 <div class="col">1列目</div><!-- col:カラム -->
496 <div class="col">2列目</div><!-- col:カラム -->
497 </div>
498 </div>
499 <hr>
500 <h3>1列カラム x 12 = 12列分</h3>
501 <div class="container"><!-- container:箱 -->
502 <div class="row"><!-- row:行 -->
503 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
504 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
505 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
506 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
507 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
508 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
509 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
510 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
511 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
512 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
513 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
514 <div class="col-1">col-1</div><!-- col-1:1列分のカラム -->
515 </div>
516 </div>
517 <hr>
518 <h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
519 <div class="container"><!-- container:箱 -->
520 <div class="row"><!-- row:行 -->
521 <div class="col-2">col-2</div><!-- col-2:2列分のカラム -->
522 <div class="col-4">col-4</div><!-- col-4:4列分のカラム -->
523 <div class="col-6">col-6</div><!-- col-6:6列分のカラム -->
524 </div>
525 </div>
526 <hr>
527 <h3>5列カラム + 7列カラム = 12列分</h3>
528 <div class="container"><!-- container:箱 -->
529 <div class="row"><!-- row:行 -->
530 <div class="col-5">col-5</div><!-- col-5:5列分のカラム -->
531 <div class="col-7">col-7</div><!-- col-7:7列分のカラム -->
532 </div>
533 </div>
534 <hr>
535 <h3>1カラム幅のみを指定(残りのカラムは自動的に等幅)</h3>
536 <div class="container"><!-- container:箱 -->
537 <div class="row"><!-- row:行 -->
538 <div class="col">col</div>
539 <div class="col-6">col-6</div><!-- col-6:6列分のカラム -->
540 <div class="col">col</div>
541 </div>
542 </div>
543 <hr>
544 <h3>ブレイクポイントによる切り替え</h3>
545 <p>Small(576px)より小だと縦に積み重なって並ぶ</p>
546 <p>Small(576px)以上だと水平に並ぶ</p>
547 <div class="container"><!-- container:箱 -->
548 <div class="row"><!-- row:行 -->
549 <div class="col-sm-8">col-sm-8</div>
550 <div class="col-sm-4">col-sm-4</div>
551 </div>
552 </div>
553
554 <div class="container"><!-- container:箱 -->
555 <div class="row"><!-- row:行 -->
556 <div class="col-sm">col-sm</div>
557 <div class="col-sm">col-sm</div>
558 <div class="col-sm">col-sm</div>
559 </div>
560 </div>
561
562 <hr>
563 <h3>可変幅カラム(col-auto)</h3>
564 <div class="container"><!-- container:箱 -->
565 <div class="row"><!-- row:行 -->
566 <div class="col">col</div>
567 <div class="col-auto">col-auto:コンテンツによって幅が可変</div>
568 <div class="col">col</div>
569 </div>
570 </div>
571 <hr>
572 <div class="container"><!-- container:箱 -->
573 <div class="row"><!-- row:行 -->
574 <div class="col">col</div>
575 <div class="col-md-auto">col-md-auto:Medium以上でコンテンツによって幅が可変</div>
576 <div class="col">col</div>
577 </div>
578 </div>
579 <hr>
580 <h3><font color="orange">等幅カラムを複数行に分割</font></h3>
581 <div class="container"><!-- container:箱 -->
582 <div class="row"><!-- row:行 -->
583 <div class="col">col</div>
584 <div class="col">col</div>
585 <div class="w-100"></div>
586 <div class="col">col</div>
587 <div class="col">col</div>
588 </div>
589 </div>
590 <hr>
591 <h3><font color="orange">行の分割をブレイクポイントで切り替え</font></h3>
592 <div class="container"><!-- container:箱 -->
593 <div class="row"><!-- row:行 -->
594 <div class="col">col</div>
595 <div class="col">col</div>
596 <div class="w-100 d-none d-md-block">Medium以上では{display:block}、未満では{displa y:none}</div>
597 <div class="w-100 d-none d-sm-block">small以上では{display:block}、未満では{display :none}</div>
598 <div class="col">col</div>
599 <div class="col">col</div>
600 </div>
601 </div>
602 <hr>
603 <h3>P40 ガター削除</h3>
604 <div class="container"><!-- container:箱 -->
605 <h3><font color="orange">containerあり、gutters削除</font></h3>
606 <div class="row no-gutters"><!-- row:行 -->
607 <div class="col">col</div>
608 <div class="col">col</div>
609 <div class="w-100 d-none d-md-block">Medium以上では{display:block}、未満では{displa y:none}</div>
610 <div class="w-100 d-none d-sm-block">small以上では{display:block}、未満では{display :none}</div>
611 <div class="col">col</div>
612 <div class="col">col</div>
613 </div>
614 </div>
615
616 <h3><font color="orange">containerなし、gutters削除</font></h3>
617 <div class="row no-gutters"><!-- row:行 -->
618 <div class="col">col</div>
619 <div class="col">col</div>
620 <div class="w-100 d-none d-md-block">Medium以上では{display:block}、未満では{displa y:none}</div>
621 <div class="w-100 d-none d-sm-block">small以上では{display:block}、未満では{display :none}</div>
622 <div class="col">col</div>
623 <div class="col">col</div>
624 </div>
625
626
627
628 <hr>
629 <h1>第1見出し</h1>
630 <h2>第2見出し</h2>
631 <h3>第3見出し</h3>
632 <h4>第4見出し</h4>
633 <h5>第5見出し</h5>
634 <h6>第6見出し</h6>
635 <hr>
636 <p class="h1">h1クラス</p>
637 <p class="h2">h2クラス</p>
638 <p class="h3">h3クラス</p>
639 <p class="h4">h4クラス</p>
640 <p class="h5">h5クラス</p>
641 <p class="h6">h6クラス</p>
642 <hr>
643 <h3>
644 主見出し<small class="text-muted">副見出し(small.text-muted)</small>
645 </h3>
646 <hr>
647 <h1 class="display-1">h1.display-1</h1>
648 <h1 class="display-2">h1.display-2</h1>
649 <h1 class="display-3">h1.display-3</h1>
650 <h1 class="display-4">h1.display-4</h1>
651 <h1>h1(標準)</h1>
652 <hr>
653 <p class="lead">目立たせたい段落(p.lead)</p>
654 <p>標準的な段落(p)</p>
655 <hr>
656
657 <p><small>「small要素」</small>を使って、テキストを細目・注釈を表すテキストとして小さなサイ
ズで表示させることができます。</small></p>
658 <p><span class="small">「smallクラス」</span>を使用してsmall要素とスタイルを一致させること> もできます</p>
659
660 <hr>
661 <p>P54 mark要素を使ってテキストを<mark>ハイライト表示</mark>することができます</p>
662 <p> ↑ <mark> < mark > </mark> を使う</p>
663 <hr>
664 <p>定義済みクラス「mark」を使用して<span class="mark">mark要素とスタイルを一致</span>させる
こともできます</p>
665 <p> ↑ <mark> < span class="mark" > </mark> を使う</p>
666
667
668
669
670
671 </body>
672 </html>