1. 控制是否显示：visible-(lg | md | sm |sx)-(block | inline | inline-block), hidden-(lg | md | sm |sx)

      1. <!DOCTYPE HTML>
      2. <html>
      3.     <head>
      4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      5.         <title>无标题文档</title>
      6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
      7.         <meta name="viewport" content="width=device-width, initial-scale=1">
      8.         <link rel="stylesheet" href="css/bootstrap.css">
      9.         <style>
      10.             .container{ border:1px #000 solid; background: #CCC;}
      11.             div[class^=col-] { color: white; border: 1px solid red;}
      12.         </style>
      13.     </head>
      14. <body>
      15.  
      16. <div class="container">
      17.     <div class="row">
      18.         <div class="col-lg-4 visible-lg-block">aaaaaa</div>
      19.         <div class="hidden-sm hidden-xs">bbbbbb</div>
      20.     </div>
      21. </div>
      22.  
      23. </body>
      24.     <script src="js/jquery-2.1.3.js"></script>
      25.     <script src="js/bootstrap.js"></script>
      26. </html>
    • 下图为大分辨率（lg）下的显示，两个div均能显示

    • 下图为md分辨率下的显示，由于设置了visible-lg-block，即只有在大分辨率下才能显示，所以在md下，aaaaaa不能显示
    • 下图为在小分辨率下的显示，由于第二个div设置了hidden-sm hidden-xs，所以在小分辨率和超小分辨率下均不显示
  2. 设置浮动pull-left(左浮动)，pull-right(右浮动)
  3. 设置固定定位 class="affix"
  4. 设置打印模式下是否可见visible-print-block，hidden-print，demo如下所示，在打印模式下只能看见aaaaaa，在非打印模式下只能看见bbbbbb 
    1. <!DOCTYPE HTML>
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5.         <title>无标题文档</title>
    6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.         <meta name="viewport" content="width=device-width, initial-scale=1">
    8.         <link rel="stylesheet" href="css/bootstrap.css">
    9.         <style>
    10.             .container{ border:1px #000 solid; background: #CCC;}
    11.             div[class^=col-] { color: white; border: 1px solid red;}
    12.         </style>
    13.     </head>
    14. <body>
    15.  
    16. <div class="container">
    17.     <div class="row">
    18.         <div class="visible-print-block">aaaaaa</div>
    19.         <div class="hidden-print">bbbbb</div>
    20.     </div>
    21. </div>
    22.  
    23. </body>
    24.     <script src="js/jquery-2.1.3.js"></script>
    25.     <script src="js/bootstrap.js"></script>
    26. </html>

bootstrap初探2的更多相关文章

  1. bootstrap初探

    bootstrap资源 http://getbootstrap.com http://github.com/twbs http://www.bootcss.com bootstrap栅格系统 容器:流 ...

  2. 初探Bootstrap之十二栅格

    模型1: <!-- 4/12 --> <div class="container"> <div class="row"> & ...

  3. Ext JS 5初探（二） ——Bootstrap.js

    在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...

  4. C#进阶系列——DDD领域驱动设计初探（七）：Web层的搭建

    前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...

  5. tomcat线程初探

    博主:handsomecui,希望路过的各位大佬留下你们宝贵的意见,在这里祝大家冬至快乐. 缘由: 初探缘由,在业务层想要通过(当前线程的栈)来获取到控制层的类名,然后打日志,可是发现并不能通过当前线 ...

  6. django初探-创建简单的博客系统(二)

    上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...

  7. ASP.NET Core 微服务初探[1]：服务发现之Consul

    ASP.NET Core 微服务初探[1]:服务发现之Consul   在传统单体架构中,由于应用动态性不强,不会频繁的更新和发布,也不会进行自动伸缩,我们通常将所有的服务地址都直接写在项目的配置文件 ...

  8. freeswitch编译安装，初探， 以及联合sipgateway, webrtc server的使用场景。

    本文主要记录freeswitch学习过程. 一 安装freeswitch NOTE 以下两种安装方式,再安装的过程中遇到了不少问题,印象比较深刻的就是lua库找到不到这个问题.这个问题发生在make ...

  9. 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第三节：View层简单改造

    第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...

随机推荐

  1. sql server 利用首字母拼音排序和笔画排序的语句

    --按笔画排序 select * from Student order by Sname COLLATE Chinese_PRC_Stroke_CS_AS_KS_WS --按字母拼音排序 select ...

  2. windows下apache配置ssl（https）服务器

    SSl是为Http传输提供安全的协议,通过证书认证来确保客户端和网站服务器之间的数据是安全, 可以通过apache自带的openssl进行配置: 步骤如下: 1.安装有openssl模板的apache ...

  3. Thinkphp 零散知识点(caa/js路径，引入第三方类，ajax返回，session/cookie)

    一.关于JS和CSS路径问题 1.找路径是从入口文件index.php来找的,而不是从文件本身所在位置来找, 因为我们访问时是访问的入口文件 2.在存放JS和CSS的时候可以放到public文件夹下 ...

  4. exit() die return 的区别

    rutrun 会返回一个值,或不返回值 只是当前函数内return后面的语句将不会执行,后面的其它语句继续执行exit()可以返回值,也可以不返回值直接终止程序 函数输出一条消息,并退出当前脚本. 会 ...

  5. 柔性数组-读《深度探索C++对象模型》有感 (转载)

    最近在看<深度探索C++对象模型>,对于Struct的用法中,发现有一些地方值得我们借鉴的地方,特此和大家分享一下,此间内容包含了网上搜集的一些资料,同时感谢提供这些信息的作者. 原文如下 ...

  6. access数据库管理软件收集下载

    access百科 Microsoft Office Access是由微软发布的关系数据库管理系统.它结合了 MicrosoftJet Database Engine 和 图形用户界面两项特点,是 Mi ...

  7. oracle导入

    1 建立all.sql脚本,此脚本内容指定了insert脚本的路径all.sql脚本内容如下: @D:\workspace\workspace-二期开始使用的文件\Test\数据库升级工具\导入基础数 ...

  8. cypress的EZ-USB对于USB的介绍

    Host is MasterThis is a fundamental USB concept. There is exactly onemaster in a USB system: the hos ...

  9. SAE、搜狐云景和百度云之初见

    近期有需求将我们的应用部署到公有云的服务平台上,于是找了几家公有云服务做了一下调研, 首先对比一下他们提供的功能: 功能 SAE 搜狐云景 百度云 版本控制工具 svn  GIT,和百度云的比起来,用 ...

  10. KEIL C51之绝对地址定位

    单片机空间分配看*.M51文件,ARM,DSP空间分配看*.map文件 1.函数定位 假如要把C源文件 tools.c 中的函数 int BIN2HEX(int xx) { ... } 放在CODE ...