bootstrap初用新得2

##具体实现
1. 宽度无限的背景和始终居中的主题内容:
  首先是背景要用一个div1来做out-background,然后div1的兄弟元素div2来做container。对out-background进行决对定位,对container进行相对定位,并且margin:auto。这样container就会居中在body中并且在out-background的上面。out-background可以设置几个不同高度的子元素,这样,就可以为container里的不同的行做背景了。————其实,完全跟container内容无关也无所谓,不设置container的背景,它就是透明的!
2. 导航框:导航栏和logo的组合
 * 首先导航框一般都和搜索框共同存在header当中,有时他们会在一行中。用bootstrap的分列都不用自己去浮动就可以很好地区隔开导航栏。
 * 导航框中一般logo和导航栏会分在一起,如果用前景图当logo比较麻烦,直接让导航条们右浮动,然后在左边空白处加上一个背景图片就是。
 
3. 对12列布局的理解
 * container的宽指定了就不能进行响应式布局。指定了之后,我们每一行的width就会是这个值。
 * 行和列的宽度方向上的所有属性都不能去设置。因为它们划定的就是一个表格。
 * 行可以为它指定padding-top、bottom,以及height,但要注意的是,如果指定了height,就应该指定成准确值,因为指定了值之后height就无法自适应内容调整,内容有可能会穿出行。

4. 不断降低耦合性:

 * 一个元素的复合属性会覆盖单一属性,所以尽量避免对一个元素分在不同的选择器里进行多次设置。如有需要,也应该将单一属性放在复合属性之后设置。或者不使用单一属性。
 * 在一个区域内,尽量父元素框定内容区大小,子元素进行padding调整位置。或者直接父元素直接设置出padding和内容区大小。避免都在设置padding和大小的问题。

5. 主要用padding而不是margin:

 * 原因:margin一是存在兼容性的问题,比如IE6的双倍左边距。二是margin需要考虑太多问题,不能够孤立地进行使用:绑架父元素上下边距,垂直方向重叠,水平方向存在自动调整等问题……而padding不会存在与其它元素互相作用的问题。
 * 使用padding需要改变一种思维,即:
    
    元素与元素之间是不存在距离的,他们是紧靠着的!我们看到的距离是他们之间的内容的距离,而不是元素的距离!

    要改变思维,不要把元素单纯看成一个框,然后和其他元素相距多少。因为教学演示一般都是用一个一个色块,但真实的网页中,嵌套关系要深得多。

 * 把一个元素看成padding和content两部分。避免把border和margin也带入进来,因为不能简单化问题就很容易出现错误。耦合太多综合考虑的东西就太绕。

posted on 2015-09-21 09:02  袖珍汤锅  阅读(138)  评论(0编辑  收藏  举报

导航