Angular Bootstrap 中的响应式菜单

Question

我正在尝试使用响应式菜单在引导程序中创建以下 UI，任何人都可以提供指导我如何实现这一点。顶部和侧边菜单都应该是响应式的。 以下是我要创建的 URL。

Answer 1

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

Bootstrap 是 HTML、CSS 和 JS 框架，用于处理响应性自动。您必须只正确地包含库，并且知道哪些 Bootstrap css-classes 也包含在您的 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-classes和组织，之后，你将能够设计更复杂的东西。

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