- 简介与安装
- 网格系统
- 按钮，字形图标，表格
- 垂直形式，水平形式，内联形式
- 进度栏和超大屏幕
使用Bootstrap的下拉菜单：
在引导程序中，使用class =“ dropdown”创建下拉列表。我们要做的是创建一个按钮，然后将其转换为下拉菜单。
正如在最近的几篇教程中已经开始的那样，可以使用
基本上，它看起来像这样。
现在，我们想将此按钮转换为下拉菜单。因此，我们将使用具有class =“ dropdown-menu”的
- 标签创建无序列表，并使用
- 标签添加项目。
例子：
Bootstrap Example GeeksforGeeks
Dropdown in Bootstrap
输出：
%20%7C%20DropDowns%20and%20Responsive%20Tabs_0.jpg)
通过使用
- 标记中的类，可以使下拉列表更好。要在下拉列表中添加标题，请添加class =“ dropdown-header”，在项目之间添加分隔符，请使用class =“ divider”，并使用class =“ disabled”禁用列表中的项目。
例子：
Bootstrap Example GeeksforGeeks
Dropdown in Bootstrap
输出：
%20%7C%20DropDowns%20and%20Responsive%20Tabs_1.jpg)
使用Bootstrap的导航选项卡：
要创建选项卡式导航菜单，我们需要使用
- 标签创建无序列表，然后添加class =“ nav nav-tabs”。现在，我们可以使用
- 标记添加标签。请记住，为一个标签分配了class =“ active”，以将其视为默认的活动标签。现在，我们需要使用class =“ tab-content”中的class =“ tab-pane”编写每个选项卡的内容。请注意，您必须将ID分配给相应的选项卡窗格。
切换选项卡时，添加class =“ fade”会添加淡入淡出效果。例子：
Bootstrap Example GeeksforGeeks
Navigation Tabs in Bootstrap
输出：
%20%7C%20DropDowns%20and%20Responsive%20Tabs_2.jpg)
您可以通过将class =“ navbar-nav”更改为“ nav-pills”或“ nav-stacked”来更改标签的外观，如果您希望标签覆盖整个屏幕，请尝试添加class = “资产净值”
与下拉菜单类似，我们可以使用class =“ disabled”禁用任何选项卡
输出：%20%7C%20DropDowns%20and%20Responsive%20Tabs_3.jpg)
注意：使用导航栏时请务必小心，它会根据屏幕尺寸更改其大小。
Harshit Gupta的文章：
总部位于加尔各答的Harshit Gupta是一位活跃的博客作者，对撰写有关时事，技术博客，故事和个人生活经历的浓厚兴趣。除了对写作充满热情，他还喜欢编码和跳舞。他目前在IIEST学习，是geeksforgeeks的活跃博客撰稿人。如果您还希望在此处展示您的博客，请参阅GBlog，以在GeeksforGeeks上撰写来宾博客。
- 标记添加标签。请记住，为一个标签分配了class =“ active”，以将其视为默认的活动标签。现在，我们需要使用class =“ tab-content”中的class =“ tab-pane”编写每个选项卡的内容。请注意，您必须将ID分配给相应的选项卡窗格。
