zoukankan      html  css  js  c++  java
  • Bootstrap

    Bootstrap目前已经已经出了第四版本,移动设备优先是第三版有最显著的体现,

    Bootstrap3是一开始就对移动设备友好支持,然后才是对桌面设备

    1.移动设备优先

    为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

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

    width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

    initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

    在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

    通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

    viewport meta 标签完整代码:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    2.图片式响应

    <img src="..." class="img-responsive" alt="响应式图像">

    3.栅格(网格)系统

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

    Bootstrap 官方文档中有关网格系统的描述:

    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

    移动设备优先策略

    • 内容
      • 决定什么是最重要的。
    • 布局
      • 优先设计更小的宽度。
      • 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。
    • 渐进增强
      • 随着屏幕大小的增加而添加元素。

    响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    1 1 1 1 1 1 1 1 1 1 1 1
    4 4 4
    4 8
    6 6
    12

    例子:

               <div class="row">
                    <div class="col-sm-4">
                        <h3>第一列</h3>
                        <p>学的不仅是技术,更是梦想!</p>
                        <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
                    </div>
                    <div class="col-sm-4">
                        <h3>第二列</h3>
                        <p>学的不仅是技术,更是梦想!</p>
                        <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
                    </div>
                    <div class="col-sm-4">
                        <h3>第三列</h3>
                        <p>学的不仅是技术,更是梦想!</p>
                        <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
                    </div>
                </div>

     

  • 相关阅读:
    lnmp+memcache+tomcat
    redis的主从搭建
    curl只取状态码
    Tomcat的优化
    pip9 安装 centos6.8
    文件的下载
    保存图片到图库更新图库
    上传图片总结
    Android 大图片预览ViewPager
    Android 软件盘 Editext 问题
  • 原文地址:https://www.cnblogs.com/susutong/p/9969616.html
Copyright © 2011-2022 走看看