bootstrap框架有还有基于移动端考虑的轻量级仿jquery框架zepto,还有jquery mobile,还有适合写后端或服务端的node,等等。
但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用。
不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
包含内容:
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
下面我在这里简单的介绍下Bootstrap框架。Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀。
一个完整的Bootstrap框架包含如下四个部分:
脚手架(不知道官网为啥这么翻译):用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术,比如重置背景这样的操作,这些比较简单我就不展开叙述了,脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列,栅格系统分为两种类型,一种是默认栅格系统,这时候栅格系统是按940px像素进行等分,我们可以使用span1,span4这样的class属性操作默认栅格布局,另一种是流式栅格系统,这个时候分列的宽度就不是固定,而是根据你可视页面进行12等分,同样可以使用span1,span4操作流式栅格。这个系统非常之好,做css最难的就是div布局,使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了,布局也分为固定和流式,让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式,例如:按钮、表单和文字等等。大部分做网站的人都不是美工出身,做出赏心悦目的网页是件很困难的事情,css提供的样式很专业很精美,能让我们轻松开发出一套精美的网站
Css组件:Bootstrap还提供一些常用的css组件,同样很优秀很棒。
Javascript插件:Bootstrap是个开放的系统,我们可以随意扩展Bootstrap,特别是javascript的框架,这样Bootstrap就会更加专业。
Bootstrap是个操作性质的框架,没必要做深入分析,最关键是有没有好的使用实例,我下载Bootstrap发现,下载包里的example不是太强大,例子都在它的官网上,很多对css和javascript不是特别熟悉的人使用起来都不太习惯,因此我将这些例子进行了整合,作为单独的例子工程,这个工程非常全面,我在网上找过,目前还没有比我整理的更详尽的例子,大伙下载下来按照我的工程目录结构就可以进行开发了。
1、bootstrap: http://www.bootcss.com/ 响应式布局jquery weui https://jqweui.cn/components#form
jquery weui开发经验总结
2、css3 动画
http://www.haorooms.com/uploads/example/Animatecss/
更多框架
http://nec.netease.com/framework
3、icon字体
http://fontawesome.io/
http://www.iconfont.cn/
4、css的 SASS 和Less框架
vonic 框架
https://wangdahoo.github.io/vonic/docs/#/