加载中…
个人资料
大千世界
大千世界
  • 博客等级:
  • 博客积分:0
  • 博客访问:54,118
  • 关注人气:10
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

【HTML5基础NO.10】响应式布局、Bootstrap

(2017-12-06 16:57:27)
标签:

html5

css

bootstrap

分类: html5
一、介绍
为了实现网站兼容多种终端,目的是为用户提供更加舒适的界面和更好的用户体验。
优点:
1) 面对不同分辨率设备灵活性强
2) 能够快捷解决多设备显示适应问题

缺点:
1)兼容各种设备工作量大,效率低下
2)代码累赘,会出现隐藏无用的元素,加载时间加长

响应式布局网站实例

二、基本实现
1.CSS中的Media Query(媒介查询):
设备宽高:device-width,device-height
渲染窗口的宽和高:width,height
设备的手持方向:orientation
设备的分辨率:resolution
2.使用方法:
外联
内嵌样式

参考:

三、Bootstrap开源框架
优点:简洁、直观、强悍的前端开发框架,让web开发更迅速简单,具有快速、简单灵活的栅格系统,小而强大、响应式布局、跨平台等。

四、Bootstrap CSS、组件与JavaScript插件


五、响应式布局——使用Bootstrap



0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有