bootstrap实战经验
凡是基本的布局需要float实现的，都可以考虑利用网格布局。
1，.jumbotron可以形成一个青灰色的背景，并自动调节对应边距
2，.panel的应用十分广泛，可以自动设置合适的padding.甚至利用它实现footer等(panel-footer)
3, text-justify对齐方式的使用
4，可以使用网格布局来控制图片的大小，结合max-width:100%.
5，top 和left是针对元素的左上角而言，absolute定位的占据一定面积的元素而言，针对于父元素的水平居中对齐，使用left:50%后，还需要margin:-水平宽度的一半。
6，外围元素设定clearfix之后，可以解决其中的浮动元素凸出的问题，可是如果外围元素浮动定位，内层元素决定定位造成的凸出，不能使用这种方法来解决，只能够定义外围元素的高度。
7，如果height，line-height比元素的默认高度还小，不可能得到垂直居中的效果。
8，元素一旦脱离页面流（float，绝对定位，相对定位），就相当于一个inline-block，可以为之设定宽度，为内连元素设置宽度没有效果。
9，为链接设置样式要遵循love hate的顺序（link,visited,hover,active）
10，bootstrap默认的样式可以被覆盖，例如，对于轮播组件，可以利用下列代码更改左右导航的样式。
11.创建响应式的布局，对于外层div的width，margin等，要善于利用百分比作为单位；同时限定max-width诸如：
.section{
width:75%;
max-width:600px;
margin:5% auto 0;
background-color:rgba(255,255,255,0.3);
padding:3%;
}
百分比响应式布局
.carousel-control.left, .carousel-control.right {
top: 40%;
background: none;
font-size: 50px;
}
轮播导航样式覆盖
12,善于使用rgba造成蒙版效果
13，bootstrap的col之间没有margin，但是内部有一定的padding。
14,利用transform，transion可以实现一些2d，乃至3d的旋转效果，一个示意可以参见：http://codepen.io/betdream/details/qiGrg
项目总结
一、<!--timeline--项目>
1.如何实现带有箭头的div，利用：before,:after以及对应的border属性，其中，border-width以及偏移的设置是有规律而非随意的。
2，如何实现贯穿页面中间的竖线，利用before，top:0;bottom:0，width:50%来实现。
该项目值得好好琢磨，具体源代码如下：
<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/timeline.css">
<title>timeline布局</title>
</head>
<body>
<div>
<div class="container">
<div class="page-header">
<h1>Timeline</h1>
</div>
<ul class="timeline">
<li class="timeline-item left">
<div class="timeline-badge info">
<span class="glyphicon glyphicon-check"></span>
</div>
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4>
<p class="text-muted"><small><span class="glyphicon glyphicon-time"></span> hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li> <li class="timeline-item right">
<div class="timeline-badge primary">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
</div>
</div>
</li> <li class="timeline-item left">
<div class="timeline-badge sucess">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li> <li class="timeline-item right">
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li> <li class="timeline-item left">
<div class="timeline-badge danger">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
<div class="timeline-footer">
<button class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
</div>
</div>
</li> <li class="timeline-item left">
<div class="timeline-panel ">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li> <li class="timeline-item right">
<div class="timeline-badge warning">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="timeline-panel">
<div class="timeline-title">
<h4>Mussum ipsum cacilds</h4> </div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<ul>
</div>
</div>
</body>
</html>
timeline项目html代码
ul.timeline{
list-style:none;
/*
border:1px solid #000;
*/
padding:;
position:relative;
}
/*实现页面中间的竖线*/
ul.timeline:before{
position:absolute;
width:3px;
height:auto;
background:#eee;
content:"";
top:;
bottom:;
left:50%;
margin-left:-1.5px;
}
.timeline > li{
/*
border:2px solid #345;
*/
margin-bottom:15px;
padding:20px;
position:relative;
}
.timeline >li>.timeline-badge{
border-radius:50%;
width:50px;
height:50px;
line-height:50px;
position:absolute;
top:28px;
left:50%;
margin-left:-25px;
text-align:center;
font-size:1.3em;
color:#fff;
background-color:#eee;
z-index:;
}
.timeline > li > .timeline-panel{
width:46%;
border:2px solid #eee;
box-shadow:0 3px 5px #eee;
padding:20px;
position:relative;
text-align:justify;
}
.timeline > li.left>.timeline-panel{
float:left;
}
.timeline > li.right>.timeline-panel{
float:right;
}
.timeline > li:after{
content:" ";
display:table;
clear:both;
}
/*实现带有左箭头的div*/
.timeline>li.left>.timeline-panel:before{
content:"";
border-left:18px solid #eee;
border-top:18px solid transparent;
border-bottom:18px solid transparent;
position:absolute;
top:12px;
right:-18px;
z-index:;
}
.timeline>li.left>.timeline-panel:after{
content:"";
border-left:16px solid #fff;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
position:absolute;
top:14px;
right:-16px;
z-index:;
}
/*实现带有右箭头的div*/
.timeline>li.right>.timeline-panel:before{
content:"";
border-right:18px solid #eee;
border-top:18px solid transparent;
border-bottom:18px solid transparent;
position:absolute;
top:12px;
left:-18px;
z-index:;
}
.timeline>li.right>.timeline-panel:after{
content:"";
border-right:16px solid #fff;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
position:absolute;
top:14px;
left:-16px;
z-index:;
}
.timeline>li .timeline-footer{
padding-left:10px;
padding-right:10px;
border-top:1px solid #eee;
padding-top:15px;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
timeline项目源代码
二、<!--网格布局和列表布局的转换>
1.如何实现网格布局和列表布局的转换
2，如何实现圆角、圆角间隔和hover的动态效果。
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/myblog.css">
</head>
<body>
<h1 class="banner text-center text-primary">My Blog</h1>
<div class="container">
<div class="switch btn-group pull-right">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-th-large"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-th-list"></span></button>
</div>
</div>
<div class="article_list container">
<div class="row">
<div class="article_wrapper col-xs-12">
<a class="more_link" href="#">more</a>
<div class="img_wrapper"><img src="img/blog/article1.jpg"/></div>
<h2 class="article_title ">Lorem ipsum dolor</h2>
<p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</div>
<div class="article_wrapper col-xs-12">
<a class="more_link" href="#">more</a>
<div class="img_wrapper"><img src="img/blog/article2.jpg"/></div>
<h2 class="article_title ">Lorem ipsum dolor</h2>
<p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</div>
<div class="article_wrapper col-xs-12">
<a class="more_link" href="#">more</a>
<div class="img_wrapper"><img src="img/blog/article3.jpg"/></div>
<h2 class="article_title ">Lorem ipsum dolor</h2>
<p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</div>
<div class="article_wrapper col-xs-12">
<a class="more_link" href="#">more</a>
<div class="img_wrapper"><img src="img/blog/article4.jpg"/></div>
<h2 class="article_title ">Lorem ipsum dolor</h2>
<p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</div>
<div class="article_wrapper col-xs-12">
<a class="more_link" href="#">more</a>
<div class="img_wrapper"><img src="img/blog/article5.jpg"/></div>
<h2 class="article_title">Lorem ipsum dolor</h2>
<p class="article_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</div>
</div>
</div> <script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/myblog.js"></script>
</body>
</html>
布局切换html代码
body{
background-color: #CDE;
}
.banner{
font-family:"Times New Roman",Serif;
font-size:46px;
font-weight:bolder;
padding-top:20px;
padding-left:20px;
}
.switch{
margin-bottom:10px;
}
.article_wrapper{
background-color:#fff;
padding-left:175px;
padding-right:75px;
margin-bottom:30px;
border-radius:100px;
position:relative;
height:150px;
cursor:pointer;
}
.article_wrapper a{
position:absolute;
left:;
right:;
width:100%;
height:150px;
line-height:150px;
text-align:center;
font-weight:bolder;
font-style:italic;
font-size:40px;
color:#428bca;
opacity:;
text-decoration:none;
background-color:#fff;
border-radius:100px;
}
.article_wrapper:hover a{
opacity:;
}
.article_wrapper .img_wrapper{
border-radius:100px;
padding:10px;
background-color:#CDE;
position:absolute;
left:-10px;
top:-10px;
padding:10px;
height:170px;
transition:all 0.2s;
}
.article_wrapper:hover .img_wrapper{
padding:5px;
transform:rotate(5deg);
}
.article_wrapper img{
border-radius:100px;
height:150px;
transition:all 0.2s;
}
.article_wrapper:hover img{
width:160px;
height:160px;
}
.article_wrapper h2{
font-size:20px;
color: #428bca;
border-bottom:2px solid #CDE;
height:75px;
line-height:75px;
margin-top:;
}
.article_wrapper p{
font-size:14px;
}
/*切换之后的布局*/
.blog{
padding-left:10px;
padding-right:10px;
border-radius:5px;
height:auto;
/*修复图片的top造成的重叠*/
margin-top:90px;
/*防止图片挡住文字*/
padding-top:85px;
border-left: 10px solid #CDE;
}
.blog a{
position:absolute;
top:;
left:;
height:100%;
padding-top:40px;
border-radius:5px;
}
.blog .img_wrapper{
position:absolute;
width:170px;
top:-85px;
left:50%;
margin-left:-85px;
}
.blog h2{
font-size:14px;
height:37.5px;
line-height:37.5px;
}
.blog p{
font-size:12px;
padding-bottom:10px;
}
布局切换项目css代码
三、导航栏的实现
导航栏是本质上是链接列表，要实现水平导航栏的时候，有两种方案：
首先都要为a设置样式:display：block；
1）基于浮动的思想，令li左浮动，这种方法的优点是li之间不会存在空格，缺点是左浮动要想实现居中的效果需要借助于其他方法。
2）给li设置样式：display:inline-block。这种方法的优点是容易控制居中对齐（给ul设置样式text-align:center），缺点是li之间存在空格。
2.多级导航栏
2.1一级导航栏水平，二级导航栏竖直
此时，利用bootstrap的导航组件很容易实现
2.2一级导航栏水平，二级，三级...等多级导航栏竖直
<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/menu.css">
<title>多级菜单</title>
</head>
<body>
<div id="mainnav" class="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">很长很长很长很长很长很长很长很长很长很长</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">LinkLink</a>
<ul>
<li class="expand"><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li class="expand"><span>span 菜单项</span>
<ul>
<li><span>span 菜单项</span></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
多级竖直导航html
.menu ul{
margin:;
padding:;
list-style:none;
}
.menu a,.menu span{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
overflow:hidden;
}
.menu>ul>li{
float:left;
width:60px;
overflow:visibility;
}
.menu>ul>li ul{
display:none;
width:160px;
border:1px solid highlight;
}
.menu li:hover>ul{
display:block;
}
.menu li:hover>a{
background-color:highlight;
}
.menu>ul>li li{
width:160px;
}
.menu>ul>li>ul>li ul{
position:absolute;
margin-left:155px;
margin-top:-30px;
}
.menu>ul>li li.expand{
padding-right:20px;
}
多级竖直导航css样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>纯 CSS 多级菜单</title>
<style>
.menu{}
.menu ul,.menu li{margin:; padding:;list-style:none outside;}
.menu>ul{overflow:auto; display:inline-block;}
.menu a,.menu span{ cursor:default; height:30px; line-height:30px; padding: 5px; display:block; text-overflow:ellipsis; overflow:hidden; text-decoration:none; color:MenuText;}
.menu a:hover,.menu span:hover,.menu li:hover>a,.menu li:hover>span{color:HighlightText;}
.menu li:hover{background-color:Highlight;}
.menu li:hover>ul{display:block;}
.menu>ul>li{float:left;}
.menu>ul>li ul{display:none;float:left; background-color:#fff; border:1px solid Highlight; position:absolute;}
.menu>ul>li li{padding-left:25px;margin:2px;background:transparent url(data:image/gif;base64,R0lGODlhEAAQAIAAAJmZmf///yH5BAAAAAAALAAAAAAQABAAAAIjhI9pwe2+nmRRIQrmjBrmYB1Y93Ak+IXVd6LtiIZwa5JqWAAAOw==) no-repeat 5px center; width:150px;}
.menu>ul>li>ul>li ul{margin-left:140px; margin-top:-30px;}
.menu li.expand>a,.menu li.expand>span{background:transparent url(data:image/png;base64,R0lGODlhAwAQAIABAAAAAP///yH5BAEAAAEALAAAAAADABAAAAIKjI8JBtv/wko0FQA7) no-repeat right center; padding-right:10px; margin-right:5px;}
.menu>ul>li.expand>a,.menu>ul>li.expand>span{ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXY2BgYPiPAwOFMSXBgjAA0wnmAwASVQv19UVKmwAAAABJRU5ErkJggg==);}
</style>
</head> <body> <div id="mainnav" class="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">很长很长很长很长很长很长很长很长很长很长</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="expand"><a href="#">LinkLink</a>
<ul>
<li class="expand"><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li class="expand"><span>span 菜单项</span>
<ul>
<li><span>span 菜单项</span></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div> </body>
</html>
多级竖直导航完整版
上述案例中值得注意的是两点：
1）height:30px;line-height:30px;overflow:hidden可以控制，即使文本过长，依旧能保证样式正常
2）绝对定位元素的非绝对定位用法，一般来说，position：absolute通常的用法是设置在position非static的父元素中（否则就是相对于body），通过设置top,left,bottom,right来控制布局；在本例中，则是利用无定位值的margin属性，将其占据的原来位置让出，推离原位置。可以参见http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/（这篇博客有些结论是错误的，不过其思考的思路可以借鉴）
3）width：100%宽度的指定
（1）对于不存在其他关系的嵌套，width：100%是直接基于父元素（父元素为块状元素或者宽度指定）
（2）对于存在float的嵌套，结论（1）依旧成立（因为float没有脱离页面流嘛）
（3）对于子元素是position：absolute的嵌套，要是其外层的所有元素中都没有用position:relative/absolute/fixed，则width:100%是基于body，否则就是离基最近的一个position:relative/absolute/fixed的元素。(毕竟，position：absolute就是针对于最近一个非static定位的父元素进行定位的嘛)
（4）对于子元素是Postion：relative的嵌套，它是相对于其本来的位置进行定位，不管其父元素有没有设置特殊定位，其width:100%都是相对于距离它最近的父元素。
（5）fixed元素的width：100%始终相对于body进行定位。
bootstrap实战经验的更多相关文章
- Bootstrap 实战之响应式个人博客 （二）
阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...
- Bootstrap 实战之响应式个人博客 （一）
一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
- 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 特殊问题和实战经验（五）
RAC 特殊问题和实战经验(五) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...
- 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
- 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）
在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- 基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式
在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容.基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内 ...
- 基于Metronic的Bootstrap开发框架经验总结（10）--优化Bootstrap图标管理
在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
随机推荐
- svn搭建，很简单
yum install subversion 2015年1月7日15:23:07 我测试的时间 系统是centos6.5 直接yum,centos是可以直接解决apr apr-util 依赖问题,如果 ...
- Mybatis resultMap空值映射问题解决
Mybatis在使用resultMap来映射查询结果中的列,如果查询结果中包含空值的列(不是null),则Mybatis在映射的时候,不会映射这个字段,例如 查询 name,sex,age,数据库中的 ...
- storm在linux系统下安装调试
安装: 安装 zookeeper : 下载 zookeeper :http://zookeeper.apache.org/releases.html#download. 将 zookeeper-3.4 ...
- Apache Spark技术实战之2 -- PackratParsers实例
欢迎转载,转载请注明出处,徽沪一郎 概要 通过一个简明的Demo程序来说明如何使用scala中的PackratParsers DemoApp import scala.util.parsing.com ...
- PhpStorm中文教程
PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...
- hiho48 : 欧拉路·一
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho最近在玩一个解密类的游戏,他们需要控制角色在一片原始丛林里面探险,收集道具,并找到最后的宝藏.现在他们控制的 ...
- 微信公众账号开发教程（一） 基本原理及微信公众账号注册 ——转自http://www.cnblogs.com/yank/p/3364827.html
微信公众账号开发教程 基本原理 在开始做之前,大家可能对这个很感兴趣,但是又比较茫然.是不是很复杂?很难学啊? 其实恰恰相反,很简单.为了打消大家的顾虑,先简单介绍了微信公众平台的基本原理. 微信服务 ...
- 下面我会介绍几种轻轻松松访问Google的方法
好人一生平安的大招 Google在大陆已经封了差不多有20天 访问是极其的困难 下面我会介绍几种轻轻松松访问Google的方法 首先 你需要个可靠的hosts 比如 https://git.os ...
- git 第一次初始化
Command line instructions Git global setup git config --global user.name "{名字}({工号})" git ...
- 使用JavaScript创建我的分页
把下面的方法放到一个js文件,页面引用他就行了 JavaScript function PageList(PageSize, PageIndex, TotalCount, ParList) { $(& ...