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

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

2024-04-30 14
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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导航栏
香甜可口草莓蛋糕
目录
相关文章
香甜可口草莓蛋糕
|
5天前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程（十五）：表单
Bootstrap 5 保姆级教程（十五）：表单
香甜可口草莓蛋糕
31 0
香甜可口草莓蛋糕
|
5天前
|
前端开发 容器
Bootstrap 5 保姆级教程（十四）：Flex
Bootstrap 5 保姆级教程（十四）：Flex
香甜可口草莓蛋糕
23 0
香甜可口草莓蛋糕
|
5天前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程（十三）：滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程（十三）：滚动监听 & 侧边栏导航
香甜可口草莓蛋糕
15 1
香甜可口草莓蛋糕
|
5天前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
香甜可口草莓蛋糕
24 1
香甜可口草莓蛋糕
|
5天前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
香甜可口草莓蛋糕
29 1
N..
|
5天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
15 0
汪末末
|
7月前
|
前端开发 容器
Bootstrap 组件：嵌入效果（Well）
Bootstrap 框架
汪末末
40 0
Bootstrap 组件：嵌入效果（Well）
汪末末
|
7月前
|
前端开发 容器
Bootstrap 组件：面板组件（panel）
Bootstrap 框架
汪末末
80 0
Bootstrap 组件：面板组件（panel）
汪末末
|
7月前
|
前端开发 开发者 容器
Bootstrap 组件：列表组组件（list-group）
Bootstrap 框架
汪末末
74 0
Bootstrap 组件：列表组组件（list-group）
穆雄雄.
|
5天前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
穆雄雄.
11 0

热门文章

最新文章

  • 1
    R语言实现随机前沿分析SFA、数据包络分析DEA、自由处置包分析FDH和BOOTSTRAP方法
  • 2
    R语言GARCH模型对股市sp500收益率bootstrap、滚动估计预测VaR、拟合诊断和蒙特卡罗模拟可视化
  • 3
    R语言基于Bootstrap的线性回归预测置信区间估计方法
  • 4
    学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
  • 5
    R语言Bootstrap的岭回归和自适应LASSO回归可视化
  • 6
    R语言基于Bootstrap的线性回归预测置信区间估计方法分析汽车制动距离|数据分享
  • 7
    数据分享|R语言Bootstrap、百分位Bootstrap法抽样参数估计置信区间分析通勤时间和学生锻炼数据
  • 8
    R语言缺失数据变量选择LASSO回归：Bootstrap重（再）抽样插补和推算
  • 9
    【视频】什么是Bootstrap自抽样及应用R语言线性回归预测置信区间实例|数据分享
  • 10
    R语言参数自抽样法Bootstrap：估计MSE、经验功效、杰克刀Jackknife、非参数自抽样法可视化自测题
  • 1
    使用React、Redux和Bootstrap构建社交媒体应用
    18
  • 2
    使用Python、Django和Bootstrap构建在线教育平台
    52
  • 3
    使用JavaScript、jQuery和Bootstrap构建待办事项应用
    17
  • 4
    Bootstrap：构建响应式网站的首选框架
    42
  • 5
    分享42个Bootstrap模板，总有一款适合您
    40
  • 6
    分享56个Bootstrap模板，总有一款适合您
    56
  • 7
    分享46个Bootstrap模板，总有一款适合您
    32
  • 8
    分享44个Bootstrap模板，总有一款适合您
    73
  • 9
    Bootstrap5 响应式导航栏
    24
  • 10
    Bootstrap5 导航组件和面包屑
    23

    • 相关课程

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

    • 相关电子书

    更多
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务
  • 协同编辑原理与实践
  • 优化4K制作流程，创建“4K视觉云”服务

    • 相关实验场景

    更多
  • DataV模版快速创建可视化看板
  • 收银台的场景化界面实践
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考