Web前端学习笔记：Bootstrap框架

很久之前就有很多人给我推荐twitter的Bootstrap框架，但是直到前几天我才真正学习了下Bootstrap，的确是相当棒的框架，至少从视觉体验上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap，最后给出一份我整理的Bootstrap的UI的demo，以及我自己使用Bootstrap开发的例子。

　　下面我在这里简单的介绍下Bootstrap框架。

　　Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。

　　一个完整的Bootstrap框架包含如下四个部分：

1. 脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不展开叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1，span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1，span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式，让不太精通css布局也能轻松操作布局。
2. 基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站
3. Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。
4. 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会提供一定的帮助。

评论

1 楼 yuedongzh 2013-06-24  

脚手架的翻译其实不是这里特有的，一般是因为比较少听到中文脚手架这个词，才觉得怪怪的，但其实只要我们经过建筑工地，都能见到脚手架