BootStrap学习之辅组类和响应式工具介绍

本篇文章就给大家介绍bootstrap学习之辅组类响应式工具。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程!

text-*表示字体颜色,bg-*表示字体的背景颜色

关闭按钮 .close

1.jpg

登录后复制

默认位置为 父元素的右上角

小三角图标 .caret

登录后复制

快速浮动 .pull-left 和 .pull-right

我是文字

我是文字

登录后复制

这个浮动其实就是 float,只不过使用了!important 加强了优先级。

块状居中 center-block

我是文字

登录后复制

清理浮动 clearfix

我是文字

我是文字

登录后复制

这个 p 可以放在需要清理浮动区块的前面即可。

显示(.show)和隐藏(.hidden)

我是文字

登录后复制

其实就是 display :block或none  添加了一个!important加强了优先级

响应式工具

 

超小屏幕

手机(

小屏幕

平板(≥768px)

中等屏幕

桌面(≥992px)

大屏幕

桌面(≥1200px)

.visible-xs-*显示   .visible-sm-* 显示  .visible-md-*  显示 .visible-lg-*   显示.hiddem-xs隐藏   .hidden-sm 隐藏  .hidden-md  隐藏 .hidden-lg   隐藏

对于显示的内容,有三种变体,分别为:block、inline-block、inline。

所加的样式都添加了 !important 的优先级。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是BootStrap学习之辅组类和响应式工具介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2890491.html

(0)
上一篇 2025年3月10日 22:03:07
下一篇 2025年3月10日 22:03:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论