积跬步,聚小流------Bootstrap学习记录(4)

本文详细介绍了栅格系统的基本原理及应用技巧,包括固定布局、流布局、嵌套列、偏移列和列排序等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、基本栅格系统分析回顾

上一篇记录了最基本简单的栅格系统,简单的固定布局,先来回顾下需要注意的几个点:

* 布局要放在布局容器中,而固定布局中的布局容器含class="container";

* 可以用.row和.col-md-*等预定义类来快速的创建栅格布局;

* .row(行)必须防止在.container(容器)内,而只有.col-*-*(列)可以作为.row(行)的子元素,而内容必须放在列内;

* 如果一行包含的列大于12,多余的元素会作为一个整体另起一行排列;

像:

 <div class="row-fluid part-msg">
    	<div class="col-md-4 col-lg-2 col-sm-5">
        	  <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
        </div>
        <div class="col-md-4 col-lg-2 col-sm-5">
      		 <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
        </div>
        <div class="col-md-4 col-lg-2 col-sm-5">
      		 <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
        </div>
        <div class="col-md-4 col-lg-2 col-sm-5">
      		 <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />
        </div>
        <div class="col-md-4 col-lg-2  col-sm-5">
       		  <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
        </div>	
        <div class="col-md-4 col-lg-3 col-sm-5"><!-- 修改了这个地方的col-lg-2 -->
       		  <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />
        </div>
    </div>

看效果:


2、偏移列

通过class="col-md-offset-6"等类似来实现列的偏移,至于偏移的原理,我们可以看一下其中的部分源码:

@media (min-width: 768px) {/*根据视口的宽度设置的不同样式*/
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {<!--这里包含了列排序啊,第5部分讲述-->
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {/*offset都是通过margin-left来实现的*/
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}

这里需要注意的是.col-xs-*不支持偏移,这种情况我们可以通过添加空的表格来实现。


3、流布局

我们上面所说的都是针对固定布局,而实际上我们还是可以通过流布局的,而这时我们所需要做的修改就是讲container修改成container-fluid,row修改成为row-fluid,这样我们来看一下效果:


4、嵌套列

嵌套列的本职就是讲已经分开的列,再从内部进行分列,例如:

 <div class="row"><!-- 这里开始分列 -->
    	     <div class="col-md-8 col-sm-12 part-slide">
             	<img src="img/261877.jpg" alt="轮播的图片" />
             </div>
             <div class="clearfix visible-xs-block"></div>
             <div class="col-md-4 col-sm-12 part-info"><!--注意这一列是占用了4列栅格-->
             	<ul class=" col-md-offset-1"><!--但是内部的offset都是针对该列进行分栅格的-->
                    <li><h1>公告部分</h1></li>
                    <li >公告部分</li>
                    <li>公告部分</li>     
                    <li>公告部分</li>
                    <li>公告部分</li>
                    <li>公告部分</li>
                    <li>公告部分</li>                          
                </ul>
                <div class="row"><!--这里在其中的一个列中再一次分列,内部的再分列也是以该列为母版的-->
                    <div class="col-md-6"><!--注意这里是6哦-->
                    	第一部分
                    </div>
                     <div class="col-md-6">
                    	第二部分
                    </div>
                </div>
             </div>
    </div>

而来看一下效果:

这里需要注意的是.col-md-*都是针对上次元素的,而不是针对整个视口的。


5、列排序

在刚才公告新嵌套部分添加如下代码:

  <div class="row">
                    <div class="col-md-2  col-md-push-8">
                    	8
                    </div>
                     <div class="col-md-2  col-md-push-4">
                    	4
                    </div>
                     <div class="col-md-2  col-md-pull-2">
                    	2
                    </div> 
                    <div class="col-md-2  col-md-pull-3">
                    	3
                    </div>
                    <div class="col-md-2  col-md-pull-4">
                    	1
                    </div>
                    <div class="col-md-2  col-md-pull-11">
                        11
                    </div>
                </div>

来看实现效果:

这里的排序是11最先,8最后,这里排序的原理是什么呢,我们还是来看下源码里怎么写的吧,返回头去看上方偏移列部分的源码,同时你肯定还记得这个:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;/*看看这里,看看这里*/
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

这就显而易见了吧,相对位置加上相应的right和left,当然可以排序了。


对于栅格系统的介绍比较杂乱,还有隐藏和显示,我们从源码中很容易看到它的实现方法,通过class的.visible-*或者.hidden-*来实现,而对于前文中提到的less mixin还是等以后单独再开一篇记录吧。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值