欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

bootstrap初学之(1)概念

来源: 开发者 投稿于  被查看 30602 次 评论:57

bootstrap初学之(1)概念


之前看网站学过一遍bootstrap 但是看过手写记过笔记又忘了,所以决定换个方式 每一点不了解的都要查清楚,通过敲明白 理解!!!
理解参考 博客http://blog.csdn.net/lxq1993/article/details/51757455
####首先bootstrap 是什么?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
首先,我们要知道为什么使用框架的原理。
CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版,网络布局,表单样式,通用规则等代码块。使用CSS框架,可以简化工作,提高工作效率。
然后,我们为什么要使用Bootstrap框架,而不使用其他CSS框架?
原因大概如下:
随着H5,CSS3的快速火起来,用户体验尤为重要,移动设备用户的庞大,不容小视,而恰恰,Bootstrap就是为移动设备而开发的框架。他虽然是以移动设备优先,倾向于Mobile,但不是移动设备框架。
它由规范的CSS,JavaScript插件构成,其最大的优势是响应式布局,CSS媒体查询(Media Query)的功劳,使得开发者可以方便的让网页无论在台式机,手机上都获得最佳的体验。
1.抽象出常用的css样式,高再可用性,高移植性
2.有固有的定义,详细的文档及开发特点
3.高兼容性,可以兼容流行的浏览器
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

Bootstrap框架可以分为三类:
第一:预处理脚本:
Bootstrap的源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你可以采用预编译的CSS文件快速开发,也可以从源码定制自己需要的样式。例如。如果你页面上有很多同样的效果。只需要写一个效果类。然后让用到的地方去继承他。就不需要再写了。
第二:一个框架,多种设备
你的网站和应用能在Bootstrap的帮助下通过同一个代码快速,有效设配手机,平板、PC设备,这都是CSS媒体查询的功劳。
第三:特效齐全
Bootstrap提供了全面、美观的文档、可以找到关于HTML元素,HTML和CSS组件、jQuery插件方面的所有详细文档。
Bootstrap组件: Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。比如:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
JavaScript插件Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括:模式对话框、标签页、滚动条、弹出框等。 还有更重要的一点是,Bootstrap是完全开源的。它的代码托管,开发,维护都依赖GITHub平台。
其次:
我们看下使用Bootstrap的利弊:
优点:
a) 提高开发效率。
b) 规范名称定义,便于维护。
c) 规范项目开发流程 d)css代码更清晰、简单。html代码更合理。
e) 大规模项目中可以减少用户下载
也就是看bootstrap大纲 四步(1)bootstrap css (2)bootstrap 组件(3)javascript插件 (4)定制

用户评论