最近Bootstrap有点让我糊涂,在使用过程中,下拉菜单(dropdown)、按钮组(btn-group)、导航元素(nav)、导航栏(navbar)容易混淆,遂用闲暇时间琢磨琢磨(本文基于Bootstrap3)。
这几者个人理解有点递进的意思:
下拉菜单(dropdown)可以用在后3个中,组合起来可以称呼为:“按钮下拉菜单”或“导航下拉菜单”;
按钮与导航之间没有“合作使用”价值,所以没有什么联系;
导航元素(nav),一般以导航栏(navbar)的子元素出现,作为导航栏(navbar)的一部分。
组件分类及常用属性整理的表格如下:
Bootstrap组件名 | 父元素常用类名 | 子元素常用类名 | 控制元素的属性 |
---|---|---|---|
下拉菜单 | .dropdown | .dropdown-menu | data-toggle="dropdown" |
按钮组 | .btn-group | .btn | data-toggle="dropdown" |
导航元素 | .nav / .nav-tabs | .dropdown / .active | data-toggle="dropdown" |
导航栏 | .navbar | .nav / .navbar-header | data-toggle="dropdown" |
此表可以简单的看出:下拉菜单(dropdown)可以作为导航元素(nav)的子元素出现,导航元素(nav)又可作为导航栏(navbar)的子元素出现,层层嵌套。而控制元素(data-toggle)均可以在这些组件使用。
1. 下拉菜单(dropdown):
.dropdown-menu初始状态为display: none; 通过点击button按钮触发 data-toggle="dropdown",从而显示dropdown-menu,我们可以看到,data-toggle实际上是为父元素添加了一个"open"类,所以我们的.dropdown与.dropdown-menu的层级嵌套只能有一级。
2. 按钮组(btn-group):
按钮组主要用于将按钮对齐放在一起,值得一提的是:dropdown-menu不是必须与dropdown配合使用,但必须与data-toggle=“dropdown”配合使用。
还有一个细节挺有意思,按钮组只有两边的按钮出现了圆角效果。它们是同级元素,又没有单独的类,并且元素个数也不确定,这是怎么做到的呢?好奇的我找了下源代码,看到后不禁吓一跳,这css的伪元素运用的如此巧妙,巧妙见下图:
此外,btn-group里仍然可以嵌套btn-group,内层btn-group及其子元素在外层btn-group的圆角控制更为复杂些,这里就不再赘述,有兴趣的同学可以看下源码。
3. 导航元素(nav):
导航的应用率很高,几乎每个网站都有涉及,相当于网站目录的作用。来看看Bootstrap提供的导航样式(.nav-tabs)是如何设定的。
.nav类没有设置什么独特的样式,倒是 .nav-tabs为整行设置了1像素的底部边框,导航的子元素li均左浮动。开始的时候不理解子元素li标签设置-1像素下外边距的用意,为什么 a标签又设置1像素的透明边框,当看到.active类时才明白其中的用意:
.active中,子元素li的border有了颜色,但下边框仍为透明,而-1像素,正是把父元素高度减一,子元素底部透明边框正好将父元素(.nav-tabs)边框覆盖,这就形成了右图活动单元的样式。妙哉妙哉!(胶囊式导航(nav-pills)是为活动单元设置了独立的背景色,用法异曲同工)。
将下拉菜单(dropdown)作为导航元素(nav)的子元素即可形成导航下拉菜单。
我发现在Bootstrap中,ul和li标签的布局应用十分广泛,毕竟这样页面的逻辑层次更加分明,也利于搜索引擎优化。在bootstrap.css中也是大量使用了类似“ xxxx > li ”的子类选择器,这也就要求我们在用Bootstrap时,不可随意使用div布局。
4. 导航栏(navbar):(列举响应式导航栏)
到这里,我的混淆感已经烟消云散。此例,在导航栏(navbar)中,导航元素(nav)和下拉菜单(dropdown)都得到了完美的呈现。响应式导航栏在不同的分辨率有不同的呈现,并且在不改变布局的情况下,改变导航元素的显示方式等等,这些是如何实现的呢?
导航栏(navbar)的布局中,主要分为两大块div.navbar-header和div.collapse。div.navbar-header,div.collapse内部的li元素,都只在屏幕分辨率大于等于768px时左浮动,这就解释了为什么在小屏导航元素不并排显示了。
而汉堡按钮在小于768分辨率时才显示。
进入重点:
此列:响应式的导航栏在小屏幕有两个点击下拉的效果,一个是点击汉堡按钮出现一级导航元素,另一个则是点击一级导航元素中的“javascript”出现二级导航元素,后者是通过下拉菜单(dropdown)实现的,不必多说,而前者就不一样了:
再看汉堡导航这里,有个data-toggle="collapse" 和 “data-target='#boxs' ”。(data-toggle用于告诉 JavaScript 需要对按钮做什么,data-target指示要切换到哪一个元素。)很显然,这个“#boxs”是指向导航元素。
点击汉堡按钮,导航栏多出了一个.in的class,从而使导航元素显示,同时还出现了aria-expanded="true"(aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的) (展开时的动画效果)。于是乎响应式导航栏就实现了。
Bootstrap框架对于一些效果实现的方式处理的很精致,也很值得我们去学习。知其然也要知其所以然,框架在熟练使用的同时也要明白其背后的运行机理。