边框和颜色

一、边框样式

需要2张背景底色不同的图片。

1.使用.border 给元素增加相应的边框，默认是淡灰色；

   如果颜色太淡，可以使用.border-*设置想要的场景，比如.border-success；

  .border-*，包含：primary、secondary、success、danger、warning

   info、light、dark 和 white；

<style>
        body {
            margin: 20px;
        }
        img {
            margin: 5px;
        }
        .rounded-pill {
            width: 200px;
            height: 100px;
        }
style>

<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">

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

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

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

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

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

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

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

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

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

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

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

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

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

二、颜色样式

1. 使用.text-*将文本设置成指定的颜色

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

2.使用.text-*也可以实现悬停和焦点的超链接样式

3.使用.bg-*可以实现背景色

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