首页 / css教程

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

    类型:转载      发布者:青灯夜游2018-10-13 17:48:41

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

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

    关闭按钮 .close

    1.jpg

    <button class="close">×</button>

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

    小三角图标 .caret

    <span class="caret"></span>

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

    <p class="st pull-right">我是文字</p>
    <p class="st pull-left">我是文字</p>

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

    块状居中 center-block

    <p class="st center-block">我是文字</p>

    清理浮动 clearfix

    <p class="st pull-left">我是文字</p>
    		
    <p class="clearfix"></p>
    		
    <p class="st">我是文字</p>

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

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

    <p class="st show">我是文字</p>
    		
    <p class="st hidden">我是文字</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学习之辅组类和响应式工具介绍的详细内容,更多请关注php中文网其它相关文章!

    本文来源于:https://blog.csdn.net/dfggffdd/article/details/80028318,如有侵犯,请联系删除
php中文网赞助会员

PHP中文网

未登录