Bootstrap框架的学习(一)

时间:2022-05-16 04:10:12

一、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需要手动去写分页的样式以及查询功能。