directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

用少数颜色工具类来表达颜色意义。包括对悬停状态样式链接的支持。

颜色

<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><p class="text-dark">.text-dark</p><p class="text-muted">.text-muted</p><p class="text-white bg-dark">.text-white</p>

上下文文本类在提供悬停和焦点状态的锚点上也可以很好地工作。请注意, .text-white.text-muted 类没有链接样式。

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

背景颜色

与上下文文本颜色类相似,可以轻松地将元素的背景设置为任何上下文类。就像文本类一样,锚组件会在悬停时变暗。后台实用程序没有设置 color,因此在某些情况下您需要使用.text-*实用程序。

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div><div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div><div class="p-3 mb-2 bg-success text-white">.bg-success</div><div class="p-3 mb-2 bg-danger text-white">.bg-danger</div><div class="p-3 mb-2 bg-warning text-white">.bg-warning</div><div class="p-3 mb-2 bg-info text-white">.bg-info</div><div class="p-3 mb-2 bg-light text-dark">.bg-light</div><div class="p-3 mb-2 bg-dark text-white">.bg-dark</div><div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

背景梯度

$enable-gradients设置为true时,您将能够使用.bg-gradient-实用程序类。默认情况下, $enable-gradients被禁用,下面的示例被故意破坏。这从您开始使用Bootstrap开始就更容易定制。后续启用相关课程以继续了解Sass选项等等。

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div><div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div><div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div><div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div><div class="p-3 mb-2 bg-gradient-warning text-white">.bg-gradient-warning</div><div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div><div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div><div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

处理特殊性

由于其他选择器的特殊性,有时上下文类无法应用。在某些情况下,一个充分的解决方法是将元素的内容封装<div>在类中。

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示,而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身(例如可见文本),或者通过其他方式包含,例如隐藏在.sr-only课程中的其他文本。

Previous article: Next article: