Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,.docVIP

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它是一个HTML/CSS框架 Bootstrap提供了优雅的HTML和CSS规范，即动态CSS语言Less 特点： Bootstrap是基于jQuery框架开发的，并兼容大部分jQuery插件 组成： Bootstrap中包含了丰富的web组件： 下拉菜单 按钮组 按钮下拉菜单 导航 导航条 面包屑 分页 排版 缩略图 警告对话框 进度条 媒体对象 等等 Javascript插件 Bootstrap自带了13个jQuery插件， 其中包括： 模式对话框 标签页 滚动条 弹出框 等等 Less Less是一个CSS预处理器，让CSS具有动态性 另一方面，bootstrap是一个快速开发webapp和站点的工具包，这样可以在CSS中使用bootstrap的Less变量、mixed(混合)、nesting(嵌套)等 bootstrap使用: 1. 下载bootstrap:  HYPERLINK /2.3.2/ /2.3.2/ 2. 在html文档中加载bootstrap相关的文件 meta content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no name=viewport id=viewport / link rel=stylesheet type=text/css href=bootstrap.min.css/ script type=text/javascript src=jquery.min.js/script script type=text/javascript src=bootstrap.min.js/script !--[if lt IE 9] script src=/svn/trunk/html5.js/script ![endif]-- 简单使用 bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局 布局容器：bootstrap需要为栅格内容和栅格系统包裹一个container 容器， .container类用于固定宽度并支持响应式布局 .container-fluid类用于100%宽度布局，占据全部视口（viewport）的容器 Class=”row”表示一行 Class=”col-md-n”表示占n列 移动设备和桌面屏幕 如果不希望在小屏幕设备上，所有列都堆叠在一起，就使用针对超小屏幕和中等屏幕设备所定义的类：即.col-xs-n 和 .col-md-n .col-sm-n Span=“”表示占用几个网格 最新版本的bootstrap有问题 嵌套布局和流动布局 div class=span4 h2 class=header区块3/h2 pBootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可以借助Node.js或者Rhino在服务端运行。/p div class=row div class=span6Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。/div div class=span6LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可以借助Node.js或者Rhino在服务端运行。/div /div /div 流动布局 需要将container、row类分别修改为container-fluid 和 row-fluid 响应式设计： 根据移动设备的分辨率显示不同的样式 媒体查询： @media(min-width:767px) and (max-width:979px){body{background:#f00}} bootstrap-responsive.css已经为我们常用的上网设备做了相应的响应式设计 大尺寸的上网设备（像素在1200px以上），网格的宽度由60px变为70px，网格和网格之间的距离由20px变为30px 在bootstrap-responsive.css中，增加了如下类： .vis