@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--设置字符集utf-8编码-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
<title>ChapterFour--第四章网格系统</title>
<link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="h4 text-center">---------------------------------网格系统--------------------------------</div>
<!--网格系统-->
<!--实现原理-->
<!--网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份
(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，
就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份-->
<!--在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值
（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）-->
<div class="container">
<div class="row">
<div class="col-md-1" style="background:#d00;">col-md-1</div>
<div class="col-md-1" style="background:#c00;">col-md-1</div>
<div class="col-md-1" style="background:#b00;">col-md-1</div>
<div class="col-md-1" style="background:#a00;">col-md-1</div>
<div class="col-md-1" style="background:#900;">col-md-1</div>
<div class="col-md-1" style="background:#800;">col-md-1</div>
<div class="col-md-1" style="background:#700;">col-md-1</div>
<div class="col-md-1" style="background:#600;">col-md-1</div>
<div class="col-md-1" style="background:#500;">col-md-1</div>
<div class="col-md-1" style="background:#400;">col-md-1</div>
<div class="col-md-1" style="background:#300;">col-md-1</div>
<div class="col-md-1" style="background:#200;">col-md-1</div>
</div>
<div class="row">
<div class="col-md-1" style="background:#d0f;">col-md-1</div>
<div class="col-md-1" style="background:#c0f;">col-md-1</div>
<div class="col-md-1" style="background:#b0f;">col-md-1</div>
<div class="col-md-1" style="background:#a0f;">col-md-1</div>
<div class="col-md-1" style="background:#90f;">col-md-1</div>
<div class="col-md-1" style="background:#80f;">col-md-1</div>
<div class="col-md-1" style="background:#70f;">col-md-1</div>
<div class="col-md-1" style="background:#60f;">col-md-1</div>
<div class="col-md-1" style="background:#50f;">col-md-1</div>
<div class="col-md-1" style="background:#40f;">col-md-1</div>
<div class="col-md-1" style="background:#30f;">col-md-1</div>
<div class="col-md-1" style="background:#20f;">col-md-1</div>
</div>
</div>
<div class="h4 text-center">---------------------------------工作原理--------------------------------</div>
<!--Bootstrap框架的网格系统工作原理如下：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container">
<div class="row"></div>
</div>
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距
（margin）来抵消内距(padding)的影响-->
<div class="container"><!--container容器-->
<div class="row">
<div class="col-md-12" style="background:#0094ff;">col-md-12</div>
</div>
<div class="row">
<div class="col-md-2" style="background:#55c5d0;">col-md-4</div>
<div class="col-md-10" style="background:#4cff00;">col-md-8</div>
</div>
<div class="row">
<div class="col-md-12" style="background:#0094ff;">col-md-12</div>
</div>
</div>
<div class="h4 text-center">---------------------------------基本用法--------------------------------</div>
<!--网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，
我们都以中屏（970px）为例进行介绍，其他屏幕的使用也类似这一种。-->
<!--1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性-->
<!--列偏移-->
<!--有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。
这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名
“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度-->
<!--不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，
要保证列与偏移列的总数不超过12，不然会致列断行显示-->
<div class="container">
<div class="row">
<div class="col-md-2" style="background:#600;">.col-md-2</div>
<div class="col-md-4 col-md-offset-1" style="background:#0ff;">col-md-4 col-md-offset-1</div>
<div class="col-md-5" style="background:#000;">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-4" style="background:#900;">.col-md-4</div>
<div class="col-md-7 col-md-offset-1" style="background:#00ff90;">列向右移动四列的间距</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-1" style="background:#b6ff00;">col-md-4 col-md-offset-1</div>
<div class="col-md-4" style="background:#0094ff;">col-md-4</div>
<div class="col-md-3" style="background:#6140ea;">col-md-3</div>
</div>
</div>
<div class="h4 text-center">---------------------------------列排序--------------------------------</div>
<!--列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*”
(其中星号代表移动的列组合数)-->
<div class="container">
<div class="row">
<div class="col-md-4" style="background:#00ff90;">.col-md-4</div>
<div class="col-md-8" style="background:#0094ff;">.col-md-8</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8" style="background:#00ff90;">向右推8個</div>
<div class="col-md-8 col-md-pull-4" style="background:#0094ff;">向左拉4個</div>
</div>
</div>
<div class="h4 text-center">---------------------------------列的嵌套--------------------------------</div>
<!--Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，
然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，
就是当前外部列的宽度。来看一个简单示例：-->
<!--<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8" style="background:#567;">
我的里面嵌套了一个网格
<div class="row" style="background:#900;">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>-->
<div class="container">
<div class="row">
<div class="col-md-4" style="background:#ffd800;">col-md-4</div>
<div class="col-md-4" style="background:#4cff00;">col-md-4</div>
<div class="col-md-4" style="background:#0094ff;">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="background:#ff1800;">col-md-4</div>
<div class="col-md-8" style="background:#4c4f00;">
<div class="row">
<div class="col-md-6" style="background:#faca00;">col-md-6</div>
<div class="col-md-6" style="background:#23ff00;"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6" style="background:#ff18f0;">col-md-6</div>
<div class="col-md-6" style="background:#4c4f00;"> col-md-6 </div>
</div>
</div>
</div>
//响应式的列重置
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow:inset 1px -1px #444,inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
<div class="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow:inset 1px -1px #444,inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua,Ut enim ad minim veniam,quis nostrud eserditation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut.</p>
</div>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-xs-6 col-sm-3"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tepor incididunt ut labore et dolore magna aliqua.Ut enim ad minim</p>
</div>
</div>
//偏移列
<div class="container">
<h1>Hello,World!</h1>
<div class="row">
<div class="col-xs-6 col-md-offset-3"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
</div>
</div>
</div>
//嵌套列
<div class="container">
<h1>Hello,World!</h1>
<div class="row ">
<div class="col-md-3" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet ,consectetur adipisicing elit
</p>
</div>
<div class="col-md-6" style="background-color:#B18904;box-shadow:inset 1px -1px 1px #444;">
<h4>第二列-分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color:#B18904;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx Culpa semiotics.Pinterest assumenda minimm organic quis.
</p>
</div>
</div>
<div class="col-md-6" style="background-color:#B18904;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut ladore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="row">
<div class="col-md-6" style="background-color:#B18904;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color:#B18904;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
</div>
</div>
</div>
</div>
</div>
//列排序
<div class="container">
<h1>Hello,world!</h1>
<div class="row">
<p>
排序前
</p>
<div class="col-md-4"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
我在右边
</div>
</div>
<br />
<div class="row">
<p>
排序后
</p>
<div class="col-md-4 col-md-push-8"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
我在左边
</div>
<div class="col-md-8 col-md-pull-4"style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px #444;">
我在右边
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
