响应式工具：

<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. exceptions-in-java

    http://www.javaworld.com/article/2076721/core-java/designing-with-exceptions.html http://www.javawor ...

  2. Json Null 不输出

    [TestMethod]        public void NodeTest()        {            datanode d = new datanode()           ...

  3. noip2014普及组 比例简化

    题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为1498:902. 不过,如 ...

  4. PHP 5.6.11 访问SQL Server2008R2

    PHP天生支持MySQL,但是有时候也想让它访问SQL Server,该怎么办呢? 最近找了点资料,测试成功了PHP访问SQLSvr的几种情况,限于时间,还没有测试更多不同环境,把测试过的记录如下: ...

  5. jQuery Mobile_表单元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. sql查询重复记录并取对应最小值

    原表(aa): id   a                      b 1    22                    456 2    22                    256 ...

  7. ORACLE 常用日期函数

    1 . add_months(arg1,num) 返回日期arg1加num个月的新日期. select add_months(date'2011-1-1',1) from dual; result:  ...

  8. linux vi 工具的使用

    linux vi 工具的使用 1.打开文件 vi filename 如果存在该文件,则打开,不存在,则删除 2. 进入vi后,按i建,可以输入内容, 按ESC 在按: ,输入wq保存并退出. 3.移动 ...

  9. openstack(liberty):部署实验平台（二，简单版本软件安装 part1）

    软件安装过程中,考虑到现在是一个实验环境,且也考虑到规模不大,还有,网络压力不会大,出于简单考虑,将各个节点的拓扑结构改了一下,主要体现在网络节点和控制节点并在了一起.在一个服务器上安装! 到目前位置 ...

  10. html中间块居中宽度自适应

    说来,这个其实不是个多难的事情,但是,若没有经验或者没有了解过html原数在浏览器中显示的顺序,可能还真是个问题,不知如何调整. 先说明下,在确定了左右两边显示的块的宽度后,再让中间块的宽度自适应,这 ...