Bootstrap3.0学习第二轮：栅格系统原理

最新推荐文章于 2018-10-16 17:31:29 发布

上漂的程序猫狗

最新推荐文章于 2018-10-16 17:31:29 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/ggjlvzjy/article/details/20455521

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.js">
        </script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js">
        </script>
    </head>
    <body>
        </div>
		<div class='container'>
			<div class='page-header'>
				<h1>案例：从堆叠到水平排列</h1>
			</div>
			<div class='row'>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>第一类</div>
				<div class='col-md-1'>col-md-1</div>
			</div>
			<h1></h1>
			<div class='row'>
				<div class='col-md-8'>col-me-8</div>
				<div class='col-md-4'>col-me-4</div>
			</div>
			<h1></h1>
			<div class='row'>
				<div class='col-md-4'>col-me-4</div>
				<div class='col-md-4'>col-me-4</div>
				<div class='col-md-4'>col-me-4</div>
			</div>
			<h1></h1>
			
			<div class='row'>
				<div class='col-md-6'>col-me-6</div>
				<div class='col-md-6'>col-me-6</div>
				<div class='col-md-6'>col-me-6</div>
			</div>
		</div>
		
		
    </body>
</html>

很明显这就是堆叠的效果，就是将浏览器的宽度调为比较小的时候

Bootstrap3.0学习第三轮：栅格系统案例三联