<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap框架介绍_使用</title>
<!-- bootstrap框架
来自于Twitter.
依赖JavaScript框架.
有既定式样, 需引入css.
拥有字形图标库(glyph-icon),可优化性能,需引入font文件夹.
-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
.container-fluid, .container{
background:tan;
font: 20px/50px 'Microsoft Yahei';
}
.container{
background: coral;
margin:0 -15px;
/*padding: 0 -15px;*/
}
</style>
</head>
<body>
<div class="container-fluid">流体布局(fluid-layout)</div>
<br>
<br>
<br>
<div class="container">响应式布局(responsive-layout)</div>
<!-- 与swiper插件不同的是.
1> bootstrap在使用的时候并不需要通过new创建容器绑定元素,直接使用既定类名即可.
2>. 无论 流体布局还是响应式布局, 容器内部都有15px的padding, 有时需要通过 -margin或-indent来中和.
3>. 响应布局reponsive layout最大的宽为1170px,为12*10-15*2;此处padding应为container的容器的padding.
-->
</body>
</html>
