Bootstrap 是一个流行的前端框架，它提供了丰富的 CSS 和 JavaScript 组件，可以帮助开发者快速构建响应式网站。在 Bootstrap 中，<ul> 和 <li> 标签被广泛用于创建导航列表。本文将深入解析 Bootstrap 中 <ul> 和 <li> 的样式，从基本到高级，帮助你打造完美的导航列表。
基础样式
Bootstrap 默认为 <ul> 和 <li> 提供了一些基本的样式：
<ul>：无序列表，默认样式为带有圆点的列表。<li>：列表项，默认样式为带有圆点的文本。
示例代码：
<ul class="list-unstyled">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
样式说明：
list-unstyled类：移除默认的列表样式，使列表项更加简洁。
高级样式
Bootstrap 提供了多种高级样式，可以帮助你创建更丰富的导航列表。
无序列表样式
list-inline：使列表项在同一行显示。list-group：创建分组列表，每个列表项都可以有不同的背景颜色。
示例代码：
<ul class="list-inline">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<ul class="list-group">
<li class="list-group-item active">列表项 1</li>
<li class="list-group-item">列表项 2</li>
<li class="list-group-item">列表项 3</li>
</ul>
有序列表样式
list-unstyled：移除默认的列表样式。list-group：创建分组列表，每个列表项都可以有不同的背景颜色。
示例代码：
<ol class="list-unstyled">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<ol class="list-group">
<li class="list-group-item active">列表项 1</li>
<li class="list-group-item">列表项 2</li>
<li class="list-group-item">列表项 3</li>
</ol>
导航列表
Bootstrap 提供了专门的导航列表样式，可以帮助你创建美观且功能强大的导航菜单。
示例代码：
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
样式说明：
nav类：创建导航菜单。nav-tabs类：创建标签式导航菜单。nav-item类：为每个导航项添加样式。nav-link类：为导航链接添加样式。
总结
通过本文的解析，相信你已经对 Bootstrap 中 <ul> 和 <li> 的样式有了更深入的了解。掌握这些样式，可以帮助你轻松打造出美观且功能强大的导航列表。在今后的开发过程中，不妨多尝试不同的样式组合，为你的网站增添更多亮点。