1.CSS12栅格系统是整个Bootstrap的核心功能

2.Bootstrap所有的jquery都要用到jquery1.10+

3.栅格系统的工作原理：

一行数据必须包含在.container或.container-fluid中

使用row在水平方向创建一组column

具体内容要放在column中只有column才是row的直接子元素

内置很多样式

通过padding创建column之间的间隙

1-12表示跨越范围

 

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

 

 超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

 一.单词部分

container固定宽度  container-fluid  100%宽度  row行

column 列  offset偏移  form-control表单元素  default默认

primary默认的  img-response响应式图片  img-rounded将图片变为圆角

img-circle圆形图  img-thumbnail伸缩图

二.预习部分

1.什么是栅格系统

把网页宽度平分12份，并且可以自由搭配

2.写出可以作为按钮使用的标签或者元素

btn-success，btn-default，btn-warning

btn-danger，btn-link，btn-info，btn-primary

三.练习部分

1.制作美联英语在线VIP页面--师资模块

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美联英语在线VIP-真人在线</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        .container{
            background-color: rgba(230,215,255,0.36);
        }

        .row{
           margin-left: 75px;
            margin-right: 75px;
        }
        .row .row{
            margin-top: 10px;
        }
        .col-md-7{
            padding: 120px;
            background-image: url("image/oleg.png");
            background-repeat: no-repeat;
            background-size: contain;
        }
        .col-md-3{
            padding: 120px;
            background-image: url("image/oksana.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #one{
            padding: 120px;
            background-image: url("image/ewelina.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #two{
            padding: 120px;
            background-image: url("image/juraj.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #three{
            padding: 120px;
            background-image: url("image/tmore.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #ce{
            margin-left: 200px;
        }
        #ce1{
            margin-left: 300px;
        }
      /*  .col-md-6{
            !*margin-left: auto;*!
        }*/
       /* 记住一个新的东西通配作用*/
       [class*="col-"]{
            border: 15px solid white;
            background-color: rgba(86,61,124,0.15);
           /* border: 15px solid rgba(86,61,124,.2);*/
        }

        </style>
</head>
<body>
<div class="container">
  <div class="row"><div class="col-md-6 col-md-offset-3"><h2>2000+全球师资  100%欧美外教</h2></div></div>
    <!--<div id="ce1"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div>-->
    <div class="row"><div class="col-md-6 col-md-offset-3"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div></div>
<div class="row">
    <div class="col-sm-12 col-md-7"></div>
    <div class="col-sm-12 col-md-3 col-md-offset-1"></div>
</div>
    <div class="row">
        <div class="col-lg-4 col-md-4" id="one">.col-md-4</div>
        <div class="col-lg-4 col-md-4" id="two">.col-md-4</div>
        <div class="col-lg-4 col-md-4" id="three">.col-md-4</div>
    </div>
</div>
</body>
</html>

 

2.制作美联英语在线VIP页面--特色服务模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美联英语</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<style>
    .col-md-10{
        margin-top: 50px;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3"><h2>更多特色服务</h2></div
    ></div>
    <!--<div id="ce1"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div>-->
    <div class="row"><div class="col-md-6 col-md-offset-3"><h4>4+核心优势N+成效保障</h4></div>
    </div>

    <div class="row">
        <div class="col-xs-6 col-md-2"><img src="image/3.png"></div>
        <div class="col-xs-6 col-md-10"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br>
        在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。
            无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开
            ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div>
        <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br>
        在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。
            无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开
            ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div>
    </div>

    <div class="row">
        <div class="col-xs-6 col-md-2"><img src="image/5.png"></div>
        <div class="col-xs-6 col-md-10"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br>
        在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。
            无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开
            ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div>
        <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br>
        在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。
            无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开
            ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div>
    </div>
</div>
</div>
</body>
</html>

3.制作 全国 公安机关互联网安全管理服务平台登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全国公安机关互联网系统</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        .row{
            border: 1px #000000 solid;
        }
        #main{
        background-image: url("image/adbg.png");
        height: 385px;
        }

        </style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-1"><img src="image/logo.png" width="281px" height="80px"></div
        >
        <div class="col-md-2 col-md-offset-5">
            <input type="text" class="input-sm form-control" placeholder="请输入要搜索的内容">

        </div>
        <div class="col-md-1"><input type="button" class="btn btn-block" value="搜索"></div>
        <div class="col-md-4 col-md-offset-4">
        <br>
            <span><strong>首页</strong></span>  公共查询  常见问题  政策法规  备案需知   备案展厅
        </div>
    </div>
    <div class="row" id="main">
        <div class="col-md-3 col-md-offset-1"><img src="image/xcy.png" width="281px" height="80px">
        <img src="image/liucheng.png">
        </div>
        <div class="col-md-3 col-md-offset-5">
<br><br><br><br>
            <form action="#" style="background-color: white">
                普通用户
                <div class="form-group">
                    用户名：<input class="input-sm" type="text" placeholder="">
                </div>
                <div class="form-group">
                    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input class="input-sm" type="text" placeholder="">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="">记住密码<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="btn btn-danger" value="登录">
                <br>没有账号,注册
            </form>

    </div>
</div>
    <div class="row">
        <div class="col-md-3 col-md-offset-5">
            <p>uyhijnmklghjklcvghjkfghjk</p>
            <p>uyhijnmklghjklcvghjkfghjk</p>
            <p>uyhijnmklghjklcvghjkfghjk</p>
        </div>
    </div>
</div></body>
</html>

4.制作美联英语在线VIP页面-微电影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微电影</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        .container{
            background-image: url("image/bg3.jpg");
            width: 100%;
            height: 1000px;
        }
        #ziti{
            font-size: 25px;
            color: white;
        }
    </style>
</head>
<body>
<div class="container">
    <br><br><br>
    <div class="row">
        <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-4" id="ziti">学英语，看世界，小美带你GO学员</div>
        <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-5"><img class="img-responsive" src="image/block-split.png"></div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh
            </div>
        <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh
        </div>
        <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh
        </div>
        <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh
        </div>

    </div>
</div>
</body>
</html>

 

总结

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

  原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997