Bootstrap練習

2019年Webサイト作成講習会

歴史博物館

赤レンガ倉庫

合同庁舎（旧生糸検）

本町4丁目

児童公園

子供植物園

色

色はカラーユーティリティ・クラスを使用して表示で出来ます。クラスとして-primary -secondary -success -danger -warning -infoが用意されています。
UtilityのColorsに説明されています。

文字色

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

背景色

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

リンクの色

空白

Bootstrapには、要素の外観を変更するための簡潔なレスポンシブマージンとパディングのためのクラスが組み込まれています。

プロパティ

m-はマージン、
p-はパディング

サイズ

0　　0
1　　0.25rem
2　　0.5rem
3　　1rem
4　　1.5rem
5　　3rem
auto　　auto

方向

t　　上方向
b　　下方向
l　　左方向
r　　右方向
x　　左右方向
y　　上下方向
無し　　4方向

使用例

<button type="button" class="btn btn-primary">Primary</button>
マージン・パディング設定無し

<button type="button" class="btn btn-primary m-3 p-3">Primary</button>
マージン 1rem、パディング 1rem

マークなしリスト（Unstyled）

ulにクラスlist-unstyledを指定すると直下のliのリストマークと左マージンが削除されます。これは直下の子リストアイテムにのみに適用されます。つまり、入れ子のliにもクラスlist-unstyledとml-○（マージンレフト○）を追加する必要があります。

リスト1
リスト2
リスト3

子リスト1
子リスト2
子リスト3

リスト4
リスト5
リスト6

横並びリスト（Inline）

Ulにクラスlist-inlineをliにクラス list-inline-item指定します。

リスト1
リスト2
リスト3
リスト4
リスト5
リスト6