Bootstrap4-button-group

提供：Dev Guides
移動先:案内、検索

ブートストラップ4-ボタングループ

説明

ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。

基本的なボタングループ

次の例に示すように、<div>要素内で_.btn-group_クラスを使用して、基本的なボタングループを作成できます-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Button Group</h2>
         <div class = "btn-group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

ボタンツールバー

次の例に示すように、_。btn-toolbar_クラスを使用して、ボタングループのセットを単一のツールバーにグループ化できます-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Button Toolbar</h2>
         <div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups">
            <div class = "btn-group mr-2" role = "group" aria-label = "First group">
               <button type = "button" class =" btn btn-info">Cricket</button>
               <button type = "button" class = "btn btn-info">Football</button>
               <button type = "button" class = "btn btn-info">Hockey</button>
               <button type = "button" class = "btn btn-info">Tennis</button>
            </div>

            <div class = "btn-group mr-2" role = "group" aria-label = "Second group">
               <button type = "button" class = "btn btn-info">Basketball</button>
               <button type = "button" class = "btn btn-info">Volleyball</button>
               <button type = "button" class = "btn btn-info">Boxing</button>
            </div>

            <div class = "btn-group mr-2" role = "group" aria-label = "Third group">
               <button type = "button" class = "btn btn-info">Archery</button>
               <button type = "button" class = "btn btn-info">Badminton</button>
            </div>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

ボタングループサイズ

次の例に示すように、。btn-group-sm_または.btn-group-lg_クラスを_.button-group_クラスに追加することにより、ボタングループのサイズを制御できます-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Button Group Sizes</h2>
         <div class = "btn-group btn-group-lg" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>

         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>

         <div class = "btn-group btn-group-sm" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

垂直ボタングループ

次の例に示すように、クラス_.btn-group-vertical_を使用して、ボタングループを垂直に表示できます-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Vertical Button Group</h2>
         <div class = "btn-group-vertical" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

ネストボタングループ

一連のボタン内にドロップダウンメニューを表示する場合は、。btn-group_を別の.btn-group_内に配置できます。

次の例は、ボタングループのネストを示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Nesting Button Group</h2>
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
            <div class = "btn-group" role = "group">
               <button id = "nestingbtngroup" type = "button" class = "btn btn-info
                  dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true"
                  aria-expanded = "false">

                  Sports
               </button>

               <div class = "dropdown-menu" aria-labelledby = "nestingbtngroup">
                  <a class = "dropdown-item" href = "#">Cricket</a>
                  <a class = "dropdown-item" href = "#">Football</a>
                  <a class = "dropdown-item" href = "#">Hockey</a>
               </div>
            </div>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

「https://www.finddevguides.com/index.php?title=Bootstrap4-button-group&oldid=7363」から取得
Powered by MediaWiki