BootStarp經常使用標籤

時間  2019-12-17
標籤 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程