引导仪表板答案

【问题标题】：Bootstrap dashboard引导仪表板
【发布时间】：2015-11-18 15:47:24
【问题描述】：

我是引导程序、HTML 以及与 Web 开发相关的所有内容的新手。我正在使用引导程序构建仪表板，并且设法使基本布局正确。我的仪表板有一个顶部和侧面导航栏。

我现在想在不同页面之间导航，而不必重新加载侧边和顶部导航栏。所以我只希望页面的中心部分在点击导航栏上的链接时加载内容，并让点击的链接改变背景颜色以指示用户当前在相应的页面上。这是我的内容 div

<div class="section">
    <div class="container" id="content">
     </div>
</div>

我一直在尝试谷歌一些教程，但我正在努力获得适当的结果，因为我认为我的搜索关键词有点模糊。有没有我可以阅读的地方来学习这些东西，或者这里有没有人可以帮助我。

这是我的代码

<body>
    <div id="wrapper">
      <nav class="navbar navbar-default navbar-static-top" style="background:white">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img alt="Dijo_logo" src="https://dijoapp.co.za/dashboard_resources/logos/dijo8.png"></a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-ex-collapse">
            <ul class="nav navbar-nav navbar-left">
              <li class="active">
                <a href="#">Dashboard</a>
              </li>
              <li>
                <a href="dijoapp.co.za">Admin</a>
              </li>
            </ul>
            <ul class="nav navbar-top-links navbar-right">
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                    </a>
                <ul class="dropdown-menu dropdown-user">
                  <li>
                    <a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                  </li>
                  <li>
                    <a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
              <li class="active">
                <a href="#">Statistics<span class="sr-only">(current)</span></a>
              </li>
              <li>
                <a href="#">Ratings and Reviews</a>
              </li>
            </ul>
          </div>
          <div class="section">
            <div class="container" id="content">
              <div class="side-body"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

【问题讨论】：

使用引导选项卡功能而不是导航。这正是你想要的。 getbootstrap.com/javascript/#tabs

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

它并不能完全回答您的确切问题，但会使它变得无关紧要，
看来你在这里重新发明轮子。
许多在您为管理面板/仪表板创建许多模板之前。

我最喜欢的一个是SB Admin < Link

你可以在this site看到更多模板

【讨论】：

我同意，除非您有特定的理由自己制作，否则请使用现有的

【解决方案2】：

对于与打开的页面相对应的更改背景颜色部分，请使用 Bootstrap CSS 中已经描述的“活动”类。

<li class="active"> <a href="#">Dashboard</a> </li>

如您所见，包含 Dashboard 的 <li> 已被指定为“活动”类。在与导航栏上的链接对应的每个页面上，将此“活动”类分配给导航栏上相应的<li>，并将其从其他<li>s 中删除。

【讨论】：

【解决方案3】：

我想您要实现的是单页应用程序。

您可以创建一个带有导航的仪表板，该仪表板只更改内容区域而无需使用 JavaScript、jQuery 或 AJAX 重新加载页面。

这里有一篇文章可以指导您创建 SPA -（单页应用程序）Create a Single Page App with jQuery

不过，实现这一点的更简单方法是使用 Angular 等 JavaScript 框架。

如果你是 Angular 的初学者，这篇文章可以帮助你从 Bootstrap 和 Angular 入手 - How to Use Bootstrap 4 with Angular

【讨论】：