Javascript知识【BootStrap技术实现商品页面】

💂 个人主页: 爱吃豆的土豆

🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主

💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🏆人必有所执，方能有所成！

🌈欢迎加入社区，福利多多哦！土豆社区

🐋希望大家多多支持😘一起进步呀！

案例1：首页顶部

案例2：首页导航条组件

<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
 <ul class=”nav navbar-nav”>
 <!–谁被选中，谁家active –>
 <li class=”active“><a href=”#”>手机数码<span class=”sr-only”>(current)</span></a></li>
 <li><a href=”#”>电脑办公</a></li>
 <li><a href=”#”>电脑办公</a></li>
 <li><a href=”#”>电脑办公</a></li>
 </ul>
 <form class=”navbar-form navbar-right” role=”search”>
 <div class=”form-group”>
 <input type=”text” class=”form-control” placeholder=”Search”>
 </div>
 <button type=”submit” class=”btn btn-default”>Submit</button>
 </form>
 </div>
 </div>
 </nav>
 </div>
</body>
</html>

案例3：轮播图组件

<!– 轮播图片，默认展示的图片加入active样式 –>
 <div class=”carousel-inner” role=”listbox”>
 <div class=”item active”>
 <img src=”../img/1.jpg” alt=”…”>
 <div class=”carousel-caption”>

</div>
 </div>
 <div class=”item”>
 <img src=”../img/2.jpg” alt=”…”>
 <div class=”carousel-caption”>

</div>
 </div>
 <div class=”item”>
 <img src=”../img/3.jpg” alt=”…”>
 <div class=”carousel-caption”>

</div>
 </div>
 </div>
 <!– 左右按钮 –>
 <a class=”left carousel-control” href=”#czxy” role=”button” data-slide=”prev”>
 <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>
 <span class=”sr-only”>Previous</span>
 </a>
 <a class=”right carousel-control” href=”#czxy” role=”button” data-slide=”next”>
 <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
 <span class=”sr-only”>Next</span>
 </a>
 </div>
 </div>
</body>
</html>

轮播图DIV的定时换图属性

data-interval=“毫秒值”

注意：多个轮播图必须修改轮播图的ID。

案例4：热卖商品【重点】

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
 <meta charset=”utf-8″>
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 <title>Bootstrap 101 Template</title>
 <link href=”../css/bootstrap.min.css” rel=”stylesheet”>
 <script src=”../js/jquery-3.3.1.min.js”></script>
 <script src=”../js/bootstrap.min.js”></script>
</head>
<body>
 <div class=”container”>
 <div class=”row”>
 <div class=”col-lg-12″>
 <h2>热门商品<img src=”../img/title2.jpg”/></h2>
 </div>
 </div>
 <div class=”row”>
 <div class=”col-lg-2 visible-lg”>
 <img src=”../products/hao/big01.jpg” width=”110%”/>
 </div>
 <div class=”col-lg-10″>
 <div class=”row”>
 <div class=”col-lg-6 hidden-xs hidden-sm”>
 <img src=”../products/hao/middle01.jpg”/>
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 </div>
 <div class=”row”>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 <div class=”col-lg-2 col-xs-6″>
 
 <img src=”../products/hao/small03.jpg”/> 
 电饭锅 
 <font color=”#ff0b0b”>￥299.0</font> 
 
 </div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>