移动WEB响应式布局

媒体查询

常用媒体特性

• min-width从小到大
• max-width，从大到小
• 可用and连接两种特性，and前后有空格

bootstrap

www.bootcss.com/

使用 BootStrap框架快速布局响应式网页

• 引入bootstrap.css

栅格系统

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
    </div>
</div>

• .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

  • container类自带间距15px;

    • 通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding

• .container-fluid，通栏版心，宽度为 100%

• .row类名和 .col类名定义栅格布局的行和列。

  • row类自带间距-15px

• 栅格化是指将整个网页的宽度分成若干等份

  • BootStrap3默认将网页分成12等份

    - col-md-3：在中等屏幕将内容分为四份（12./3）
  

全局美化

• CSS

• 组件

• JS插件

  • 引入bootstrap样式

  • 引入js文件（置于HTML尾部）

    • jQuery.js

    • BootStrap.min.js

    • 复制相应html并调整

  • 定制