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 协议) <!-- 最新版本的 ...
随机推荐
- Gradle入门（1）：安装
在Ubuntu下,执行以下命令: sudo apt-get install gradle 安装完成后,执行命令: gradle -v 得到以下信息: Picked up _JAVA_OPTIONS: ...
- Scrum Meeting Beta - 10
Scrum Meeting Beta - 10 NewTeam 2017/12/11 地点:新主楼F座二楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了作业详情的本地存储Issue #165 ...
- 8th 对软件工程的理解（读构建之法有感）
对于任何一个学计算机的人来说,软件都不陌生,甚至于一个普通的朝九晚五的上班族,他的每日生活工作也都与软件有着密不可分的关系.然而,程序又是如何从一行行指尖留下的代码,机器存储的数据变成快捷高效的软件的 ...
- CXGRID用法（取行、列值；定位选中某行等等）
Delphi Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值 cxGrid1DBTableView1.Controller.FocusedRowIndex 当前行号 cxGrid1DB ...
- 正确理解 SqlConnection 的连接池机制[转]
作者: eaglet 转载请注明出处 .net 中通过 SqlConnection 连接 sql server,我们会发现第一次连接时总是很耗时,但后面连接就很快,这个其实和SqlConnection ...
- 微信小程序使用函数的三种方法
使用来自不同页面的函数 函数写在util.js页面 function formatTime(date) { var year = date.getFullYear() var month = date ...
- [转帖]剖析淘宝TDDL（TAOBAO DISTRIBUTE DATA LAYER）
剖析淘宝TDDL(TAOBAO DISTRIBUTE DATA LAYER) 博客分类: 原博客地址: http://qq85609655.iteye.com/blog/2035176 distrib ...
- 微信小程序 功能函数 替换字符串内的指定字符
var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var st ...
- Centos7 pip 安装MySQLdb（mysql-python）出错
租了个阿里云的Centos7的ECS,需要使用pip安装MySQLdb模块.也就是mysql-python模块. 但是遇到问题 Collecting mysql-python Downloading ...
- Java 流程控制
Java 流程控制 Java 分支结构 - if...else/switch 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支 ...