Bootstrap+Jquery笔记

Bootstrap网格系统简介

bootstrap官方默认分为:小屏幕（min-width:480px）、中屏幕（min-width:768px）、大屏幕（min-width:992px）、大型电脑（min-width:1200px）。

---

使用网格系统布局时，行类.row必须放在.container中，以行来创建列水平组。官方预定义网格列类有col-xs-* 、col-sm-* 、 col-md-* 、 col-lg-* 分别对应上面屏幕大小。* 号对应取值范围（1-12）也就是说将列划分为均等12份。例如：

<div class="container">    <div class="row">        <div class="col-xs-4 col-sm-3 col-md-6">一个块</div>        <div class="col-xs-4 col-sm-3 col-md-6">一个块</div>        <div class="col-xs-4 col-sm-3 col-md-6">一个块</div>        <div class="col-xs-4 col-sm-3 col-md-6">一个块</div>    </div></div>

简要说明：当在小屏幕上时，块以每行三个排列；当在中屏幕时，块以每行四个排列；当在大屏幕时，块以每行两个排列。这就是bootstrap网格系统简单布局。下面是我设计的一个网页简单展示：

• 大屏幕

• 小屏幕

鼠标悬浮效果多模块 （上图）

• 页面代码

<div class="demo"><a href="" class="myLink" >       <img src="demo1.jpg" alt="" class="firstImg">       <img src=".demo.jpg" alt="" class="secondImg"></a></div><div class="demo"><a href="" class="myLink" >       <img src="demo1.jpg" alt="" class="firstImg">       <img src=".demo.jpg" alt="" class="secondImg"></a></div><div class="demo"><a href="" class="myLink" >       <img src="demo1.jpg" alt="" class="firstImg">       <img src=".demo.jpg" alt="" class="secondImg"></a></div>

• Jquery代码

$(function(){    //初始化将第二张隐藏    $('.firstImg').show();    $('.secondImg').hide();    //鼠标当前进入区域效果    $.each( $('.demo'),function () {        $(this).mouseenter(function () {            //给当前块增加边框阴影效果            $(this).css('box-shadow','1px 1px 8px gray');        })    })    $.each($('.myLink'),function () {        $(this).mouseenter(function () {            $(this).find('img').eq(0).hide();            $(this).find('img').eq(1).show();        })    })    //鼠标当前离开区域效果    $.each( $('.demo'),function () {        $(this).mouseleave(function () {             //移除当前块边框阴影效果            $(this).css('box-shadow','none');        })    })    $.each($('.myLink'),function () {        $(this).mouseleave(function () {            $(this).find('img').eq(1).hide();            $(this).find('img').eq(0).show();        })    })})

---

以上仅供学习交流，有错之处还望指出。新浪微博：唐智勤Wz。个人邮箱:[e-mail]