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

    • <!DOCTYPE HTML>
      
<html>
      
    <head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
        <title>无标题文档</title>
      
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="css/bootstrap.css">
      
        <style>
      
            .container{ border:1px #000 solid; background: #CCC;}
      
            div[class^=col-] { color: white; border: 1px solid red;}
      
        </style>
      
    </head>
      
<body>

<div class="container">
      
    <div class="row">
      
        <div class="col-lg-4 visible-lg-block">aaaaaa</div>
      
        <div class="hidden-sm hidden-xs">bbbbbb</div>
      
    </div>
      
</div>

</body>
      
    <script src="js/jquery-2.1.3.js"></script>
      
    <script src="js/bootstrap.js"></script>
      
</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 
    <!DOCTYPE HTML>
    
<html>
    
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <title>无标题文档</title>
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/bootstrap.css">
    
        <style>
    
            .container{ border:1px #000 solid; background: #CCC;}
    
            div[class^=col-] { color: white; border: 1px solid red;}
    
        </style>
    
    </head>
    
<body>

<div class="container">
    
    <div class="row">
    
        <div class="visible-print-block">aaaaaa</div>
    
        <div class="hidden-print">bbbbb</div>
    
    </div>
    
</div>

</body>
    
    <script src="js/jquery-2.1.3.js"></script>
    
    <script src="js/bootstrap.js"></script>
    
</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. jquery 操纵 cookies 插件（1）

    当你浏览某网站时,你硬盘上会生产一个非常小的文本文件,它可以记录你的用户ID.密码.浏览过的网页.停留的时间等信息. 当你再次来到该网站时,网站通过读取Cookies,得知你的相关信息,就可以做出相应 ...

  2. python logging模块使用

    近来再弄一个小项目,已经到收尾阶段了.希望加入写log机制来增加程序出错后的判断分析.尝试使用了python logging模块. #-*- coding:utf-8 -*- import loggi ...

  3. C语言笔记（枚举）

    关于枚举,在我以前写程序的时候,几乎是没有使用过的,只是偶尔会在一下别人写的驱动库中有看到过.今天看了朱老师的视频,准备将枚举相关的东西总结一下. 一.关于枚举,你需要知道 (1)在C语言中就是一些符 ...

  4. TFS使用小技巧

    前述: TFS是微软自家的项目管理软件 link:TFS2012团队管理基本配置及基础使用方法 碰到的问题: 一.[高级—>获取特定版本] 今天做的一个项目,自己引用程序集出错,一直没找到解决方 ...

  5. LRU 算法简单实现

    在学习很多服务器软件中,当内存不够,而需要淘汰内存的时候,一般会使用LRU算法,便产生了浓厚的兴趣.在学习操作系统的过程中发现LRU在系统中用寄存器和栈来实现.所以我就尝试着学习用栈来解决LRU的问题 ...

  6. 把 图片 资源文件 编译到dll

    今天盘古 lucene的改了下.然后 里面有很多文件 . 还有一些 生成多音字的 汉语词典等. 索性一下子编译到dll里面 . 就不在项目里面设置 这些文件的目录了 然后找了下.愣是没找到. 后来发现 ...

  7. Android 之 WebView

    1:在AndroidManifest.xml中添加允许android访问网络权限. <uses-permission android:name="android.permission. ...

  8. Ubuntu 启用root账户

    设置分配很简单,只要为root设置一个root密码就行了: $ sudo passwd root 之后会提示要输入root用户的密码,连续输入root密码,再使用:$ su 就可以切换成超级管理员用户 ...

  9. 调用系统API还是很高效的，不必担心性能

    代码如下: void MainWindow::on_pushButton_2_clicked() { QTime total; total.start(); ; ; i<=*; i++) { Q ...

  10. 哈希集合——hashSet

    /**     哈希集合特点:存取顺序不确定,同一个哈希值的位置可以存放多个元素,                   哈希集合存放元素的时候是先判断哈希地址值:hashCode()是否相同,如果不同 ...