首页 网络技术
  1. 正文

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辅组类和响应式工具怎么用
本文链接:https://www.qqooo.cn/post/6828.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!