Question

我不熟悉bootstrapping，HTML以及与Web开发有关的所有内容。我正在使用bootstrap构建仪表板，我设法使基本布局正确。我的仪表板有一个顶部和侧面导航栏。

我现在想要在不同页面之间导航，而无需重新加载侧面和顶部导航栏。因此，我只希望页面的中心部分在点击导航栏上的链接时加载内容，并使点击的链接更改背景颜色以指示用户当前在相应页面上。这是我的内容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>

Answer 1

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

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

您可以在this site

上看到更多模板

Answer 2

对于与打开的页面对应的更改背景颜色部分，请使用＆＃34; active＆＃34;已经在Bootstrap CSS中描述过的类。

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

如您所见，包含仪表板的<li>已分配了类＆＃34;活动＆＃34;。在与导航栏上的链接对应的每个页面上，分配此＆＃34;活动＆＃34;将类分类到导航栏上的相应<li>，并将其从其他<li>中删除。

Answer 3

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

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

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

然而，更容易实现这一点的方法是使用像Angular这样的JavaScript框架。

如果您是Angular的初学者，本文可以帮助您从Bootstrap和Angular开始 - How to Use Bootstrap 4 with Angular

Bootstrap仪表板

3 个答案: