AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Bootstrap 5 保姆级教程（十）：导航栏 & 轮播

2024-04-30 146
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Bootstrap 5 保姆级教程（十）：导航栏 & 轮播

一、导航栏

1.1 简单的导航栏

导航栏一般放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
<br>
 
<div class="container-fluid">
  <h3>简单的导航栏实例</h3>
  <p>导航栏一般放在页面的顶部。</p>
  <p>我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl｜xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。</p>
</div>

1.2 垂直导航栏

通过删除 .navbar-expand-xxl|xl|lg|md|sm 类来创建垂直导航栏:

<nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
<br>
 
<div class="container-fluid">
  <h3>垂直导航栏</h3>
  <p>导航栏一般在页面头部。</p>
</div>

1.3 居中对齐的导航栏

通过添加 .justify-content-center 类来创建居中对齐的导航栏:

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
 
<div class="container-fluid mt-3">
  <h3>导航栏居中对齐</h3>
  <p>使用 .justify-content-center 类设置导航栏居中对齐</p>
  <p>在这个实例中，不管屏幕尺寸是大的还是超大的都会居中对齐，在手机设备上会设置右边折叠显示，因为使用了 .navbar-expand-sm 类。</p>
</div>

1.4 不同颜色导航栏

可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

提示: 对于暗色背景 .navbar-dark 需要设置文本颜色为浅色的，对于浅色背景 .navbar-light 需要设置文本颜色为深色的。

<div class="container mt-3">
  <h3>不同颜色导航栏</h3>
  <p>对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</p>
</div>
 
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>
 
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

1.5 品牌/Logo

.navbar-brand 类用于高亮显示品牌/Logo:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
 
<div class="container-fluid mt-3">
  <h3>品牌/Logo</h3>
  <p>.navbar-brand 类用于高亮显示品牌/Logo:</p>
</div>

可以使用 .navbar-brand 类来设置图片自适应导航栏。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">
    <img src="./img/bootstrap.png" alt="logo">
  </a>
      
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
    
<div class="container-fluid mt-3">
  <h3>品牌 / Logo</h3>
  <p>如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。</p>
</div>

1.6 折叠导航栏

通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-bs-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>
 
  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>
 
<br>
 
<div class="container">
  <h3>折叠导航栏</h3>
  <p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
  <p>提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
</div>

1.7 导航栏使用下拉菜单

导航栏上可以设置下拉菜单：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>
 
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
 
    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>
<br>
  
<div class="container">
  <h3>导航栏使用下拉菜单</h3>
  <p>导航栏上可以设置下拉菜单。</p>
</div>

1.8 导航栏的表单与按钮

导航栏的表单  元素使用 class="form-inline" 类来排版输入框与按钮：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>
 
<div class="container-fluid mt-3">
  <h3>导航栏的表单</h3>
  <p>你也可以在导航栏中添加表单。</p>
</div>

你也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="d-flex">
    <div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control me-2" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  </div>  
  </form>
</nav>


1.9 导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>
  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>
</nav>
<br>
 
<div class="container">
  <h3>导航栏文本</h3>
  <p>使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>


1.10 固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>
 
<div class="container-fluid" style="margin-top:80px">
  <h3>固定导航栏</h3>
  <p>导航栏可以固定在头部或者底部。</p>
  <h1>滚动页面查看效果。</h1>
</div>

.fixed-bottom 类用于设置导航栏固定在底部：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
  </ul>
</nav>
 
<div class="container-fluid">
  <h3>底部固定导航栏</h3>
  <p>导航栏可以固定在头部或者底部。</p>
  <h1>滚动页面查看效果。</h1>
</div>

二、轮播

2.1 如何创建轮播

以下实例创建了一个简单的图片轮播效果 ：

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
 
   <!-- 指示符 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.jyshare.com/libs/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="https://static.jyshare.com/libs/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="https://static.jyshare.com/libs/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- 左右切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>


.carousel 创建一个轮播
.carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner 添加要切换的图片
.carousel-item 指定每个图片的内容
.carousel-control-prev 添加左侧的按钮，点击会返回上一张。
.carousel-control-next 添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮
.slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。


文章标签：
前端开发
关键词：
Bootstrap轮播
Bootstrap导航栏
Bootstrap教程
Bootstrap保姆教程
Bootstrap教程导航栏
香甜可口草莓蛋糕
目录
相关文章
游客ogeeqvh5vfa5q
|
25天前
|
容器
Bootstrap5 轮播1
Bootstrap5 轮播组件用于创建循环播放的幻灯片效果。通过设置 `carousel` 类和 `data-bs-ride=&quot;carousel&quot;` 属性，结合指示符、图片容器和切换按钮，可实现自动或手动切换的图片轮播。
游客ogeeqvh5vfa5q
53 3
Bootstrap5 轮播1
游客ogeeqvh5vfa5q
|
25天前
Bootstrap5 导航栏9
导航栏可固定于页面顶部或底部，使用 `.fixed-top` 类将其固定在顶部，如示例所示；而 `.fixed-bottom` 类则用于底部固定。代码片段展示了如何应用这些类以实现固定效果。
游客ogeeqvh5vfa5q
27 2
游客ogeeqvh5vfa5q
|
25天前
|
前端开发
Bootstrap5 导航栏8
使用 `.navbar-text` 类可在导航栏中添加非链接文本，确保文本水平对齐且样式统一。示例代码展示了如何在 Bootstrap 导航栏中加入文本和链接。
游客ogeeqvh5vfa5q
25 2
游客ogeeqvh5vfa5q
|
26天前
Bootstrap5 导航栏7
导航栏中的表单和按钮通过使用 `class=&quot;form-inline&quot;` 实现水平布局。示例展示了如何在导航栏中嵌入搜索表单和按钮，以及如何使用 `.input-group` 和 `.input-group-prepend` 在输入框前添加标签，如用户名前缀。
游客ogeeqvh5vfa5q
24 1
游客ogeeqvh5vfa5q
|
26天前
Bootstrap5 导航栏6
此示例展示了如何在导航栏中设置下拉菜单。通过添加`&lt;li class=&quot;nav-item dropdown&quot;&gt;`和相应的`&lt;div class=&quot;dropdown-menu&quot;&gt;`，可以实现链接的下拉显示功能。
游客ogeeqvh5vfa5q
23 1
游客ogeeqvh5vfa5q
|
26天前
Bootstrap5 导航栏5
折叠导航栏适用于小屏幕设备，通过点击按钮展开或收起导航选项。实现方法是在按钮上使用 `class=&quot;navbar-toggler&quot;` 和 `data-bs-toggle=&quot;collapse&quot;` 属性，并设置目标 `id` 以匹配包含导航链接的 `div` 元素。示例代码展示了如何构建一个基本的折叠导航栏。
游客ogeeqvh5vfa5q
27 1
游客ogeeqvh5vfa5q
|
28天前
Bootstrap5 导航栏1
Bootstrap5 导航栏通常位于页面顶部，使用 `.navbar` 类创建标准导航栏，并通过 `.navbar-expand-xxl|xl|lg|md|sm` 类实现响应式布局（大屏水平、小屏垂直）。导航选项使用 `&lt;ul&gt;` 和 `class=&quot;navbar-nav&quot;`，每个选项用 `&lt;li&gt;` 和 `class=&quot;nav-item&quot;`，链接使用 `&lt;a&gt;` 和 `class=&quot;nav-link&quot;`。
游客ogeeqvh5vfa5q
26 3
游客ogeeqvh5vfa5q
|
27天前
Bootstrap5 导航栏4
`.navbar-brand` 类用于在导航栏中高亮显示品牌或Logo。通过此类，可以轻松地将文本或图片作为品牌标识展示，并确保其在不同屏幕尺寸上自适应显示。例如，使用 `&lt;img&gt;` 标签插入图片Logo，并通过内联样式设置宽度，实现响应式设计。
游客ogeeqvh5vfa5q
22 1
游客ogeeqvh5vfa5q
|
27天前
Bootstrap5 导航栏2
通过移除 .navbar-expand-xxl|xl|lg|md|sm 类，可创建垂直导航栏。示例如下：背景为浅色的导航栏，包含三个链接项。每个链接项均为列表元素，通过 .nav-item 和 .nav-link 类进行样式设置。
游客ogeeqvh5vfa5q
22 1
游客ogeeqvh5vfa5q
|
27天前
Bootstrap5 导航栏4
`.navbar-brand` 类用于在导航栏中高亮显示品牌或Logo，支持文字和图片形式，并可实现图片自适应效果。示例代码展示了如何使用该类设置Logo。
游客ogeeqvh5vfa5q
21 0

热门文章

最新文章

  • 1
    start.aliyun.com 正式上线！极速构建 bootstrap 应用
  • 2
    使用国人的koala来重新预编译BOOTSTRAP的LESS文件
  • 3
    Bootstrap的学习以及简单运用
  • 4
    Bootstrap-轮播图-No.2
  • 5
    bootstrap51-Bootstrap 基本的输入框组
  • 6
    bootstrap-表单控件——输入框input
  • 7
    bootstrap-面板--基础面板
  • 8
    bootstrap-带有头和尾的面板
  • 9
    bootstrap-翻页
  • 10
    Bootstrap 下拉菜单disabled
  • 1
    bootstrap table 设置自定义列宽
    956
  • 2
    R语言广义线性混合模型（GLMM）bootstrap预测置信区间可视化
    118
  • 3
    【专栏：HTML与CSS实践篇】CSS框架（Bootstrap/Foundation）快速上手
    133
  • 4
    r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
    108
  • 5
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（下）
    90
  • 6
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（上）
    85
  • 7
    Bootstrap 5 保姆级教程（十五）：表单
    337
  • 8
    Bootstrap 5 保姆级教程（十四）：Flex
    118
  • 9
    Bootstrap 5 保姆级教程（十三）：滚动监听 & 侧边栏导航
    122
  • 10
    Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
    204

    • 相关课程

    更多
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • k8s自动伸缩那些事资料下载
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践

    • 相关实验场景

    更多
  • 3分钟创建Serverless Job 定时获取新闻热搜
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。