1,bootstrap
中文网 : http://www.bootcss.com/
英文网 : http://getbootstrap.com/
2,容器
2.1流体布局容器
容器的width为auto,只是两边加了15px的padding。
2.2固定布局
容器的width会随设备分辨率的不同而生产变化
分辨率阈值
w >=1200 容器的width为1170 左右padding为15 (注意是borderBox)
1200>w >=992 容器的width为970 左右padding为15 (注意是borderBox)
992 > w >=768 容器的width为750 左右padding为15 (注意是borderBox)
768 > w >=992 容器的width为auto 左右padding为15 (注意是borderBox)
3,栅格系统
col-lg-x ( >=1120px)
col-md-x (>=992px)
col-sm-x (>=768)
col-xs-x (<768)
x默认拥有12个等级
4,列偏移
.col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
调整的是margin-left
5,列排序
.col-md-push-* 和 .col-md-pull-* 类的可以设置网格列的顺序,其中 * 范围是从 1 到 11。
push的时候调整的是left,分13个等级(0到12)
0时为auto
pull的时候调整的是right,分13个等级(0到12)
0时为auto
例:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">
左
</div>
<div class="col-md-8 col-md-pull-4" >
右
</div>
</div>
</div>
bootstrap常用布局和插件
1,超大屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超大屏幕</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>请登录</h1>
<p>超大屏幕</p>
<button class="btn btn-primary btn-lg">返回</button>
</div>
</div>
</body>
</html>
2,导航栏
<!-- 顶部导航栏制作 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 小屏幕导航按钮和logo -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- 三条小横线制作 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">网易学院</a>
</div>
<!-- 小屏幕导航按钮和logo结束 -->
<!-- 导航 -->
<div class="navbar-collapse collapse">
<!-- navbar-right导航右对齐 -->
<!-- nav取消ul的默认样式 -->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#home">首页</a>
</li>
<li>
<a href="#bbs">论坛</a>
</li>
<li>
<a href="#html5">前端开发</a>
</li>
<li>
<a href="#course">最新课程</a>
</li>
<li>
<a href="index.html">移动APP</a>
</li>
<li>
<a href="index.html">联系我们</a>
</li>
</ul>
</div>
<!-- 导航结束 -->
3,分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">«</a>
</li>
</body>
</html>
4,徽章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>徽章</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#">Mailbox <span class="badge">50</span></a>
</body>
</html>
5,轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="carousel slide" id="myCarousel">
<div class="carousel-indicators">
<ol class="carousel-indicators"></ol>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="">
</div>
<div class="item">
<img src="img/2.jpg" alt="">
</div>
<div class="item">
<img src="img/3.jpg" alt="">
</div>
</div>
<a href="#myCarousel" class="carousel-control left" data-slide="prev">‹
</a>
<a href="#myCarousel" class="carousel-control right" data-slide="next">‹</a>
</div>
</body>
</html>
6,模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框</h2>
<button class="btn btn-primary btn-lg" datd-toggle="modal" data-target="#myModal">模态框演示</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
<script>
$(function() {
$('#myModal').modal({
keyboard: true
})
});
</script>
</body>
</html>