Bootstrap提供了一系列类和样式，您可以在网页上使用这些类和样式来创建漂亮且功能功能的选项卡。对比也是创建视觉上吸引人的设计的重要方面。

这是使用bootstrap创建美丽标签的步骤。

1-添加必要的文件：将Bootstrap CSS和JS文件添加到您的网页。

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

`
2-使用Bootstrap选项卡组件为选项卡结构创建HTML标记。您可以随意包含任意数量的选项卡，也可以自定义每个标签的外观。

`

• Tab 1
• Tab 2
• Tab 3

  <p>Tab 1 content goes here.</p>


  <p>Tab 2 content goes here.</p>


  <p>Tab 3 content goes here.</p>

`
3-将您的自定义样式添加到选项卡组件中，以增强选项卡的外观。使用对比度创建视觉上吸引人的设计。例如，您可以为活动选项卡使用轻型背景颜色，而无活动标签的颜色较深。

`
.nav-tabs .nav-link.Active {
背景色：＃f8f9fa;
边界彩色：＃dee2e6＃dee2e6 #fff;
颜色：＃495057;
}

.nav-tabs .nav-link {
边界：1px固体＃dee2e6;
颜色：＃495057;
}

.nav-tabs .nav-link：悬停{
边界彩色：＃e9ecef＃e9ecef＃dee2e6;
}

.tab-content {
背景色：#fff;
边界：1px固体＃dee2e6;
边界：无;
填充：20px;
}

`
4-保存并测试您的网页以查看美丽的标签设计。
通过遵循以下步骤，您可以使用引导程序和对比度创建一个美丽的选项卡。您可以使用不同的颜色，字体和其他CSS样式来进一步自定义设计。