自举仪表板

我是新手引导，HTML和与网页开发有关的一切。我正在使用bootstrap构建仪表板，并且设法正确地设置了基本布局。我的仪表板有一个顶部和侧面导航栏。自举仪表板

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

<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>

来源

2015-11-18 spongyboss

使用引导标签功能，而不是导航。这正是你想要的。 http://getbootstrap.com/javascript/#tabs –

对于对应于哪个页面是开放的，请在引导CSS已经描述过的“活动”类的变化背景颜色的一部分。

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

正如你所看到的，含有<li>仪表板已经分配了类“活动”。在与导航栏上的链接相对应的每个页面上，将该“活动”类别分配给导航栏上各自的<li>，并将其从其他<li> s中移除。

来源

2015-11-18 15:54:39

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

我最喜欢的是SB Admin < Link

你可以看到this site

来源

2015-11-18 16:02:22

我同意，除非你有特定的理由让自己做，只要使用现有的 –

我想你所想实现的是一个单页的应用程序更多的模板。

您可以创建一个导航仪表板，只改变内容区域，不用JavaScript，jQuery或AJAX重新加载页面。

这里是一个可以指导您完成创建SPA的文章 - （单页应用）Create a Single Page App with jQuery

然而，一个更简单的方法实现这一目标是使用像角JavaScript框架。

如果你是在角初学者，这篇文章可以帮助您开始使用引导程序和角 - How to Use Bootstrap 4 with Angular

来源

2017-12-07 07:13:09 Sofia

回答

相关问题