Bootstrap框架
2013-06-24 10:11
169 查看
Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap,最后给出一份我整理的Bootstrap的UI的demo,以及我自己使用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不是特别熟悉的人使用起来都不太习惯,因此我将这些例子进行了整合,作为单独的例子工程,这个工程非常全面,我在网上找过,目前还没有比我整理的更详尽的例子,大伙下载下来按照我的工程目录结构就可以进行开发了。此外,我做了一个简单的demo,也分享给大家,demo的截图是:
下载链接:
我整理的实例:
http://files.cnblogs.com/sharpxiajun/bootstrap-1.0.zip
我做的demo:
http://files.cnblogs.com/sharpxiajun/upms-bootstrap-v0.2.zip
相信这些例子对大家学习bootstrap会提供一定的帮助。
相关文章推荐
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- 旺财速啃H5框架之Bootstrap(四)
- Bootstrap框架中的插件.container以及网格系统
- Bootstrap前端开发框架
- 用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面
- 开源:ASP.NET MVC+EF6+Bootstrap开发框架
- Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
- Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景。 只是Bootstrap的内容较多,新手
- Bootstrap:简洁、直观、强悍的前端开发框架
- Java教程]JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Yii2框架bootstrap样式理解
- Bootstrap 前端框架制作响应式网站
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 【新技术,学习、商业均可】HTML5 全新高大尚后台 bootstrap springmvc mybatis java企业级通框架源码入门
- bootstrap框架
- JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Bootstrap框架实现广告轮播效果
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用:Task List
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用
- 前段框架Bootstrap介绍和安装