带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发

使用BootStrap开发一个响应式的页面出来

响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验

需求分析

开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果

技术分析

BootStap概述

什么是BootStrap
BootStrap有什么作用
什么是响应式
BootStrap的中文网
- http://www.bootcss.com
下载BootStrap
BootStrap结构
- 全局CSS
  - bootStrap中已经定义好了一套CSS的样式表
- 组件
  - BootStrap定义的一套按钮,导航条
- JS插件
  - BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的入门开发

引入相关的头文件

        <meta charset="UTF-8">

        <!--BootStrap设计的页面支持响应式的 -->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <!--引入BootStrap的CSS-->

        <link rel="stylesheet" href="../../css/bootstrap.css" type="text/css"/>

        <!--引入JQuery的JS文件：JQuery的JS文件要在BootStrap的js的文件的前面引入-->

        <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>

        <!--引入BootStrap的JS的文件-->

        <script type="text/javascript" src="../../js/bootstrap.js" ></script>

BootStrap的布局容器

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">

...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

...

</div>

BootStrap的栅格系统
- 响应式设计: 这种设计依赖于CSS3中的媒体查询
- 栅格样式:
  - 设备分辨率大于1200 使用lg样式
  - 设备分辨率大于992 < 1200 使用md样式
  - 设备分辨率大于768 < 992 使用sm样式
  - 设备分辨率小于768使用sm样式

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

BootStrap的全局CSS
- 定义了一套CSS
  - 对页面中的元素进行定义
  - 列表元素,表单,按钮,图片...

步骤分析

代码实现

使用BootStrap布局网站首页

需求分析

请使用BootStrap对我们的首页进行优化

技术分析

步骤分析

新建一个HTML页面.引入bootStrap相关的js和CSS

定义一个整体的div, 将整体的div分成8个部分

完成没部分的内容显示

代码实现

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <!--BootStrap设计的页面支持响应式的 -->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title></title>

        <!--引入BootStrap的CSS-->

        <link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>

        <!--引入JQuery的JS文件：JQuery的JS文件要在BootStrap的js的文件的前面引入-->

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        <!--引入BootStrap的JS的文件-->

        <script type="text/javascript" src="../js/bootstrap.js" ></script>

    </head>

    <body>

        <!--整体div-->

        <div class="container">

            <!--Logo部分-->

            <div class="row">

                <div class="col-md-4 col-sm-6">

                    <img src="../img/logo2.png" />

                </div>

                <div class="col-md-4 col-sm-6">

                    <img src="../img/header.png" />

                </div>

                <div class="col-md-4 col-sm-12">

                    <ul class="list-inline" style="padding-top: 15px;">

                        <li><a href="#">登录</a></li>

                        <li><a href="#">注册</a></li>

                        <li><a href="#">购物车</a></li>

                    </ul>

                </div>

            </div>

            <!--导航栏部分-->

            <div>

                <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>

                    <!-- Collect the nav links, forms, and other content for toggling -->

                    <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">Dropdown <span class="caret"></span></a>

                          <ul class="dropdown-menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li role="separator" class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                            <li role="separator" class="divider"></li>

                            <li><a href="#">One more separated link</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><!-- /.navbar-collapse -->

                  </div><!-- /.container-fluid -->

                </nav>

            </div>

            <!--图片轮播部分-->

            <div>

                <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>

                <div class="row">

                    <h2>最新商品<img src="../img/title2.jpg"></h2>

                </div>

                <div class="row">

                    <!--左侧广告部分-->

                    <div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">

                        <img src="../products/hao/big01.jpg" width="100%" height="100%"/>

                    </div>

                    <div class="col-md-10">

                        <div class="row">

                            <div class="col-md-6  hidden-sm hidden-xs" style="height: 200px;">

                                <img src="../products/hao/middle01.jpg" width="100%" height="100%"/>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-2  col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2  col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!--广告部分-->

            <div>

                <img src="../products/hao/ad.jpg" width="100%"/>

            </div>

            <!--热门商品显示部分-->

            <div>

                <div class="row">

                    <h2>热门商品<img src="../img/title2.jpg"></h2>

                </div>

                <div class="row">

                    <!--左侧广告部分-->

                    <div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">

                        <img src="../products/hao/big01.jpg" width="100%" height="100%"/>

                    </div>

                    <div class="col-md-10">

                        <div class="row">

                            <div class="col-md-6 hidden-sm hidden-xs" style="height: 200px;">

                                <img src="../products/hao/middle01.jpg" width="100%" height="100%"/>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small03.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small04.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                            <div class="col-md-2 col-sm-4">

                                <img src="../products/hao/small05.jpg" />

                                <p>电饭煲</p>

                                <p>电饭煲</p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!--广告部分-->

            <div>

                <img src="../img/footer.jpg" width="100%"/>

            </div>

            <!--页面底部友情链接-->

            <div align="center">

                <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>

                    <a href="">联系我们</a>

                    <a href="">招贤纳士</a>

                    <a href="">法律声明</a>

                    <a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>

                    <a href="">支付方式</a>

                    <a href="">配送方式</a>

                    <a href="">服务声明</a>

                    <a href="">广告声明</a>

                    <br/>

                    Copyright ? 2005-2016 xx商城 版权所有

            </div>

        </div>

    </body>

</html>

时间： 2024-12-23 01:48:08

带你玩转JavaWeb开发之五-如何完成响应式开发页面的相关文章

第四课开发uehtml官网响应式静态页面

概况:整站布局.头部菜单响应式设置.最新消息模块变化.内容模块四三二响应式变化. 伪类选择器: E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算只匹配在下标出现的选择器 E:nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/*匹配奇数行*/ p:nth-ch

响应式开发

一:网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度. 4.响应式布局:通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现. 注:以上几种布局方式并不

谷歌Web中文开发手册：3响应式

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive (译者注:全部按照教程的代码,并不能实现代码,我调试之后发了全部代码出来.ps:没有使用翻墙工具,谷歌给的例子访问不到.) 每个设备都有自己独特的优势和限制,要让这个网页在众多的不同的显示设备中被接受,作为一名Web开发者,你要尽力让这个页面支持所有设备. 目录: 添加viewport 应用简

初识响应式开发

1.响应式布局(respond layout):一个网站能够兼容到多个终端. 2.响应式布局原理:使用css3中的Media Query(媒介查询)screen的宽度来指定某个宽度区间的网页布局超小屏幕(移动设备) 768px以下小屏设备 768px - 992px 中等屏幕 992px-1200px 宽屏设备 1200px-1920px 3.响应式和移动web的区别开发模式移动web开发+pc开发响应式开发应用场景一般在已经有pc端的网站,只需单独开发移动端针对新建的网站,一套

前端响应式开发

最近在工作中遇到一些让人头疼的问题--多媒体查询,也就是大家所说的响应式布局(多终端适配).在实际的开发过程中,响应式的设计使得多终端的适配变得非常方便,响应式展现的方式,更有一种组装变形金刚的感觉,但也在实际工作中发现了许多问题: 一.开发思维变得复杂在我们开发页面的时候,思维无法专注于单一的PC端.移动端以及Pad端,开发每一个元素与版块的时候,都需要考虑多终端适配:所以建议大家在接到这一类项目的时候,不要急于去开发,先把所有的终端页面设计图全部浏览的看一遍,不单单光是看,看的过程中脑海里

原理+实战快速掌握响应式开发精髓

第1章课程介绍介绍什么是响应式:课程安排:学习建议1-1 导学1-2 课程介绍第2章实战利器逐一讲解响应式web开发的理论,工具和方法.对响应式开发中涉及的各核心技术进行深入的分析.知识点概念/原理与示例结合,让你全面/透彻的理解和掌握响应式开发.2-1 单位像素2-2 媒体查询-视口12-3 媒体查询-视口22-4 媒体查询-媒介查询2-5 设计稿2-6 浮动2-7 flex新科技2-8 栅格系统2-9 分而治之&预处理工具2-10 JavaScript2-11 调试方法第3章项目实

springboot 使用webflux响应式开发教程（二）

本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading-service,groupId=io.spring.workshop.选择Reactive Web , Devtools, Thymeleaf , Reactive Mongo.WEB容器spring-boot-starter-webflux 附带了 spring-boot-starter-reac

原理+实战快速掌握响应式开发

前端全栈架构，组件式开发，响应式开发，全栈工程师架构，用户界面架构，企业级架构项目实战

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS.Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地.用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在.当然了WordPress作为全球用户量最广的开源博客程序,易用性等诸多好处无可厚非,光自己的博客在过去几年就用了很多套模板,也用它做过很