首页 > 代码库 > Bootstrap框架的学习(一)
Bootstrap框架的学习(一)
一、Bootstrap框架介绍
Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架。
二、简单介绍
Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果。
三、优点
完美的支持H5和CSS3,以及支持移动端浏览器
四、内容
可以参考一下官方文档http://v3.bootcss.com/
(一)脚手架:用于重置背景,链接的样式等,包含两个简单的布局结构。这两个布局系统:默认栅格系统和流式栅格系统。Bootstrap样式使用了lesscss技术,比如:重置背景。我觉得最精彩的部分是栅格系统。
(1)默认栅格系统:是按照固定的宽度等分,按940px等分。
(2)流式栅格系统:是按照视图页面进行等分,按12等分。
(二)基本CSS样式
Bootstrap给出了常用的HTML元素样式,CSS提供样式很专业很美
(三)CSS组件
Bootstrap还提供一些常用的CSS组件
(四)Js插件
随意扩展Bootstrap,特别是js框架
五、版本
使用较广的是2和3版
2015年9月,发布了Bootstrap 4alpha版本
六、css组件
下拉菜单,按钮组,按钮下拉菜单,导航,导航条
七、js插件
自带13个jq插件,包括:对话框,标签页,流动条,弹出框
八、Bootstrap与JqueryMobile比较
Bootstrap是跨屏幕分辨率自动适应
JqueryMobile是专门针对移动端
九、Bootstrap与Jquery EasyUI比较
Bootstrap封装性更胜一筹。Bootstrap的表格仅仅使用一个属性可以控制分页,无论是服务器的分页还是客户端分页都可以控制,而且自带查询框。
EasyUI需要手动去写分页的样式以及查询功能。
Bootstrap框架的学习(一)