官网 http://wrongwaycn.github.com/bootstrap/docs/index.html 教学下载 http://www.verycd.com/topics/2929861/ 先跟各位说抱歉 我个人并不专精於这类程式 仅出於分享新知的精神 来和各位分享 所以无法解决困惑 但希望有看过此篇 後专精於此的人 来跟大家分享成果 第三方介绍 http://www.infoq.com/cn/news/2012/02/bootstrap-2.0.1-released 原文简体 简介 Bootstrap是着名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架， 集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括 布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅 的前端界面，而且占用资源非常小。 Bootstrap发布时间不长，但是已经非常成熟了，目前最新版本是2.0，包括完整的CSS编 译和非编译版本，样例模板和Javascript插件。 历史 早期Twitter的前端工程师几乎采用了任何自己熟悉的库来应对前端的开发需求，这样的 造成的问题就是维护和扩展非常困难。最终Bootstrap成为应对这些挑战的解决方案，并 开始在Twitter内部迅速成长，被twitter.com广泛采用，形成了稳定版本。随着工程师对 其不断的开发和完善，Bootstrap进步显着，不仅包括基本样式，而且有了更为优雅和持 久的前端设计模式。2011年8月，Twitter将其开源，相关地址： http://twitter.github.com/bootstrap 使用Bootstrap构建优雅的Web Page Bootstrap的核心就是基於Less框架构建的CSS。所以谈到Bootstrap，就必须得说说Less 。 关於Less Less是一个动态CSS语言框架，官方网站是http://lesscss.org/。Less扩展了CSS的动态 特性，相对於传统的CSS，Less提供了更为强大的功能和灵活性。基於Less，我们可以在 编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就 是Less可以让你像编程一样编写CSS，把程序存储在後缀为less的文件中，Less提供了框 架将其编译为标准的css文件。举个简单的例子，如果你想为多个样式设置同一个颜色， 可以这样写： @color: #FFFFFF; h1 { color: @color; } #sub{ color: @color; } 编译後的css就是： h1 { color: #ffffff; } #sub { color: #ffffff; } 以上代码只是Less的最简应用。除了变量，还可以在CSS进行数学运算、传参、文件相互 引用、规则嵌套等等。可以想像，这种编写CSS的方式会为前端开发带来多大的改变。无 论是从灵活性、扩展性和可维护性上，Less都让CSS开发有了大幅提升，动态性增强了。 编译Less的方式很简单，有两种方式，一种是在使用时编译。下载less.js，在样式中引 用： <link rel="stylesheet/less" type="text/css" href="less/mystyles.less"> <script src="js/less.js" type="text/javascript"></script> 还有一种方式是使用前编译好，可以通过服务器端的Node.js进行编译，也可以到这个网 站http://incident57.com/less/下载Less.app，提供了GUI方式编译less文件，目前只支 持Mac OS X。 基於Less编译的Bootstrap 使用了Less的Bootstrap具备如下优点： Bootstrap实现起来依旧很简单，使用也很简单，把Bootstrap.css拖入你的代码即可。编 译less文件可以使用less.js，Less.app或Node.js等多种方案实现。 一旦编译，Bootstrap框架仅包含CSS文件，这意味着没有多余的图片、Flash或 Javascript，只有用於Web应用开发的简洁而强大的CSS样式。 兼容性 目前Bootstrap的最新版本是2.0.1，支持几乎所有的主流浏览器，包括Safari、Chrome， Firefox、IE7.0及以上，最新版本还支持智能手机WebUI。 2.0的新特性 Bootstrap的版本更新很快，2011年11月刚发布了1.4，2012年2月份就再次放出新版本2.0 ，而且有了大幅改进。 2.0版本采用了更灵活也更受欢迎的12栏网格布局，并以此来实现其各种布局框架。增加 了响应式设计，以适应各种移动终端的需求。完善和改进原有样式库，并提供更丰富的新 样式，包括样式繁多的图标（icon），漂亮易用的进度条等。改进和增加了自定义jQuery 插件，完善文档，修复bug，同时还提供了很多基於Bootstrap构建的网站样例。 已经使用1.4的开发者也不用担心，Bootstrap专门提供了从1.4升级到2.0的手工向导可以 参考。 功能集合 Bootstrap2.0把现有框架进行了清晰的功能划分，主要分为框架（Scaffolding），基础 CSS，构件库和jQuery插件库。 Scaffolding主要提供基於网格的各种布局，包括普通网格系统、嵌入式网格，固定布局 、自适应布局，同时可以对网格和布局进行自定义。 Bootstrap2.0提供了响应式设计，可以通过单个文件支持各种手持设备，自适应不同的设 备和屏幕变化。 基础CSS包括各种排版样式（标题、段落、引用块、列表、内联标签等），代码展示方面 提供了基於code标签的内嵌代码，基於pre的块代码和基於Google Prettify的代码样式。 同时提供各种表格、表单、按钮、图标的展示方式。 构件库提供了基於按钮、导航、标签、排版、警告、进度栏、图像网格等控件。 jQuery插件库则提供了十几种插件实现动态效果，例如Modal、Dropdown、Tab、Tooltip 、Popover、Carousel等，开发者可以根据自己的业务需求使用不同的插件实现各种动态 效果。 -- 如果找不到不爱你或爱你的理由 ▁▁ 都可以是爱你或不爱你的理由 ▕Ａ６▏ ▕出品▏ 我想你要的是爱 不是理由 ￣￣ --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 114.245.166.189 ※ 编辑: A6 来自: 114.245.166.189 (08/28 01:48)