如何使用 Bootstrap 创建网页？
Bootstrap是一个开源 CSS 框架，用于为网站和 Web 应用程序创建响应式和可定制的前端。使用 Bootstrap 的网格系统可以很容易地非常快速地创建一个网页。如今，任何网页都需要有一个用于用户导航的导航栏、一些内容和一个用于用户数据提交的表单。
在本文中，我们将创建一个漂亮的网页，其中包含一个导航栏、一篇文章和一个仅使用Bootstrap且不使用 CSS 进行输入验证的表单。
引导设置：
第 1 步：创建一个名为 index.html 的文件，并向其中添加初始 HTML5 样板代码。
HTML
Web Page using Bootstrap
HTML
HTML
HTML
HTML
Author Name
Article Title
Created on 20 Jan 2022
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
HTML
Author Name
Article Title
Created on 20 Jan 2022
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
第 2 步：现在要添加引导程序，您需要在 HTML 代码的 body 元素中包含以下脚本和链接标记。
例子：
HTML
创建导航栏：要创建基本导航栏，首先将navbar、navbar-expand、navbar-dark和bg-color类添加到 HTML 文件中的导航元素。
此外，创建一个带有navbar-nav类的ul元素，并在其中添加带有nav-item类的li元素，并使用锚标签链接到不同页面。完成此操作后，您的 index.html 文件应如下所示。
例子：
HTML
输出：
带有 2 个链接的导航栏
将搜索栏和下拉菜单添加到导航栏：要添加下拉菜单，请将nav-item 下拉类添加到锚li标记，并将data-bs-toggle=”dropdown”属性添加到其中的锚标记以及nav-类链接下拉切换。
要添加下拉选项，请在li标记中添加一个新列表，该列表具有下拉菜单和下拉项目类别，用于下拉列表中的不同页面。要在ul之外和 nav 元素内添加搜索框，请使用带有输入和按钮的普通表单标签，并且引导程序将对其进行样式设置。完成此操作后，您的代码应如下所示。
例子：
HTML
输出：
带有下拉菜单和搜索框的导航栏
添加文章：要添加文章或任何其他内容，我们可以使用引导网格系统来使我们的网页具有响应性并具有明确定义的布局。网格系统有一行，每一行都有不同大小的列（最大为 12），可以通过将col-sm-size类添加到 div 来指定。以下代码将一篇文章添加到我们的网页。
例子：
HTML
Author Name
Article Title
Created on 20 Jan 2022
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
输出：
添加带有用户验证的表单：要了解有关如何在引导程序中使用表单的更多信息，请参阅这篇关于引导程序表单的帖子。要将输入验证表单添加到网页，请将此代码添加到您的 index.html 文件中。
例子：
HTML
Author Name
Article Title
Created on 20 Jan 2022
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
输出：
带有使用引导程序的表单的最终网页