0
点赞
收藏
分享

微信扫一扫

bootstrap的标题和ul<li的应用

宁静的猫 2022-04-23 阅读 56
bootstrap

HTML

<body>
    <div>div标题</div>
    <div class="h1 bg-success text-danger">H1</div>
    <div class="h2 bg-danger text-white-50">H2</div>
    <div class="h3 bg-danger text-white-50">H3</div>
    <div class="h4 bg-danger text-white-50">H4</div>
    <div class="h5 bg-danger text-white-50">H5</div>
    <div class="h6 bg-danger text-white-50">H6</div>

    <!-- display-1和h1的区别:bootstrap的h1和h2之间有盒间距,并且盒子比较小,
        bootstrap的display-1和display-2之间没有盒间距
        并且bootstrap的display-1盒子更大 -->
     
    <div class="display-1 bg-primary">display-1</div>
    <div class="display-2 bg-danger">display-2</div>
    <div class="display-3 bg-success">display-3</div>
    <div class="display-4 bg-primary">display-4</div>
    <div class="display-5 bg-danger">display-5</div>
    <div class="display-6 bg-success">display-6</div>

    <!-- 去掉li前面的圆点和左内边距 -->
    <ul class="list-unstyled">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

bootstrap中H1和display-1的区别

在这里插入图片描述

bootstrap中list-unstyled的作用

before

在这里插入图片描述

after

在这里插入图片描述

举报

相关推荐

0 条评论