在 Bootstrap 4 中,有一系列实用工具类(Utility classes),它们提供了一些快速且灵活的样式设置,用于处理布局和样式。以下是一些常见的 Bootstrap 4 实用工具类:

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