javascript基础之十四（网页开发布局利器bootstrap）

最新推荐文章于 2024-10-26 08:00:00 发布

TinyTechFlux

最新推荐文章于 2024-10-26 08:00:00 发布

阅读量128

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010510134/article/details/96269631

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>13-网页开发布局利器bootstrap</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.css" rel="stylesheet"/>
<style>
	.show-grid{
		padding:10px;
		background-color:rgba(86,61,124,0.15);
		border:1px solid rgba(86,61,124,0.2);	
	}
	body{ background:antiquewhite;}
</style>
</head>
<body>
<div class="container" style=" background:white">
	<h2 class="text-center">相应布局</h2>
    <div class="row show-grid">
		<h4>2.1 layout</h4>
    	<div class="col-xs-8 show-grid">.col-xs-8  show-grid-</div>
        <div class="col-xs-4 show-grid">.col-xs-4  show-grid-</div>
    </div>
	<div class="row show-grid">
		<h4>自动偏移</h4>
		<div class="col-xs-4 show-grid">.col-xs-4 show-grid</div>
		<div class="col-xs-offset-4 col-xs-4 show-grid">col-xs-offset-4 col-xs-4 show-grid</div>
	</div>
	<div class="row show-grid">
		<h4>嵌套col-xs-</h4>
		<div class="col-xs-9 show-grid">
			<div class="row show-grid">
				<div class="col-xs-6 show-grid">col-xs-6 show-grid</div>
				<div class="col-xs-6 show-grid">col-xs-6 show-grid</div>
			</div>
		</div>
	</div>
	<div class="row show-grid">
		<h4>嵌套col-sm-</h4>
		<div class="col-sm-9 show-grid">
			<div class="row show-grid">
				<div class="col-sm-6 show-grid">col-xs-6 show-grid</div>
				<div class="col-sm-6 show-grid">col-xs-6 show-grid</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>