Bootstrap: 是否可以创建一个可以导入到网站上每个新页面的模板？
Bootstrap: Is it possible to create a template that can be imported to each new page on a website?
我正在使用 Bootstrap 创建个人 website/blog。我是这个框架的新手，一般来说 web-development，所以我很感激一些指示。
我希望我添加的任何新页面都具有相同的布局：侧边导航菜单占据 3 列，内容占据剩余的 9 列。在小格式中，我将让它们各自占据完整的 12 列。
我想制作这个模板，因为如果有一天我决定改变我的网站布局，我不想为了这样做而必须浏览每个单独的文件。
那么有什么方法可以创建一个模板，并导入到每个页面中吗？
我用谷歌搜索了它，但似乎找不到任何相关信息。对我来说，这似乎是一个非常明显的功能，所以我想我会找到一些东西，但我一直没能找到。
这是我的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intro</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<!-- Top navbar -->
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Main body of page -->
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-lg-3 col-md-3 col-sm-12" id="sideBar">
<h4 class="feature-title">Table of Contents</h4>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Introduction</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Fundamentals</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Software</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Contents -->
<div class="col-lg-9 col-md-9 col-sm-12" id="main">
<h3 class="feature-title">Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
</div>
</div>
<!--- Script Source Files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="../main.js"></script>
<script src="template.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</body>
我希望导航栏和边栏在我的所有页面中保持相同。只是页面内容 (id="main") 在 body 中会发生变化。另外，我希望页面标题（在他 header 中）也能改变。有什么方法可以使该变量？
我更喜欢这样做的另一个原因是 table 的内容会随着我添加更多页面而改变，所以我不想遍历每个文件来更改 table 每次创建新页面时的内容。
感谢您的帮助。谢谢
编辑：
这是 CSS 对应 template.css
#main {
transition: margin-left .5s;
padding: 20px;
}
#sideBar {
background: black;
padding: 20px;
}
.list-group-item {
background: black;
}
.list-group-item:hover {
color: green;
}
仅供参考： 根据我的建议，您应该使用一些好的 scripting/programming 语言，例如 Ruby On Rails、Django 或 PHP 实现让一个模板动态呈现所有其他页面内容的功能。所以，你只需要改变你的主模板，就会反映在所有的页面上。这是最佳做法。
好吧，我仍在为您提供解决方案，因为您正处于学习阶段，您可以使用 JQuery 来实现此目的 :) 仅用于学习目的的好主意。
[ Not For Production Purpose - Just a solution for your problem ]
请在 github 存储库中找到您的问题的解决方案。我合并了您的代码并创建了一个示例项目供您使用：
它有一个名为 template.html 的模板和用于 (id="main") index.html、about.html 和 contact.html 的其他不同内容特定页面呈现它的按照 template.html 模板拥有自己的内容。
请查看此 github 存储库：
https://github.com/ashishprajapati/template-for-basic-html
git clone git@github.com:ashishprajapati/template-for-basic-html.git
要启动 html 服务器，请按照以下步骤操作
npm install http-server -g
请在克隆项目所在的同一目录中使用此命令
http-server
我正在使用 Bootstrap 创建个人 website/blog。我是这个框架的新手，一般来说 web-development，所以我很感激一些指示。 我希望我添加的任何新页面都具有相同的布局：侧边导航菜单占据 3 列，内容占据剩余的 9 列。在小格式中，我将让它们各自占据完整的 12 列。 我想制作这个模板，因为如果有一天我决定改变我的网站布局，我不想为了这样做而必须浏览每个单独的文件。 那么有什么方法可以创建一个模板，并导入到每个页面中吗？
我用谷歌搜索了它，但似乎找不到任何相关信息。对我来说，这似乎是一个非常明显的功能，所以我想我会找到一些东西，但我一直没能找到。
这是我的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intro</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<!-- Top navbar -->
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Main body of page -->
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-lg-3 col-md-3 col-sm-12" id="sideBar">
<h4 class="feature-title">Table of Contents</h4>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Introduction</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Fundamentals</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Software</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Contents -->
<div class="col-lg-9 col-md-9 col-sm-12" id="main">
<h3 class="feature-title">Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
</div>
</div>
<!--- Script Source Files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="../main.js"></script>
<script src="template.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</body>
我希望导航栏和边栏在我的所有页面中保持相同。只是页面内容 (id="main") 在 body 中会发生变化。另外，我希望页面标题（在他 header 中）也能改变。有什么方法可以使该变量？ 我更喜欢这样做的另一个原因是 table 的内容会随着我添加更多页面而改变，所以我不想遍历每个文件来更改 table 每次创建新页面时的内容。
感谢您的帮助。谢谢
编辑： 这是 CSS 对应 template.css
#main {
transition: margin-left .5s;
padding: 20px;
}
#sideBar {
background: black;
padding: 20px;
}
.list-group-item {
background: black;
}
.list-group-item:hover {
color: green;
}
仅供参考： 根据我的建议，您应该使用一些好的 scripting/programming 语言，例如 Ruby On Rails、Django 或 PHP 实现让一个模板动态呈现所有其他页面内容的功能。所以，你只需要改变你的主模板，就会反映在所有的页面上。这是最佳做法。
好吧，我仍在为您提供解决方案，因为您正处于学习阶段，您可以使用 JQuery 来实现此目的 :) 仅用于学习目的的好主意。
[ Not For Production Purpose - Just a solution for your problem ]
请在 github 存储库中找到您的问题的解决方案。我合并了您的代码并创建了一个示例项目供您使用：
它有一个名为 template.html 的模板和用于 (id="main") index.html、about.html 和 contact.html 的其他不同内容特定页面呈现它的按照 template.html 模板拥有自己的内容。
请查看此 github 存储库： https://github.com/ashishprajapati/template-for-basic-html
git clone git@github.com:ashishprajapati/template-for-basic-html.git
要启动 html 服务器，请按照以下步骤操作
npm install http-server -g
请在克隆项目所在的同一目录中使用此命令
http-server