我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

赵强-20221027-响应式布局

[复制链接]
BlueFlame 发表于 2022-10-28 00:20:59 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日所学内容:
Web移动端响应式开发
      响应式开发原理
        就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置,从而适配不同设备
        设备的划分情况:
           小于768px的为超小屏幕(手机)
           768px~992px之间为小屏幕设备(平板)
           992px~1200px之间为中等屏幕(桌面显示器)
           大于1200px以上就是超大屏幕(大桌面显示器)
       版心尺寸划分
           小于768px的为超小屏幕(手机)
           768px~992px之间为小屏幕设备(平板)
           992px~1200px之间为中等屏幕(桌面显示器)
           大于1200px以上就是超大屏幕(大桌面显示器)
        BootStrap前端框架
        BootStrap简介
            标准化的html+css编译规范
            提供了一套简洁、直观、强大的组件
            有自己生态圈,会不断的更新迭代
            让开发会更简单,提供我们的开发效率
        版本介绍
        2.x.x:停止维护,兼容性好,但是代码不够简洁,欧纳古能不完善
        3.x.x:目前使用的最多,稳定,但是它放弃了IE6,IE7.对IE8支持,但是界面效果不好,偏向于响应式开发布局,移动设备有限的Web项目
        4.x.x:最新版,目前使用的用户较少
        BootStrap的基本使用
        BootStrap的栅格系统
        bootstrap的布局容器
        BootStrap的栅格系统使用
            随着屏幕或者视口尺寸的增加,系统会自动分配最多12列的栅格
            栅格系统通过一系列的行和列的组合开创建页面布局,我们内容就可以写在这写创建好的布局中
             1.按照不用的屏幕划分为1~12等份,如果想要去掉padding,可以给父容器加row即可
             2.xs-extra-small超小;sm-samall小屏幕;md-dedia中等;
            它为页面内用和栅格系统包裹了一个.container容器,或者.container-fluid
            


回复

使用道具 举报

关注0

粉丝0

帖子47

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026