Bootstrap3.0学习第二轮(栅格系统原理)

时间 2021-08-13 标签 css html 前端 html5 jquery bootstrap app less 编辑器 ide

Bootstrap3.0系列导航css

1.BootStrap学习从如今开始 http://www.cnblogs.com/aehyok/p/3381651.htmlhtml

2.Bootstrap3.0学习第一轮(入门) http://www.cnblogs.com/aehyok/p/3398359.html前端

　　经过前面两篇博文的简单介绍，大体对于Bootstrap有了初步的了解。因为本身也只是想经过Bootstrap官网来进行简单的学习，本身可以随便搞个不是太搓的页面就能够了。因此若是你是新手或许能够来看看，对你还有那么一点儿帮助，高手请飘过。html5

《学习第一轮》中也只是简单的介绍了如何下载文件，及进行引用下载的文件，尚未真正的进入前端的设计学习中。我也看到了广大博友们对Bootstrap3.0也具备很大的兴趣，有以前就使用过的大牛，也有和我同样正打算学习一下的盆友、小菜。至于回复中比较多的就是：但愿能有个系列，固然我也很但愿本身能很好的规划列一个系列，而后按照这个大纲进行便可。不过本人能力有限，因此只好跟随本身的喜爱来进行学习了。jquery

　　声明：写做能力真是不济，还望各位看官见谅。若有错误，请及时通知，本人必会在最短的时间进行更正，固然更但愿能有更多的人来一块儿学习。bootstrap

栅格系统（布局）app

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

我在这里是把Bootstrap中的栅格系统叫作布局。它就是经过一系列的行（row）与列（column）的组合建立页面布局，而后你的内容就能够放入到你建立好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工做原理：编辑器

行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。ide
使用行（row）在水平方向建立一组列（column）。
你的内容应当放置于列（column）内，并且，只有列（column）能够做为行（row）的直接子元素。
相似Predefined grid classes like .row and .col-xs-4 这些预约义的栅格class能够用来快速建立栅格布局。Bootstrap源码中定义的mixin也能够用来建立语义化的布局。
经过设置padding从而建立列（column）之间的间隔（gutter）。而后经过为第一和最后同样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个.col-xs-4来建立。

DW6编码实现

Okay勒，下面开始写代码了额。首先上一张图看看我使用的编辑器，以前在学校学习Html+CSS的时候使用较多的工具。

而后新建一个HTML文档，选择类型HTML5

建立好后，另存为与上一节的讲解中js、css文件夹的同一目录下。

layout.html就是我刚刚建立的文件。Bootstrap.html也是上一节中建立的第一个html页面。

如今能够将Bootstrap.html中的代码所有Copy到layout.html页面。

而后在body标签下添加以下代码

 <h1>Hello, world!</h1>
 <h2 class="page-header">区域一</h2>
 <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 <h2 class="page-header">区域二</h2>
 <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 <h2 class="page-header">区域三</h2>
 <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>

这几个标签你们应该都能看的明白，最基础最简单的。

添加完后layout.html页面全部代码以下

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>Hello, world!</h1>
 <h2 class="page-header">区域一</h2>
 <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 <h2 class="page-header">区域二</h2>
 <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 <h2 class="page-header">区域三</h2>
 <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
 <script src="js/jquery-2.0.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 </body>
 </html>

固然效果也很简单，我仍是把截图放上，能够进行对比。

优化一：能够发现上图的页面效果占满全屏，咱们能够经过Bootstrap 样式类对上面的内容进行居中。

 <div class="container">
  .........以前上面添加在body标签下的代码</div>

效果以下

能够发现container这个类设置了宽度，而且可让内容显示在页面的中间。

优化二：将三个区域显示在同一排，而且平均分红三栏。

首先为三个区域添加一个容器，可使用div，而且为div添加一个类 <div class="row">.

而后咱们为每一个小的区域也添加一个容器div，而且为div添加一个类<div class="col-xs-4">

简单代码实现以下

 <div class="container">
 <h1>Hello, world!</h1>
 <div class="row">
 <div class="col-xs-4">
     <h2 class="page-header">区域一</h2>
     <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 </div>
  <div class="col-xs-4">
     <h2 class="page-header">区域二</h2>
     <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
 </div>
  <div class="col-xs-4">
     <h2 class="page-header">区域三</h2>
     <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
     </div>
     </div>
 </div>

效果以下

的确排成一列，而后分红三栏。再结合一下上面栅格系统的6部原理。是否是懂一点了，反正我本身懂了不少。经过一样的方式能够建立出比较复杂的网格布局页面。只须要在布局使用的容器上面添加相应的网格布局的类。好比说若是内容占用6个网格，那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，而后在同一排的周围进行使用带有row类的容器。

总结

本节主要学习的布局（栅格系统），经过简单的实例来理解它的工做原理。

使用过的类有:

　　1..container:用.container包裹页面上的内容便可实现居中对齐。在不一样的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。

2..col-xs-4:这个类经过"-"分为三个部分，第三个部分的数字做为一个泛指，它的范围是1到12。就是能够把一个区域分为12个栏，这个要和row类联合使用。

其实这个布局很像HTMl中的Table布局TR行和TD列吧。