开门见山 什么是BootStrap,具体释义在百度百科上有解释,很详细的 总而言之就是是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷,
(一)基本使用:
详细的中文教程: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
1.下载: 中文官网地址:http://d.bootcss.com/bootstrap-3.3.5.zip
GIT地址:https://github.com/twbs/bootstrap/archive/v3.3.6.zip
2.目录结构:dist -----发布新版内容
docs ----- 文档,demo案例
fonts ----- 字体(CSS3使用字体图标)
grunt ------js工厂命令行构建工具
js ------ 模块js
less ---- less源码(动态css技术)
3.bootstrap/
├── css/
│ ├── bootstrap.css //预定义的CSS文件
│ ├── bootstrap.css.map //CSS与less源码对应文件
│ ├── bootstrap.min.css //压缩
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css //主题文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js //js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot //字体 (字体图标)
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
个人见解:
BootStrap 是在jQuery基础上工作的 也可以理解成一个插件吧,也支持自定义开发,可以增前端框架的开发速度和样式的美观
是响应式布局的成功实现;什么是响应式布局,就是一套模板可以兼容多个终端使用而不需要单独开发对应的版本,我个人认为就是一个版本走天下
Bootstrap为了兼容不同的浏览器采用了jQuery,为了适配不同的终端采用了CSS3 Media Query(媒体查询)
4.简单模板讲解:(具体模板在上面教程链接里有)
<!DOCTYPE html> [HTML5 约束(固定值)]
<html lang="zh-CN"> [建议编写,生命语言,暂没有发现用途]
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1" /> [响应式开发必须使用,且必须在<head>前三行]
<title>Bootstrap 模板</title>
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> [预定义的CSS样式]
<script src="../lib/jquery/jquery-1.11.0.js"></script> [基于jQuery]
<script src="../lib/bootstrap/js/bootstrap.min.js"></script> [Bootstrap 类库]
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
5.完整模板(可直接使用)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
布局容器
bootstrap需要为页面提供一个.container的容器 提供两个容器如下
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 累哟浓郁100%宽度,占据全部视口的容器.
Bootstrap 网格系统(Grid System)?
Bootstrap 官方文档中有关网格系统的描述:
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
移动设备优先策略
- 内容
- 决定什么是最重要的。
- 布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。
- 渐进增强
- 随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
Bootstrap 网格系统(Grid System)的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4