首页前端开发其他前端知识bootstrap怎么隐藏元素,具体方法是什么?

bootstrap怎么隐藏元素,具体方法是什么?

时间2024-03-27 07:40:03发布访客分类其他前端知识浏览1305
导读:这篇文章主要为大家详细介绍了bootstrap怎么隐藏元素,具体方法是什么?,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习或工作能有帮助。 bootstrap隐藏元素的方法:首先打开相应的...
这篇文章主要为大家详细介绍了bootstrap怎么隐藏元素,具体方法是什么?,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习或工作能有帮助。

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怎么隐藏元素,具体方法是什么?”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

bootstrap

若转载请注明出处: bootstrap怎么隐藏元素,具体方法是什么?
本文地址: https://pptw.com/jishu/654075.html
go语言是怎么设置定时器的,方法是什么? 安装bootstrap的步骤和方式是怎样的

游客 回复需填写必要信息