Bootstrap3.0学习第二轮(栅格系统原理)
|
Bootstrap3.0系列导航 1.BootStrap学习从现在开始?http://www.cnblogs.com/aehyok/p/3381651.html 2.Bootstrap3.0学习第一轮(入门)??http://www.cnblogs.com/aehyok/p/3398359.html 通过前面两篇博文的简单介绍，大致对于Bootstrap有了初步的了解。由于自己也只是想通过Bootstrap官网来进行简单的学习，自己能够随便搞个不是太搓的页面就可以了。所以如果你是新手或许可以来看看，对你还有那么一点儿帮助，高手请飘过。 ? ? ? 《学习第一轮》中也只是简单的介绍了如何下载文件，及进行引用下载的文件，还没有真正的进入前端的设计学习中。我也看到了广大博友们对Bootstrap3.0也具有很大的兴趣，有之前就使用过的大牛，也有和我一样正打算学习一下的盆友、小菜。至于回复中比较多的就是：希望能有个系列，当然我也很希望自己能很好的规划列一个系列，然后按照这个大纲进行即可。不过本人能力有限，所以只好跟随自己的喜好来进行学习了。 声明：写作能力真是不济，还望各位看官见谅。如有错误，请及时通知，本人必会在最短的时间进行更正，当然更希望能有更多的人来一起学习。 栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
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,?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>
当然效果也很简单，我还是把截图放上，可以进行对比。
?<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,?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:用 ? ? ? 2..col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。 其实这个布局很像HTMl中的Table布局TR行和TD列吧。 暂时的理解就这些，代码直接复制粘贴就可以看效果，当然首先要把预先的css、js文件进行准备。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
