通过BootStrap框架制作商城网页
BootStrap框架 通过官网查询代码实现内容
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/jquery-1.11.0.js">script>
<script type="text/javascript" src="../js/bootstrap.js">script>
<meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6">
<img src="../img/sc.jpg" style="height: 6rem;"/>
div>
<div class="col-md-4 hidden-sm hidden-xs">
<img src="../img/header.png" />
div>
<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;height: 50px;">
<a href="#">登录a>
<a href="#">注册a>
<a href="#">购物车a>
div>
div>
<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">
<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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret">span>a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">手机数码a>
li>
<li>
<a href="#">电脑办公a>
li>
<li>
<a href="#">鞋靴箱包a>
li>
<li class="divider">li>
<li>
<a href="#">香烟酒水a>
li>
<li class="divider">li>
<li>
<a href="#">花生瓜子a>
li>
ul>
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 id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
<li data-target="#carousel-example-generic" data-slide-to="1">li>
<li data-target="#carousel-example-generic" 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="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
<span class="sr-only">Nextspan>
a>
div>
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/>h3>
div>
div>
<div class="row">
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
div>
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="../products/hao/middle01.jpg" style="width: 100%;" />
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small01.jpg" style="max-width: 80%;"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small02.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small03.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small04.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small05.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small06.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small07.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small08.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small09.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
div>
div>
<div class="row">
<div class="col-md-12">
<img src="../products/hao/ad.jpg" width="100%"/>
div>
div>
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/>h3>
div>
div>
<div class="row">
<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
<img src="../products/hao/big01.jpg"/>
div>
<div class="col-md-10">
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="../products/hao/middle01.jpg" />
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small09.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small08.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small07.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small06.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small05.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small04.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small03.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small02.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small01.jpg"/>
<p>微波炉p>
<p style="color: red;">$998p>
div>
div>
div>
<div class="row">
<div class="col-md-12">
<img src="../img/footer.jpg" width="100%"/>
div>
div>
<div style="text-align: center;">
<a href="#">关于我们a>
<a href="#">联系我们a>
<a href="#">招贤纳士a>
<a href="#">法律声明a>
<a href="#">友情链接a>
<a href="#">支付方式a>
<a href="#">配送方式a>
<a href="#">服务声明a>
<a href="#">广告声明a>
<br />
Copyright © 2005-2016 传智商城 版权所有
div>
div>
body>
html>
其中方法名解释:
栅格系统:
- 将屏幕划分成12个格子,12列
- class=“row” 行
- 行里面放列,col-屏幕分辨率-数字
- (每一种分辨率厚度饿数字总和必须是等于12,如果超过12,另起一行)
- col-lg-数字:在超宽屏幕上使用
col-md-数字:在中等屏幕上,pc电脑
col-sm-数字: 在平板上
col-xs-数字:在手机上
组件:导航条,进度条,字体
javascript插件: 轮播图
什么是响应式:会根据不同的分辨率去显示不同页面结构,提高用户体验
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
实例
<html>
<head>
<title>响应式布局容器 - container和container-fluidtitle>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<div class="container" style="background-color: red;">
<div>container类div>
div>
<div class="container-fluid" style="background-color: blue;">
<div>container-fluid类div>
div>
body>
html>
col-lg-* col-md-* col-xs-* col-sm定义在这些不同屏幕大小中将有多少列。
md正常网页 sm平板网页 xs手机网页
例：如果你想在桌面屏幕和电话屏幕上有两列，你可以放两列。col-md-6和两个col-xs-6列中的类。
如果你想在桌面屏幕上有两列，在电话屏幕上只有一列(即两行叠在一起)two col-md-6和两个col-xs-12在你的列中，因为和将为24，它们将自动堆叠在一起。