标题-段落-强调-对齐

最新推荐文章于 2024-09-03 22:37:19 发布

南栀子。

最新推荐文章于 2024-09-03 22:37:19 发布

阅读量108

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qq_38191971/article/details/113745822

版权

Bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">
    {#标题#}
    <h1>hello1<small>hello11</small></h1>
    <h2>hello2</h2>
    <h3>hello3</h3>
    <div class="h1">hello1 world<span class="small">hello11 world</span></div>
    <hr>
    {#段落#}
    <p class="lead">诚信<small>诚信</small><b>考试</b>考试</p>
    <hr>
    {#强调#}
    <div class="text-muted lead">.text-muted</div>
    <div class="text-primary lead">.text-primary</div>
    <div class="text-success lead">.text-success</div>
    <div class="text-info lead">.text-info</div>
    <div class="text-warning lead">.text-warning</div>
    <div class="text-danger lead">.text-danger</div>
    <hr>
    {#对齐#}
    <p style="text-align: right">I have a good apple right</p>
    <p class="text-left">I have a good apple left</p>
    <p class="text-right">I have a good apple rigth</p>
    <p class="text-center">I have a good apple center</p>
    <p class="text-justify">I have a good apple justify</p>

</div>
</body>
</html>