Bootstrap(Memo)

tk-fuse · 2021 年 8 月 7 日午前 5:02

Bootstrap 4 Icons

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Then, add the name of the icon class to any inline HTML element (like <i> or <span>):

Example

<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

tk-fuse · 2021 年 8 月 7 日午前 5:31

Text

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Colors

Flex

Containers

Grid System

Spacing

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

List Group

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

Images

img-fluid による幅100%自動イメージサイズ
所属エレメントの可変幅に応じてイメージ幅サイズも可変（表示領域幅100%、高さ自動）
mx-auto d-block でセンター配置

<img src="..." class="img-fluid mx-auto d-block" alt="...">

Display Property

各要素間の表示配列指定

tk-fuse · 2021 年 8 月 24 日午後 1:45

hover, focus, active

:hover による要素内カーソル移動時の背景色設定

hover : マウス移動時に背景色変化
focus : マウス押下時に背景色変化（マウスをリリースしてもその背景色を維持）
active : マウス押下時にのみ背景色変化（マウスリリースすると元の背景色へ戻る）

リストグループ要素

footer .footer-top .list-group-item {
    background-color: #184f8a;
    border-color: var(--gray);
    color: white;
}

footer .footer-top .list-group-item:hover {
    background-color: #0a2644;
    color: white;
}

ボタン

.btn-primary {
    color: #FFFFFF;
    /*font-size: 18px;*/
    text-align: center;
    border-radius: 6px;
    background: var(--blue);
    border-color: var(--blue);
}

.btn-outline-primary {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-outline-primary:hover {
    background-color: var(--purple);
    border-color: var(--purple);
}


.btn-secondary {
    color: var(--blue);
    /*font-size: 18px;*/
    text-align: center;
    border-radius: 6px;
    background-color: #FFFFFF;
    border-color: var(--blue);
}

.btn-secondary:hover {
    background-color: var(--dark-purple);
}

.btn-primary:hover {
    background: var(--light-purple);
    border-color: var(--light-purple);
}