文档介绍：北风网项目实战培训
入门提升与实战2
讲师:鲁国行人甲(北风网版权所有)
基于BootStrap+jQuery+ThinkPHP+MongoDB社区网站教程
Bootstrap简介
脚手架
全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。
基本CSS样式
常见的HTML元素-- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。
组件
常见界面组件-- 如标签、pill、导航、警告、页面标题的基本样式。
JavaScript插件
和组件类似,这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
Bootstrap 框架目录结构
注意:所有的JavaScript插件都依赖jQuery库
Bootstrap 安装使用-基本模板
Bootstrap 栅格系统
Bootstrap默认的栅格系统为12列,形成一个940px宽
的容器,默认没有启用响应式布局特性。如果加入
响应式布局CSS文件,栅格系统会自动根据可视窗口
的宽度从724px到1170px进行动态调整。在可视窗口
低于767px宽的情况下,列将不再固定并且会在垂直
方向堆叠。
Bootstrap 栅格系统
Bootstrap 栅格系统实现
对于简单的两列式布局, 容器,* 列即可。由于默认是12列的栅格,* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Bootstrap 栅格系统分类
基本栅格 px
基本单位:行(row)和列(span)
基本布局:基本、偏移(offset)和嵌套

流式栅格百分比
基本单位:行(row)和列(span)
基本布局:基本、偏移(offset)和嵌套
row-fluid(使用百分比而不是固定的像素)
Bootstrap 布局
固定布局
响应式布局
Bootstrap 基本CSS样式表格
表格-制作一个符合要求的表格
相关样式:

-bordered
-hover
-condensed
隔行换色