Bootstrap（一）基础小知识

1、bootstrap引用时，有两种：一种是开发版（就是没有压缩 方便看源码和修改）；另一种是压缩版（压缩文件更小 便于项目发布）。
2、bootstrap在使用时调整元素的排列方式 可以外面加div 然后加入像form-inline、input-group；control-label 可以使标签采用父级元素css样式。css样式 .classA .classB{….}表示对布局类classA下的classB采取修改；而.classA ，.classB{….}表示两个类做同样的css样式。
3、bootstrap 栅格布局：主要是使用了媒体查询来适应不同的四种区间范围大小的显示屏，以此来调整布局显示。其一行最多排列12列（默认按此划分），col-xs- .col-sm- .col-md- .col-lg-分别对应四种情况的布局，其中后面接数字比如div class中为.col-md-6表示当1200px>宽度≥992px时 一个元素占六列，如果原来一行12列元素那么这时就会是一行只有两列元素。为了适应多种宽度可以class中 多加几个属性 比如再加.col-sm-12表示 宽度在缩小至750至992px之间时 一个元素就会占据一行的十二个列 所以这时只有一行只有一列元素当然还有列偏移col-md-offset-2表示下一个元素右偏移两个列 但左边元素、中间偏移列、右边元素列总和要等于12 否则大于12就会在下一行排列。
4、min-width：对于网页布局，需要考虑页面被缩放时页面会变化，这个时候一个简单的方法就是对某些div设置最小宽度比如min-width：1000px;当浏览器窗口被缩小后，div宽度不会小于1000px这个时候缩小页面会盖住内容而不是改变布局。采用float布局的时候，其元素会脱离文档流，即其内容会溢出父div块外，如果想让其在父块级范围内，可以在父块级内填充元素后面加一个div并使用clear：both；来使元素在父块级内。
5、在页面布局使左边的菜单栏经常与右边的内容栏高度不一样，这个时候可以把左边背景色与body背景色一直，或者采用js代码设置：jQuery(document).ready(function(){
var w_h=$(window).height(); var r_h=$(‘.right-content’).height();
var l_h=$(‘.leftsidebar_box’).height(); l_h=w_h>r_h?w_h:r_h;$(‘.leftsidebar_box’).height(l_h);
});