博客动态
Hi!欢迎来到Jerry Coding!喜欢请关注!谢谢!有问题可以留言或者点击下面的QQ交流哦!(最近博主划水中。。更新较慢。。。)
微信扫码

扫一扫关注我

More
关于
New
RSS

bootstrap 3和4 实现栅格布局隐藏

Jerry 2019年7月1日 354  

       bootstrap 很好的支持了响应式布局,我们开发过程中可能会遇到界面某个元素只在大显示器设备中显示或者只在小显示器设备中显示,那么bootstrap 提供的栅格布局可以轻松实现。

一、bootstrap3 栅格隐藏

       具体参数如下图,我们只需在class中添加相关属性即可:

       如下格式:

<div class="hidden-sm">
    <h1>小屏幕隐藏</h1>
</div>

<div class="hidden-lg">
    <h1>大屏幕隐藏</h1>
</div>

二、bootstrap4 栅格隐藏

       后来开博客2.0的时候发现原来的bootstrap3版本的hidden-* 和visable-* 都找不到了,网上搜了一下才发现,这两个类属性已经失效了。

       bootstrap4 现在用的是新的类属性:display,具体的可以参考 官网  简单总结了下:

       使用也很简单:

<div class="d-none d-sm-block">
    <h1>小屏幕隐藏</h1>
</div>

<div class="d-lg-none d-xl-block">
    <h1>大屏幕隐藏</h1>
</div>

      赶紧动手试试吧!


原创文章,转载请注明出处: https://jerrycoding.com/article/bootstrap-hidden

微信
支付宝

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论

每日一句 (From ONE)
别怕美好的一切消失,咱们先来让它存在。