标签：
# css布局 #
---
bootstrap 详情请看官方文档
---
首先要按照相应的官方规范引入相应的css js fonts等
container相当于一个容器 一般设置一个 接下来设置行 用row
row里面套col col里面可以继续套row row不能直接套row
<div class="container">
<div class="row header">
<div class="col-xs-1 "></div>
<div class="col-xs-1 "></div>
</div>
<div class="row">
<div class="col-xs-6 c3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" //content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style></style>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-xs-1 c1"></div>
<div class="col-xs-1 col-xs-offset-2 c2"></div>
</div>
<div class="row">
<div class="col-xs-6 c3">
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.2-min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
--------
负边距
----
<div id="header">顶部区域</div>
<div id="mainer">
<div id="main">
<div id="leftBar">
</div>
<div id="innerMain">
</div>
</div>
</div>
<div id="sideBar">
</div>
<div id="footer">底部区域</div>
//通过这样设置css样式就可以实现一部分区域自适应
<style>
#header {
background: red;
}
#mainer {
background: yellow;
float: left;
width: 100%;
margin-right: -250px;
}
#main {
margin-right: 250px;;
}
#innerMain{
margin-left:200px;
}
#leftBar{
width:200px;
float:left;
background: fuchsia;
}
#sideBar {
background: blue;
float: right;
width: 250px;
}
#footer {
clear: both;
background: green;
}
</style>
-----------
圣杯布局
------
<div id="header">顶部区域</div>
<div id="mainer">
<div id="main">
<div id="leftBar">
</div>
<div id="innerMain">
</div>
</div>
</div>
<div id="sideBar">
</div>
<div id="footer">底部区域</div>
//通过这样设置css样式就可以实现一部分区域自适应
<style>
#header{
background: red;
}
#mainer{
padding:0 250px 0 200px;
}
#leftBar{
background: blue;
width:200px;
margin-left:-100%;
right:200px;
}
#innerMain{
background: yellow;
width:100%;
}
#rightBar{
background: fuchsia;
width: 250px;
margin-right: -250px;
}
.column{
float:left;
position: relative;
}
#footer{
clear:both;
background: green;
}
</style>
标签：
原文地址：http://www.cnblogs.com/yyan/p/4842790.html
