初步认识bootstrap

今天我希望能初步了解一下bootstrap，首先看一下百科上对于bootstrap的简介：Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

在我看来，bootstrap其实是一个类似于css样式表的文件，同样可以通过bootcdn找到相应的网址并且通过link标签引入html文件。

首先一个比较实用的功能就是栅格系统，如果想要竖向分格可以这样写：

<div class="col-md-4"></div>它可以竖向将屏幕分为12份，4代表这个div占据4份，md表示在浏览器界面大小为中号以上时该格式有作用。可以用sm(小号）xs(极小）来替换。

有两个常用的类，是form-control和form-group，用在form表单里。用form-in-line类可以把相应的标签放到同一行中。用row类可以消除标签的左右边距。用container类后再单独设置其宽度 max-width可以让内容自动居中。还有input-group类，可以改变input标签样式。如：

<div class="input-group">

<div class="input-group-addon>￥</div>

<input type="text" class="form-control">

</div>

就可以在输入框前加入一个￥符号。

还有可以用于button标签的类，一般用法<button class="btn btn-default">iii</button>

这样可以设置一个比较好看的按钮格式,还有btn-primary, btn-danger,在后面添加btn-lg,btn-sm,btn-xs可以控制按钮的大小。

 在a标签和input标签中也同样可以添加这个类，它们将变成按钮的样式。在后面如果添加btn-block则按钮会占容器的整宽。

按钮组可以帮助我们很好地整理有关系的按钮，在已经写好的若干按钮外面套一个<div class="btn-group"></div>即可连接相应的按钮，希望纵向连接按钮，可以使用<div class="btn-group-vertical"></div>，在若干个写好的group外面套一个

<div class="btn-toolbar"></div>可以使按钮组横向排列。在btn-group后面再添加btn-group-lg等可以改变其大小。