bootstrap隱藏元素的方法：1、開啟對應的程式碼檔案；2、在bootstrap中透過為元素加上「display:none;」或「visibility:hidden;」樣式來隱藏元素即可。
本教學操作環境：windows7系統，bootstrap3版本，Dell G3電腦。
顯示和隱藏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="max-width:90%" 隐藏后不释放空间
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教程》
以上是bootstrap 怎麼隱藏元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
