zoukankan      html  css  js  c++  java

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

    响应式页面开发

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

    

    

    

    

    

     
    

    

    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  【转】QT中添加的资源文件qrc时的路径问题小结
                    
    【转】Qt 资源图片删除后，错误 needed by `debug/qrc_image.cpp'. Stop. 的终极解决办法
                    
    普通类型与自定义类型之间的转化
                    
    快速实现python c扩展模块
                    
    关于解决python线上问题的几种有效技术
                    
    OpenGL超级宝典笔记----渲染管线
                    
    读python源码--对象模型
                    
    python与c互相调用
                    
    OpenGL超级宝典笔记----框架搭建
                    
    python笔记（持续更新）
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/GuoXueLi/p/6158750.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看