BootStrap辅组类和响应式工具怎么用
更新:HHH   时间:2023-1-7


这篇“BootStrap辅组类和响应式工具怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“BootStrap辅组类和响应式工具怎么用”文章吧。

    <buttonclass="close">&times;</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)

    小屏幕

    平板(&ge;768px)

    中等屏幕

    桌面(&ge;992px)

    大屏幕

    桌面(&ge;1200px)

    .visible-xs-*显示

    .visible-sm-*显示

    .visible-md-*显示

    .visible-lg-*显示

    .hiddem-xs隐藏

    .hidden-sm隐藏

    .hidden-md隐藏

    .hidden-lg隐藏

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

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




以上就是关于“BootStrap辅组类和响应式工具怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注天达云行业资讯频道。

返回web开发教程...