Bootstrap是前端开发人员用于制作交互式Web设计的开源CSS框架。 Bootstrap的最新版本是Bootstrap 5 alpha，它具有许多附加功能。但是，Bootstrap 5仍处于持续的开发阶段，因此大多数Web开发人员仍在使用Bootstrap4。Bootstrap4还提供了广泛的组件，实用程序和布局。导航栏和侧边栏是其他组件。虽然Bootstrap 4具有许多功能的预定义导航栏类，但没有专用的侧边栏预定义类。因此侧边栏主要是定制的划分。将顶部导航栏与左侧导航栏一起使用时，可能会有不同的布局。两种布局都在本文中进行了演示。
第一种方法：第一种方法处理的是侧边栏位于顶部导航栏正下方的布局。整个主体分为两部分：顶部导航栏和其下方的容器。顶部导航栏下方的容器包含侧边栏划分以及网页主要内容的划分。该容器包含一行，而该行又包括两列。第一列容纳侧边栏，第二列容纳主要内容。
输出： 
第二种方法：第二种方法演示了一种布局，其中导航栏仅在侧边栏占据其所需空间之后才占据主体的剩余宽度。 HTML页面的主体包括一行，该行包括两列。第一列col-2用于显示侧栏。第二列col-10用于显示导航栏。第二列还包含导航栏正下方的网页主要内容。导航栏是可折叠的，即。当屏幕宽度减小时，它会崩溃，并且可以使用汉堡包图标进行查看。
Topnav with sidebar
输出： 