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】。

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

  • 相关阅读:
    cdoj 841 休生伤杜景死惊开 逆序数/树状数组
    Codeforces Round #296 (Div. 1) B. Clique Problem 贪心
    【NOIP2014】联合权值 树上dp
    【NOIP2014】生活大爆炸版石头剪刀布
    BZOJ 2756: [SCOI2012]奇怪的游戏 网络流/二分
    BZOJ 1012: [JSOI2008]最大数maxnumber 单调队列/线段树/树状数组/乱搞
    BZOJ 1036: [ZJOI2008]树的统计Count 树链剖分
    BZOJ 1854: [Scoi2010]游戏 并查集
    BZOJ 1008 [HNOI2008]越狱 排列组合
    BZOJ 1003 物流运输trans dijstra+dp
  • 原文地址:https://www.cnblogs.com/linjiqin/p/3557930.html
Copyright © 2011-2022 走看看