您的位置：首页 > Web前端 > BootStrap

bootstrap初探

2015-10-31 11:57 615 查看

bootstrap资源
http://getbootstrap.com http://github.com/twbs http://www.bootcss.com
bootstrap栅格系统

容器：流体（container-fluid）、固定（container）

分12列，阈值分辨率>=1200,container固定尺寸为1170px，若阈值在992到1200之间container固定尺寸为970px，若分辨率在992以下778以上为750px，778px以下为自适应，没有固定的宽度值

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid;}
</style>
</head>
<body>
<!--<div class="container-fluid">
aaaaaaaaa
</div>
-->
<div class="container">
aaaaaaaaa
</div>

</body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>

分为12列，可根据列数确定，demo如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ border:1px #000 solid; background: #CCC;}
div[class^=col-] { color: white; border: 1px solid red;}
</style>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-10">col-lg-10</div>
</div>
<div class="row">
<div class="col-lg-2 col-lg-push-10">col-lg-2</div>
<div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
</div>
</div>

</body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航