BootStrap辅组类和响应式工具怎么用
这篇“BootStrap辅组类和响应式工具怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“BootStrap辅组类和响应式工具怎么用”文章吧。
<buttonclass="close">×</button>
默认位置为父元素的右上角
小三角图标.caret
<spanclass="caret"></span>
快速浮动.pull-left和.pull-right
<pclass="stpull-right">我是文字</p>
<pclass="stpull-left">我是文字</p>
这个浮动其实就是float,只不过使用了!important加强了优先级。
块状居中center-block
<pclass="stcenter-block">我是文字</p>
清理浮动clearfix
<pclass="stpull-left">我是文字</p>
<pclass="clearfix"></p>
<pclass="st">我是文字</p>
这个p可以放在需要清理浮动区块的前面即可。
显示(.show)和隐藏(.hidden)
<pclass="stshow">我是文字</p>
<pclass="sthidden">我是文字</p>
其实就是display:block或none添加了一个!important加强了优先级
响应式工具
超小屏幕
手机(<768px)
小屏幕
平板(≥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辅组类和响应式工具怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341