Question

我开始使用bootstrap开发一个应用程序，做了一些关于如何在右侧使用静态左导航栏和动态内容区域进行研究但无法获得线索的研究。有人可以建议如何在每次点击链接时只更改内容区域（单独的html页面）并具有静态导航栏和标题。类似于HTML中提供的框架集标记。

基本上我不希望在应用程序的所有html页面中添加导航条形码。

由于

Answer 1

我认为框架很久以前就已经死了。

实现＆＃39;导航＆＃39;你需要某种模板和路由。看看Angular或React。几乎任何服务器端语言都有带有模板的Web框架。

关于如何实现与框架类似行为的相关讨论：What are the new frames?

Answer 2

它的2018年，没有人再使用帧标签我更喜欢this solution因为你希望这个帮助

另见W3schools How TO - Include HTML

<强> content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

包含HTML

<div w3-include-html="content.html"></div>

添加JavaScript

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

在Bootstrap中使用框架？

2 个答案: