响应式页面开发

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

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

需求分析

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

技术分析

BootStap概述

  • 什么是BootStrap

  • BootStrap有什么作用

  • 什么是响应式

  • BootStrap的中文网

  • 下载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对我们的首页进行优化

技术分析

步骤分析

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

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

  3. 完成没部分的内容显示

代码实现

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












 




												


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

    
								
  1. 第四课 开发uehtml官网响应式静态页面
		
    概况:整站布局.头部菜单响应式设置.最新消息模块变化.内容模块四三二响应式变化. 伪类选择器: E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E      E:nth-la ...
    
		
    2. 
						
  2. 《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维
		
    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
    
		
    3. 
						
  3. BootStrap常用组件及响应式开发
		
    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
    
		
    4. 
						
  4. 移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发
		
    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
    
		
    5. 
						
  5. 借鉴bootstrap的方法，快速实现响应式开发
		
    响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...
    
		
    6. 
						
  6. springboot 使用webflux响应式开发教程（二）
		
    本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
    
		
    7. 
						
  7. 基于screen.width的伪响应式开发
		
    一.站在用户的角度看问题 一个用户,访问一个web页面的真实场景是怎样的呢? 下面是某用户访问某站点的一个场景: 1. 小明打开了自己的电脑,访问了鑫空间-鑫生活: 2. 小明体内洪荒之力无法控制,疯 ...
    
		
    8. 
						
  8. 移动端开发之响应式开发和bootstrap基础
		
    响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...
    
		
    9. 
						
  9. 移动 WEB 开发的布局方式  ----  响应式布局
		
    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C# Bitmap deep copy
			
    今天在研究一个关于 Bitmap deep copy 的问题, 经过一系列的查询,在StackOverFlow上面找到了答案,遂记录下来: public static Bitmap DeepCopyB ...
    
			
    2. 
						
  2. jQuery UI Datepicker
			
    http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...
    
			
    3. 
						
  3. Hide JSP error icons in Eclipse
			
    down voteaccepted Can can either configure this at workspace level or overwrite at web project level ...
    
			
    4. 
						
  4. 提额 APP
			
    提额 APP 开始参与这个APP也是巧合,一个月之前,我还在忙于电信运营商的工作,上级就过来问我在之前公司有没有用过 html css js这些.在维库的时候,可是从前台到后台都是要全包的呀,因为项目 ...
    
			
    5. 
						
  5. 20.SqlServer中if跟循环语句
			
    --if语句declare @i int begin print @i end else --循环语句 declare @i int begin insert into grade(classname ...
    
			
    6. 
						
  6. 与你相遇好幸运，Settings
			
    IDE-Java-Setting && IDE-Nodejs-Setting  Download
    
			
    7. 
						
  7. python常用文件处理函数_1
			
    1.range()函数 函数原型:range(start,end,scan) 参数含义:start:计数从start开始.默认是从0开始的,如range()等价于range(0,5)  end:计数到 ...
    
			
    8. 
						
  8. jsf初学解决faces 中文输入乱码问题
			
    中文乱码,貌似在java里很常见,请看简单代码: 很简单的faces <div class="td-block"> <h:outputLabel class=&q ...
    
			
    9. 
						
  9. MIT 6.828 JOS学习笔记4. Lab 1 Part 2.1: The Boot Loader
			
    Part 2: The Boot Loader 对于PC来说,软盘,硬盘都可以被划分为一个个大小为512字节的区域,叫做扇区.一个扇区是一次磁盘操作的最小粒度.每一次读取或者写入操作都必须是一个或多个 ...
    
			
    10. 
						
  10. BurpSuite设置公共WIFI抓包
			
    1.电脑连接公共WIFI
    
			
    11.