一、概览
HTML5 文档类型
Bootstrap使用到某些元素和css属性需要将页面设置为HTML5文档类型,在你项目中的每个页面都要参照下面的格式进行设置
移动设备优先
针对移动设备的样式融进了框架的每个角落,而不是增加一个额外的文件,为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
布局容器
Bootstrap徐涛为页面内容和栅格系统包裹一个.container容器
.container类用于固定宽度并支持响应式布局的容器
.container-fluid类用于100%宽度,占据全部视口的容器
二、栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或者视口尺寸的增加,系统会自动分为最多12列
栅格参数
超小屏幕 手机 (<768px) |
小屏幕 平板 (>=768px) |
中等屏幕 桌面显示器 (>=9992px) |
大屏幕 大桌面显示器 (>=1200px) |
|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些值时将变为水平排列 | ||
.container最大宽度 | None(自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-sm- | .col-lg- |
列数 | 12 | |||
最大列宽 | 自动 | ~62px | ~81px | ~97px |
槽宽 | 30px(每列左右均有15px) | |||
可嵌套 | 是 | |||
偏移 | 是 | |||
列排序 | 是 |
三、首页整合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例4:首页整合</title>
<!-- 支持手机端 -->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 引入bootstrap的CSS