Bootstrap依赖jQuery,因此jQuery必须在Bootstrap之前引入
1、Get started(起步)
--目录结构
bootstrap/
├── css/
│ ├── bootstrap.css 编译未压缩版,可以在任意web项目中直接使用
│ ├── bootstrap.min.css //压缩版。
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
章节
主要是有Scaffolding,Base CSS,Components,Javascript plugins以及一些组件
案例
介绍Bootstrap的使用方式,导入方法
2、Scaffolding(脚手架)
全局设置
*必须使用HTML5文档类型<html lang="en">
*移除了body的margin
设置background-color:white
通过@linkcolor设置全局连接颜色,处于hover的时候才会有下划线
//这些样式可以在scaffolding.less中找到
默认栅格系统
默认12列,940px的container,没有启用相应式布局,若加入相应式布局css,可是窗口自动从724px到1170px进行调整。低
于767px宽时,列将不再固定并在垂直方向堆叠
使用栅格系统
创建一个row container,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的
栅格数之和最多是12(或者等于其父容器的栅格数)。
eg://创建一个一列为4个栅格的
<div class="row">
<div class="span4">...</div>
</div>
偏移列
.offset*类可以将列右移,.offset4将span4右移了4列的宽度<div class="span4 offset4">...</div>
嵌套列
在默认的栅格系统里,在已有的.span*添加一个.row并加入.span*列。被嵌套列中每列列数和要小于等于父级列,不然会在
垂直方向堆叠。
流式栅格系统
对每列的宽度使用的是百分比而不是像素量。可以对不同分辨率和设备做出适当调整
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来
流式栅格的偏移
定义方式与默认的相同
流失嵌套布局
被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度
布局
固定布局
通用固定宽度<div class="container">
流式布局<div class="container-fluid">
响应式设计 (这个内容没有重点看)
*Bootstrap在默认情况下是没有引入响应式特性的
启用
<head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS
1、Get started(起步)
--目录结构
bootstrap/
├── css/
│ ├── bootstrap.css 编译未压缩版,可以在任意web项目中直接使用
│ ├── bootstrap.min.css //压缩版。
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
章节
主要是有Scaffolding,Base CSS,Components,Javascript plugins以及一些组件
案例
介绍Bootstrap的使用方式,导入方法
2、Scaffolding(脚手架)
全局设置
*必须使用HTML5文档类型<html lang="en">
*移除了body的margin
设置background-color:white
通过@linkcolor设置全局连接颜色,处于hover的时候才会有下划线
//这些样式可以在scaffolding.less中找到
默认栅格系统
默认12列,940px的container,没有启用相应式布局,若加入相应式布局css,可是窗口自动从724px到1170px进行调整。低
于767px宽时,列将不再固定并在垂直方向堆叠
使用栅格系统
创建一个row container,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的
栅格数之和最多是12(或者等于其父容器的栅格数)。
eg://创建一个一列为4个栅格的
<div class="row">
<div class="span4">...</div>
</div>
偏移列
.offset*类可以将列右移,.offset4将span4右移了4列的宽度<div class="span4 offset4">...</div>
嵌套列
在默认的栅格系统里,在已有的.span*添加一个.row并加入.span*列。被嵌套列中每列列数和要小于等于父级列,不然会在
垂直方向堆叠。
流式栅格系统
对每列的宽度使用的是百分比而不是像素量。可以对不同分辨率和设备做出适当调整
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来
流式栅格的偏移
定义方式与默认的相同
流失嵌套布局
被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度
布局
固定布局
通用固定宽度<div class="container">
流式布局<div class="container-fluid">
响应式设计 (这个内容没有重点看)
*Bootstrap在默认情况下是没有引入响应式特性的
启用
<head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS
后续。。。