javascript - Angular Bootstrap 中的响应式菜单

Question

我正在尝试使用响应式菜单在 Bootstrap 中创建以下 UI，任何人都可以为我提供如何实现此目标的指南。顶部和侧面菜单都应该具有响应能力。以下是我尝试创建的 URL。

Answer 1

假设您了解网页设计的基础知识，我将向您简要解释 Bootstrap 的工作原理。

Bootstrap 是 HTML、CSS 和 JS 框架，可以自动处理响应能力。您必须仅正确包含库，并知道您也将哪些 Bootstrap css 类包含到 HTML 标记中。

例如，如果您想实现绘图中用于搜索的设计部分，则必须执行类似Bootstrap documentation中的操作

或 navbar .

我将为您提供有关问题的组件结构的快速提示(当然，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 grid system 。 这是不可避免的用于组件组织。

就像 documentation 那样练习，仔细学习 Bootstrap css 类和组织，一段时间后，您将能够设计更复杂的东西。

我希望我在理论上涵盖了使用 Boostrap 框架设计所需的所有内容。