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

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 Templatetitle>
 <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-4">
 <img src="../img/logo2.png"/>
 div>
 <div class="col-lg-4 visible-lg">
 <img src="../img/header.png"/>
 div>
 <div class="col-lg-4">
 <ul class="list-inline" style="padding-top: 25px;">
 <li><a href="#">登录a>li>
 <li><a href="#">注册a>li>
 <li><a href="#">购物车a>li>
 ul>
 div>
 div>
 div>
body>
html>

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 Templatetitle>
 <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">
 <nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigationspan>
 <span class="icon-bar">span>
 <span class="icon-bar">span>
 <span class="icon-bar">span>
 button>
 <a class="navbar-brand" href="#">首页a>
 div>

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">

 <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">Submitbutton>
 form>
 div>
 div>
 nav>
 div>
body>
html>

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 Templatetitle>
 <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 id="czxy" class="carousel slide" data-ride="carousel" data-interval="2000">

 <ol class="carousel-indicators">
 <li data-target="#czxy" data-slide-to="0" class="active">li>
 <li data-target="#czxy" data-slide-to="1">li>
 <li data-target="#czxy" data-slide-to="2">li>
 ol>


 <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">Previousspan>
 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">Nextspan>
 a>
 div>
 div>
body>
html>

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 Templatetitle>
 <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.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 div>
 <div class="row">
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 <div class="col-lg-2 col-xs-6">
 
 <img src="../products/hao/small03.jpg"/> 
 电饭锅 
 <font color="#ff0b0b">￥299.0font> 
 p>
 div>
 div>
 div>
 div>
 div>
body>
html>

案例1：首页顶部

案例2：首页导航条组件

案例3：轮播图组件

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