bootstrap隐藏元素的方法:首先打开相应的代码文件;然后在bootstrap中通过给元素添加“display:none;”或“visibility:hidden;”样式来隐藏元素即可。
本教程操作环境:windows7系统,bootstrap3版本,Dell G3电脑。
相关教程推荐:《bootstrap教程》
显示和隐藏DIV的技巧
使用bootstrap的12分栅来演示
style="display: none;" 隐藏后释放占用的页面空间
document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示
方法:
<div class="form-group"> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{taskId}}</label> <div class="col-md-8"> <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6" style="display:none;"> <label class="col-sm-4 control-label">{{msgId}} </label> <div class="col-sm-8" > <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{createTime}}</label> <div class="xxx input-group col-sm-8" > <input type="text" id="xxx" class="xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{to}}</label> <div class="xxxe input-group col-sm-8"> <input id="xxx" class="xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> </div>
style="visibility:hidden;" 隐藏后不释放空间 document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示
代码:
<div class="form-group"> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{taskId}}</label> <div class="col-md-8"> <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6" style="visibility:hidden;"> <label class="col-sm-4 control-label">{{msgId}} </label> <div class="col-sm-8" > <input type="text" id="xxx" class="form-control"> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{createTime}}</label> <div class="xxx input-group col-sm-8" > <input type="text" id="xxx" class="form-control xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> <div class="col-lg-3 col-sm-6"> <label class="col-sm-4 control-label">{{to}}</label> <div class="xxx input-group col-sm-8"> <input id="xxx" class="form-control xxx"> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> </div>
以上就是bootstrap 怎么隐藏元素的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论