zoukankan      html  css  js  c++  java
  • Bootstrap 概览

    目录
    1、移动设备
    2、响应式图片
    3、Normalize
    4、Containers

    1、移动设备
    在Bootstrap 3中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是一个单一的文件。

    为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签。

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

    在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

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

    2、响应式图片
    通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max- 100%; 和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸

    <img src="<%=path %>/demo/niusb/sprite.png" class="img-responsive" />

    3、Normalize
    Normalize.css的目的是让HTML元素在不同浏览器里的展现形式一致。

    4、Containers
    用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width,用以匹配栅格系统。
    注意,由于设置了padding 和 固定宽度,.container不能嵌套

    <div class="container">
    ...
    </div>

    如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】。
    如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】。
    如果,您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是【Ruthless】。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    U盘PE系统下安装WIN2003和WINXP的方法(非GHOST版)
    自己做U盘急救杀毒
    Windows Server 2003 SP2 企业版 ISO 下载 629M
    解决开机关机慢问题
    一般处理程序
    [转]iframe自适应高度详解(希望对大家有用)非常经典,非同凡响
    ie6下position fixed的失效bug
    php文件上传MAX_FILE_SIZE不起作用的问题
    IE6测试网页显示空白页面
    自己写的面向过程php验证码
  • 原文地址:https://www.cnblogs.com/linjiqin/p/3557930.html
Copyright © 2011-2022 走看看