响应式工具:

<div class="container">
<!--
针对不同的宽度 展示或隐藏相关内容
visible-lg-block 显示
hidden-lg 隐藏
-->
<div class="row">
<div class="col-lg-4 visible-lg-block">1</div>
<div class="col-lg-4 visible-lg-inline">2</div>
<div class="col-lg-4 visible-lg-inline-block">3</div>
</div> <div class="row">
<div class="col-lg-4 hidden-lg">4</div>
</div>
</div>

打印样式:

<div class="container">
<!--
visible-print-block: 只有在打印的时候显示
hidden-print 打印的时候不显示
-->
<div class="row">
<div class="col-lg-3 visible-print-block">1</div>
<div class="col-lg-3 visible-print-inline">2</div>
<div class="col-lg-3 visible-print-inline-block">3</div>
<div class="col-lg-3 hidden-print">4</div>
</div>
</div>

bootstrap-响应式工具和打印样式的更多相关文章

  1. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 移动web——bootstrap响应式工具

    基本介绍 1.利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容. 基本使用 <!DOCTYPE html> <html lang="zh-CN&qu ...

  3. Bootstrap(6)辅组类和响应式工具

    一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...

  4. 第二百三十六节,Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  5. Bootstrap内辅助类,响应式工具,组件的个人总结

    辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, torto ...

  6. Bootstrap 辅组类和响应式工具

    1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...

  7. bootstrap——辅助类和响应式工具类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. bootstrap 学习笔记(5)---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  9. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

随机推荐

  1. 5分钟让你学会用最高效的工具解析所有Json

    如果你是一个Android开发工程师,学会解析Json字符串是你的必修课,本篇文章主要以实例的方式手把手教你怎么做,花五分钟时间阅读本篇文章你就可以学会解析所有的Json字符串啦. 准备: json字 ...

  2. sed命令拷屏

    http://blog.sina.com.cn/s/blog_45497dfa0100w6r3.html  sed样例较多,可以参考 http://blog.sina.com.cn/s/blog_6d ...

  3. 题目1049:字符串去特定字符——九度OJ

    题目1049:字符串去特定字符 http://ac.jobdu.com/problem.php?pid=1049 时间限制:1 秒 内存限制:32 兆 题目描述: 输入字符串s和字符c,要求去掉s中所 ...

  4. Linux-实用的工具

    1.Nethogs-查看进程占用带宽情况wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm # ...

  5. Zookeeper 源码分析-启动

    Zookeeper 源码分析-启动 博客分类: Zookeeper   本文主要介绍了zookeeper启动的过程 运行zkServer.sh start命令可以启动zookeeper.入口的main ...

  6. java file的一些方法

    file包下的一些方法:       File file = new File("d:\\", "tea.txt");         //文件名        ...

  7. 解决“未启用当前数据库的 SQL Server Service Broker,因此查询通知不受支持。如果希望使用通知,请为此数据库启用 Service Broker”错误

    转自:http://blog.csdn.net/andrew_wx/article/details/6947317 解决办法: ALTER DATABASE 数据库名称 SET NEW_BROKER  ...

  8. Velocity语法--转载

    Velocity是一个基于java的模板引擎(template engine),它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象.作为一个比较完善 ...

  9. Android 6.0删除Apache HttpClient相关类的解决方法

    相应的官方文档如下: 上面文档的大致意思是,在Android 6.0(API 23)中,Google已经移除了Apache HttpClient相关的类,推荐使用HttpUrlConnection. ...

  10. presto访问 Azure blob storage

    当集群使用Azure Blog Storage时,prestoDB无法获取返回结果,在此记录下 如下,hive里面的两个表,一个使用的是本地的hdfs,一个是使用 azure blob storage ...