Bootstrap

最新推荐文章于 2023-01-29 11:15:22 发布

iteye_9230

最新推荐文章于 2023-01-29 11:15:22 发布

阅读量226

点赞数 1

文章标签： UI XHTML

Bootstrap英文意思是：靴带；
这里介绍Bootstrap 是一种Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

文档章节
（1）脚手架：
全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。
（2）基本CSS样式：
常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。
（3）组件：
常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式，JavaScript插件
（4）JavaScript插件
和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
（5）组件列表
组件库和 JavaScript插件集一同提供了以下组件元素：
按钮组
按钮下拉菜单、用于导航的标签、pill、列表、导航条、 Labels、 Badges、Page headers and hero unit、缩略图、警告对话框、进度条、模态对话框(Modals)、下拉菜单(Dropdowns)、Tooltips、Accordion、Popovers、Carousel、Typeahead
3、基本的HTML模版
现在, 这里展示一个典型的HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
使用了Less的Bootstrap具备如下优点：
1、Bootstrap实现起来依旧很简单，使用也很简单，把Bootstrap.css拖入你的代码即可。编译less文件可以用less.js，Less.app或Node.js等多种方案实现。
2、一旦编译，Bootstrap框架仅包含CSS文件，这意味着没有多余的图片、Flash或Javascript，只有用于Web应用开发的简洁而强大的CSS样式
兼容性:
目前Bootstrap的最新版本是2.0，支持几乎所有的主流浏览器，包括Safari、Chrome，Firefox、IE7.0及以上，最新版本还支持智能手机WebUI。
2.0的新特性:
Bootstrap的版本更新很快，2011年11月刚发布了1.4，2012年2月份就再次放出新版本2.0，而且有了大幅改进。
2.0版本采用了更灵活也更受欢迎的12栏网格布局，并以此来实现其各种布局框架。增加了响应式设计，以适
应各种移动终端的需求。
完善和改进原有样式库，并提供更丰富的新样式，包括样式繁多的图标（icon），漂亮易用的进度条等。
改进和增加了自定义jQuery插件，完善文档，修复bug，同时还提供了很多基于Bootstrap构建的网站样例。
Less CSS 是一个使用广泛的 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js).
个人觉得Bootstrap 的网站简洁大方，很少用到图片，但是效果确实很炫(大家有没有注意到里面的小三角是纯css写的哦)。唯一的缺憾就Bootstrap里面也有很多html5和css3，而ie尤其是ie6对它支持太烂了。
关于less,关于一下嵌套，可以运算相对于css比较强大。除此之外我没有发现less特别强的地方。而且它需要依赖js。鉴于本人也是菜鸟，水平有限，在此仅举一些入门级例子和大家一起相互交流学习，感兴趣的童鞋可以自己研究一下哈。