Bootstrap全局css样式_辅助类
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局css样式_辅助类
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
情境文本顏色通過顏色來展示意圖，Bootstrap 提供了一組工具類。這些類可以應(yīng)用于鏈接，并且在鼠標(biāo)經(jīng)過時(shí)顏色可以
還可以加深，就像默認(rèn)的鏈接一樣。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輔助類</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><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></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輔助類</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><a href="#" class="text-muted">輔助類</a><a href="#" class="text-primary">輔助類</a><a href="#" class="text-success">輔助類</a><a href="#" class="text-info">輔助類</a><a href="#" class="text-warning">輔助類</a><a href="#" class="text-danger">輔助類</a></div>
</body>
</html>
情境背景色和情境文本顏色類一樣，使用任意情境背景色類就可以設(shè)置元素的背景。鏈接組件在鼠標(biāo)經(jīng)過時(shí)顏色會(huì)加深，
就像上面所講的情境文本顏色類一樣。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輔助類</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><p class="bg-muted">輔助類</p><p class="bg-primary">輔助類</p><p class="bg-success">輔助類</p><p class="bg-info">輔助類</p><p class="bg-warning">輔助類</p><p class="bg-danger">輔助類</p></div>
</body>
</html>
關(guān)閉按鈕通過使用一個(gè)象征關(guān)閉的圖標(biāo)，可以讓模態(tài)框和警告框消失。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輔助類</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
</body>
</html>
三角符號(hào)通過使用三角符號(hào)可以指示某個(gè)元素具有下拉菜單的功能。注意，向上彈出式菜單中的三角符號(hào)是反方向的。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>輔助類</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><span class="caret"></span>
</body>
</html>
?
總結(jié)
以上是生活随笔為你收集整理的Bootstrap全局css样式_辅助类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap全局css样式_图片，
- 下一篇： Bootstrap组件1_字体图标