首页 > 代码库 > bootstrop框架-----可见 隐藏
bootstrop框架-----可见 隐藏
可见框架-像素选择 -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="http://www.mamicode.com/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="http://www.mamicode.com/js/bootstrap.js"></script><script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/js/bootstrap.js"></script><script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/js/bootstrap.js"></script><script src="http://www.mamicode.com/js/jquery-1.11.1.js"></script></html>
bootstrop框架-----可见 隐藏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。