bootstrap框架-----可见 隐藏
可见框架-像素选择 -block-inline :块内联元素
-inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和高度地块元素的属性
visible-md sd sx - block-inline ; inline-block;
hidden:隐藏用法=visible;
class='pull left' 左浮动 class='pull right' 右浮动
affix:绝对定位! margin:0; left:0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
div[class*='col-']{ background:#666; border:1px solid #039; min-height:50px; color:#FFF;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
<div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
</div>
</div>
</body>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.1.js"></script>
</html>
利用浮动做侧边框 pull-right; pull-left
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.dip1{ width:35px; height:300px; background:#03C; color:#CCC;}
.dip2{ width:60px; height:500px; background:#13C; color:#CCC;}
</style>
<body>
<!--<div class="container">
<div class="row">
<div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
<div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
</div>
</div>-->
<div class='container-fluid pull-right'>
<div class="row"><!--解决边界-->
<div class="hidden-lg dip1 pull-right">小于960显示
</div>
<div class="visible-lg-block dip2">大于960时显示
</div>
</div>
</div>
</body>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.1.js"></script>
</html>
利用绝对定位affix margin:0; left:0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.dip1{ width:35px; height:300px; background:#03C; color:#CCC; right:0;}
.dip2{ width:60px; height:500px; background:#13C; color:#CCC; right:0;}
</style>
<body>
<!--<div class="container">
<div class="row">
<div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
<div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
</div>
</div>-->
<div class='container-fluid affix'>
<div class="row"><!--解决边界-->
<div class="hidden-lg dip1 affix">小于960显示
</div>
<div class="visible-lg-block dip2 affix">大于960时显示
</div>
<div>Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 </div>
</div>
</div>
</body>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.1.js"></script>
</html>
bootstrap框架-----可见 隐藏的更多相关文章
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 移动Web学习笔记(第1天)-bootstrap框架的使用
移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- Bootstrap 框架 day57
Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...
- 响应式开发(二)-----Bootstrap框架的介绍
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...
- bootstrap框架的搭建
bootstrap框架 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快 ...
- day 49 Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
随机推荐
- php上传$_FILES 无法取值
无法取值的主要原因在form. 代码 <form method="post" action="****" name="theForm" ...
- WKWebView使用及注意点
iOS8之后,苹果推出了WebKit这个框架,用来替换原有的UIWebView,新的控件优点多多,不一一叙述.由于一直在适配iOS7,就没有去替换,现在仍掉了iOS7,以为很简单的就替换过来了,然而在 ...
- step 3 socket
socket 网络通讯三要素 IP地址(主机名) 网络中设备的标示 不易记忆,可以用主机名 本地回环地址:127.0.0.1 主机名:localhost 每台计算机都有一个 127.0.0.1 如果 ...
- TableView的执行流程 & 位移枚举
// 闲来无聊测试一下 第一轮: 1.numberOfSectionsInTableView :假如section=2,此函数只执行一次,假如section=0,下面函数不执行,默认为1 2.h ...
- [CentOs7]iptables防火墙安装与设置
摘要 CentOS 7.0默认使用的是firewall作为防火墙,如果改为iptables防火墙,如何操作? 关闭firewall: systemctl stop firewalld.service ...
- c# 字符串前加@
@在c#中为强制不转义的符号,在里面的转义字符无效. 例如:Console.WriteLine("你好\t吗?"); Console.WriteLine(@"你好\t吗& ...
- 记录在xx公司被考核的15天及自己的感想
在大学有两件事让我很遗憾. 第一:在2013年7月我和自己的前任女朋友分手,这是两年前的事了,我们谈了七个月. 第二:在2015年4月我被xx公司淘汰了,正如我的前任女朋友是我遇到的最好女孩,这家公司 ...
- 2015年11月26日 Java基础系列(四)class的定义,继承和实现interface
序,类的设计是JAVA操作的核心,面对对象思想中一切皆对象. 一.类定义中的变量 静态成员变量,为类所有,称为类变量:只有一份,编译时即分配值,使用关键字static声明. 非静态成员变量,每个实例一 ...
- ie下获取上传文件全路径
ie下获取上传文件全路径,3.5之后的火狐是没法获取上传文件全路径的 /*获取上传文件路径*/ function getFilePath(obj) { var form = $(this).paren ...
- php远程连接http方式
以下这三者是通过GET方式来获取数据 1.socket 方式 一般是指定网址.端口号.超时时间. 再对报头进行修改以及传递参数,包括:header.method.content, 返回的内容包括hea ...