Bootstrap 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 Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to Tutorialspoint!!!
         </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://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>    
         </div>
         
         <div class = "alert alert-dark" role = "alert">
         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to 
            <a href = "https://tutorialspoint.tw/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</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 類作為警告容器。在按鈕元素上新增 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 Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-primary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Primary!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-secondary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Secondary!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-danger alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Danger!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-warning alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Warning!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-info alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Info!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-light alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Light!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-dark alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Dark!</strong> Welcome to Tutorialspoint!!!
         </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>

它將產生以下結果 −

輸出

bootstrap4_components.htm
列印頁面
上一頁
下一頁
廣告