公共样式:颜色,文字颜色,背景颜色


发布时间:2020-03-17 21:13    作者: Uncle Hui   已过去:3 月,3 周   阅读总量:157 已被赞:0


颜色

颜色文本字体添加颜色,可以再a标签用,bg-*背景颜色

<p class="text-primary">.text-primary</p>

<p class="text-secondary">.text-secondary</p>

<p class="text-success">.text-success</p>

<p class="text-danger">.text-danger</p>

<p class="text-warning">.text-warning</p>

<p class="text-info">.text-info</p>

<p class="text-light bg-dark">.text-light</p>  #背景颜色,bg-***

<p class="text-dark">.text-dark</p>

<p class="text-muted">.text-muted</p>

<p class="text-white bg-dark">.text-white</p>

使用我们提供的悬停和焦点状态(情景)样式,在链接上也能正常使用(呈现), 注意:e .text-white 、 .text-muted这两个 class样式不支持链接上使用(没有链接样式)。

<p><a href="#" class="text-primary">Primary link</a></p>

<p><a href="#" class="text-secondary">Secondary link</a></p>

<p><a href="#" class="text-success">Success link</a></p>

<p><a href="#" class="text-danger">Danger link</a></p>

<p><a href="#" class="text-warning">Warning link</a></p>

<p><a href="#" class="text-info">Info link</a></p>

<p><a href="#" class="text-light bg-dark">Light link</a></p>

<p><a href="#" class="text-dark">Dark link</a></p>

<p><a href="#" class="text-muted">Muted link</a></p>

<p><a href="#" class="text-white bg-dark">White link</a></p>

背景颜色

<style>

p{padding:1rem;margin-bottom:.5rem;}

</style>

 

<p class="bg-primary text-white">.bg-primary</p>

<p class="bg-secondary text-white">.bg-secondary</p>

<p class="bg-success text-white">.bg-success</p>

<p class="bg-danger text-white">.bg-danger</p>

<p class="bg-warning text-white">.bg-warning</p>

<p class="bg-info text-white">.bg-info</p>

<p class="bg-light text-dark">.bg-light</p>

<p class="bg-dark text-white">.bg-dark</p>

<p class="bg-white text-dark">.bg-white</p>

 

 

点赞

0




登陆后方可评论