zoukankan html css js c++ java

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{ 35px; height:300px; background:#03C; color:#CCC;}
.dip2{ 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{ 35px; height:300px; background:#03C; color:#CCC; right:0;}
.dip2{ 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>

查看全文

相关阅读:
某个牛人做WINDOWS系统文件详解
 常用ASP脚本程序集锦
 LINUX基础：文件安全与权限
 proftpd+mysql+quota
apache2.0.49tomcat5.0.19jk2建立virtualHost
URL Redirection(转) Anny
顶级域名后缀列表（转） Anny
\u4E00\u9FA5意义 Anny
How to POST Form Data Using Ruby（转） Anny
How to get rid of 'Enter password to unlock your login keyring' in Ubuntu(转) Anny

原文地址：https://www.cnblogs.com/hack-ing/p/5891359.html

bootstrap框架-----可见 隐藏

bootstrap框架-----可见隐藏