Bootstrap 是一个开源 CSS 框架，前端开发人员使用它来制作交互式网页设计。 Bootstrap 的最新版本是 Bootstrap 5 alpha，它具有许多附加功能。但是，Bootstrap 5 仍处于持续开发阶段，因此大多数 Web 开发人员仍在使用 Bootstrap 4。Bootstrap 4 还提供了广泛的组件、实用程序和布局。导航栏和侧边栏是其他组件之一。虽然 Bootstrap 4 预定义了具有广泛功能的导航栏类，但没有专门的侧边栏预定义类。因此侧边栏主要是定制的部门。使用顶部导航栏和左侧导航栏时可以有不同的布局。本文演示了两种布局。

第一种方法：第一种方法处理在顶部导航栏正下方具有侧边栏的布局。整个主体分为两部分：顶部导航栏和其下方的容器。顶部导航栏下方的容器包含侧边栏分区以及网页主要内容的分区。该容器包含一行，而该行又包含两列。第一列包含侧边栏，第二列包含主要内容。

输出：

第二种方法：第二种方法演示了一种布局，在侧边栏占据其所需空间后，导航栏仅占据正文的剩余宽度。 HTML 页面的主体包含一行，其中一行包含两列。第一列 col-2 用于显示侧边栏。第二列 col-10 用于显示导航栏。第二列还包含导航栏正下方的网页的主要内容。导航栏是可折叠的，即。当屏幕宽度减小时，它会折叠起来，可以使用汉堡包图标进行查看。

                    Bootstrap is a free and open-source                     tool collection for creating responsive                     websites and web applications.                     It is the most popular HTML, CSS, and                     JavaScript framework for developing                     responsive, mobile-first web sites.                 

输出：