你的位置:首页 > 软件开发 > 网页设计 > 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

发布时间:2016-10-15 16:01:14
bootstrap三大核心之二。包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。一. 图标字体bootstrap3提供了200多个免费图标字体。认为它是一个字。arial-hidden="true".s ...

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

bootstrap三大核心之二。

包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。
1

效果马上就有了:

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

如果我把div的class属性改为dropup,菜单就变成“上拉菜单”了

按钮组控件本身也支持下拉菜单的触发,所以不需要class=dropdown了

 

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

(2)分裂式按钮

在input-group-btn下,组合的按钮也是可以分裂式的。无需再给父级容器加btn-group。同时应该注意到,不同点在于按钮的圆角被去掉了。

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

 

2.胶囊式导航——nav-pills

很生动形象的词。上面代码中,把ul的class改为nav-pills就可以实现了。

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

 

 

但还是发现,第7行的data-toggle已经有了一个"tab",再添加“dropdown”导致双方都不生效。尝试使用分段式按钮,但是发现按钮的表现和胶囊按钮的区别还是有的。所以二者只能取一。至于active类,以后可以用js实现。

 

所以最终代码是:

1

 

效果:

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

 

 

(2)借助js插件实现真正的,但只是初步的导航交互——

在ul-li-a体系下,给a标签加上属性:data-toggle="tab"——注意堆叠导航和自适应导航无效(还是本来的效果)

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

(3)禁止点击——还是disabled类

注意,禁止点击disabled类只是一个效果,而不能阻止点击事件的触发。需要在js中重新定义。

 

 

七. 导航条(navbar)

导航条的特性在于:比导航多了一个“条”。相对于导航多了一块背景——

 

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

 官方建议:原本顶部内容,或者body的padding-top设为70px。如果是顶部内容是header,偏移30px就够了。

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

 


原标题:《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。