bootstrop框架-----可见隐藏

Posted 2020-08-09 distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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>

以上是关于bootstrop框架-----可见隐藏的主要内容，如果未能解决你的问题，请参考以下文章

bootstrop框架----像素

bootstrop设置背景图片自适应屏幕

您可以隐藏 QGroupBox 框架但保留其内容可见吗？

用bootstrop的dropdown遇到的坑

mui表单怎么隐藏

bootstrop

bootstrop框架-----可见 隐藏

bootstrop框架-----可见隐藏