轮播图0000

最新推荐文章于 2024-06-04 15:25:01 发布
最新推荐文章于 2024-06-04 15:25:01 发布
阅读量70 收藏
点赞数
文章标签： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liudonghao2002/article/details/124256591
版权

在这里插入图片描述

<!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 rel="stylesheet" href="css/bootstrap.min.css"  integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous"> -->
	
	<link rel="stylesheet" href="./css/bootstrap.min.css"  >
	<link rel="stylesheet" href="./css/index.css">
    <title>Hello, world!</title>
  </head>
  <body>
  <nav class="navbar  navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="./img/logo.png" alt=""></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="#">主页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">简介</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">
              更多
            </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>
         
        </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-light" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
	
	<div class="container-fluid">
		<div class="row">
			<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>
				<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
				<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
				<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
			  </div>
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <img src="./img/img4.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/img5.jpg" class="d-block w-100" alt="...">
				</div>
				<div class="carousel-item">
				  <img src="./img/img6.jpg" class="d-block w-100" alt="...">
				</div>
				<div class="carousel-item">
				  <img src="./img/img7.jpg" class="d-block w-100" alt="...">
				</div>
				
				<div class="carousel-item">
				  <img src="./img/img8.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>
		</div>
	</div>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></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>
Liudonghao2002
关注
Bootstrap v5 Navigation Bar 导航栏
SimonHeeeee的博客
10-18 728
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
vue轮播图
soundofsnow的博客
11-02 604
使用vue实现轮播图的效果，可通过滑块和方向箭头改变轮播图的滚动，悬浮时轮播图停止滚动
【无标题】
m0_58766017的博客
04-06 316
用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 的
bfc，圣杯结构
qq_40281275的博客
10-25 285
BFC display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 这个BFC 有着具体的布局特性： 有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。 什么情况下可以让元素产生BFC 以上盒子具有BFC条件了，就是说有资质了，但是怎...
bootstrap5
云墨知秋的博客
11-06 3444
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
BootStrap V5：现代化前端开发的必备工具
DevCorner的Pro技术博客
08-15 627
BootStrap V5是一款开源的前端框架，由Twitter开发并维护。它基于HTML、CSS和JavaScript，提供了丰富的组件和样式，使开发者能够快速构建响应式的网页界面。BootStrap V5具有易用性、灵活性和可定制性的特点，被广泛应用于各种Web开发项目中。BootStrap V5支持响应式设计，可以根据不同设备的屏幕尺寸自动调整网页布局和样式，从而提供更好的用户体验。开发者只需使用BootStrap提供的CSS类，即可轻松实现响应式布局。
轮播图android
02-20
在Android开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或内容，常用于广告展示、应用引导页等场景。本篇将详细讲解如何在Android中实现轮播图功能，重点是使用开源库FlycoPageIndicator...
vue 轮播图 带自动分页 _vue常用的轮播组件
01-11
在 Vue 应用中，轮播图是一种常见的组件，常用于展示图片、广告或者产品介绍等。本篇将详细讲解如何在 Vue 中创建一个带有自动分页功能的轮播图。 一、Vue 轮播图组件基础 在 Vue 中，我们可以创建自定义组件来...
【vue+css】实现叠层轮播图切换组件
最新发布
XujiRe的博客
06-04 813
vue+css实现叠层轮播图切换组件,vue组件carouselImg
html轮播代码 圆点,轮播图下方带圆点+数字+左右按钮
weixin_42528296的博客
05-30 1236
HtmlCssJs<>* {padding:0;margin:0;}ul {list-style:none;}.out {width:350px;height:245px;margin:50px auto;position:relative;}.img li {position:absolute;top:0px;left:0px;display:none}.out .num {posi...
BootstrapV5:Bootstrap版本5练习
05-07
BootstrapV5 Bootstrap版本5练习
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 579
圣杯布局 概述：布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局 布局要求有几点： 三列布局，中间宽度自适应，两边定宽； 中间栏要在浏览器中优先显示渲染 允许三列中的任意一列成为最高列 1、DOM结构 首先定义出整个布局的DOM结构，主要部分是由container包裹的center、left、right三部分组成。其中center定义在最前面 <div class...
详解圣杯布局
技术无止境，人生仍探索。
04-30 1062
圣杯布局 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 948
Bootstrap 团队发布了 Bootstrap 5 的 Alpha 版本。Bootstrap 5 的两个重要变化是，它不再依赖 jQuery，并且不再支持 Internet Explorer。针对 5.0 版本的其他改进还包括有：新的 API、对网格系统的更改以及改进的文档等。 具体更新内容分如下： 新外观 以 v4.5.0 中文档首页的改进为基础，并为其余文档提供了更新的外观。文档页面不再全角显示，以提高可读性。此外，还升级了侧边栏，以使用可扩展部分（由 Collapse 插件提供支持）来实现.
Bootstrap框架最新V5 快速入门&直通
qingwan_91的博客
06-03 1768
一篇文章直通Bootstrap
Bootstrap v5版本的HTML模板
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
11-27 680
一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。标签中，您可以添加您自己的HTML内容。
react无缝轮播图
05-26
React中实现无缝轮播图可以使用`react-slick`插件。以下是一个简单的示例： 1. 安装`react-slick` ``` npm install react-slick ``` 2. 导入并使用`Carousel`组件 ```jsx import React from "react"; import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值