Bootstrap

最近学了一个非常好用的CSS框架Bootsrap.接下来跟大家分享一下我所学的东西。首先Bootstrap是基于html5和css3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

首先要用到这样的一个工具必须去下载一个文件包，然后把他内置的一些源码引进自己的代码里面。这些文件都是有两种样式的，一种是有.min.css,另一种是直接.css，这两种不同的样式其实内容是一样的，只是一个是压缩了的，一个是未压缩的，压缩的格式是引进我们的代码里面的，未压缩的是方便我们去看它的源代码。

Bootstrap是采用响应式的布局理念。响应式 布局是说一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。现在用户浏览网页所用的工具越来越多样化，不仅仅局限于电脑上，平板，智能手机都可以。并且市面上的显示器的尺寸也是品种繁多，那么怎么让自己设计的网页能够不论客户运用什么工具打开看到的效果都一样呢。都不会出现布局的混乱呢，这就需要运用到响应时的布局。即根据屏幕尺寸的大小来改变所做网页的样式，运用几套方案来满足客户的需求。

Bootstrap采用了网格系统，顾名思义是把屏幕分成一个格子一个格子，再通过内容占几个格子和移动几个格子来进行的布局。Bootstrap 的默认网格系统是 把一个宽940px 的方框，一共分成了12列。在网格中，通过 元素的'class="row"' 创建行并且“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding），又通过 class="col-xs-x"' 创建列，其中后面那个 x 必须是一个正整数，应为它代表的是宽占了几个格子。由于总共只有12个格子所以所有的x的总和不能超过12。一个好看的布局肯定是凹凸有致的而不是方方正正的，所以肯定存在着布局的移动这个时候我们就需要用到一个叫“class=.col-md-push-x”这个x也就表示往右推动了几个单元格子，从来来实现了板块的移动。 当然在行和列也是可以实现嵌套的，也就是在你创建好了的列里面在嵌套一个row，这时候会生成新的12个格子，这些格子的总大小等于父元素的大小。

Bootstrap的强大当然不仅仅是这些布局的效果，它还给我们提供了许多的CSS样式和组件，这些都不需要我们自己去写。只需要修改元素的class就可以实现，包括字体的颜色，大小，各种按钮的样式，表单，表格的样式，警告框和进度条等等。这些我们都不用自己去写，直接看准自己想要的样式和风格，复制它提供给我们的代码或者改class就可以在我们自己写的页面上出现这些好看的样式了。当然这么强大的工具肯定也是有JS的插件的，同样是找到自己喜欢的效果，然后复用他的代码。