Bootstrap: 案例 - 首页轮播大图 & 响应式导航条
时间:2021-09-10
本文章向大家介绍Bootstrap: 案例 - 首页轮播大图 & 响应式导航条,主要包括Bootstrap: 案例 - 首页轮播大图 & 响应式导航条使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 首页轮播大图
1. 大小屏幕自动适应,扩大缩小浏览器
2. 滚动数字区点击左右切换图片
3. 左右区域点击切换
4. 默认5秒钟自动切换下一张
5. 最后一张,回到第一张
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 滚动圆点区 --> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> </ol> <!-- 图片区 --> <div class="carousel-inner"> <div class="item active"> <img src="img/1.jpg"> </div> <div class="item"> <img src="img/2.jpg"> </div> <div class="item"> <img src="img/3.jpg"> </div> </div> <!-- 左右切换 --> <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
data 属性解释:
1. data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置;
2. data-slide-to 来向轮播底部创建一个原始滑动索引,data-slide-to="2" 将把滑动块移动到一个特 定的索引,索引从 0 开始计数。
3. data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放
2 响应式导航条
<!-- 默认的导航条样式 --> <div class="navbar navbar-default"> <!-- 响应式的容器 --> <div class="container"> <!-- 导航条的头部 --> <div class="navbar-header"> <a href="#" class="navbar-brand">老孙科技股份有限公司</a> <!-- data-toggle="collapse" 数据切换的事件,特效是折叠--> <!-- data-target="#nav" 折叠效果的目标是下面的#nav容器--> <button class="navbar-toggle" data-toggle="collapse" datatarget="#nav"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- 导航项 --> <div id="nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#"> <span class="glyphiconglyphicon-home"></span> 主页</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-tint"></span>竞争</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-earphone"> </span> 联系我们</a> </li> </ul> </div> </div> </div>
原文地址:https://www.cnblogs.com/JasperZhao/p/15250428.html
- 国内环境下前端网页开发的几个“中国特色”代码
- 从源码的角度再看 React JS 中的 setState
- Sass 与Compass 在WordPress 主题开发中的运用
- Python爬虫Scrapy入门看这篇就够了
- Clef:为你的WordPress 站点添加两步验证
- JavaScript 基础(六) 数组方法 闭包
- 【译】WordPress 中的50个过滤器(4):第21-30个过滤器
- 【译】WordPress 中的50个过滤器(3):第11-20个过滤器
- 【译】WordPress 中的50个过滤器(2):先介绍10个过滤器
- 【译】WordPress 中的50个过滤器(1):何为过滤器?
- 哪种芯片架构将成为人工智能时代的开路先锋
- 算法系列(三)
- Facebook、Google、Amazon 是如何高效开会的
- 算法系列(二)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- IIC协议
- 通过例子学习编写shell
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第三天:MakeFile
- 继续学习Shell脚本(详细)
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序
- Python数据分析实战(3)Python实现数据可视化
- xresloader转表工具链增加了一些新功能(map,oneof支持,输出矩阵,基于模板引擎的加载代码生成等)
- 数据结构之树
- UNIX网络编程卷1(第三版)套接字编程简介
- UNIX网络编程卷1(第三版)readn,writen和readline函数
- UNIX网络编程卷1(第三版)基本TCP套接字编程
- Ubuntu下linux映射共享盘到window下方法
- 数据同步写入磁盘:sync
- 惯用的关机命令:shutdown