1. 文本颜色(Text Color):
- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-light
- .text-dark
- .text-muted
- .text-white
例如:
<p class="text-primary">这是主要文本颜色。</p>
2. 背景颜色(Background Color):
- .bg-primary
- .bg-secondary
- .bg-success
- .bg-danger
- .bg-warning
- .bg-info
- .bg-light
- .bg-dark
- .bg-muted
- .bg-white
例如:
<div class="bg-success text-white">成功的背景颜色</div>
3. 边框(Border):
- .border
- .border-top
- .border-right
- .border-bottom
- .border-left
例如:
<div class="border border-primary">带有主要颜色边框的元素。</div>
4. 边框颜色(Border Color):
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-white
例如:
<div class="border border-danger">带有危险颜色边框的元素。</div>
5. 圆角(Rounded Corners):
- .rounded
- .rounded-top
- .rounded-right
- .rounded-bottom
- .rounded-left
- .rounded-circle
- .rounded-pill
例如:
<img src="..." alt="圆形图像" class="rounded-circle">
6. 阴影(Shadow):
- .shadow
- .shadow-sm
- .shadow-lg
例如:
<div class="shadow">带有阴影的元素。</div>
7. 显示和隐藏(Display and Visibility):
- .d-none (隐藏)
- .d-inline (内联显示)
- .d-inline-block (内联块显示)
- .d-block (块级显示)
- .d-sm-none (在小屏幕上隐藏)
- .d-md-none (在中等屏幕上隐藏)
- .d-lg-none (在大屏幕上隐藏)
- .d-xl-none (在超大屏幕上隐藏)
- .visible (可见)
- .invisible (不可见)
例如:
<div class="d-none d-md-block">在中等屏幕以上显示。</div>
这只是一小部分 Bootstrap 4 实用工具类的示例。这些类可用于快速设置元素的样式,提供了灵活性和便利性。你可以根据具体需求组合这些类,并根据实际情况进行调整。查阅 Bootstrap 文档以获取更多实用工具类的信息:[Bootstrap Utilities](https://getbootstrap.com/docs/4.3/utilities)。
转载请注明出处:http://www.zyzy.cn/article/detail/5508/Bootstrap