07-响应式布局BootStrap

 

响应式布局

  • 全天目标

    • 了解响应式网页特点,知道响应式布局的核心技术:媒体查询的用法

    • 了解BootStrap框架使用方法和手册用法,能够使用BootStrap框架开发响应式网页

  • 什么是响应式布局?

    • 含义

      • 响应式布局:用来在网页中实现摆放盒子的一种新方式(流式布局+弹性布局); rem+vw+vh:用来实现页面中像素适配;

    • 特点

      • 根据设备视口的宽度大小不一样,进行布局的差异化

      • 一套代码能够兼容(适配)不同的屏幕设备

         

  • 如何实现响应式布局?

媒体查询

  • 目标

    • 能够使用媒体查询写法,检测不同的响应断点,设置差异化CSS样式

    • 根据设备宽度的变化,设置差异化样式(CSS)

    • 在某一个区间

基本用法

  • 语法

    @ media only screen and (width:320px){

    CSS代码
    }

    07-响应式布局BootStrap

  • 注意

    • 1、语法单词之间必须使用空格隔开

    • 2、only,screen,and这些是可以省略的

    • 媒体查询的代码不会立即执行,只有当前视口满足对应的宽度值时,才会执行媒体查询中的代码

  • 案例

07-响应式布局BootStrap

 

 

设备划分

max-width / min-width

  • min-width

07-响应式布局BootStrap

 

  • max-width

07-响应式布局BootStrap

 

  • 示例

07-响应式布局BootStrap

 

 

书写顺序

注意规避层叠性

  • min-width:从小到大

  • max-width:从大到小

     

其他写法

  • 完整写法(了解)

07-响应式布局BootStrap

  • 关键词

    • and

    • only

    • not

 

  • 媒体类型(一般不写)

    • screen(屏幕设备)

    • print(打印预览模式

    • speech(阅读器)

    • all(不区分类型)

 

  • 媒体特征

    • width、heigh(视口宽高)

    • max-width、max-height(视口最大宽高)

    • min-width、min-height(视口最小宽高)

    • orientation(屏幕方向)

      • landscape横屏

      • portrait竖屏

 

  • link写法

    07-响应式布局BootStrap

07-响应式布局BootStrap

 

  • 案例:隐藏效果

07-响应式布局BootStrap

 

 

第三方框架系统

  • 含义

    人封装好的代码(响应式功能效果),直接调用代码

  • 目标

    • 掌握BootStrap框架基本用法

    • 掌握BootStrap框架手册用法

     

BootStrap介绍

  • UI框架

  • 封装了大量的HTML、CSS、JavaScript,只需要按照框架要求书写代码,即可快速完成对应的效果

  • 中文网站 https://www.bootcss.com/

     

下载

  • 生产环境

    • 压缩的代码

    • 开发可以直接使用

  • less源码

    • 基于less的源码包

    • 可学习使用

       

使用步骤

  • 1、引入框架文件(CSS文件)

    07-响应式布局BootStrap

  • 2、按照文件夹中提供的类进行样式的设置…

 

 

框架中可以使用哪些?

栅格系统(不难)

  • 总结

    • 1、栅格系统是框架中的一部分,如果要使用栅格系统,必须先引入框架对应的css文件

    • 2、栅格系统将盒子最多分为12列

 

使用步骤

  • 1、引入框架对应的CSS文件

  • 2、盒子需要添加类名:container(有固定宽度),或者container-fluid(100%宽度)类名

  • 3、使用栅格系统,必须记住预定义类

    • 类前缀

      • .col-xs-值

        • 表示超小屏幕(手机)

      • .col-sm-值

        • 表示平板设备

      • .col-md-值

        • 表示普通桌面显示器

      • .col-lg-值

        • 表示大桌面显示器

    • 注意

      • 1、值的取值范围为:1~12

      • 2、凡是设置了预定义类,当前元素都设置了浮动。

    • 案例

      07-响应式布局BootStrap

       

      07-响应式布局BootStrap

     

  • 4、响应式工具类

    • 类前缀

      • .hidden-xs

        • 表示手机端影藏

      • .hidden-sm

        • 表示在ipad端影藏

      • .hidden-md

        • 表示在普通桌面隐藏

      • .hidden-lg

        • 表示大桌面显示器隐藏

    • 案例

      07-响应式布局BootStrap

       

  • 排版

    07-响应式布局BootStrap

 

  • 表格

  • 表单

  • 辅助类

  • 组件(字体图标)

 

 

使用

全局CSS样式

栅格系统第三方系统bootstrap

  • 介绍:作用:响应式布局

  • 原理:网页等分成12等分,每个元素占对应的份数

  • 使用

    • 大屏

      • 响应断点 >= 1200px

      • 类前缀 ol-lg-*

      • 版心 1170px

    • 中屏

      • 响应断点 >= 992px

      • 类前缀 col-md-*

      • 版心 970px

    • 小屏

      • 响应断点 >= 768

      • 类前缀 col-sm-*

      • 版心 750px

    • 超小屏

      • 响应断点 < 768px

      • 类前缀 col-xs-*

      • 版心 100%

         

标签样式

  • 表格

  • 按钮

  • .....

 

组件

  • 作用:封装常见功能的HTML+CSS

  • 分类

    • 布局组件

        1. 引入样式表

        1. 复制粘贴结构,修改内容

    • 字体图标

        1. 引入样式表

        1. 空标签粘贴类名

  • 插件

    • 介绍

      • 封装了常见功能的交互效果,包含HTML、CSS、JavaScript

    • 使用步骤

        1. 引入样式表

        1. 引入js

        • 2.1 jQuery.js

        • 2.2 bootstrap.js

        1. 复制结构,修改内容

  • 定制

    • 作用:针对项目定义bootstrap框架

    • 步骤

        1. 导航菜单:定制

        1. 输入对应的Less变量值

        1. 编译并下载,使用新框架

        2.  

上一篇:07 HBase操作


下一篇:Upload-labs Pass-07