四十七使用bootstrap中的选项卡制作产品特色页面
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了四十七使用bootstrap中的选项卡制作产品特色页面相关的知识，希望对你有一定的参考价值。
一、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中的选项卡制作产品特色页面的主要内容，如果未能解决你的问题，请参考以下文章
ArcGIS实验教程——实验四十七：数据驱动页工具批量制作甘肃省各地级市人口七普专题图集