5.BootStrap
BootStrap
什么是BootStrap?
- Bootstrap,基于 HTML、CSS、JAVASCRIPT 的前端框架(半成品)。其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现。
- Bootstrap在jQuery的基础工作,可以理解Bootstrap就是jQuery的一个插件。
- Bootstrap 使得 Web 开发更加快捷,代码优雅,美观大方。
- Bootstrap 基础入门使用的都是自带CSS样式,高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发,JavaEE课程中学习时“基础入门”。
- 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来
- 中文官网:http://www.bootcss.com/
什么是响应式布局
- 响应式布局:一个网站能够兼容多个终端(手机、iPad等),而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的。
- 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
- Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询)
环境搭建
- 下载:
- 目录结构:
- css:css样式
- fonts:字体库
- js:js文件
- 引入:
1
2
3
4<!-- 响应式开发必须使用,且必须在<head>前三行 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1" />
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LXY's blog!