zoukankan      html  css  js  c++  java
  • Bootstrap3 学习(一)

    一、HTML 5 文档类型(Doctype)

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。

    面临一些浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证。

    二、移动设备优先

    移动设备优先是 Bootstrap 3 的最显著的变化。

    在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备。

    Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。

    确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    width 属性控制设备的宽度,设置为 device-width 可以确保它能正确呈现在不同设备上。
    initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
    添加 user-scalable=no 可以禁用其缩放(zooming)功能。maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
    <meta name="viewport" content="width=device-width, 
                                         initial-scale=1.0, 
                                         maximum-scale=1.0, 
                                         user-scalable=no">
    三、响应式图像布局
    <img src="..." class="img-responsive" alt="响应式图像">
    img-responsive class 为图像赋予了 max- 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
    
    

    四、避免跨浏览器的不一致

    Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

    Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

    五、容器(Container)

    <div class="container">
      ...
    </div>
    Bootstrap 3 的 container class 用于包裹页面上的内容。


     
  • 相关阅读:
    有趣的开源家族合照,看看你认识几个?
    fieldset 使用小案例
    java XMPPserver openfire VS tigase
    tomcat 7 jmx配置访问
    JAVA静态域及容器的内存占用探究
    checkStyle字符集不支持解决--Got an exception
    遇到一个很无语的Andorid问题! button 里 android:textColor 属性 设置一个选择器报错!
    android 关于为什么在onCreate里调用view.getChildAt(1).getLeft() 没有值!
    关于Android studio 怎么使用代码混淆的问题!
    sdk manager.exe 闪退 解决办法!
  • 原文地址:https://www.cnblogs.com/fengsantianya/p/7660880.html
Copyright © 2011-2022 走看看