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

Bootstrapのボタングループクラス（.btn-group）の使い方と実装例

Bootstrapで複数のボタンをひとまとめのグループとして表示したい場合は、.btn-group クラスを使用します。このクラスを親要素に指定するだけで、ボタン同士が横並びに連結され、見た目が統一されたボタングループを簡単に作成できます。

.btn-groupクラスとは

.btn-group は、Bootstrapが提供するコンポーネントクラスの一つです。ツールバーのような操作パネルや、ページネーション、トグルボタンなど、関連するアクションを視覚的にグルーピングしたい場面で活用されます。

基本的な使用例

以下のコードは、.btn-group を使って3つのボタンをグループ化するシンプルな例です。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap サンプル</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>
      <p>以下はボタンの例です：</p>
      <div class = "btn-group">
         <button type = "button" class = "btn btn-default">A</button>
         <button type = "button" class = "btn btn-default">B</button>
         <button type = "button" class = "btn btn-default">C</button>
      </div>
   </body>
</html>

コードのポイント

  • 親要素に .btn-group を指定： <div> などの親要素に btn-group クラスを付与することで、その中のボタンがグループ化されます。
  • 子要素には通常のボタンを使用： 各ボタンには btn と btn-default などのお好みのスタイルクラスを組み合わせて指定します。
  • 自動的に連結表示： ボタン間の余白が取り除かれ、角が調整されるため、一体化したデザインになります。

このように、.btn-group クラスを使えば追加のCSSを書くことなく、整ったボタングループを実装できます。縦方向に並べたい場合は .btn-group-vertical、サイズを変更したい場合は .btn-group-lg や .btn-group-sm などのバリエーションクラスも用意されているので、用途に応じて使い分けるとよいでしょう。

  1. CSSでボタングループを作成する方法をサンプルコード付きで解説

    CSSを使えば、複数のボタンを横一列に連結した「ボタングループ」を簡単に作成できます。本記事では、ホバー時のエフェクトも含めたボタングループの実装方法を、実際のコード例とともにわかりやすく解説します。 ボタングループの作成例 以下は、CSSでボタングループを作成するコード例です。 <!DOCTYPE html> <html> <style> .btnGroup{    display: inline-block;    font-size: 0;    border: 2px solid darkg

  2. 【解決策】[ユーザー権利の割り当て]で[ユーザーまたはグループの追加]ボタンがグレー表示される場合の対処法

    Windows Serverのドメインコントローラーにおいて、ローカルセキュリティポリシーの[ユーザー権利の割り当て]にある[ユーザーまたはグループの追加]ボタンがグレー表示され、ユーザーを追加できないケースがあります。本記事では、この問題の原因と具体的な解決策をわかりやすく解説します。 考えられる主な原因 [ユーザーまたはグループの追加]ボタンがグレー表示になるのは、主に以下の理由によります。 ドメインで定義されたグループポリシー(GPO)に、該当するセキュリティ設定が含まれている。 現在操作しているユーザーが、Domain Admins(ドメイン管理者)またはEnterprise Ad