Bootstrap V4常用样式整理，让你少走冤枉路！

Bootstrap是一款流行的前端框架，提供了丰富的样式和组件。在Bootstrap V4版本中，有很多常用的样式可以帮助我们快速搭建一个美观、响应式的网站或应用程序。本文将介绍一些Bootstrap V4中常用的样式。

常用样式

文本

Bootstrap提供了许多文本样式，通过添加相应的类名即可进行调用。以下是一些常用的文本样式：

- .text-primary：设置文本颜色为主题颜色；
- .text-muted：设置文本颜色为灰色；
- .text-center：设置文本居中显示。

背景

除了常规的背景色，Bootstrap还提供了许多背景图样式。以下是一些常用的背景样式：

- .bg-primary：设置背景颜色为主题颜色；
- .bg-dark：设置背景颜色为深色；
- .bg-light：设置背景颜色为浅色；
- .bg-image：设置背景为图片。

按钮

Bootstrap中的按钮是用来触发操作的，如提交表单、打开链接等。以下是一些常用的按钮样式：

- .btn-primary：设置按钮颜色为主题颜色；
- .btn-outline-primary：设置按钮边框颜色为主题颜色；
- .btn-block：使按钮占据整个父级元素的宽度。

图片

Bootstrap中的图片样式可以帮助我们在网站或应用程序中展示图片。以下是一些常用的图片样式：

- .rounded：使图片的四个角变成圆角；
- .img-fluid：使图片自适应父级容器大小，保持比例不变；
- .figure：将图片嵌套在.figure类中，使其具有图文结合的效果。

布局

容器

Bootstrap中的容器是用来控制页面内容的宽度和垂直偏移的。以下是一些常用的容器样式：

- .container：设置固定宽度的容器，宽度随着屏幕尺寸的变化调整；
- .container-fluid：设置全屏宽度的容器。

栅格系统

Bootstrap的栅格系统是用来创建响应式布局的，通过将屏幕分成12列，我们可以轻松地实现各种布局效果。以下是一些常用的栅格样式：

- .row：创建行，并将每行分成12列；
- .col-*：设置列的宽度，*代表1~12的数字；
- .offset-*：设置偏移，*代表1~12的数字。

小结

Bootstrap V4提供了许多常用的样式和组件，本文介绍了一些常用的样式。在使用时，建议根据具体情况选择相应的类，以避免过多的样式冗余。如果需要更多的样式或组件，请参考Bootstrap的官方文档。

管理员会员

收藏 海报 链接