Bootstrap的一些笔记——网格系统

最新推荐文章于 2019-10-22 15:23:37 发布

friskit

最新推荐文章于 2019-10-22 15:23:37 发布

阅读量4.9k

点赞数 1

分类专栏：前端文章标签：网格 class div less

本文链接：https://blog.csdn.net/friskit/article/details/7250121

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话说Bootstrap提供了一种以12格为基数的网格，可以通过这些方式获得十二分之n的布局排列（横排）。

<div class="span1"></div>
<div class="span2"></div>
<div class="span3"></div>
<div class="span4"></div>
<div class="span5"></div>
<div class="span6"></div>
<div class="span7"></div>
<div class="span8"></div>
<div class="span9"></div>
<div class="span10"></div>
<div class="span11"></div>
<div class="span12"></div>

显示出来就是这个样子（span本来是不可见的div，为了能看见，我用了bootstrap里头的样式表）：

代码是这样的：

<section id="grid-system">
	<div class="container">
		<div class="row show-grid">
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
			<div class="span1">1</div>
		</div>
		<div class="row show-grid">
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
			<div class="span2">2</div>
		</div>
		<div class="row show-grid">
			<div class="span3">3</div>
			<div class="span3">3</div>
			<div class="span3">3</div>
			<div class="span3">3</div>
		</div>
		<div class="row show-grid">
			<div class="span4">4</div>
			<div class="span4">4</div>
			<div class="span4">4</div>
		</div>
		<div class="row show-grid">
			<div class="span6">6</div>
			<div class="span6">6</div>
		</div>
		<div class="row show-grid">
			<div class="span5">5</div>
			<div class="span7">7</div>
		</div>
		<div class="row show-grid">
			<div class="span4">4</div>
			<div class="span8">8</div>
		</div>
		<div class="row show-grid">
			<div class="span3">3</div>
			<div class="span9">9</div>
		</div>
			<div class="row show-grid">
			<div class="span2">2</div>
			<div class="span10">10</div>
		</div>
			<div class="row show-grid">
			<div class="span1">1</div>
			<div class="span11">11</div>
		</div>
	</div>
</section>

Bootstrap的布局方式有两种，一个是fixed一个是fluid。分别是

<body>
  <div class="container">
    ...
  </div>
</body>

和

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

还有一部分是用到less修改一些尺寸的。最近暂时用不上。先不多说了⋯⋯

friskit

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap的一些笔记——网格系统

话说Bootstrap提供了一种以12格为基数的网格，可以通过这些方式获得十二分之n的布局排列（横排）。显示出来就是这个样子（span本来是不可见的div，为了能看见，我用了bootstrap里头的样式表）：代码是这样的： 1 1 1 1 1 1 1 1 1 1 1 1
复制链接

扫一扫