Bootstrap

77不吃香菜.

于 2023-09-10 13:01:59 发布

阅读量16

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/luna_H/article/details/132790090

版权

col-xs- 小于768

col-sm- 大于等于768

col-md- 大于等于992

col-lg- 大于等于1200

container
       col-xs- 自动
       col-sm- 750
       col-md- 970
       col-lg- 1170
       container-fluid 宽度为100%


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
		<style type="text/css">
			.box1 {
				background-color: red;
				height: 100px;
			}
			.box2 {
				background-color: yellow;
				height: 100px;
			}
			.box3 {
				background-color: green;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- col-xs-  小于768 -->
		<!-- col-sm-  大于等于768 -->
		<!-- col-md-  大于等于992 -->
		<!-- col-lg-  大于等于1200 -->
		<!-- container  
		col-xs-   自动
		col-sm-  750
		col-md-   970
		col-lg-   1170
		container-fluid   宽度为100%-->
		<!-- <div class="container">
			<div class="row">
				<div class="col-xs-4 col-sm-1 col-md-8 col-lg-4 box1">1</div>
				<div class="col-xs-4 col-sm-3 col-md-3 col-lg-4 box2">2</div>
				<div class="col-xs-4 col-sm-8 col-md-1 col-lg-4 box3">3</div>
			</div>
		</div> -->
		<!-- <div class="row">
			<div class="col-xs-3 col-xs-offset-3 box1">1</div>
			<div class="col-xs-3 box2">2</div>
			<div class="col-xs-3 box3">3</div>
			<div class="col-xs-3 box1">4</div>
		</div>
		<div class="row">
			<div class="col-sm-3 col-sm-offset-3 box1">1</div>
			<div class="col-sm-3 box2">2</div>
			<div class="col-sm-3 box3">3</div>
			<div class="col-sm-3 box1">4</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-md-offset-3 box1">1</div>
			<div class="col-md-3 box2">2</div>
			<div class="col-md-3 box3">3</div>
			<div class="col-md-3 box1">4</div>
		</div>
		<div class="row">
			<div class="col-lg-3 col-lg-offset-3 box1">1</div>
			<div class="col-lg-3 box2">2</div>
			<div class="col-lg-3 box3">3</div>
			<div class="col-lg-3 box1">4</div>
		</div> -->
		<div class="row">
		  <!-- <div class="col-md-9 col-md-push-3 box1">1</div> -->
		  <div class="col-md-9 col-md-pull-2 box3">3</div>
		  <div class="col-md-3 box2">2</div>
		</div>
		<div class="row">
		  <div class="col-md-9 col-md-push-2 box1">1</div>
		  <div class="col-md-3 box2">2</div>
		</div>
	</body>
	<script type="text/javascript">
		// console.log(window.innerWidth);
	</script>
</html>