可见框架-像素选择 -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框架-----可见 隐藏的更多相关文章

  1. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  2. 移动Web学习笔记（第1天）-bootstrap框架的使用

    移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...

  3. Bootstrap框架 inconfont font-awesome

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

  4. Bootstrap 框架 day57

    Bootstrap框架  Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...

  5. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

  6. bootstrap框架的搭建

    bootstrap框架 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快 ...

  7. day 49 Bootstrap框架和inconfont、font-awesome使用

    Bootstrap框架和inconfont.font-awesome使用   iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...

  8. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  9. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

随机推荐

  1. 使用Diagnose服务查看Azure网站诊断信息

    注意:当前操作只针对"基本"和"标准"模式的网站(也就是有独立实例的网站) 登陆网站的kudu模式:http://{yoursitename}.scm.chin ...

  2. JNDI全面总结

    JNDI全面总结原理: 在DataSource中事先建立多个数据库连接,保存在数据库连接池中.当程序访问数据库时,只用从连接池中取空闲状态的数据库连接即可,访问结束,销毁资源,数据库连接重新回到连接池 ...

  3. 1.servlet的会话机制cookie

    会话:用户开浏览器访问某个网站,只要不关闭浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个过程称为一次会话 cookie会话: 1.记录用户上次登录的时间 2.浏览商品的历史 ...

  4. sqlserver2008 R2 创建作业（定时任务）

    如题: 第一步: 第二步: 第三步: 第四步: 第五步: 第六步: 第七步: 完成!!! 记得把服务打开.设置为自动启动,别重启服务器后没用了.

  5. DOS批处理中%cd%和%~dp0的区别

    DOS批处理中%cd%和%~dp0的区别   在DOS的批处理中,有时候需要知道当前的路径. 在DOS中,有两个环境变量可以跟当前路径有关,一个是%cd%, 一个是%~dp0.       这两个变量 ...

  6. WKWebView使用及注意点

    iOS8之后,苹果推出了WebKit这个框架,用来替换原有的UIWebView,新的控件优点多多,不一一叙述.由于一直在适配iOS7,就没有去替换,现在仍掉了iOS7,以为很简单的就替换过来了,然而在 ...

  7. linux 生成KEY的方法与使用

    转自:http://blog.163.com/tqq_0716/blog/static/7690741220110611350344/ 服务器A: 192.168.1.1 服务器B: 192.168. ...

  8. lishell学习之路:流程控制(case)

    流程控制case语句: 介绍:多分支case条件语句 1.case语句和if..elif..else语句一样都是多分支条件语句,不过和if多分支条件语句不同的是,case语句只能判断一种条件关系,而i ...

  9. CFgym Board Queries （旋转、翻转简化）

    http://codeforces.com/gym/100497 codeforces 2014-2015 CT S02E04: Codeforces Trainings Season 2 Episo ...

  10. c#winform选择文件,文件夹,打开指定目录方法

    private void btnFile_Click(object sender, EventArgs e) { OpenFileDialog fileDialog = new OpenFileDia ...