Bootstrap4-buttons

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

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

説明

ブートストラップは、テキストや画像などのコンテンツを配置するためのクリック可能なボタンを提供します。 <input>タグを使用して、ボタンにテキストを含めることができます。

ボタンを作成するには、_。btn_クラスの後に目的のスタイルを続けます（例： btn-success）。 ブートストラップは、以下にリストされているスタイルボタンにいくつかのオプションを提供します-

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-light
  • btn-dark
  • btn-link

次の例は、上記のすべてのボタンクラスを示しています-

例

<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 Styles</h2>
         <button type = "button" class = "btn btn-primary">Primary Button</button>
         <button type = "button" class = "btn btn-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-success">Success Button</button>
         <button type = "button" class = "btn btn-danger">Danger Button</button>
         <button type = "button" class = "btn btn-warning">Warning Button</button>
         <button type = "button" class = "btn btn-info">Info Button</button>
         <button type = "button" class = "btn btn-light">Light Button</button><br><br>
         <button type = "button" class = "btn btn-dark">Dark Button</button>
         <button type = "button" class = "btn btn-link">Link Button</button>
      </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>

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

出力

アウトラインボタン

ブートストラップ4は、_。btn-outline_クラスとそれに続く目的のスタイル（例： btn-outline-success）。

次の例は、アウトラインボタンの表示を示しています-

例

<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 Outlines</h2>
         <button type = "button" class = "btn btn-outline-primary">Primary Button</button>
         <button type = "button" class = "btn btn-outline-secondary">Secondary Button</button>
         <button type = "button" class = "btn btn-outline-success">Success Button</button>
         <button type = "button" class = "btn btn-outline-danger">Danger Button</button>
         <button type = "button" class = "btn btn-outline-light">Light Button</button>
         <button type = "button" class = "btn btn-outline-warning">Warning Button</button>
         <button type = "button" class = "btn btn-outline-info">Info Button</button>
         <button type = "button" class = "btn btn-outline-dark">Dark Button</button>
      </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>

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

出力

ボタンサイズとブロックレベルボタン

ブートストラップ4は、。btn-sm_および.btn-lg_クラスおよび_.btn-block_クラスを使用して、より小さなボタンとより大きなボタンを提供し、以下の例に示すように、親の全幅にわたるブロックレベルのボタンを作成します-

例

<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 Sizes</h2>
         <button type = "button" class = "btn btn-info btn-sm">Small button</button>
         <button type = "button" class = "btn btn-info">Default button</button>
         <button type = "button" class = "btn btn-info btn-lg">Large button</button>
         </br>
         </br>

         <h2>Block Level Button</h2>
         <button type = "button" class = "btn btn-info btn-lg btn-block">
            Block Level Info Button
         </button>
      </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>

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

出力

アクティブおよび無効な状態

ブートストラップを使用すると、ボタンの状態を_active_および_disabled_として変更できます。 アクティブ状態のボタンは押された状態で表示され、ボタンはグラデーションを失い、色が50％フェードし、無効状態になります。

_.active_クラスを使用してアクティブなボタンを表示し、_disabled_属性を追加してボタンを非アクティブにします。 次の例は、ボタンの状態を示しています-

例

<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>Active State</h2>
         <button type = "button" class = "btn btn-lg btn-primary" >
            Active button
         </button>
         <br>
         <br>

         <h2>Disabled State</h2>
         <button type = "button" class = "btn btn-primary btn-lg" disabled>
            Disabled Button
         </button>
      </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>

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

出力

チェックボックスとラジオボタンの切り替え

Bootstrap 4では、ボタンスタイルをラジオボタンとチェックボックスに適用して、トグル機能を利用できます。 _.btn-group_要素内に_data-toggle = "buttons" _を追加することにより、<label>要素内でチェックボックスとラジオボタンを切り替えることができます。

次の例は、チェックボックスとラジオボタンの切り替えを示しています-

例

<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>Checkbox</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-info active">
               <input type = "checkbox" name = "options" id = "option1" autocomplete = "off" checked>
               HTML-5
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option2" autocomplete = "off">
               CSS-3
            </label>
            <label class = "btn btn-info">
               <input type = "checkbox" name = "options" id = "option3" autocomplete = "off">
               Bootstrap-4
            </label>
         </div>
         <br>
         <br>

         <h2>Radio Buttons</h2>
         <div class = "btn-group btn-group-toggle" data-toggle = "buttons">
            <label class = "btn btn-primary active">
               <input type = "radio" name = "options" id = "option1" autocomplete = "off" checked>
               HTML-5
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option2" autocomplete = "off">
               CSS-3
            </label>
            <label class = "btn btn-primary">
               <input type = "radio" name = "options" id = "option3" autocomplete = "off">
               Bootstrap-4
            </label>
         </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-buttons&oldid=7364」から取得
Powered by MediaWiki