`
郑云飞
  • 浏览: 813846 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

bootstrap导航、标签、面包屑导航

 
阅读更多

关于作者:

  • 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
  • 艺名:天放
  • weibo:@tianFang
  • blog: zhengyunfei.iteye.com
  • email: zhengyunfei8@gmail.com

本文主要来讲解以下内容:1.导航;2.标签;3.面包屑导航。

导航

Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。

1、标签页

注意.nav-tabs类需要.nav基类。

1

在这里暂时只进行探讨简单的样式。

2、胶囊式标签页

用相同的 HTML 标记,但要用.nav-pills代替。

2

Pills 可以竖直堆叠。只要加上.nav-stacked。

3、两端对齐的导航

在大于768px的屏幕上,通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。

3

4、禁用的链接

对任何导航(包括标签页,pills,或列表,加入.disabled使链接为灰色且没有鼠标悬停效果

链接功能没有受到影响

这个类只改变的外观,而不是它的功能。用自定义的 JavaScript 禁用这里的链接。

4

通过将鼠标悬停你就可以查看简单的效果了,暂时无法截图。

5、使用下拉菜单 

5

6、带下拉菜单的胶囊式标签页

6

标签

简单案例

7

可用的变体

用下面的任何一个class即可改变标签的外观。

8

面包屑导航

用一个带方向的层次表明当前页面的位置。

分割符自动地通过CSS的:before和content添加上了。

9

分享到:
评论

相关推荐

    Bootstrap 面包屑导航(Breadcrumbs)

    以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS...

    bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    它提供了一套现成的界面组件,包括面包屑导航(breadcrumb),这是一种辅助用户理解他们在网站中的位置并能够快速返回之前页面的导航形式。在实际应用中,我们常常需要动态地添加面包屑并为其绑定事件处理,以响应...

    Bootstrap4 面包屑导航(Breadcrumb)

    Bootstrap4 的面包屑导航(Breadcrumb)是网页设计中一种实用的辅助导航元素,它帮助用户理解当前页面在网站整体结构中的位置。面包屑导航通常显示为一系列链接,每个链接代表一个层级,用分隔符(如"/")隔开,让...

    Bootstrap组件学习之导航、标签、面包屑导航(精品)

    Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <!-- <link rel=stylesheet &gt...

    18.Bootstrap导航.rar

    2. 面包屑(Breadcrumbs):面包屑导航用于显示用户在网站中的位置,通常出现在页面的上部,以"首页 > 分类 > 子分类"的形式呈现。这有助于用户理解当前页面在整个网站结构中的位置,方便返回上级页面。 3. 分页...

    Bootstrap CSS组件之面包屑导航(breadcrumb)

    在实际应用中,面包屑导航可以与其他元素结合,例如添加标签或徽章。虽然在提供的代码中没有直接展示这些例子,但你可以通过向`<li>`元素中添加额外的HTML元素(如`<span>`或`<badge>`)来实现这一功能。 为了使用...

    BootStrap学习笔记之nav导航栏和面包屑导航

    在Bootstrap中,通过`<ol class="breadcrumb">`创建面包屑导航,每个层级用`<li>`元素表示,链接用`<a>`标签包裹,当前页面则用`class="active"`标记。一个简单的面包屑导航示例如下: ```html <li><a href="#">...

    Bootstrap 第8章 输入框和导航组件

    4. **面包屑导航(Breadcrumbs)**:面包屑导航用于显示当前页面在网站层级结构中的位置。通过`.breadcrumb`类和`.breadcrumb-item`,我们可以创建面包屑导航链。 5. **侧边栏导航(Sidebar Navigation)**:虽然...

    Bootstrap作业26.zip

    这些组件包括导航条(navbar)、面包屑导航(breadcrumb)、分页(pagination)和标签页(tabs)。例如,导航条可以用来展示品牌标识、导航链接和下拉菜单,提供了一种标准且易于定制的头部设计。面包屑导航则有助于...

    Bootstrap非常不错的Demo

    Bootstrap提供了多种导航组件,如导航栏(Navbar)、面包屑导航(Breadcrumbs)、 Pills(类似导航但更扁平)和 tabs(选项卡)。这些组件都易于定制,可以方便地添加下拉菜单、搜索框或登录表单等附加功能,以满足...

    《BootStrap开发技术》课程标准.docx

    Bootstrap 组件、Bootstrap 字体图标、Bootstrap 下拉菜单、Bootstrap 按钮组、Bootstrap 按钮下拉菜单、Bootstrap 输入框组、Bootstrap 导航元素、Bootstrap 导航栏、Bootstrap 面包屑导航、Bootstrap 分页、...

    bootstrap中文手册_bootstrap教程_bootstrap_

    导航是网页中引导用户浏览的重要部分,Bootstrap提供了多种导航方案,如导航栏(navbar)、面包屑(breadcrumb)、分页(pagination)和标签页(tabs)等,它们都具有良好的响应式设计。 模态框(modal)是Bootstrap中的一个...

    Bootstrap导航菜单点击后无法自动添加active的处理方法

    Bootstrap是一个流行的前端框架,它提供了一套丰富的导航组件,包括导航条、标签页和面包屑导航等。在Bootstrap中,导航组件的激活状态通常是通过添加一个名为“active”的CSS类来实现的,这个类会让对应导航项的...

    bootstrap-demo

    4. **导航和布局**:Bootstrap提供了多种导航组件,如导航条(navbars)、面包屑(breadcrumbs)、分页(pagination)、标签页(tabs)等,帮助组织网站的结构和导航。"bootstrap-demo"可能包含了这些组件的示例代码...

    bootstrap demo 源码大全

    1. **导航**:Bootstrap的导航系统包括导航栏(navbar)、面包屑导航(breadcrumb)、分页(pagination)、标签页(tabs)和 pills 等,它们都有不同的设计和交互方式,适应不同场景的需求。 2. **栅格系统**:...

    Bootstrap用户手册

    这本书教你怎么用Bootstrap框架轻松设计出...设计界面及其他网页元素,比如导航、面包屑,以及自定义模态窗口等; 使用jQuery插件实现渐进的幻灯片、标签页式界面和下拉菜单; 在LESS文件中修改布局栏数和字体颜色。

    03_Bootstrap 3 高级教程part2.rar

    9. **Bootstrap导航** (13 Bootstrap导航使用方法.mp4): 除了导航条,Bootstrap 3 还提供了其他导航组件,如面包屑导航、页脚导航和侧边栏导航。这些组件都有预设样式,可以快速集成到项目中。 通过学习这个高级...

    Bootstrap用户手册:设计响应式网站-带书签.pdf

    Bootstrap内置的布局组件3.1 下拉菜单3.2 按钮组3.3 按钮下拉菜单3.4 导航元素3.5 导航条3.6 面包屑式导航3.7 分页导航3.8 标签3.9 圆标签3.10 排版相关的元素3.11 缩略图3.12 警示框3.13 进度条3.14 媒体对象3.15 ...

    bootstrarp好的的案例,包括导航,轮播等

    Bootstrap的导航系统提供了多种导航组件,包括导航条(Navbar)、面包屑导航(Breadcrumbs)、页内导航(Pagination)、标签页(Tabs)和 pills。这些组件都具有响应式设计,能在不同设备上自适应显示,确保用户在...

Global site tag (gtag.js) - Google Analytics