Bootstrap
2016-12-18 本文已影响33人
Jianshu9527
1 Bootstrap起源
2011年,Twitter的两个工程师Mark Otto和Jacob Thornton合作开发了一个移动设备优先的响应式框架,该框架基于HTML,CSS,JavaScript
2 入门及使用
- 2.1 下载地址:http://v3.bootcss.com/getting-started/
- 2.2 在dist文件下有三个文件分别是(css/fonts/js)
- 2.3 基本模板是以HTML5文档类型的(在代码开头的时候一定要注明文档类型)
- 2.4 基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewpost" content="width=device-width,initial-scale=1">
<link href="css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
</html>
-1 )先引入核心的css文件
-2 )Bootstrap依赖于jQuery,在引入js文件的时候要先引入jQuery(版本号要大于10以上)
-3 )引入js核心文件
-4 )以上文件在dist文件目录下各自对应的文件目录下
-5 )以上文件引入顺序不可随意调换
3 栅格系统
3.1 Bootstrap采用12栅格系统,吧网页的总宽度平分为12分,方便开发人员自由的按份组合
3.2 在bs中实现栅格,需要借助固定的结构(布局容器)+行+lie
- 1)布局容器(.container/container-fluid)
- 2)行(.row)
- 3)列(col-md-)/取值从1~12
- 4).container↓
container的宽度在某一个范围内是固定的一个值
图片1.png
1 container
<div class="container box">
这是一个有固定宽度的容器
</div>
- 页面宽度>1200,宽度固定为1170px
- 992px<页面宽度<1200px,宽度固定为970px
- 768px<页面宽度<992,宽度固定为750px
- 如果在手机上面,就是百分比宽度,占满屏幕
2 container-fluid(占满父容器的100%宽度)
<div class="container-fluid">
流体布局容器
<div>
