min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

Bootstrap4 で使えそうなcss部品をストックしておく

年末だし、貯めてた本をまとめて読みたい。

f:id:min117:20191222122358j:plain

軽めのところからってことで Bootstrap4 を試す。

getbootstrap.com

Bootstrapは気軽に使えるけど見た目キレイな部品が多数あるcss。いい感じに使いまわせそう。

 

ダウンロードした一式は「css」フォルダ直下に格納。

f:id:min117:20191222122602p:plain

一切のカスタマイズなしに、書籍のとおりに部品を作ってみる。

 

 

 

 

できた。こんな感じ。

f:id:min117:20191222121837p:plain

メッセージの横にカウント数を出すのとか、見出しのhタグに小さいパターン(h6)まであるのとか、ジャンボトロン(Jumbotron)でアイキャッチ見出しとか。いろいろ使えそう。

 

カードに画像を表示してテキストをオーバレイするなんてのも一瞬でできる

f:id:min117:20191222121900p:plain

 

カードの中も primary(青)やsecondary(グレー)で色分けできるから色々と使えそう。

f:id:min117:20191222121942p:plain

f:id:min117:20191222121958p:plain

LINEクーポンとか、たぶんこれに近い何か使ってるんだろう。

 

カードヘッダとフッタに綺麗に文字配置できるのもラクでいい。

f:id:min117:20191222122048p:plain

ボタン要素もたくさんあって、マウスオーバーで色が変わるホバー(hover)設定が予めしてあるから、すぐ使える。良い。

 

alert-dismission は広告とかcookie使用の注意メッセージでよく見る部品。あんま使いたくない。

f:id:min117:20191222122112p:plain

グリッドシステムが見栄えをとても良くしてくれる。

f:id:min117:20191222122155p:plain

f:id:min117:20191222122217p:plain

 

便利だが殺風景だった自作phpサイトがこれで生まれ変わりそう。年末ゆっくり触ることにする。

 

$ vim my_bootstrap01.html

f:id:min117:20191222123956p:plain

f:id:min117:20191222124037p:plain

f:id:min117:20191222124107p:plain

f:id:min117:20191222124135p:plain

f:id:min117:20191222124200p:plain

f:id:min117:20191222124237p:plain

f:id:min117:20191222124313p:plain

f:id:min117:20191222124343p:plain

f:id:min117:20191222124434p:plain

f:id:min117:20191222124506p:plain

 

<コピペ用>

  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">&times;</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> &lt; mark &gt; </mark> を使う</p>

663 <hr>

664 <p>定義済みクラス「mark」を使用して<span class="mark">mark要素とスタイルを一致</span>させる

    こともできます</p>

665 <p><mark> &lt; span class="mark" &gt; </mark> を使う</p>

666 

667 

668 

669 

670 

671 </body>

672 </html>