Bootstrap4-alerts

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

ブートストラップ4-アラート

説明

アラートコンポーネントは、ユーザーアクションの定義済みメッセージを指定します。 警告、エラー、または確認メッセージなどの情報をエンドユーザーに送信するために使用されます。

.alert_のクラスと、。alert-success 、。alert-info 、。alert-warning 、。alert-danger 、。alert-などのコンテキストクラスを追加することにより、アラートボックスを作成できます。 primary 、。alert-secondary 、。alert-light_または_.alert-dark_。

次の例は、上記のコンテキストクラスの使用方法を示しています-

例

<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>Alerts</h2>
         <div class = "alert alert-primary" role = "alert">
            primary  alert - Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to finddevguides!!!
         </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>

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

出力

アラート内のリンク

アラートのリンクを取得するには、次の例に示すように、<a>タグで_.alert-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>Links in Alerts</h2>
         <div class = "alert alert-primary" role = "alert">
            primary  alert - Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </div>

         <div class = "alert alert-dark" role = "alert">
         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to
            <a href = "https://www.finddevguides.com/" target = "_blank"
               rel = "nofollow" class = "alert-link">finddevguides!!!</a>
         </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>

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

出力

解雇アラート

解雇アラートを作成するには、_。alert-dismissable_クラスを使用してコンテナをアラートします。 button要素に_data-dismiss = "alert" _属性を追加してボタンを閉じると、アラートメッセージボックスが自動的に閉じられます。

次の例は、アラートボックスの解雇を示しています-

例

<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>Dismissal Alerts</h2>
         <div class = "alert alert-success alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Success!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-primary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Primary!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-secondary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Secondary!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-danger alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Danger!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-warning alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Warning!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-info alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Info!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-light alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Light!</strong> Welcome to finddevguides!!!
         </div>

         <div class = "alert alert-dark alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Dark!</strong> Welcome to finddevguides!!!
         </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-alerts&oldid=7359」から取得
Powered by MediaWiki