站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Bootstrap
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
[[Image:bootstrap.JPG|right|250px|bootstrap|link=bootstrap]] [[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/。<br/> 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开发有了大幅提升,动态性增强了。<br/> 编译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构建的网站样例。 ==功能集合== *Bootstrap2.0把现有框架进行了清晰的功能划分,主要分为框架(Scaffolding),基础CSS,构件库和jQuery插件库。 *Scaffolding主要提供基于网格的各种布局,包括普通网格系统、嵌入式网格,固定布局、自适应布局,同时可以对网格和布局进行自定义。 *Bootstrap2.0提供了响应式设计,可以通过单个文件支持各种手持设备,自适应不同的设备和屏幕变化。 *基础CSS包括各种排版样式(标题、段落、引用块、列表、内联标签等),代码展示方面提供了基于code标签的内嵌代码,基于pre的块代码和基于Google Prettify的代码样式。同时提供各种表格、表单、按钮、图标的展示方式。 *构件库提供了基于按钮、导航、标签、排版、警告、进度栏、图像网格等控件。 *jQuery插件库则提供了十几种插件实现动态效果,例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等,开发者可以根据自己的业务需求使用不同的插件实现各种动态效果。 ==相关条目== *[[社交网站]] *[[Twitter]] *[[Facebook]] *[[Youtube]] *[[Myspace]] ==参考来源== *http://twitter.github.com/ [[category:SNS网站]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)