Angular Bootstrap中的響應式菜單

Question

我正在嘗試使用響應菜單在引導程序中創建以下UI，任何人都可以向我提供如何實現此目標的指南。 頂部和側面菜單均應響應。 以下是我要創建的URL。

Answer 1

假設您了解Web設計的基礎知識，我將簡要介紹一下Bootstrap的工作原理。

Bootstrap是HTML，CSS和JS框架，可自動處理響應。 您只必須正確地包含這些庫，並且知道哪些Bootstrap css類也已包含在HTML標記中。

例如，如果您要像在圖形中那樣實現搜索的設計部分，則必須在Bootstrap文檔中執行類似此處的操作

或導航欄 。

我將給您快速提示您問題的組件結構（當然，css :)有很多工作）：

     <!--The header-->
        <div class="col-lg-12">    
            <div class="col-lg-12">
                            <div class="col-lg-3"> <!--Logo or whatever in top left side-->
                                <div class="col-xs-6 col-md-3">
                                  <a href="#" class="thumbnail">
                                      <img src="../Content/img/chrome_logo.jpeg" />
                                  </a>
                                </div>
                            </div>
            <div class="6"></div>
                <div class="col-lg-3" style="float:right"> <!--Search input-->
                  <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>
                </div>
            </div>

            <div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
                   <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Menu1</a></li>
                        <li role="presentation"><a href="#">Menu2</a></li>
                        <li role="presentation"><a href="#">Menu3</a></li> 
                        <li role="presentation"><a href="#">Menu4</a></li>
                    </ul>
             </div>
        </div>

<div class="col-lg-12">
   <div class="col-lg-2">
    //HTML PART FOR SIDEBAR
    </div>   
    <div class="col-lg-10">
       //HTML PART FOR MAIN CONTENT
    </div>
</div>

您必須明智地包括確切的col-lg，col-md，col-sm和col-xs類，以達到每種瀏覽器大小的響應度。

學習Boostrap網格系統也是最重要的事情之一。 這對於組件組織是不可避免的。

只需按照文檔中的練習進行操作，仔細學習Bootstrap css類和組織，稍后，您將能夠設計更復雜的內容。

我希望從理論上講我涵蓋了使用Boostrap框架進行設計所需的所有內容。