bootstrap响应式前端页面
技术：HTML+CSS+JS+bootstrap
概述
这套代码响应式前端页面基本写完了，适合初学前端的同学，里面主要运用了HTML+CSS布局和动画，js逻辑较少，页面都是静态，未接入接口。响应式借助的是bootstrap这个库。
详细
bootstrap响应式学习参考源码，代码主要是通过bootstrap实现了响应式布局，简单易懂。
一、项目目录
二、演示效果
三、程序实现具体步骤
首页代码 index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/view.css"/>
</head>
<body>
<div class="my-top">
<div class="container">
<div class="my-text">
<span class="glyphicon glyphicon-phone"></span>
<span>40012345678</span>
</div>
<div class="my-login">
<a href="login.html" class="btn btn-success">登录</a>
<a href="register.html" class="btn btn-success">注册</a>
</div>
</div>
<div id="my-home" class="container">
<div class="row">
<div class="col-xs-6 col-sm-2">
<a href="start.html">
<img src="img/logo.png"/>
</a>
</div>
<div class="col-xs-6 col-sm-10 col-md-4">
<form class="navbar-right navbar-form">
<div class="form-group has-feedback">
<label for="kw" class="sr-only">搜索关键字:</label>
<input type="text" id="kw" class="form-control" placeholder="产品搜索"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="hidden-xs hidden-sm col-md-6">
<img src="img/top.jpg"/>
</div>
</div>
</div>
<div class="navbar" style="background:#C92323;margin-top: 20px;position: relative;z-index: 1000">
<div class="container">
<div class="navbar-header">
<div href="#my-menu" class="navbar-toggle" data-toggle="collapse"style="background: #ffffff">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</div>
<div id="my-menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="start.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="product.html">产品商城</a></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="deduct.html">推荐提成</a></li>
<li><a href="appointment.html">在线预约</a></li>
<li><a href="Alliance.html">招商加盟</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="my-center" style="margin:180px 0 20px 0;">
<div class="container">
<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img src="img/banner02.jpg">
</div>
<div class="item">
<img src="img/banner01.jpg">
</div>
</div>
<a href="#carousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div> <div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="view_img">
<a href="#/product">
<div class="view_p">
<img class="img-responsive" src="img/start01-1.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/start01.jpg"/>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="view_img">
<a href="#/product">
<div class="view_p">
<img class="img-responsive" src="img/start2-1.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/start2.jpg"/>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="view_img">
<a href="#/product">
<div class="view_p">
<img class="img-responsive" src="img/start3.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/start3-1.jpg"/>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="my-img">
<img class="img-responsive" src="img/banner03.jpg"/>
<i></i>
<!--<div class="my-p">-->
<!--酷夏新潮 新品上市-->
<!--</div>-->
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/1.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/1-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/2.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/2-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/3.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/3-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/4.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/4-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/5.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/5-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/6.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/6-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/7.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/7-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/8.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/8-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/9.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/9-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/10.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/10-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/11.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/11-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="view_img">
<a href="#">
<div class="view_p">
<img class="img-responsive" src="img/12.jpg"/>
</div>
<div class="view_q">
<img class="img-responsive" src="img/12-1.jpg"/>
</div>
</a>
<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>
<p><s>￥799.00</s> <b>￥349</b></p>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 100px">
<div id="my-bao" class="row">
<div class="hidden-xs col-sm-2">
<img src="img/start6.png"/>
<p>100%正品</p>
</div>
<div class="hidden-xs col-sm-2">
<img src="img/start5.png"/>
<p>客户认证好评</p>
</div>
<div class="hidden-xs col-sm-2">
<img src="img/start7.png"/>
<p>低价享受</p>
</div>
<div class="hidden-xs col-sm-2">
<img src="img/start8.png"/>
<p>快速发货</p>
</div>
<div class="hidden-xs col-sm-2">
<img src="img/start4.png"/>
<p>七天退货保障</p>
</div>
<div class="hidden-xs col-sm-2">
<img src="img/start6.png"/>
<p>100%满意</p>
</div>
</div>
<div id="my-footer" class="row">
<div class="hidden-xs col-sm-2">
<ul class="list-unstyled">
<li><h4>新手帮助</h4></li>
<li><a href="#">如何注册</a></li>
<li><a href="#">门店认证</a></li>
</ul>
</div>
<div class="hidden-xs col-sm-2">
<ul class="list-unstyled">
<li><h4>常见问题</h4></li>
<li><a href="#">订单状态</a></li>
<li><a href="#">发票说明</a></li>
</ul>
</div>
<div class="hidden-xs col-sm-2">
<ul class="list-unstyled">
<li><h4>支付方式</h4></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">银行转账</a></li>
<li><a href="#">货到付款</a></li>
</ul>
</div>
<div class="hidden-xs col-sm-2">
<ul class="list-unstyled">
<li><h4>配送服务</h4></li>
<li><a href="#">范围及运费</a></li>
</ul>
</div>
<div class="hidden-xs col-sm-2">
<ul class="list-unstyled">
<li><h4>售后服务</h4></li>
<li><a href="#">退换货政策</a></li>
<li><a href="#">退换货流程</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-2">
<ul class="list-unstyled">
<li><h4>服务热线</h4></li>
<li><h4 style="color: #B22222;">4005-114-114</h4></li>
<li><img src="img/erweima.jpg" width="140" height="150"/></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="fix"
style="width: 301px;height: 459px;position:fixed;bottom: -419px;left: 36px; border: 1px solid #000">
<div style="width: 301px;height:40px; border-radius: 4px;background: #000;">
<p id="fix" style="color: #ffffff;padding: 10px;">联系我们</p>
</div>
<div style="background: #ffffff;padding: 20px;">
<span>您好，如有任何问题，请填写下面的表单。我们将会在第一时间联系您。</span> <p style="margin: 10px 0">使用QQ和我们在线交谈</p>
<a href="#"><img src="img/pa.jpg" alt=""/></a> <form>
<div class="form-group">
<label for="uname" class="control-label">您的姓名：</label>
<input id="uname" class="form-control" type="text" placeholder="请填写您的姓名(必填项)"/>
</div>
<div class="form-group">
<label for="em" class="control-label">邮件地址：</label>
<input id="em" class="form-control" type="email" placeholder="邮件地址(必填项)"/>
</div>
<div class="form-group">
<label for="zx" class="control-label">请告诉我您想咨询的问题：</label>
<textarea name="zx" id="zx" cols="30"></textarea>
</div>
<div class="text-center">
<a href="#" class="btn btn-info">发送</a>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("#fix").click(function () {
var dd = $(".fix");
if (dd.css("bottom") == '0px') {
dd.css("bottom", -419);
} else {
dd.css("bottom", 0);
}
})
</script>
</body>
</html>
首页代码 index.css
.my-top{
height: 50px;
line-height: 50px;
background: #333951;
}
.my-text{
color: #ffffff;
float:left;
}
.my-login{
float:right;
}
#my-menu .navbar-nav li a{
color:#FFF;
font-weight: bold;
}
#my-menu .navbar-nav li a:hover{
background: #a9130d;
}
#my-home{
margin-top:20px ;
}
#my-bao{
padding-bottom:50px;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 30px;
}
#my-bao .col-sm-2{
text-align: center;
}
#my-footer .col-sm-2 .list-unstyled li{
margin-top: 10px;
}
#my-footer .col-sm-2 .list-unstyled li a{
color:#555452;
}
#my-footer .col-sm-2 .list-unstyled li a:hover{
text-decoration: none;
color:#E64F75;
}
.my-all h4{
padding-left: 5px;
height: 50px;
line-height: 50px;
color: #ffffff;
background:#E14F4F;
}
#my-ul{
margin-top: -8px;
border: 1px solid #DDDDDD;
border-top: 2px solid #E14F4F;
background: #F6F6F6;
}
#my-ul li a{
display:block;
height: 50px;
line-height: 50px;
padding-left: 20px;
border-bottom:1px solid #FFFFFF ;
color:#333333;
}
#my-ul li a:hover{
text-decoration: none;
}
.view_img{
position: relative;
}
.view_q img{
position: absolute;
top:0;
left: 0;
}
.view_q img{
position: absolute;
top:0;
left: 0;
}
.view_q{
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.view_q:hover{
opacity:0;
}
.my-txt{
margin: 5px 0;
}
.my-txt a{
color:#6F6F6F;
text-decoration: none;
}
.my-txt a:hover{
color:#333;
}
.view_img p b{
font-size: 18px;
color:#C40000;
}
.img-responsive{
width:100%;
display:block;
height:auto;
}
.my-img{
margin:30px 0;
position:relative;
max-width: 100%;
}
.my-img i{
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background:#1A1F24;
opacity:.5;
}
.my-p{
position:absolute;
top:50%;
left:50%;
z-index: 100;
max-width:100%;
}
.my-p{
color:#FFF;
font-size:60px ;
font-style: normal;
}
.my-register:after{
content:"";
display:table;
clear: both;
}
.my-span{
color: #888;
font-size: 12px;
margin:0;
padding:0;
}
.container .form-horizontal .form-group label{
font-size: 10px;
font-weight: normal;
}
.my-jian,.my-jia{
display: inline-block;
border:1px solid #DDDDDD;
width: 34px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 25px;
color:#000000;
}
.my-jian:hover,.my-jia:hover{
text-decoration: none;
}
.my-jian{
margin-left: 20px;
}
.count{
display: inline-block;
width: 40px;
height: 32px;
line-height: 32px;
text-align: center;
color: #000000;
font-size: 25px;
border: 1px solid #DDDDDD;
}
.my-list{
background:#DDDDDD;
padding: 10px;
border-top: 2px solid #D81416;
margin-top: -8px;
}
.my-hide p{
display: none;
}
.my-hide .my-show{
display:block;
}
注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
bootstrap响应式前端页面的更多相关文章
- jq+bootstrap响应式系统管理页面
用bootstrap搭建的一个系统管理页面基于经典的HTML+Css 弊端:代码量太大,用vue组件化开发的思想更加便捷且方便!不过如果是做纯展示的系统页面,只需要一些简单的数据交互,用jq配合boo ...
- 使用bootstrap做一个响应式的页面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Crumpet – 使用很简单的响应式前端开发框架
Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...
- Furatto – 轻量，友好的响应式前端开发框架
Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...
- Foundation 5 发布！最先进的响应式前端框架
数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- 带你玩转JavaWeb开发之五-如何完成响应式开发页面
响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
随机推荐
- boost 正则表达式 regex
boost 正则表达式 regex 环境安装 如果在引用boost regex出现连接错误,但是引用其他的库却没有这个错误,这是因为对于boost来说,是免编译的,但是,正则这个库 是需要单独编译 ...
- js异步梳理：1.从浏览器的多进程到JS的单线程，理解JS运行机制
大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...
- 熔断器---Hystrix
Hystrix:熔断器,容错管理工具,旨在通过熔断机制控制服务和第三方库的节点,从而对延迟和故障提供更强大的容错能力. 说到熔断器,先要引入另外一个词,雪崩效应. 雪崩效应,百度百科的解释是这样的: ...
- re模块、hashlib模块
一.re模块 1.什么是正则? 正则就是用一系列具有特殊含义的字符组成一套规则,该规则用来描述具有某一特征的字符串,正则就是用来去一个大的字符串中匹配出符合规则的子字符串 2.为何要用正则? 用户注册 ...
- Apache Atlas
atlas英 [ˈætləs] 阿特拉斯. 美 [ˈætləs] n.地图集;〈比喻〉身负重担的人 == Apache Atlas Version: 1.1.0 Last Published: 201 ...
- 使用requests进行模拟登陆
import re import requests header = { 'User-Agent': "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWe ...
- SpringMVC url匹配却404，SimpleUrlHandlerMapping不起作用
代码如下: <mvc:default-servlet-handler/> <bean class="org.springframework.web.servlet.hand ...
- BZOJ5207 : [Jsoi2017]隧道
若$\min(n,m)<\min(n+1,m-1)$,则考虑计算左边与右边不连通的概率,然后用$1$减去它得到答案. 若$\min(n,m)\geq \min(n+1,m-1)$,则考虑计算对偶 ...
- C++学习笔记50：队列类模板
队列是只能向一端添加元素,从另一端删除元素的线性群体 循环队列 在想象中将数组弯曲成环形,元素出队时,后继元素不移动,每当队尾达到数组最后一个元素时,便再回到数组开头. 队列类模板 //Queue.h ...
- Eclipse 设置Web测试的浏览器
Window->Preferences->General->Web Browser->选择Use external web browser->选择Default syst ...