响应式工具:

  1. <div class="container">
  2. <!--
  3. 针对不同的宽度 展示或隐藏相关内容
  4. visible-lg-block 显示
  5. hidden-lg 隐藏
  6. -->
  7. <div class="row">
  8. <div class="col-lg-4 visible-lg-block">1</div>
  9. <div class="col-lg-4 visible-lg-inline">2</div>
  10. <div class="col-lg-4 visible-lg-inline-block">3</div>
  11. </div>
  12.  
  13. <div class="row">
  14. <div class="col-lg-4 hidden-lg">4</div>
  15. </div>
  16. </div>

打印样式:

  1. <div class="container">
  2. <!--
  3. visible-print-block: 只有在打印的时候显示
  4. hidden-print 打印的时候不显示
  5. -->
  6. <div class="row">
  7. <div class="col-lg-3 visible-print-block">1</div>
  8. <div class="col-lg-3 visible-print-inline">2</div>
  9. <div class="col-lg-3 visible-print-inline-block">3</div>
  10. <div class="col-lg-3 hidden-print">4</div>
  11. </div>
  12. </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. ES

    https://www.elastic.co/guide/en/elasticsearch/reference/current/setup-service-win.html https://www.e ...

  2. 套接字I/O模型-select

    共有6种类型套接字I/O模型.blocking(阻塞),select(选择),WSAAsyncSelect(异步选择),WSAEventSelect(事件选择),overlapped(重叠),comp ...

  3. java_queue

    队列是一种特殊的线性表,先进先出(first in first out)FIFO,它只允许在表的前端(front)进行删除操作,只允许在表的后端(rear)进行插入操作. 实际应用:排队等待公交车,银 ...

  4. c#判断特殊字符?

    , ).Select(c => (char)c).Where(c => char.IsSymbol(c) || char.IsPunctuation(c)).ToArray()); Deb ...

  5. 如何处理ABBYY中出现错误代码142和55的问题

    在使用ABBYY FineReader 12OCR文字识别软件创建PDF文件时,有时会出现以下错误提示:内部程序错误..\Src\SpecialFontFactory.cpp,142和内部程序错误.. ...

  6. DW(三):polybase基本理论

    PolyBase is a technology that accesses and combines(整合) both non-relational and relational data, all ...

  7. 【shell】通配符

    ‘’与“” [root@andon ~]# name='$date' [root@andon ~]# echo $name $date [root@andon ~]# name=abc [root@a ...

  8. Javascript跨域问题解决方案

    ---本方法来自网上,因最近项目需求,解决了三天未果,最终发现此文并测试可用. 一个 非常优雅绝妙的解决方案!话不多说,直接上解决方案原理图: 该图要解决的问题说明如下:在AAA.com域名下的ind ...

  9. zend studio一些常用配置

    zend studio 常用 配置 1.zend中添加注释是ctrl+slash,这个slash在哪里?如何来取消注释 slash是斜杠'/'那个键,就是在,.之后的那个. 进行注释是 ctrl+'/ ...

  10. HTML常用标签(自用,可能不严谨,勿怪)

    html标签中‘<’和‘>’默认被占用,如果想要显示出这些符号,就需要使用特殊字符来实现'<':使用&lt实现'>':使用&gt实现空格:html中再多的空格默 ...