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的官方文档。
说明: 本站资源解压密码见“常见问题”,一般都为“www.360mb.net”!
申明: 模板吧提供资源仅供学习用途,禁止用于搭建非法网站,本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。