Bootstrap特性、设计和组件-20140519

特点

Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

响应式设计 
responsive.less中提供了一组media query: 智能手机《=480px
流式列，非固定宽度 垂直平板《=767px
流式列，非固定宽度 水平平板》=768px
默认》=980px
大分辨率》=1200px

组件
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。


在这里说一个小问题

第一行代码未加input,垂直不能对齐。第二行代码中加入input控件，对齐的就很好，如何在不加input的情况下垂直对齐

<form name="form1" class="form-horizontal "  >  
  <div class="control-group">  
    <span class="control-label">名称</span>  
    <div class="controls form-inline">  
      <label class="inline" for="inputKey">测试数据</label>  
    </div>  
  </div>  
  
  
  <div class="control-group">  
    <span class="control-label">联系人</span>  
    <div class="controls form-inline">  
      <label for="inputKey">测试联系人</label>  
      <input class="input-xlarge focused" name="Phone" type="text" >  
    </div>  
  </div>  

因为加了input整个div的高度变了，随便用chrome或者ff的工具看一下就明白了
解决办法么要么自己改css，要么在第一个label后面加一个这个

<div style="height:30px;display: inline-block;margin-bottom: 0;vertical-align: middle;"></div> 

作用就是和下面的input意义一样，只不过是个空的div而已