第一次接触神奇的Bootstrap菜单和导航
|
本篇将主要介绍Bootstrap的菜单、导航。 本篇开始将引入javascript相关文件，如下： 在Bootstrap中，下拉菜单组件是一个独立的组件。Bootstrap的组件交互效果都是依赖于jquery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效。 1.下拉菜单-基本用法
下拉菜单基本用法
注意：有时候会有向上弹起的需求，那么只需要在“dropdown”类名基础上追加“dropup”类名即可。效果图如下：
2.下拉菜单-对齐方式Bootstrap中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：
...
效果图如下：
3.按钮-按钮组按钮组也是一个独立的组件。需要依赖于button.js插件才能正常运行。而bootstrap.js已集成了button.js插件功能。 用法：使用“btn-group”容器，把多个按钮放到这个容器中。如下所示：
按钮组
效果图如下：
4.按钮-嵌套分组很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用Bootstrap按钮的嵌套分组的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：
...
效果图如下：
在实际运用当中，总会碰到垂直显示的效果。在Bootstrap中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现按钮的垂直分组。 5.按钮-等分按钮等分按钮（自适应分组按钮）实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示： 效果图如下：
6.导航-基本用法Bootstrap中制作导航条主要通过“.nav”样式。.nav”必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。 <div class="jb51code"> 效果图如下：
7.导航-胶囊形(pills)导航胶囊形（pills）导航，当前项高亮显示，并带有圆角效果。只需要把类名“nav-tabs”换成“nav-pills”即可： 效果图如下：
8.导航-垂直堆叠的导航制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可： 效果图如下：
9.导航-自适应导航自适应导航“nav-justified”（源码请查阅bootstrap.css文件第3585行～第3607行）需要和“nav-tabs”或者“nav-pills”配合在一起使用。如： 效果图如下：
10.导航-面包屑式面包屑（Breadcrumb）也是一个独立模块组件，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。使用方式很简单，为ol加入breadcrumb类：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- AngularJS ui-grid-当响应包含空数组时显示“无数据可用”
- Linux tar 命令出现 Cowardly refusing to create an empty
- 使用bash删除旧文件的最有效方法
- AngularJS UI路由器 – 使用templateUrl时$state.current.n
- 传智播客webService第一天课堂笔记
- 将Angular验证类应用于非FormControl父级
- Shell Script SCP返回代码1
- angular2报错 Expression has changed after it was checke
- 用Axis开发Webservice
- unix-timestamp – 使用Moment.js获取当前unixtimestamp