本作品由 VentLam 创作,采用知识共享署名- 非商业性使用- 相同方式共享 中国大陆许可协议进行许可。 BootStrap 入门教程(一) 2011 年, twitter 的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集-- BootStrap 。 Bootstrap 由 MARK OTTO 和 Jacob Thornton 所设计和建立,在 github 上开源之后,迅速成为该站上最多人 watch & fork 的项目。大量工程师踊跃为该项目贡献代码, 社区惊人地活跃, 代码版本进化非常快速, 官方文档质量极其高( 可以说是优雅), 同时涌现了许多基于 Bootstrap 建设的网站:界面清新、简洁; 要素排版利落大方。如下图所示: https:// / / 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 > <html lang ="en"> ... </ html >?同时,它通过 文件来设置全局的排版和连接显示风格. 其中去掉了 Body 的 margin ,使用***@baseFontFamily,***@baseFontSize,***@linkColor 等变量来控制基本排版。?格网系统(Grid System) . 默认的 Bootstrap 格网系统提供一个宽达 940 像素的,12 列的格网。这意味着你页面默认宽度是 940px, 最小的单元要素宽度是 940/ p 能够使得你的网页可以更好地适应多种终端设备( 平板电脑, 智能手机等) 。默认格网系统直观概念如图 1 - 1 所示: 图 1-1 默认格网系统(Default G rid System) 以下简单的代码则是实现图 1-1 中,第三列的宽度为 4 和宽度为 8 的两个 div. <div class ="row"> <div class ="span4"> ... </ div > <div class ="span8"> ... </ div > </ div > 偏移列. 有时候,页面要素前面需要一些空白, bootstrap 提供了偏移列来实现,如图 1-2 所示: 图 1-2 偏移列(Offset co lumns) 以下代码实现了是实现图 1-2 中,第一列的宽度为 4 和偏移度为 4 宽度为 4 的两个 div. <div class ="row"> <div class ="span4"> ... </ div > <div class ="span4 offset4"> ... </ div > </ div > 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在 bootstrap 中实现嵌套列非常简单, 只需要在原有的 div 和相应的长度的 span* div 即可。如图 1-3 所示: 图 1-3 嵌套列(Nesting columns) 以下代码实现了是实现图 1-3 中,第一层的宽度为 12 和第二层两个宽度为 6 的两个 div. <div class ="row"> <div class ="span12"> Level 1of column <div class ="row"> <
BootStrap入门教程 来自淘豆网m.daumloan.com转载请标明出处.
