JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【Bootstrap】ラベル（Labels）の使い方と表示サンプルをわかりやすく解説

ラベル（Labels）とは

ラベルは、記事や項目に対する件数・カウント数・ヒント・補足情報などを手軽に目立たせて表示できる、Bootstrapの便利なUIコンポーネントです。見出しの横に未読通知の数を添えたり、カテゴリ名を小さく装飾して強調したりといった場面で活躍します。

基本の使い方

ラベルを表示するには、<span>などのインライン要素に .label クラスを指定します。標準的な外観にしたい場合は .label-default を組み合わせるのが基本です。

以下は、見出しの横にラベルで数値（チュートリアル数・クイズ数）を表示するシンプルなサンプルです。実際にブラウザで実行して、表示を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <h1>Tutorials
         <span class = "label label-default">
            150
         </span>
      </h1>
      <h2>Quiz
         <span class = "label label-default">
            90
         </span>
      </h2>
   </body>
</html>

このコードを実行すると、「Tutorials」という見出しの横に「150」、「Quiz」の横に「90」が、グレーの角丸ラベルとして表示されます。このように、テキストに少し添えるだけで視覚的に情報を伝えられるのがラベルの魅力です。

ラベルの色のバリエーション

Bootstrap 3では、用途や意味に応じて次の修飾クラスを使い分けられます。

  • .label-default … 標準のグレー
  • .label-primary … 青（主要な情報）
  • .label-success … 緑（成功・完了）
  • .label-info … 水色（お知らせ・情報）
  • .label-warning … オレンジ（警告）
  • .label-danger … 赤（エラー・重要な注意）

注意：Bootstrap 4以降では「バッジ」に統合

Bootstrap 3で使用されていた .label クラスは、Bootstrap 4以降ではバッジ（Badges）コンポーネントへと統合され、.badge と .badge-secondary のようなユーティリティクラスを組み合わせて指定する仕様に変わりました。最新バージョンのBootstrapを使う場合は、公式ドキュメントのBadgesの項目もあわせて確認しておくと安心です。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. 【C#】Tuple<T1, T2, T3, T4, T5, T6>クラスの使い方を徹底解説

    C#のTuple<T1, T2, T3, T4, T5, T6>クラスとは Tuple<T1, T2, T3, T4, T5, T6> クラスは、6 つの要素を持つ「6 タプル」を表します。タプルとは、複数の要素を順序付けてひとまとめに格納できるデータ構造で、各要素にはそれぞれ異なる型を指定できます。 このクラスは、次のような場面で活用されます。 データセットへのシンプルなアクセス データセットの容易な操作 単一のデータセットとしての表現 メソッドから複数の値を返したい場合 メソッドに複数の値を渡したい場合 主要な6つのプロパティ Tuple<T1, T2,