Bootstrap简单应用——对首页进行重构
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>商城首页</title> <!-- 引入Bootstrap核心样式文件 -->
<link href="../css/bootstrap.css" rel="stylesheet"> <!-- 引入jQuery核心js文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../js/bootstrap.min.js"></script>
</head> <body>
<!--logo部分-->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<img src="../img/logo2.png" />
</div>
<div class="col-lg-5 col-md-4 hidden-xs col-sm-6">
<img src="../img/header.png" />
</div>
<div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
</div> <!--导航栏-->
<div class="container" style="margin-top: 10px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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 navigation</span>
<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>
<a href="#">孕婴保健</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">手机数码</a>
</li>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">电脑办公</a>
</li>
<li role="separator" 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">Submit</button>
</form>
</div>
</div>
</nav>
</div> <!--轮播图-->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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> <!-- Wrapper for slides -->
<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> <!-- Controls -->
<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">Previous</span>
</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">Next</span>
</a>
</div>
</div> <!--热门商品-->
<div class="container" style="margin-top: 10px;">
<!--上面文字内容-->
<div class="row">
<span id="" style="font-size: 30px;padding-left: 33px;">
热门商品 <img src="../img/title2.jpg" />
</span>
</div>
<!--图片内容-->
<div class="row">
<div class="col-md-2 col-sm-2 hidden-sm hidden-xs" style="height: 400px;">
<img src="../img/big01.jpg" height="100%"/>
</div>
<div class="col-md-10 col-sm-10" style="padding-left: 10px;">
<div class="row">
<div class="col-md-6 hidden-xs hidden-sm" style="height: 200px;width: 490px;">
<a href="#"><img src="../img/middle01.jpg" height="100%" width="100%"/></a>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div> <div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
</div>
</div>
</div>
</div> <!--广告图片-->
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;">
<img src="../img/ad.jpg" style="width: 98%;"/>
</div>
</div>
</div> <!--最新商品-->
<div class="container" style="margin-top: 10px;">
<!--上面文字内容-->
<div class="row">
<span id="" style="font-size: 30px;padding-left: 33px;">
最新商品 <img src="../img/title2.jpg" />
</span>
</div>
<!--图片内容-->
<div class="row">
<div class="col-md-2 col-sm-2 hidden-sm hidden-xs" style="height: 400px;">
<img src="../img/big01.jpg" height="100%"/>
</div>
<div class="col-md-10 col-sm-10" style="padding-left: 10px;">
<div class="row">
<div class="col-md-6 img-responsive" style="height: 200px;width: 490px;">
<a href="#"><img src="../img/middle01.jpg" height="100%" width="100%"/></a>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div> <div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" align="center">
<a href="#"><img src="../img/small03.jpg" /></a>
<p><a href="#"><font color="gray">电炖锅</font></a></p>
<p><font color="red">¥399</font></p>
</div>
</div>
</div>
</div>
</div> <!--广告图片-->
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;">
<img src="../img/footer.jpg" style="width: 98%;"/>
</div>
</div>
</div> <!--友情链接和版权信息-->
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="" align="center">
<ul class="list-inline">
<li><a href="info.html">关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a>支付方式</a></li>
<li><a>配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</div> </body> </html>
Bootstrap简单应用——对首页进行重构的更多相关文章
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- Bootstrap简单入门
Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...
- Bootstrap拟态框+支付宝首页
任务没完成,继续来!因为刚才网不好,我辛辛苦苦打了洋洋洒洒一大堆都没了! 我们今天主要是说一个简单的由Bootstrap和HTML5结合而成的小案例: 首先:由标题可得知,这是移动端,所以需要这样一串 ...
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- Bootstrap简单Demo（2015年05月-18日）
Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
- bootstrap简单图文环绕效果
一． 下载bootstrap-3.3.7 二． 在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...
- Bootstrap简单HelloWorld入门教程
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...
- mvc area区域和异步表单，bootstrap简单实例
码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由 AreaRegistration.Regist ...
- 【Bootstrap简单用法】
一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...
随机推荐
- ubuntu16.04+opencv3.0.0
基本步骤: http://blog.csdn.net/xuezhisdc/article/details/48691797 报错: http://www.jianshu.com/p/68ac83436 ...
- 对WEB url 发送POST请求
package com.excellence.spark; import java.util.List; import com.excellence.spark.test.test; import c ...
- KEIL C51程序中如何嵌入汇编
模块内接口:使用如下标志符:#pragma asm汇编语句#pragma endasm注意:如果在c51程序中使用了汇编语言,注意在Keil编译器中需要激活Properties中的“Generate ...
- C# 通过http post 请求上传图片和参数
一.C# Winform或控制台 /// <summary> /// 通过http上传图片及传参数 /// </summary> /// <param name=&quo ...
- HDU 2123 An easy problem
http://acm.hdu.edu.cn/showproblem.php?pid=2123 Problem Description In this problem you need to make ...
- Teamcity部署.net服务“无法连接到远程服务器”解决方式
在公司Teamcity上执行自动部署.net服务的时候,发现Teamcity在启动default.aspx的时候报错了,提示:使用“0”个参数调用“GetResponse”时发生异常:“无法连接到远程 ...
- 在Android上使用Socket
原文地址:http://www.cnblogs.com/kross/p/3621952.html 考虑到以后可能要用到这方面的知识,就来写个Demo尝试下,其实以前学过,但不记得了……(用不到的东西各 ...
- HDU 2255 奔小康赚大钱 （KM算法 模板题）
奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- true和false
下面这些值在JavaScript中都是falsy: false 0 (数字零) "" (空字符串) null undefined NaN (一个特殊的Number值,意为Not-a ...
- forEach遍历数组对象且去重
forEach遍历数组对象 var obj1 = [{ key: '01', value: '哈哈' }, { key: '02', value: '旺旺' }, { key: '03', value ...