【无标题】

最新推荐文章于 2024-11-15 19:51:40 发布

m0_59975955

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量141

点赞数

文章标签： html css bootstrap

本文链接：https://blog.csdn.net/m0_59975955/article/details/124945109

版权

这篇博客详细介绍了Bootstrap中用于图片和文本的各种样式，包括边框样式（如.border、.border-*、.rounded、.rounded-*等）以及颜色样式（.text-*和.bg-*）。通过这些类，你可以轻松地改变图片的边框颜色、形状，以及文本和背景的颜色。此外，还展示了如何应用这些样式到链接和不同元素上，为网页设计提供丰富的视觉效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

  <body>
    <h1>Hello, world!</h1>
    <!-- <!-- <div>  -->
    一．边框样式
    1. 使用.border 给元素增加相应的边框，默认是淡灰色；
    <img src="./img/die.jpg" alt="" class="border">
    2. 如果颜色太淡，可以使用.border-*设置想要的场景，比如.border-success；
    <img src="./img/die.jpg" alt="" class="border border-success">
    .border-*，包含：primary、secondary、success、danger、warning
    info、light、dark 和white；
    3. 缩略图样式，在图片周围添加一圈灰色的边框
    <img src="./img/die.jpg" alt="" class="border border-success img-thumbnail">
    4. 上下左右各边的边框
    <img src="./img/die.jpg" alt="边框" class="border-success border">
    <img src="./img/die.jpg" alt="边框" class="border-success border-top">
    <img src="./img/die.jpg" alt="边框" class="border-success border-bottom">
    <img src="./img/die.jpg" alt="边框" class="border-success border-left">
    <img src="./img/die.jpg" alt="边框" class="border-success border-right">
    5. 使用.border-0 消减四周的边框，或使用.border-*-0 消减某一边的边框；
    <img src="./img/die.jpg" alt="边框" class="... border border-0">
    <img src="./img/die.jpg" alt="边框" class="... border border-top-0">
    <img src="./img/die.jpg" alt="边框" class="... border border-bottom-0">
    <img src="./img/die.jpg" alt="边框" class="... border border-left-0">
    <img src="./img/die.jpg" alt="边框" class="... border border-right-0">
    6. 使用.rounded 和.rounded-*实现各种方位圆角；
    <img src="./img/die.jpg" alt="圆角" class="rounded">
    <img src="./img/die.jpg" alt="圆角" class="rounded-top">
    <img src="./img/die.jpg" alt="圆角" class="rounded-bottom">
    <img src="./img/die.jpg" alt="圆角" class="rounded-left">
    <img src="./img/die.jpg" alt="圆角" class="rounded-right">
    <img src="./img/die.jpg" alt="圆角" class="rounded-circle">
    <img src="./img/die.jpg" alt="圆角" class="rounded-pill">
    <img src="./img/die.jpg" alt="圆角" class="rounded-0">
    7. 使用.rounded-sm 和.rounded-lg 实现圆角半径大小；
    <img src="./img/die.jpg" alt="圆角" class="rounded-sm">
    <img src="./img/die.jpg" alt="圆角" class="rounded-lg">
    二．颜色样式
    1. 使用.text-*将文本设置成指定的颜色，比如：text-success；
    <span class="text-primary">text-primary</span>
    <span class="text-secondary">text-secondary</span>
    <span class="text-success">text-success</span>
    <span class="text-danger">text-danger</span>
    <span class="text-warning">text-warning</span>
    <span class="text-info">text-info</span>
    <span class="text-dark">text-dark</span>
    
    <span class="text-body">text-body</span>
    <span class="text-muted">text-muted</span>
    <span class="text-light bg-dark">text-light bg-dark</span>
    <span class="text-white bg-dark">text-white bg-dark</span>
    <span class="text-black-50">text-black-50</span>
    <span class="text-white-50 bg-dark">text-white-50 bg-dark</span>
    2. 使用.text-*也可以实现悬停和焦点的超链接样式，white 和muted 不支持；
    <a href=# class="text-primary">Bootstrap</a>
    <a href=# class="text-secondary">Bootstrap</a>
    <a href=# class="text-success">Bootstrap</a>
    <a href=# class="text-danger">Bootstrap</a>
    <a href=# class="text-warning">Bootstrap</a>
    <a href=# class="text-info">Bootstrap</a>
    <a href=# class="text-dark">Bootstrap</a>
    <a href=# class="text-body">Bootstrap(no)</a>
    <a href=# class="text-muted">Bootstrap(no)</a>
    <a href=# class="text-light bg-dark">Bootstrap</a>
    <a href=# class="text-white bg-dark">Bootstrap(no)</a>
    <a href=# class="text-black-50">Bootstrap</a>
    <a href=# class="text-white-50 bg-dark">Bootstrap</a>
    3. 使用.bg-*可以实现背景色，具体如下：
    <div class="p-2 mb-2 bg-primary">p-2 mb-2 bg-primary</div>
    <div class="p-2 mb-2 bg-secondary">p-2 mb-2 bg-secondary</div>
    <div class="p-2 mb-2 bg-success">p-2 mb-2 bg-success</div>
    <div class="p-2 mb-2 bg-danger">p-2 mb-2 bg-danger</div>
    <div class="p-2 mb-2 bg-warning">p-2 mb-2 bg-warning</div>
    <div class="p-2 mb-2 bg-info">mb-2 bg-info</div>
    <div class="p-2 mb-2 bg-light">p-2 mb-2 bg-light</div>
    <div class="p-2 mb-2 bg-dark">p-2 mb-2 bg-dark</div>
    <div class="p-2 mb-2 bg-white">p-2 mb-2 bg-white</div>
    <div class="p-2 mb-2 bg-transparent">p-2 mb-2 bg-transparent</div>
    
</div>  -->