zoukankan      html  css  js  c++  java
  • bootstrap基础学习九篇

    现在学学bootstrap响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

    需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换

      超小屏幕
    手机 (<768px)
    小屏幕
    平板 (≥768px)
    中等屏幕
    桌面 (≥992px)
    大屏幕
    桌面 (≥1200px)
    .visible-xs-* 可见 隐藏 隐藏 隐藏
    .visible-sm-* 隐藏 可见 隐藏 隐藏
    .visible-md-* 隐藏 隐藏 可见 隐藏
    .visible-lg-* 隐藏 隐藏 隐藏 可见
    .hidden-xs 隐藏 可见 可见 可见
    .hidden-sm 可见 隐藏 可见 可见
    .hidden-md 可见 可见 隐藏 可见
    .hidden-lg 可见 可见 可见 隐藏

    打印类:

    class浏览器打印机
    .visible-print-block
    .visible-print-inline
    .visible-print-inline-block
    可见
    .hidden-print 可见

    代码示例:

    <div class="container" style="padding: 40px;">
       <div class="row visible-on">
          <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <span class="hidden-xs">特别小型</span>
             <span class="visible-xs">✔ 在特别小型设备上可见</span>
          </div>
          <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <span class="hidden-sm">小型</span>
             <span class="visible-sm">✔ 在小型设备上可见</span>
          </div>
          <div class="clearfix visible-xs"></div>
          <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <span class="hidden-md">中型</span>
             <span class="visible-md">✔ 在中型设备上可见</span>
          </div>
          <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <span class="hidden-lg">大型</span>
             <span class="visible-lg">✔ 在大型设备上可见</span>
          </div>
    </div>
  • 相关阅读:
    linux下python3环境安装(源码编译的方式安装)
    windows下docker安装(windows上安装docker比较鸡肋不推荐,还是建议在linux等系统上安装)
    序列化器嵌套的使用
    采用自定义模型字段代替序列化器嵌套的使用来返回我们想要的数据
    xadmin后台的安装及配置使用
    ORACLE检查找出损坏索引(Corrupt Indexes)的方法详解
    OGG相关操作
    ESXi挂载NFS共享存储
    第4步:创建RAC共享磁盘组
    Zabbix Server 配置微信报警
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5226456.html
Copyright © 2011-2022 走看看