没有合适的资源?快使用搜索试试~ 我知道了~
BootStrap的入门学习教程,最近很火,共4章
资源推荐
资源详情
资源评论
本作品由 VentLam
创作,采用知识共享署名 - 非商业性使用 - 相同方式共享 2.5 中国大陆许可协议 进行许可。
BootStrap
入门教程 ( 一 )
2011 年,twitter 的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了
一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap 由 MARK OTTO
和 Jacob Thornton
所设
计和建立,在 github
上开源之后,迅速成为该站上最多人 watch&fork
的项目。大量工程师踊跃为该项目贡献
代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基
于 Bootstrap 建设的网站:界面清新、简洁;要素排版利落大方。如下图所示:
https://kippt.com /
http://www.fleetio.com /
GitHub 上这样介绍 bootstrap:简单灵活可用于架构流行的用户界面和交互接口的 html,css,javascript 工具集。
基于 html5、css3 的 bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12 列格
网,样式向导文档,自定义 JQuery 插件,完整的类库,基于 Less
等。本系列教程遵循官方文档结构来介绍
bootstrap,包括手脚架(Scaffolding),基础 CSS,组件,javascript 插件,使用 LESS 与自定义. 本文主要介绍
Bootstrap 的基础布局--Scaffolding.
Bootstrap 建立了一个响应式的 12 列格网布局系统,它引入了 fixed 和 fluid-with 两种布局方式。我们从全
局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应
式设计(Responsive Design)这六五个方面深入讲解 Boostrap 的 scaffolding.
1 全局样式(Global Style).Bootstrap 要求 html5 的文件类型,所以必须在每个使用 bootstrap 页面的开头
都引用:
<!DOCTYPE html>
<htmllang="en"> ...
</html>
2 同时,它通过 Bootstrap.less 文件来设置全局的排版和连接显示风格.其中去掉了 Body 的 margin,使用
@baseFontFamily,@baseFontSize,@linkColor 等变量来控制基本排版。
3 格网系统(Grid System).默认的 Bootstrap 格网系统提供一个宽达 940 像素的,12 列的格网。这意味着你
页面默认宽度是 940px,最小的单元要素宽度是 940/12px.Bootstrap 能够使得你的网页可以更好地适应多种
终 端 设 备 ( 平 板 电 脑 , 智 能 手 机 等 ) 。 默 认 格 网 系 统 直 观 概 念 如 图 1-1 所 示 :
图 1-1 默 认 格 网 系 统 (Default Grid System)
以下简单的代码则是实现图 1-1 中,第三列的宽度为 4 和宽度为 8 的两个 div.
<divclass="row">
<divclass="span4">...</div>
<divclass="span8">...</div>
</div>
2.2 偏移列. 有时候,页面要素前面需要一些空白,bootstrap 提供了偏移列来实现,如图 1-2 所示:
图 1-2 偏移列(Offset columns)
以下代码实现了是实现图 1-2 中,第一列的宽度为 4 和偏移度为 4 宽度为 4 的两个 div.
<divclass="row">
<divclass="span4">...</div>
<divclass="span4 offset4">...</div>
</div>
2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在 bootstrap 中实现嵌套列非常简单,只需要在原
有的 div 中加入.row 和相应的长度的 span* div 即可。 如图 1-3 所示:
图 1-3 嵌套列(Nesting columns)
以下代码实现了是实现图 1-3 中,第一层的宽度为 12 和第二层两个宽度为 6 的两个 div.
<divclass="row">
<divclass="span12"> Level 1 of column
<divclass="row">
<divclass="span6">Level 2</div>
<divclass="span6">Level 2</div>
</div>
</div>
</div>
嵌套的 div 长度之和不能大于它的父 div,否则会溢出叠加。各位可以试试将第一层的 div 长度改为其他值,
看看效果。
4 流式格网系统(Fluid grid system).它使用%,而不是固定的 px,来确定页面要素的宽度.只需要简单的
将.row 改成.row-fluid ,就可以将 fixed 行改为 fluid.如图 1-4 所示:
图 1-4 流式格网系统(Fluid grid system)
以下代码实现了是实现图 1-4 中,两个不同长度的流式页面要素.
<divclass="row-fluid">
<divclass="span4">...</div>
<divclass="span8">...</div>
</div>
嵌套的流式格网和嵌套的固定格网,稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的
宽度,子要素用 100%来表示占满父要素的页面宽度。
自定义格网(Grid
customization).Bootst
rap 允许通过修改
variables.less 的参数
值来自定义格网系
统。主要包括如表 1-
1 所示的变量:
变量
默认值 说明
@gridColumns 12
列数
@gridColumnWidth 60px 每列的宽度
@gridGutterWidth 20px
列间距
表 1-1 格 网 变 量
我们通过修改以上值,并重新编译 Bootstrap 来实现自定义格网系统。如果添加新的列,需要同时修改
grid.less.同样的,需要修改 responsive.less 来获得多设备兼容.
5 布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言,Bootstrap 提供两种布局方式,
包 括 固 定 (Fixed) 和 流 式 (Fliud) 布 局 。 如 图 1-5 所 示 , 左 边 为 Fixed 布 局 , 右 边 为 Fluid 布 局 :
图 1-5 布 局 (Layout)
固定布局代码如下:
<body>
<divclass="container"> ...
</div>
</body>
流式布局代码如下:
<divclass="container-fluid">
<divclass="row-fluid">
<divclass="span2">
<!--Sidebar content-->
</div>
剩余45页未读,继续阅读
资源评论
hotapple2008
- 粉丝: 0
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功