bootstrapのpタグ

2024年6月8日

Bootstrapでは、p タグに対してもスタイリングが適用できます。以下は、Bootstrapを使用して p タグにスタイルを適用する基本的な例です。

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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <title>Bootstrap P Tag Example</title>
</head>
<body>

    <div class="container mt-4">
        <p class="lead">This is a lead paragraph. It has a larger font size and slightly increased spacing.</p>

        <p class="text-muted">This is a muted paragraph. The text color is muted for a subdued effect.</p>

        <p class="text-danger">This is a text-danger paragraph. The text is styled with a red color.</p>

        <p class="font-weight-bold">This is a bold paragraph. The text is styled with a bold font weight.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-eIwU3/5Hz53UScTlX7Yq+zMf6PT9iXVkLQh1N8w2JwL8jnxuRt6qJlNMIcSIl6j" crossorigin="anonymous"></script>
</body>
</html>

この例では、lead クラスを使用して大きなフォントサイズと若干の行間を持つリードパラグラフを作成し、text-muted クラスでテキストを静かに表示し、text-danger クラスで赤い色で強調表示し、font-weight-bold クラスで太字にしています。これはBootstrapのクラスの一部であり、他にも多くのクラスが利用可能です。デザインに合わせて適切なクラスを選択して使用してください。

未分類

Posted by ぼっち