zoukankan      html  css  js  c++  java
  • 响应式网站设计(Responsive Web design)

     

    页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

    官方文档 (https://v3.bootcss.com/)

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    什么是网格(Grid)?

    在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。 简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

    什么是 Bootstrap 网格系统(Grid System)? Bootstrap 官方文档中有关网格系统的描述:

    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。 让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。

    Bootstrap 网格系统(Grid System)的工作原理 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

    行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。 使用行来创建列的水平组。 内容应该放置在列内,且唯有列可以是行的直接子元素。 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

    样例代码

    <div class="container">
    
                <h1>Hello, world!</h1>
    
                <div class="row">
    
                   <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
                      inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                      <h4>第一列</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                   </div>
    
                   <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
                      inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                      <h4>第二列 - 分为四个盒子</h4>
                      <div class="row">
                         <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                            <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                               assumenda minim organic quis.
                            </p>
                         </div>
                         <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                            <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                               ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                         </div>
                      </div>
    
                      <div class="row">
                         <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                            <p>quis nostrud exercitation ullamco laboris nisi ut 
                               aliquip ex ea commodo consequat.
                            </p>
                         </div>   
                         <div class="col-md-6" style="background-color: #B18904;
                            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                               sed do eiusmod tempor incididunt ut labore et dolore magna 
                               aliqua. Ut enim ad minim.</p>
                         </div>
                      </div>
    
                   </div>
    
                </div>
    
             </div>
  • 相关阅读:
    5.19 省选模拟赛 T1 小B的棋盘 双指针 性质
    5.15 省选模拟赛 容斥 生成函数 dp
    5.15 省选模拟赛 T1 点分治 FFT
    5.15 牛客挑战赛40 B 小V的序列 关于随机均摊分析 二进制
    luogu P4929 【模板】舞蹈链 DLX
    CF 878E Numbers on the blackboard 并查集 离线 贪心
    5.10 省选模拟赛 拍卖 博弈 dp
    5.12 省选模拟赛 T2 贪心 dp 搜索 差分
    5.10 省选模拟赛 tree 树形dp 逆元
    luogu P6088 [JSOI2015]字符串树 可持久化trie 线段树合并 树链剖分 trie树
  • 原文地址:https://www.cnblogs.com/weifeng-888/p/10809856.html
Copyright © 2011-2022 走看看