欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap特性、设计和组件-20140519

程序员文章站 2022-07-12 21:31:06
...
特点

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而已