BootStrap入门教程精编.pdf

本作品由VentLam 创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。 BootStrap 入门教程 (一) 2011年，twitter 的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建 了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap 。Bootstrap 由MARK OTTO 和Jacob Thornton 所 设计和建立，在github 上开源之后，迅速成为该站上最多人watchfork 的项目。大量工程师踊跃为该项目贡 献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基 于Bootstrap 建设的网站：界面清新、简洁;要素排版利落大方。如下图所示： / http://www.fleetio.co m/ GitHub 上这样介绍 bootstrap ：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript 工具 集。基于 html5 、css3 的bootstrap ，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12 列格网，样式向导文档，自定义JQuery 插件，完整的类库，基于Less 等。本系列教程遵循官方文档结构来介 绍bootstrap ，包括手脚架（Scaffolding),基础CSS,组件,javascript 插件，使用LESS 与自定义.本文主要介绍Boo tstrap 的基础布局--Scaffolding. Bootstrap 建立了一个响应式的12列格网布局系统，它引入了fixed 和 fluid-with 两种布局方式。我们从 全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System), 自定义(Customing),布局(Layouts), 响应式设计(Responsive Design)这六五个方面深入讲解Boostrap 的scaffolding.  全局样式(Global Style).Bootstrap 要求html5 的文件类型，所以必须在每个使用bootstrap 页面的开头 都引用: !DOCTYPE html htmllang=en ... /html  同时，它通过Bootstrap.less 文件来设置全局的排版和连接显示风格.其中去掉了Body 的margin ，使用 @baseFontFamily,@baseFontSize,@linkColor 等变量来控制基本排版。  格网系统(Grid System).默认的Bootstrap 格网系统提供一个宽达940像素的,12列的格网。这意味着你 页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap 能够使得你的网页可以更好地适应多种终 端设备 ( 平板电脑，智能手机等 ) 。默认格网系统直观概念如图 1 - 1 所示： 图1-1 默认格网系统(Default G rid System) 以下简单的代 码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div. divclass=row divclass=span4.../div divclass=span8.../div /div 2.2 偏移列. 有时候，页面要素前面需要一些空白，bootstrap 提供了偏移列来实现，如图1-2所示：