对于一个小白来说，遇到的前端问题（3）

1. 写在前面

一个小白前端，最大的问题，就是健壮性啊，上面需求一说要改，完全不知掉怎么改啊，这界面是越改越乱啊，尽管我用了bootstrap,可我完全没有理解栅格系统的精髓啊！然后又出了这么一系列的问题，还需要不断的解决和认识。

2. boostrap的栅格系统

boostrap提供的栅格系统还是比较好用的，但是我平时都不太注意，总是喜欢用col-md-*像row和container都没怎么用，然后，然后就出大问题了。一改全乱了。

正规的写法应该是，最外面是container，然后每一行用row,最后使用col-md-*改变列的大小。也就是说，要这么嵌套着来：

<!--这是整体--><div class="container">    <!--这是第一行-->    <div class="row">        <div class="col-md-4"></div>        <div class="col-md-4"></div>        <div class="col-md-4"></div>    </div>    <!--这是第二行-->    <div class="row">        <div class="col-md-2"></div>        <div class="col-md-8"></div>        <div class="col-md-2"></div>    </div>    <!--这是第三行-->    <div class="row">        <div class="col-md-6"></div>        <div class="col-md-6"></div>    </div></div>

这样子才是一个完整的栅格系统，不然的话，你一改，就全乱了。而且，增加了container还能让你有padding，不用把界面全部充满，显得更加美观。

3. 居中

居中有二种，一种是文字居中，一种是元素居中，一种是子元素居中。哎，这不是三种么，其实第二种和第三种主要看this是谁了，如果你把居中的主体放在子元素，就是第二种，如果你把居中的主体放在父窗体上，那么第三种也是第二种。因此还是2种。

文字居中这个应该很好做把，只需要增加一个CSS样式就可以了:

text-align:center

但是，想把元素居中，是另外一回事：

margin:0 auto;

这样就可以让它居中于父窗体了。

但是要注意的是，我现在讲的，都是十分简单的情境下，如果遇到复杂的，可能需要调节的细节还有很多，但我是小白，我不懂。使用栅格系统能解决常见的一些问题，然后搭配这种简单的对齐样式，就差不多可以达到及格的水平了。

4. 页面加载完毕后的js

我想说的是这个windows.onload和$(document).ready()这两个的区别。因为我们都知道，等页面加载完毕后的执行函数都要放到这两个函数里。那么这两个到底什么时候执行，有什么不同。

其实这两个的主要在于加载时机和运作方式上。

4.1 windows.onload

先说windows.onload，它的用法其实是和事件一样：

windows.onload=funciton(){//逻辑代码};

它的运行时机在，所有的页面内容都加载完毕后，注意是所有，如果是建房子搬新家的话，这个相当于把房子建好了，装修好了，所有家具都全了，然后再搬进去住。

显然，这个只有一个时间点，因此它不能写多个，如果写多个，前面的会被后面的覆盖掉。

但是它有个缺点，那就是加载速度慢，因为图片这种响应慢的话，它就不会执行。

4.2 $(document).ready()

再来说说$(document).ready()，这个不是js原生的，是Jquery的，因此封装性更好一些，它和上面你的不同之处在于，这个只需要整个页面的框架都搭好了，就开始执行，页面里的图片啊之类的，它就不管了。这相当于，把房子建好了，装修好了，家具还没搬进去，你人就先进去了。

当然你可以进去很多次，因为这是一个时间段。所以这时候，你可以写多个，而且是顺序执行的。当然这肯定是归功于jquery了，是它封装了类似C#的事件队列机制，才能保证这种模式的存在。

这个执行就比较快了，因为一个纯文本页面加载速度近乎是在毫秒级。

当然，如果还想继续深入了解页面加载的整个过程，可以参考页面加载过程详解。

5. 小结

我是一个小白，小白鼠一样，总是在实验的路上，还有很多我不懂的，在具体的项目中遇到了，我再来总结。