zoukankan      html  css  js  c++  java
  • bootstrap响应式布局原理

    百分比布局+媒体查询

    首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了

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

    栅格系统的工作原理:

    1.行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment
    )和内补(padding)。
    2.通过行(row)在水平方向创建一组列(column)。
    3.自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。
    4.类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
    5.通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。
    6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
    7.如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。
    8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。
    如下图所示为栅格系统在多种屏幕上的应用说明。 

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

    在head中引入meta标签,添加viewpirt属性,content中宽度等于设备宽度, initial-scale:页面首次被显示可见区域的缩放级别,取值1则页面按实际尺寸显示,无任何缩放;maximum-scale:允许用户缩放到的最小比例;user-scalable:用户是否可以手动缩放。

    不积跬步无以至千里
  • 相关阅读:
    DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点
    Vue入门实战: 小白总结
    localStorage如何设置过期时间?
    北京游记-2019年小总结
    寒假宅家微记录
    SpringBoot 使用 swagger
    校园旧书交易交换平台
    Html 文件内容展示 图片展示
    Python 简易Cmd控制
    Python 多线程实现循环打印 abc
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12006079.html
Copyright © 2011-2022 走看看