Bootstrap基础入门

1.概念

响应式布局:兼容PC端和移动端

2.首页重写

2.1 Bootstrap基本模板

  • 导入类库:
1
2
3
<head>
bootstrap.css/jQuery.js/bootstrap.js
</head>

2.2 Bootstrap标准模板(响应式)

  • 属性设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<meta charset=""> //编码集
<meta http-equiv="" content=""> //兼容浏览器
<meta name="" content=""> //视口,缩放

//导入类库和样式①

//兼容IE浏览器代码,支持HTML5和CSS3,只有IE能识别
<script src=""></script>
</head>
<body>
//内容

//导入类库和样式②
</body>

2.3 栅格布局

  • 每一行分为12列,超出布局换行
    1
    2
    3
    <div class="rows">                  //建议所有数据存放在行中row,不写也可以
    <div class"col-*-*"></div> //col不写默认为12列,大布局不写使用小布局值
    </div>

3.首页案例–查文档复制样式