【无标题】bootstrapv5导航条和轮播图

最新推荐文章于 2024-06-03 23:50:56 发布
最新推荐文章于 2024-06-03 23:50:56 发布
阅读量170 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/klx2545845553/article/details/124133298
版权 
<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
	  <nav class="navbar navbar-expand-lg navbar-light bg-light">
	    <div class="container-fluid">
	      <a class="navbar-brand" href="#">Navbar</a>
	      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	        <span class="navbar-toggler-icon"></span>
	      </button>
	      <div class="collapse navbar-collapse" id="navbarSupportedContent">
	        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
	          <li class="nav-item">
	            <a class="nav-link active" aria-current="page" href="#">Home</a>
	          </li>
	          <li class="nav-item">
	            <a class="nav-link" href="#">Link</a>
	          </li>
	          <li class="nav-item dropdown">
	            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
	              Dropdown
	            </a>
	            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
	              <li><a class="dropdown-item" href="#">Action</a></li>
	              <li><a class="dropdown-item" href="#">Another action</a></li>
	              <li><hr class="dropdown-divider"></li>
	              <li><a class="dropdown-item" href="#">Something else here</a></li>
	            </ul>
	          </li>
	          <li class="nav-item">
	            <a class="nav-link disabled">Disabled</a>
	          </li>
	        </ul>
	        <form class="d-flex" role="search">
	          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
	          <button class="btn btn-outline-success" type="submit">Search</button>
	        </form>
	      </div>
	    </div>
	  </nav>
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/img1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/img2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/img3.jpg" class="d-block w-100" alt="...">
        </div>
		<div class="carousel-item">
		  <img src="./img/img4.jpg" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
		  <img src="./img/img5.jpg" class="d-block w-100" alt="...">
		</div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
    -->
  </body>
</html>

在这里插入图片描述
在这里插入图片描述

klx2545845553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap v5 Navigation Bar 导航栏
SimonHeeeee的博客
10-18 707
Bootstrp 5 CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> Navigation Bar
BootstrapV5:Bootstrap版本5练习
05-07
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。...现在，打开`BootstrapV5-main`这个文件夹，开始你的Bootstrap V5学习之旅吧！
【无标题】
m0_58766017的博客
04-06 299
用bootstrap v5版本编写导航条和轮播图 <!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 的
Bootstrap框架最新V5 快速入门&直通
最新发布
qingwan_91的博客
06-03 1427
一篇文章直通Bootstrap
bfc，圣杯结构
qq_40281275的博客
10-25 273
BFC display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 这个BFC 有着具体的布局特性： 有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。 什么情况下可以让元素产生BFC 以上盒子具有BFC条件了，就是说有资质了，但是怎...
bootstrap5
云墨知秋的博客
11-06 3394
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
BootStrap V5：现代化前端开发的必备工具
DevCorner的Pro技术博客
08-15 597
BootStrap V5是一款开源的前端框架，由Twitter开发并维护。它基于HTML、CSS和JavaScript，提供了丰富的组件和样式，使开发者能够快速构建响应式的网页界面。BootStrap V5具有易用性、灵活性和可定制性的特点，被广泛应用于各种Web开发项目中。BootStrap V5支持响应式设计，可以根据不同设备的屏幕尺寸自动调整网页布局和样式，从而提供更好的用户体验。开发者只需使用BootStrap提供的CSS类，即可轻松实现响应式布局。
BootstrapV3_Vertical_Thumbnail_Carousel:Bootstrap v3.0.3垂直缩略图轮播
05-10
尽管Bootstrap V3.0.3的垂直缩略图轮播组件已经过时，但其设计思路和实现方法仍对学习Bootstrap和前端开发有着积极的意义。如果你正在使用较新的Bootstrap版本，建议查阅官方文档以获取最新支持的轮播组件和方法。...
Bootstrap v4.0.0 alpha5
12-04
Bootstrap是Twitter推出的一个用于前端...它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
一个基于HTML5+css+bootstrap的前端设计实例
06-01
标题中的“一个基于HTML5+css+bootstrap的前端设计实例”揭示了这是一个使用现代Web技术构建的前端项目，主要依赖于HTML5、CSS（层叠样式表）和Bootstrap框架。这些技术是现代网页开发的核心组成部分，下面将详细...
bootstrapv3
08-01
bootstrap是开发手机页面的不二之选，非常不错
BootstrapBlazorUI框架 v5.0
11-24
为您提供BootstrapBlazorUI框架下载，Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：1、使用 C# 代替 JavaScript 来创建丰富的交互式 UI。2、共享使用 .NET 编写的服务器端和客户端应用逻辑。3、将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。使用 .NET 进行客户端 Web 开发可提供以下优势：1、使用 C# 代替 JavaScript 来编写代码。2、
hugo-bootstrap-5:使用 Bootstrap 5 的简单 Hugo 主题
05-29
Hugo Bootstrap v5 主题 这是一个使用的简单 Hugo 主题，灵感来自 。 安装 您可以将主题安装为克隆或子模块。 我推荐后者。 从 Hugo 站点的根目录，键入以下内容： $ git submodule add https://github.com/NotWoods/hugo-bootstrap-5.git themes/hugo-bootstrap-5 $ git submodule init $ git submodule update 现在，您可以通过更新子模块来获取主题的更新： $ git submodule update --remote themes/hugo-bootstrap-5 演示版 您可以找到演示。 屏幕截图 配置 检查exampleSite/config.toml以获取示例配置。 牌 可以通过添加您自己的布局layouts/partial
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
09-01
主要为大家详细介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
圣杯布局
良雨
05-10 544
圣杯布局 概述：布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局 布局要求有几点： 三列布局，中间宽度自适应，两边定宽； 中间栏要在浏览器中优先显示渲染 允许三列中的任意一列成为最高列 1、DOM结构 首先定义出整个布局的DOM结构，主要部分是由container包裹的center、left、right三部分组成。其中center定义在最前面 <div class...
详解圣杯布局
技术无止境，人生仍探索。
04-30 1041
圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...
前端框架 Bootstrap 5.0 alpha 发布
寒冰屋的专栏
06-21 931
Bootstrap 团队发布了 Bootstrap 5 的 Alpha 版本。Bootstrap 5 的两个重要变化是，它不再依赖 jQuery，并且不再支持 Internet Explorer。针对 5.0 版本的其他改进还包括有：新的 API、对网格系统的更改以及改进的文档等。 具体更新内容分如下： 新外观 以 v4.5.0 中文档首页的改进为基础，并为其余文档提供了更新的外观。文档页面不再全角显示，以提高可读性。此外，还升级了侧边栏，以使用可扩展部分（由 Collapse 插件提供支持）来实现.
Bootstrap v5版本的HTML模板
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
11-27 584
一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。标签中，您可以添加您自己的HTML内容。
bootstrapv5卡片组件类名
06-10
在Bootstrap v5中，卡片组件的类名为 "card"。可以通过以下方式使用： ```html <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> ``` 以上代码会创建一个基本的卡片组件。你也可以根据需要添加其他的类名来定制卡片的样式和行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值