四十七、使用bootstrap中的选项卡制作产品特色页面
2024-05-31 15:17:49
一、bootstrap参考链接
- 参考链接：https://v3.bootcss.com/javascript/#tabs
- 参考链接：https://v3.bootcss.com/components/#media
- 参考链接：https://v3.bootcss.com/components/#breadcrumbs
二、效果与代码
- 效果
兼容PC端、移动端
- 代码
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入bootstrap核心样式文件（必须） --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="css/index.css"><!-- 站点图标 --><link rel="shortcut icon" href="imgs/favicon.ico" type="image/x-icon">
</head><body><!-- 产品特色 --><section id="dw_product"><div class="container"><div class="row"><!-- 头部选项 --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#product1" aria-controls="product1" role="tab"data-toggle="tab">在线大学</a></li><li role="presentation"><a href="#product2" aria-controls="product2" role="tab" data-toggle="tab">会员专享</a></li><li role="presentation"><a href="#product3" aria-controls="product3" role="tab" data-toggle="tab">优质食品</a></li><li class="pull-right hidden-sm hidden-xs"><a href="#" aria-controls="more" role="tab"data-toggle="tab">更多</a></li></ul><!-- 展示内容 --><div class="tab-content"><div role="tabpanel" class="tab-pane fade in active" id="product1"><div class="container"><div class="row"><div class="col-md-8 pd-left"><!-- 第一部分 --><div id="pd_one_1" class="media"><div class="media-left"><a href="#"><img class="media-object" src="imgs/ewm_xzh.jpg" alt="二维码" width="140"></a></div><div class="media-body text-muted" style="padding-top: 100px;"><h4 class="media-heading">更多资讯欢迎</h4><h4 class="media-heading">关注撩课学院</h4></div></div><!-- 第二部分 --><ol id="pd_one_2" class="breadcrumb lead"><li><a href="#">HTML5+全栈</a></li><li><a href="#">Python+人工智能</a></li><li><a href="#">JavaEE</a></li><li><a href="#">Go语言+区块链</a></li></ol><!--第三部分--><h1 id="pd_one_3">欢迎来到IT人的在线大学 <strong class="text-danger">撩课学院</strong></h1><!--第四部分--><div id="pd_one_4"><button class="btn btn-primary btn-lg" type="submit" style="margin-right: 20px;">课程咨询</button><button class="btn btn-default btn-lg" type="submit">了解更多</button></div></div><div class="col-md-4 hidden-xs hidden-sm"><img src="imgs/iphoneX.png" alt="" class="img-responsive"></div></div></div></div><div role="tabpanel" class="tab-pane" id="product2"><div class="container"><div class="row"><div class="col-md-4 hidden-xs hidden-sm"><img src="imgs/iphoneX2.png" alt="" class="img-responsive"></div><div id="pd_two1" class="col-md-8 pd-left"><h1 class="text-warning">撩课学院会员</h1><p class="lead">汇聚名师, 为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务,1年365天持续更新课程全部免费学习!</p></div></div></div></div><div role="tabpanel" class="tab-pane" id="product3"><div class="container"><div class="row"><div class="col-md-6 pd-left"><h1><strong class="text-danger">案例驱动·体系贯穿·全面系统</strong></h1><h3>10-15分钟的视频<span class="text-warning" 知识点拆分讲解></span></h3><h4 class="text-muted" style="margin: 15px 0;">玩转HTML5+全栈系列, 玩转Python+人工智能系列,玩转JavaEE系列, 玩转Go+区块链系列</h4><div class="badge" style="padding: 15px 10px; cursor: pointer;">已更新3000+视频 | 100000+人订阅</div></div><div class="col-md-6 hidden-xs hidden-sm"><img src="imgs/macBook.png" alt="" class="img-responsive"></div></div></div></div></div></div></div></section><!-- /产品特色 --><script src="lib/jquery/jquery.js"></script><!-- 引入bootstrap核心脚本文件 --><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/index.js"></script>
</body></html>
index.css
/* 通用样式 start */
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #000;
}
/* 通用样式 end *//* 产品特色的样式 start */
#dw_product {background-color: #f0f0f0;padding: 30px 0;
}
#dw_product .nav {font-size: 18px;
}
#dw_product .nav a {color: #999;
}
#dw_product .nav li.active a {border: none;background-color: transparent;border-bottom: 2px solid #0AB4F7;color: #000;
}
#dw_product .tab-content {padding-top: 20px;
}
#dw_product .pd-left {padding: 40px 0;
}
#pd_one_1 {margin: 15px 0;
}
#pd_one_2 {background-color: transparent;
}
#pd_one_4 {margin: 15px 0;
}
#dw_product #pd_two_1 {padding: 100px 0;
}
/* 产品特色的样式 end */
四十七、使用bootstrap中的选项卡制作产品特色页面相关推荐
- ABP源码分析四十七：ABP中的异常处理
ABP源码分析四十七:ABP中的异常处理 参考文章: (1)ABP源码分析四十七:ABP中的异常处理 (2)https://www.cnblogs.com/1zhk/p/5538983.html (3 ...
- 【转】ABP源码分析四十七：ABP中的异常处理
ABP 中异常处理的思路是很清晰的.一共五种类型的异常类. AbpInitializationException用于封装ABP初始化过程中出现的异常,只要抛出AbpInitializationExce ...
- ArcGIS实验教程——实验四十七：数据驱动页工具批量制作甘肃省各地级市人口七普专题图集
本实验详细讲解利用ArcGIS数据驱动页工具,制作甘肃省各地级市人口七普专题图集. 文章目录 1. 数据驱动页工具简介 2. 甘肃省各地级市人口七普专题图集 2.1 符号化及标注 2.2 数据驱动页的 ...
- Android笔记（四十七） Android中的数据存储——XML（三）SAX解析
SAX是一个解析速度快并且占用内存少的xml解析器,非常适合用于Android等移动设备. SAX解析XML文件采用的是事件驱动,也就是说,它并不需要解析完整个文档,在按内容顺序解析文档的过程中,SA ...
- 四十七、Kafka中的拦截器（Interceptor）
前两篇文章我们分别介绍了Kafka生产者和消费者的API,本文我们介绍一下Kafka中拦截器的知识.关注专栏<破茧成蝶--大数据篇>,查看更多相关的内容~ 目录 一.拦截器介绍 二.拦截器 ...
- python四十七:在子类中调用父类方法
class Weapon:def __init__(self,color):self.color = colordef reach(self):print("射程")class A ...
- hive 如果表不存在则创建_从零开始学习大数据系列(四十七) Hive中数据的加载与导出...
[本文大约1400字,阅读时间5~10分钟] 在<从零开始学习大数据系列(三十八) Hive中的数据库和表>和<从零开始学习大数据系列(四十二)Hive中的分区>文章中,我们已 ...
- OpenCV学习笔记（四十六）——FAST特征点检测features2D OpenCV学习笔记（四十七）——VideoWriter生成视频流highgui OpenCV学习笔记（四十八）——PCA算
OpenCV学习笔记(四十六)--FAST特征点检测features2D 特征点检测和匹配是计算机视觉中一个很有用的技术.在物体检测,视觉跟踪,三维常年关键等领域都有很广泛的应用.这一次先介绍特征点检 ...
- 第四十七章 SQL命令 GRANT（一）
文章目录 第四十七章 SQL命令 GRANT(一) 大纲 参数 描述 GRANT admin-privilege GRANT role GRANT object-privilege 对象所有者权限 第 ...
最新文章
- 解决删除U盘时提示无法停止‘通用卷’设备的方法
- 高斯混合模型--GMM
- 使用PHP时出现乱码,php出现乱码该怎么解决？
- 不用任何插件实现 WordPress 的彩色标签云
- php 物联网应用,蜂窝物联网的概念以及应用
- 【Kafka】Kafka创建Topic的时候提示WARNING: Due to limitations in metric names, topics with a period ('.')
- 好程序员web前端分享web开发概况
- MySQL存储引擎－－MyISAM与InnoDB区别
- 求解偏微分方程开源有限元软件deal.II学习--Step 6
- 百度文库收费文档下载方法
- 电影网络首播后喜剧场上线，搅局者加速行业重塑
- 利用matlab将位图转为SVG矢量图
- 在自己订阅的GOOGLE快讯中,看到自己的文章
- 1419. Minimum Number of Frogs Croaking
- vim实用指南（9）vimdiff好用的可视化文本对比工具
- 在隐身模式下使用 Chrome 扩展程序
- 索骥馆－文学理论之《文学的故事：中国卷/世界卷（全2册）》全彩版[PDF]
- Oracle 11g新特性
- 添加网站外链的10个小技巧-成都网站建设
- windows 初始化设置