BootStarp常用标签
1 栅格系统
<!DOCTYPE html>
<!-- 让其支持html5类型 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 申明文档的兼容模式 ,表示使用ie浏览器的最新模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 让其首先对移动设备友好 user-scalable=no 可以禁用其缩放（zooming）功能 -->
<meta name="viewport" content="width=device-width,inital-scale=1,maximum-scale=1,user-scalable=no">
<!-- Bootstrap 样式文件-->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!--引入jquery文件-->
<script src="../js/jquery-1.11.3.min.js"></script>
<!--引入bootstarp文件-->
<script src="../js/bootstrap.min.js"></script>
<title>BootStarp的概述</title>
<style type="text/css">
div{
border:1px solid red;
}
</style>
</head>
<body>
hello 你好!
<div class="container">
...
</div>
<div class ="container-fluid">
......
</div>
-----------------栅格系统------------------
<br>
<!-- ----------------超小屏幕(自动)-------------
<div class="container">
<div class="row">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-1</div>
</div>
----------------小屏幕(>=750px)-------------
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
----------------中等屏幕(>=970px)--------------
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
-------------------大屏幕（>=1170px）------------------
<div class="row">
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
</div>
</div> -->
----------------栅格系统的研究------------------
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">.col-md-6 .col-lg-4</div>
<div class="col-md-6 col-lg-4">.col-md-6 .col-lg-4</div>
<div class="col-md-6 col-lg-4">.col-md-6 .col-lg-4</div>
</div>
</div>
-------------偏移的使用----------------
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
-------------嵌套栅格样式------------------
<div class="row">
<div class="col-sm-9">
level 1:col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
level 2:col-xs-8 col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
level 2 :col-xs-4 col-sm-6
</div>
</div>
</div>
</div>
</div>
------------列排序-------------
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-pull-9</div>
</div>
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint:768px;
<br>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
