前端学习随笔 -- 前端框架

前端框架



jQuery扩展

    -- 扩展和自执行函数

    -- 登陆、注册、Form验证

    -- parsleyjs        

        http://parsleyjs.org/

    -- jQuery Validate  

        http://jqueryvalidation.org/


插件

    -- bxslider

        http://bxslider.com/

    -- Bootstrap

        http://www.bootcss.com/

    -- Font Awesome

        http://fontawesome.io/

    -- jQuery EasyUI

        http://www.jeasyui.com/download/index.php





BootStrap


一、介绍

Bootstrap 是一个用于构建响应式网站的前端框架。无论你想构建应用 程序、博客还是 CMS 网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建 稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系 统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。 十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。


响应式布局:根据用户设备的不同,进行相应的布局


Bootstrap 是 Mark Otto 和 Jacob Thornton 共同开发的一个开源框架。 最初发布 Bootstrap 的时候,他们两位都在 Twitter 工作。当时,他 们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布 Bootstrap 的那篇博客中,Mark Otto 这样介绍他们的新项目:


Twitter诞生初期,为了完成前端开发任务,工程师们几乎尝试 了自己熟悉的所有库。应用之间的不一致性导致它们难以扩 展和维护。Bootstrap最初就是这个问题的一个解决方案,而且 在Twitter内部第一次Hackweek上得到了认可。Hackweek结束 后,我们手头上的项目已经相当稳定,可以在公司内部部署使 用了。

    --Mark Otto 

      https://dev.twitter.com


Bootstrap 是 2011 年 8 月发布的,发布之后就迅速走红。而且,它也 从最初 CSS 驱动的项目,发展到内置了很多 JavaScript 插件和图标, 并且涵盖了表单和按钮元素。Bootstrap 本身支持响应式 Web 设计, 而且拥有一个非常稳健的 12 列、940 像素宽的网格布局系统。值得一 提的是,Bootstrap 网站(http://getbootstrap.com)上还提供了一个构 建工具,让你根据自己的需求选择 CSS 和 JavaScript 功能。所有这一 切让前端 Web 开发有了前瞻性的设计和开发基础,开发效率倍增。上 手使用 Bootstrap 非常简单,跟在网站中整合 CSS 和 JavaScript 没有 什么区别。




二、文件结构


bootstrap2

    ├── css

    │   ├── bootstrap-responsive.css

    │   ├── bootstrap-responsive.min.css

    │   ├── bootstrap.css

    │   └── bootstrap.min.css

    ├── img

    │   ├── glyphicons-halflings-white.png

    │   └── glyphicons-halflings.png

    └── js

        ├── bootstrap.js

        └── bootstrap.min.js


bootstrap3

    ├── css

    │   ├── bootstrap-theme.css

    │   ├── bootstrap-theme.css.map

    │   ├── bootstrap-theme.min.css

    │   ├── bootstrap.css

    │   ├── bootstrap.css.map

    │   └── bootstrap.min.css

    ├── fonts

    │   ├── glyphicons-halflings-regular.eot

    │   ├── glyphicons-halflings-regular.svg

    │   ├── glyphicons-halflings-regular.ttf

    │   ├── glyphicons-halflings-regular.woff

    │   └── glyphicons-halflings-regular.woff2

    └── js

        ├── bootstrap.js

        ├── bootstrap.min.js

        └── npm.js


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章