Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Utility API (ユーティリティAPI)

ユーティリティ API は、Sassベースのユーティリティクラスを生成します。

目次

Bootstrap ユーティリティクラスは、値を変更・拡張できるユーティリティ API で生成されます。Sass マップが何かわからない場合は、公式ドキュメントを参照してください。

マップは、すべてのユーティリティを含んでいて、カスタム(もしあれば)の $utilities マップとマージされます。ユーティリティマップには、以下のオプションを受け入れるユーティリティグループのキー付きリストが含まれています。

Adding utilities to the utility API

すべてのユーティリティは $utilities 変数に追加されます。カスタムユーティリティグループは以下のように追加することができます。

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Output:

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: .25;
}
.opacity-75 {
  opacity: .75;
}
.opacity-100 {
  opacity: 1;
}

Changing the class prefix

class オプションを指定すると、クラスの接頭辞を変更できます。

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Output:

.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

Responsive utilities

responsive オプションを使うと、レスポンシブなユーティリティクラスを生成することができます。

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Output:

.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: .25;
}
.opacity-75 {
  opacity: .75;
}
.opacity-100 {
  opacity: 1;
}
@media (min-width: 576px) {
  .opacity-sm-0 {
    opacity: 0;
  }
  .opacity-sm-25 {
    opacity: .25;
  }
  .opacity-sm-75 {
    opacity: .75;
  }
  .opacity-sm-100 {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .opacity-md-0 {
    opacity: 0;
  }
  .opacity-md-25 {
    opacity: .25;
  }
  .opacity-md-75 {
    opacity: .75;
  }
  .opacity-md-100 {
    opacity: 1;
  }
}
@media (min-width: 992px) {
  .opacity-lg-0 {
    opacity: 0;
  }
  .opacity-lg-25 {
    opacity: .25;
  }
  .opacity-lg-75 {
    opacity: .75;
  }
  .opacity-lg-100 {
    opacity: 1;
  }
}
@media (min-width: 1200px) {
  .opacity-xl-0 {
    opacity: 0;
  }
  .opacity-xl-25 {
    opacity: .25;
  }
  .opacity-xl-75 {
    opacity: .75;
  }
  .opacity-xl-100 {
    opacity: 1;
  }
}

Changing utilities

同じキーを使用することで、除外されるユーティリティを上書きできます。例えば、よりレスポンシブでオーバーフローなユーティリティの場合は、以下のようになります。 ユーティリティクラスを使用すると、このようなことができます。

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

print オプションを有効にすると、印刷用のユーティリティクラスが生成できます。

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Output:

.o-0 {
  opacity: 0;
}
.o-25 {
  opacity: .25;
}
.o-75 {
  opacity: .75;
}
.o-100 {
  opacity: 1;
}

@media print {
  .o-print-0 {
    opacity: 0;
  }
  .o-print-25 {
    opacity: .25;
  }
  .o-print-75 {
    opacity: .75;
  }
  .o-print-100 {
    opacity: 1;
  }
}

Removing utilities

グループキーを null に変更することでユーティリティを削除できます。

$utilities: (
  "float": null,
);