bootstrap栅格网页布局开发

最新推荐文章于 2021-01-26 17:34:27 发布

内师大树莓小队

最新推荐文章于 2021-01-26 17:34:27 发布

阅读量165

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43654083/article/details/109356627

版权

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    
    <script src="../js/jquery-1.11.3.min.js"></script>
   
    <script src="../js/bootstrap.min.js"></script>
    
  </head>
  <body>
  	<!--特点 居中、两端留白-->
    <div class="container" style = "border:1px solid red;"> <!--//定义画布-->
    	<div class="row">	<!--//把画布分成行-->
    		<div class="col-lg-4" style="border: 1px solid black;">
    		<!--	//把每行分成12列，col-lg-2：lg代表屏幕的宽度，是个可变的值，lg代表最大，2代表这个元素占12列中的几列-->
    			1111
    		</div>
    		<div class="col-lg-2 col-lg-offset-2" style="border: 1px solid black;">
    		<!--	//把每行分成12列，col-lg-2：lg代表屏幕的宽度，是个可变的值，lg代表最大，2代表这个元素占12列中的几列-->
    		<!--col-xs-offset-2 是列偏移的写法，这个元素会向右边偏移两列-->
    			1111
    		</div>
    		<div class="col-xs-4 col-lg-4 col-md-2 col-sm-1" style="border: 1px solid black;">
    			<!--//把每行分成12列，col-lg-2：lg代表屏幕的宽度，是个可变的值，lg代表最大，2代表这个元素占12列中的几列-->
    			<!--屏幕尺寸可以设置多个值，当不同设备访问时，会执行不同的设置-->
    			<!--如果在一行中的列数之和大于12列，那么后面的元素就会自动排列到第二行-->
    			<!--
    				lg PC大屏
    				md PC小屏幕
    				sm 平板屏幕
    				xs 智能手机
    			-->
    			1111
    		</div>
    	</div>
    </div>
    
  </body>
</html>

内师大树莓小队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap栅格网页布局开发

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
复制链接

扫一扫