第六谈：边框和颜色

作者: 辽A丶孙悟空 | 来源:发表于2020-06-04 18:33 被阅读0次

第六谈：边框和颜色
SwiftUI 设置边框、透明度、阴影
1.1边框和颜色
IBInspectable 和 IB_DESIGNABLE
盒子模型（网页内容设计、美化）
边框
箭头布局——有边框
CSS入门二
CSS盒子模型
边框

本节课我们来开始学习 Bootstrap 的边框和颜色的样式。

一．边框样式

使用.border 给元素增加相应的边框，默认是淡灰色；
如果颜色太淡，可以使用.border-*设置想要的场景，比如.border-success；
.border-*，包含：primary、secondary、success、danger、warning、info、light、dark 和 white；

      <img src="img/1.png" alt="边框" class="border-success border">
      <img src="img/1.png" alt="边框" class="border-success border-top">
      <img src="img/1.png" alt="边框" class="border-success border-bottom">
      <img src="img/1.png" alt="边框" class="border-success border-left">
      <img src="img/1.png" alt="边框" class="border-success border-right">

使用.border-0 消减四周的边框，或使用.border-*-0 消减某一边的边框；

      <img src="img/2.png" alt="边框" class="... border-0">
      <img src="img/2.png" alt="边框" class="... border-top-0">
      <img src="img/2.png" alt="边框" class="... border-bottom-0">
      <img src="img/2.png" alt="边框" class="... border border-left-0">
      <img src="img/2.png" alt="边框" class="... border border-right-0">

使用.rounded 和.rounded-*实现各种方位圆角；

      <img src="img/3.png" alt="圆角" class="rounded">
      <img src="img/3.png" alt="圆角" class="rounded-top">
      <img src="img/3.png" alt="圆角" class="rounded-bottom">
      <img src="img/3.png" alt="圆角" class="rounded-left">
      <img src="img/3.png" alt="圆角" class="rounded-right">
      <img src="img/3.png" alt="圆角" class="rounded-circle">
      <img src="img/3.png" alt="圆角" class="rounded-pill">
      <img src="img/3.png" alt="圆角" class="rounded-0">

使用.rounded-sm 和.rounded-lg 实现圆角半径大小；

      <img src="img/2.png" alt="圆角" class="rounded-sm">
      <img src="img/2.png" alt="圆角" class="rounded-lg">

二．颜色样式

使用.text-*将文本设置成指定的颜色，比如：text-success；

      <span class="text-primary">Bootstrap</span>
      <span class="text-secondary">Bootstrap</span>
      <span class="text-success">Bootstrap</span>
      <span class="text-danger">Bootstrap</span>
      <span class="text-warning">Bootstrap</span>
      <span class="text-info">Bootstrap</span>
      <span class="text-dark">Bootstrap</span>
      <span class="text-body">Bootstrap</span>
      <span class="text-muted">Bootstrap</span>
      <span class="text-light bg-dark">Bootstrap</span>
      <span class="text-white bg-dark">Bootstrap</span>
      <span class="text-black-50">Bootstrap</span>
      <span class="text-white-50 bg-dark">Bootstrap</span>

使用.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>

使用.bg-*可以实现背景色，具体如下：

      <div class="p-2 mb-2 bg-primary">Bootstrap</div>
      <div class="p-2 mb-2 bg-secondary">Bootstrap</div>
      <div class="p-2 mb-2 bg-success">Bootstrap</div>
      <div class="p-2 mb-2 bg-danger">Bootstrap</div>
      <div class="p-2 mb-2 bg-warning">Bootstrap</div>
      <div class="p-2 mb-2 bg-light">Bootstrap</div>
      <div class="p-2 mb-2 bg-dark">Bootstrap</div>
      <div class="p-2 mb-2 bg-white">Bootstrap</div>
      <div class="p-2 mb-2 bg-transparent">Bootstrap</div>