Bootstrap(Memo)

WEB Design
1

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>
2

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

bootstrap-containers
bootstrap-containers826×399 39.5 KB

Grid System

bootstrap-grid-system
bootstrap-grid-system825×436 29.1 KB

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

bootstrap-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

各要素間の表示配列指定

bootstrap-display-property
bootstrap-display-property845×498 34.6 KB

3

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);
}