BootStrap辅组类和响应式工具怎么用

发布时间:2022-03-22 09:48:33 作者:iii
来源:亿速云 阅读:131

这篇“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辅组类和响应式工具怎么用

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

推荐阅读:
  1. Bootstrap 列表组面板和嵌入组件
  2. 辅组类和响应式工具

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap

上一篇:CSS ID选择器的语法是什么

下一篇:CSS结构性伪类选择器有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》