http://www.xiplips.com

                                                                  【必赢时时彩app】bootstrap删格系统如何理解-Bootstrap教程

                                                                  Bootstrap内置了一套响应式、移动设备优先的流式]栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

                                                                  我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

                                                                  网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

                                                                  在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。

                                                                  (1)第一步:创建栅格系统的容器

                                                                  <div class="container-fluid">  <div class="row">    ...  </div></div>

                                                                  解释:为了寄予栅格系统合适的排列和padding,要把每一行“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的。

                                                                  .container是固定宽度,居中显示:下面是Bootstrap中.container类的代码

                                                                  z.png

                                                                  .container-fluid是 100% 宽度:下面是Bootstrap中.container-fluid类的代码

                                                                  x.png

                                                                  (2)第二步:创建合适的栅格系统

                                                                  <div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div></div><div class="row">  <div class="col-md-8">.col-md-8</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-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div></div><div class="row">  <div class="col-md-6">.col-md-6</div>  <div class="col-md-6">.col-md,-6</div></div>
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:禁令解除!乌克兰总统下令开放切尔诺贝利隔离区 - 切尔诺贝利
                                                                  下一篇:没有了