Bootstrap入门书籍之(四)菜单、按钮及导航

我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可以方便快捷帮助我们搭建网站,并且能达到一个不错的显示效果。我们最需要注意的就是: HTML的结构 和bootstrap提供 添加到结构上的类以及属性 。

这些组件的交互功能是依赖于jQuery库实现的,所以还必须引入jQuery.js,且必须在Bootstrap.js之前。正式上线的话直接使用压缩版本就可以了如下:

<script src="https://www.jb51.net/js/jquery-min-1.11.3.js"></script><script src="https://www.jb51.net/js/bootstrap.min.js"></script>

菜单

基本用法

在官方文档中,我们看到的下拉菜单组件是这样的:

<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单<span></span> </button> <ul aria-labelledby="dropdownMenu1"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>

那么,到底哪一些属性是必须的、用来控制行为的呢?又有哪一部分是起到修饰作用的?

我们来自己简化一下这一段代码:

<div> <buttondata-toggle="dropdown">下拉菜单</button> <ul > <li>菜单项1</li> <li>菜单项2</li> </ul></div>

我们来看看简化前后的对比图:

Bootstrap入门书籍之(四)菜单、按钮及导航

 

在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。经过我们上面的简化,最终可以看到核心要求有以下几点:

使用一个名为 .dropdown 的容器包裹了整个下拉菜单元素,示例中为: <div></div>使用了一个 <button> 按钮做为父菜单,并且定义类名 .dropdown-toggle 和自定义 data-toggle 属性,且值必须和最外容器类名一致,此示例为: data-toggle="dropdown"下拉菜单项使用一个ul列表,并且定义一个类名为 .dropdown-menu ,此示例为: <ul>

也就是说,我们仅仅需要牢记这3个步骤我们就可以使下拉菜单生效, <button> 内的 <span> 标签,也仅仅是用来进行图标的展示,让菜单更加清晰。不过虽然如此,我个人建议在 实际的使用过程 中,把Bootstrap框架中的下拉菜单的 其它属性也一并加上 ,这样更加友好的为不同的客户 如:屏幕阅读器 提供了一个优质的体验。

那么这些是怎么起作用的呢?

查看CSS源码可以看到 .dropdown-menu 有一个 display:none ,所以下拉列表项默认隐藏的;

我们继续打开chrome开发者工具(F12),可以看到每一次在列表项展现出来时, .dropdown 类后还增加了一个 .open 的类;不用多说想肯定就是这个类在起作用,我们再继续回到CSS源码中去可以看到:

.open > .dropdown-menu { display: block;}

看到这里也应该不用过多说明了,添加了这个 .open 类时, .dropdown-menu 自然的就显示出来了。

下拉菜单修饰

下拉分隔线

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个 空 的 <li> ,并且给这个 <li> 添加类名 .divider 来实现添加下拉分隔线的功能。

<li></li> 对应的样式代码:

.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

菜单标题

上一小节讲解通过添加 divider 可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题): <li>第一部分菜单头部</li> 。

从源码中比较关键的两个点是:标题的字体颜色是: color: #777; ,还有内填充 padding: 3px 20px;

对齐方式

Bootstrap框架中下拉菜单 默认是左对齐 也就是添加 .dropdown-menu-left 类所能达到的效果,如果你想让下拉菜单 相对于父容器右对齐 时,可以在 .dropdown-menu 上(也就是你的菜单项的ul)添加一个 .pull-right 或者 .dropdown-menu-right 类名,如下所示:

<ul >

源码如下:

.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}

当然你只进行这样的设置的话,可能还会有一些奇怪的情况出现,比如列表项跑到屏幕最右边去了,所以同时一定要为 .dropdown 添加 float:left 样式。

.dropdown{ float: left;}

Bootstrap入门书籍之(四)菜单、按钮及导航

 

菜单项状态

下拉菜单项的默认的状态(不用设置)有悬浮状态( :hover )和焦点状态( :focus ):(包括下面提到的状态都必须在li中包含a标签才有- -)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgypsx.html