【Bootstrap】Bootstrap中的导航都有哪些？（约291字）-IT面试吧

Bootstrap中的导航都有哪些？

Bootstrap提供了多种导航组件，以下是其中几种常用的导航：

标签页导航（Tabs）：使用class="nav nav-tabs"创建标签页导航，用于在不同的内容页之间进行切换。
胶囊式标签页导航（Pills）：使用class="nav nav-pills"创建胶囊式标签页导航，通常用于表示不同的选项或分类。
导航栏（Navbar）：使用class="navbar navbar-default"和role="navigation"创建导航栏，用于显示网站的主要导航链接。
面包屑导航（Breadcrumb）：使用class="breadcrumb"创建面包屑导航，用于显示当前页面在网站结构中的位置。

除了上述导航组件外，Bootstrap还提供了其他导航相关的组件，如导航工具栏（Navbar Toolbar）、下拉菜单（Dropdown）、分页导航（Pagination）等，可以根据具体的需求选择合适的导航组件来构建网站的导航部分。

以下是几个常见导航组件的示例代码：

标签页导航（Tabs）：

    <ul class="nav nav-tabs">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
    </ul>

胶囊式标签页导航（Pills）：

    <ul class="nav nav-pills">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
    </ul>

导航栏（Navbar）：

    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Logo</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

面包屑导航（Breadcrumb）：

    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li class="active">Current Page</li>
    </ol>