Bootstrapでsuccessに関する装飾したい

2024年6月23日

Bootstrapでは、成功メッセージや成功した要素に関するスタイリングには alert-success クラスを使用します。これはアラートメッセージに適用され、成功メッセージを強調します。また、ボタンなどの他の要素にも btn-success クラスを使用して成功のスタイルを適用できます。

以下は、アラートメッセージとボタンに alert-success および btn-success クラスを使用した例です。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrap Success Example</title>
</head>
<body>

<div class="container mt-5">
    <!-- Success Alert -->
    <div class="alert alert-success" role="alert">
        This is a success message!
    </div>

    <!-- Success Button -->
    <button type="button" class="btn btn-success">Success Button</button>
</div>

</body>
</html>

この例では、alert-success クラスを使用して成功メッセージを表示し、btn-success クラスを使用して成功したボタンを作成しています。これらのクラスにより、テキストの色や背景色がブートストラップのデフォルトに従って変更されます。

未分類

Posted by ぼっち