响应式工具:

<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. C#分部方法

    C#分部方法必须是私有的,不能返回值.分部方法主要用内部信息处理中. 下面的例子,有一个分部类People,其中一个定义一个分部方法SetDefaultValue,另外一个类中实现了其中的逻辑处理. ...

  2. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  3. SQL server 2008 Express Edition实现自动备份和自动删除备份

    1.查看SQL 版本: select @@VERSION --可以看到 Express Edition 精简免费版 Microsoft SQL Server 2008 R2 (SP2) - 10.50 ...

  4. 【Android代码片段之八】监听Android屏幕是否锁屏

    实现方法:1)通过BroadcastReceiver接收广播Intent.ACTION_SCREEN_ON和Intent.ACTION_SCREEN_OFF可以判断屏幕状态是否锁屏,但是只有屏幕状态发 ...

  5. SQL集合运算参考及案例(一):列值分组累计求和

    概述 目前企业应用系统使用的大多数据库都是关系型数据库,关系数据库依赖的理论就是针对集合运算的关系代数.关系代数是一种抽象的查询语言,是关系数据操纵语言的一种传统表达方式.不过我们在工作中发现,很多人 ...

  6. Mysql 排序优化与索引使用(转)

    为了优化SQL语句的排序性能,最好的情况是避免排序,合理利用索引是一个不错的方法.因为索引本身也是有序的,如果在需要排序的字段上面建立了合适的索引,那么就可以跳过排序的过程,提高SQL的查询速度.下面 ...

  7. 基于spring-boot的web应用,ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  8. js之引用类型

    一.摘要: <javascript高级程序设计第三版>一书中单独有一章对js的引用类型(Object.Array.RegExp.Function:基本包装类型:Boolean.Number ...

  9. Redis 宣言(Redis Manifesto)

    Redis 的作者 antirez(Salvatore Sanfilippo)曾经发表了一篇名为 Redis 宣言(Redis Manifesto)的文章,文中列举了 Redis 的七个原则,以向大家 ...

  10. Hadoop:使用Mrjob框架编写MapReduce

    Mrjob简介 Mrjob是一个编写MapReduce任务的开源Python框架,它实际上对Hadoop Streaming的命令行进行了封装,因此接粗不到Hadoop的数据流命令行,使我们可以更轻松 ...