bootstrap初探2
- 控制是否显示: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,所以在小分辨率和超小分辨率下均不显示
- 设置浮动pull-left(左浮动),pull-right(右浮动)
- 设置固定定位 class="affix"
- 设置打印模式下是否可见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的更多相关文章
- bootstrap初探
bootstrap资源 http://getbootstrap.com http://github.com/twbs http://www.bootcss.com bootstrap栅格系统 容器:流 ...
- 初探Bootstrap之十二栅格
模型1: <!-- 4/12 --> <div class="container"> <div class="row"> & ...
- Ext JS 5初探(二) ——Bootstrap.js
在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...
- C#进阶系列——DDD领域驱动设计初探(七):Web层的搭建
前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...
- tomcat线程初探
博主:handsomecui,希望路过的各位大佬留下你们宝贵的意见,在这里祝大家冬至快乐. 缘由: 初探缘由,在业务层想要通过(当前线程的栈)来获取到控制层的类名,然后打日志,可是发现并不能通过当前线 ...
- django初探-创建简单的博客系统(二)
上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...
- ASP.NET Core 微服务初探[1]:服务发现之Consul
ASP.NET Core 微服务初探[1]:服务发现之Consul 在传统单体架构中,由于应用动态性不强,不会频繁的更新和发布,也不会进行自动伸缩,我们通常将所有的服务地址都直接写在项目的配置文件 ...
- freeswitch编译安装,初探, 以及联合sipgateway, webrtc server的使用场景。
本文主要记录freeswitch学习过程. 一 安装freeswitch NOTE 以下两种安装方式,再安装的过程中遇到了不少问题,印象比较深刻的就是lua库找到不到这个问题.这个问题发生在make ...
- 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造
第一境 ASP.Net MVC5项目初探 — 第三节:View层简单改造 MVC默认模板的视觉设计从MVC1到MVC3都没有改变,比较陈旧了:在MVC4中做了升级,好看些,在不同的分辨率下,也能工作得 ...
随机推荐
- Android学习----Android Studio 技巧汇总
关于快捷键 The File Structure Popup ctrl+f12此快捷键可以调出当前文件的大纲,并通过模糊匹配快速跳转至指定的方法.勾选上“show anonymous classes” ...
- js 联系电话验证实现
var str=$('#tele').val(); var regPartton=/1[3-8]+\d{9}/; ...
- 驱动读写进程内存R3,R0通信
stdafx.h 头文件代码 #ifndef _WIN32_WINNT // Allow use of features specific to Windows XP or later. #defin ...
- 一个md5加密的工具类,用的虚拟机的包,不需要额外导包
package com.yun.park.service.utils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import jav ...
- angular2 学习笔记 ( Http 请求)
refer : https://angular.cn/docs/ts/latest/guide/server-communication.html https://xgrommx.github.io/ ...
- cf D. Maximum Submatrix 2
http://codeforces.com/contest/376/problem/D 题意:给你一个矩阵,可以随意排列n行的次序,然后找出全部含有1的子矩阵.输出1的个数. 思路:c[i][j]表示 ...
- flex中validateall()方法, 多Item验证 ,结果统一提示
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- POJ1125 Stockbroker Grapevine(最短路)
题目链接. 分析: 手感不错,1A. 直接穷举的起点, 求出不同起点到其它点最短路中最长的一条的最小值(好绕). #include <iostream> #include <cstd ...
- 自己动手学TCP/IP–http协议(http报文头)
在前面的一篇文章中,简单了介绍了HTTP报文格式,详情参考http://www.firefoxbug.net/?cat=47. 这里大概介绍下基本的,常见的HTTP包头格式. POST /report ...
- 【动态规划】XMU 1588 01序列计数
题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1588 题目大意: 给n1个0和n2个1,连续的0不超过k1个,连续的1不超过k2个.问 ...