Bootstrap 由 Mark Otto 和 Jacob Thornton 开发，是一个免费的开源响应式 CSS 框架，用于前端 Web 开发。尽管 Bootstrap 5 Alpha 是 2020 年 6 月 16 日推出的最新版本的 Bootstrap，但它仍处于开发阶段，因此大多数开发人员仍在继续使用 Bootstrap 4。Bootstrap 是一个 CSS 框架，专注于简化 Web 开发页。它主要用于为用户创建交互式界面。 Bootstrap 捆绑了许多布局、组件和实用程序。该列是 Bootstrap 中网格布局的一部分。 Bootstrap 4 中的网格系统是动态的和流动的。网格布局有 12 列，由于网格系统是建立在 flexbox 上的，所以它是完全响应式的。侧边栏是 Bootstrap 的另一个组件。侧边栏启用侧边导航。侧边栏可以根据需要位于左侧或右侧。在本文中，我们将演示左侧边栏以及一个位于另一个下方的列。
第一种方法：在第一种方法中，我们将演示一个始终打开并固定在页面左侧的侧边栏。该代码包含嵌套的行和列以获得所需的输出。
Page Content
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.
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.
输出
第二种方法：在这种方法中，侧边栏不会始终保持打开状态。侧边栏可折叠，打开侧边栏时页面内容向右移动。这种设计让主要内容占据网页的整个空间，导航面板仅在需要时打开。这标志着高效的空间管理。在这种方法中，当页面加载时侧边栏是隐藏的。当用户单击汉堡按钮时，side_open() javascript函数被触发并打开侧边栏。侧边栏现在可见，并有一个关闭它的按钮。单击关闭按钮时，将触发 side_close() javascript函数并关闭侧边栏。在打开状态下，侧边栏占据页面宽度的 25%，而在关闭状态下，它占据页面宽度的 0%。因此，两列相应地调整自己。
Page Content
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.
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.
输出： 
