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=" 200px; height: 100px" > rounded-circle【正圆】</div> <div class="rounded-pill" style=" 200px; height: 100px"> rounded-pill【椭圆】</div> </div> <!--下面两个貌似没软用--> <div class="one"> <div class="rounded-sm" style=" 100px; height: 100px" > rounded-sm </div> <div class="rounded-lg" style=" 100px; height: 100px" > rounded-lg</div> </div>