1.颜色Color：
使用.text-*将文本设置成指定的颜色，比如: .text-success；
也可以.text-*-50降色【只有白色和黑色才可以设 置 ： white 和 black ！】
使用.text-*也可以实现悬停和焦点的超链接样式【a标签】，white和muted 这样个颜色不支持！
列出颜色：【来之菜鸟教程】
<div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
也就差不都这么多了！自己去尝试。
降色例子：【可以降色的颜色才可以用】
<!--只有白色和黑色可以降色50%-->
<h2 class="text-white-50"> 我是white颜色 降色50</h2>
<h2 class="text-black-50">我是black色 降色50</h2>
超链接例子：
<!--超链接例子 不支持！white和muted 这两个色-->
<h2 class="text-primary"> 点击登录</h2>
<h2 class="text-danger">点击注销</h2>
使用.bg-*可以实现背景色，比如: .bg-success。也可以使用.bg-transparent 设置透明度：
例：
<!--
使用.bg-*可以实现背景色，比如: .bg-success。
也可以使用.bg-transparent 设置背景色全透明
-->
<h2 class="text-primary bg-warning bg-transparent"> 点击登录</h2>
<h2 class="text-danger bg-info">点击注销</h2>
2.边框
使用.border给元素增加相应的边框，默认是淡灰色(border-*:top, bottom, left, right指定任意一边)
如果颜色太淡，可以使用.border-*设置想要的场景，比如: .border-success
例：
<style>
div{
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: #ffffff;
}
.one{
width: 1000px;
}
</style>
</head>
<body>
<!--
border-*包含: primary、secondary、success、danger、warning、info、light、dark、white;【颜色】
使用.border给元素增加相应的边框，默认是淡灰色(border-*:top, bottom, left, right指定任意一边)
如果颜色太淡，可以使用.border-*设置想要的边框颜色，比如: .border-success
此例子已Css修改
-->
<div class="one">
<div class="border"> </div>
<div class="border-success border-top"> </div>
<div class="border-success border-right"> </div>
<div class="border-success border-bottom"> </div>
<div class="border-success border-left"> </div>
</div>
使用.border-0消除四周的边框，或使用.border-*-0消除某一边的边框;
例：
<style>
div{
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: #ffffff;
}
.one{
width: 1000px;
}
</style>
</head>
<body>
<!--
使用.border-0消除四周的边框，或使用.border-*-0消除某一边的边框;
此例子已Css修改
-->
<div class="one">
<div class="border-0"> </div>
<div class="border-success border border-top-0"> </div>
<div class="border-success border border-right-0"> </div>
<div class="border-success border border-bottom-0"> </div>
<div class="border-success border border-left-0"> </div>
</div>
使用.rounded和.rounded-*实现各种方位圆角,使用.rounded-circle正圆，使用.rounded-pill椭圆
使用.rounded-sm(小圆角）和.rounded-lg (大圆角）实现圆角半径大小;
例：
<style>
div{
float: left;
width: 150px;
height: 150px;
background-color: #6f42c1;
margin: 10px 10px;
text-align: center;
line-height: 100px;
}
.one{
width: 2000px;
background-color: #ffffff;
}
</style>
</head>
<body>
<!--
使用.rounded和.rounded-*实现各种方位圆角,使用.rounded-circle正圆，使用.rounded-pill椭圆
使用.rounded-sm(小圆角）和.rounded-lg (大圆角）实现圆角半径大小;
-->
<div class="one">
<div class="rounded"> rounded </div>
<div class="rounded-top"> rounded-top</div>
<div class="rounded-right"> rounded-right </div>
<div class="rounded-bottom"> rounded-bottom </div>
<div class="rounded-left"> rounded-left </div>
<div class="rounded-circle" style="width: 200px; height: 100px" > rounded-circle【正圆】</div>
<div class="rounded-pill" style="width: 200px; height: 100px"> rounded-pill【椭圆】</div>
</div>
<!--下面两个貌似没软用-->
<div class="one">
<div class="rounded-sm" style="width: 100px; height: 100px" > rounded-sm </div>
<div class="rounded-lg" style="width: 100px; height: 100px" > rounded-lg</div>
</div>
作者：咸瑜
