2日間の学習範囲
たにぐち まことのともすたチャンネル(YouTube)
https://www.youtube.com/user/tomostajp
Bootstrap 4入門 #03〜#09
（学習時間：5時間）
Bootstrap学習メモ
tableタグ(HTML)
<table></table>
表を作成する
trタグ(HTML)
<tr></tr>
表の一行を定義する
table rowの略
table要素内に記述する
thタグ(HTML)
<th></th>
見出しとなるセルを作成する
table headerの略
tr要素内に記述する
tdタグ(HTML)
<td></td>
データとなるセルを作成する
table dataの略
tr要素内に記述する
table要素にBootstrapのスタイルを適用する方法
<table class="table">
theadタグ(HTML)
<thead></thead>
表のヘッダ行を定義する
table要素内に記述する
tbodyタグ(HTML)
<tbody></tbody>
表のボディ部分を定義する
table要素内に記述する
codeタグ(HTML)
<code></code>
プログラムのソースコードであることを示す
preタグ(HTML)
<pre></pre>
半角スペースや改行をそのまま表示する
ソースコードとして表示する場合、codeタグと組み合わせて使う
<pre><code>コード</code></pre>
kbdタグ(HTML)
<kbd></kbd>
キーボード入力される文字であることを示す
Lorem Picsum
https://picsum.photos/
<img src="https://picsum.photos/px数/px数">
とすると、画像が指定されたサイズでランダムに表示される
サンプル画像として利用できるサービス
.img-fluid
<img src="..." class="img-fluid>"
画像をレスポンシブにする
.img-thumbnail
<img src="..." class="img-thumbnail>"
画像に丸みのある境界線(1ピクセル分)が表示される
<img src="..." class="rounded>"
四つの角が丸みのある画像になる
ナビゲーション
サイト内の他ページへのリンクやページ内リンクなどのこと
navタグ(HTML)
<nav></nav>
ナビゲーションであることを示す
.nav
<ul class="nav">もしくは<nav class="nav">
ナビゲーションバーを作成する
※.navコンポーネントではアクティブは適用されない
.nav-tabs
class="nav nav-tabs"
タブ付きのナビゲーションバーを作成する
.nav-item
<li class="nav-item">
ul要素でナビゲーションバーを作成する際、liタグに記述する
.nav-link
<a class="nav-link">
ナビゲーションバーを作成する際、aタグに記述する
.jumbotron
<div class="jumbotron">
ヒーローユニットスタイルのコンテンツを表示する
buttonタグ(HTML)
<button></button>
ボタンを生成する
以下は後で記載(とりあえずメモ)
btn btn-
javascript
jquery
popper.js
script
modal
modal fade
data-dismiss
data-toggle
class=" border"
class=" shadow"
bg-
embed-responsive
embed-responsive-item
d-none
float
sr-only
flex-wrap
justify-content
:first-child
align-content
flex-direction
style="order: 数字"
style="flex-grow: 数字"
align-self
flex-flow
flex
d-flex
flex-row-reverse
justify-content-center
align-items-center
flex-fill
form
method
label
form-group
form-control
form-control-lg
readonly
form-control-plaintext
form-check
form-check-input
form-check-label
form-check-inline
Validation
required
novalidate
invalid-feedback
valid-feedback
is-invalid
その他
今回の動画ではJavaScriptを利用しているものも出てきたので、
先日の模写コーディングをBootstrapを利用して改めて書き直したのち、
改めて動画を見直して理解したい。