Bootstrap V4常用样式整理,让你少走冤枉路!-砝码网

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的官方文档

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享