bootstrap响应式布局

bootstrap

屏幕尺寸(宽度)

• 超小屏幕，宽度 < 768， 如：手机
• 小型屏幕，768 <= 宽度 < 992，如：平板
• 中等屏幕，992 <= 宽度 < 1200，如：电脑
• 超大屏幕，宽度 >= 1200，如：电视

响应式布局

• 根据不同的客户端显示不同的效果，就称为响应式布局。
• 由于移动设备访问网站的比例大幅提升(已经成为主流)，因此我们设计网站时需要移动设备有限考虑。

解决方案

• 根据不同的客户端，跳转到不同的网站
  • 适合于几乎无法兼容的大型网站，如：京东
  • 客户端类型判断：window.navigator[‘userAgent’]
• 使用媒体查询
  • 说明：适合于不太复杂的可以兼容的网站(一般都不太大)
  • 语法：
    @media 媒体查询标志
    [only] screen [只]支持屏幕
    and 并且的意思
    min-width 最小宽度
    max-width 最大宽度
    min-height 最小高度(了解)
    max-height 最大高度(了解)
  • 使用方式1：使用@media指定
    @media screen and (max-width:768px) {
    div {
    width: 100%;
    height: 200px;
    background: green;
    }
    }
  • 使用方式2：使用@import导入
    @import url(02-chaoxiao.css) screen and (max-width:768px);
  • 使用方式3：使用 标签，然后指定media属性
    

viewport(了解)

• 说明：viewport 是用户网页的可视区域，翻译为中文可以叫做\"视区\"。
• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放，设为no禁止缩放
• 示例：

bootstrap

• 简介：
  • Bootstrap 是基于HTML、CSS、 开发的简洁、直观、强悍的前端开发框架。
  • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  • 中文官网：http://www.bootcss.com/
  • 下载：用于生产环境的版本
  • 使用：拷贝基础模板，记得修改依赖文件的路径。
• 语法：
  • 容器：所有的元素都要放在容器中，然后才能使用bootstrap提供的样式
    • containre：固定尺寸(有留白)
    • container-fluid：流式布局(填满)
  • 栅格系统：将给的的区域划分为12等分，通过份数来设置宽度
    • 行：row、
    • 份数：col-xs-份数、col-sm-份数、col-md-份数、col-lg-份数
    • 列偏移：col-xs-offset-份数、col-sm-offset-份数、col-md-offset-份数、col-lg-offset-份数
    • 列排序：col-md-push-份数（向右）、col-md-pull-份数（向左）
    • 栅格系统可以嵌套
• 使用：重点是复制粘贴
• 全局CSS样式
• 组件使用
• 可视化布局工具：LayoutIt