小編給大家分享一下bootstrap如何隱藏元素，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

深州網站制作公司哪家好，找創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、成都響應式網站建設等網站項目制作，到程序開發，運營維護。創新互聯公司公司2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯公司。

bootstrap隱藏元素的方法：首先打開相應的代碼文件；然后在bootstrap中通過給元素添加“display:none;”或“visibility:hidden;”樣式來隱藏元素即可。

顯示和隱藏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如何隱藏元素”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

本文名稱：bootstrap如何隱藏元素
文章出自：http://vcdvsql.cn/article42/jhidhc.html

成都網站建設公司_創新互聯，為您提供外貿建站、定制網站、網站營銷、網站改版、網站設計公司、全網營銷推廣

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯