导航栏组件是一个具有以下结构的响应性和多功能水平导航栏:
navbar
主容器
navbar-brand
左侧,始终可见,通常包含logo徽标和一些可选的链接或图标
navbar-burger
汉堡图标,用于切换触摸设备上的navbar菜单
navbar-menu
导航栏菜单右侧,在触摸设备上隐藏,在桌面上可见
navbar-start
启动菜单,它出现在桌面上navbar-brand
的左边
navbar-end
菜单的右侧部分,显示在navbar的末尾
navbar-item
navbar项的每一项,可以是a或div
navbar-link
导航栏链接作为下拉列表的同级链接,带有箭头
navbar-dropdown
下拉菜单,可以包括code>navbar-item项和分隔符
navbar-divider
分隔线分隔导航栏项目的水平线
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<a class= "navbar-item" href= "https://bulma.io" >
<img src= "https://bulma.io/images/bulma-logo.png" width= "112" height= "28" >
</a>
<a role= "button" class= "navbar-burger" aria-label= "menu" aria-expanded= "false" data-target= "navbarBasicExample" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
</div>
<div id= "navbarBasicExample" class= "navbar-menu" >
<div class= "navbar-start" >
<a class= "navbar-item" >
首页
</a>
<a class= "navbar-item" >
文档
</a>
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link" >
更多
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
关于
</a>
<a class= "navbar-item" >
求职
</a>
<a class= "navbar-item" >
联系
</a>
<hr class= "navbar-divider" >
<a class= "navbar-item" >
问题反馈
</a>
</div>
</div>
</div>
<div class= "navbar-end" >
<div class= "navbar-item" >
<div class= "buttons" >
<a class= "button is-primary" >
<strong> 注册</strong>
</a>
<a class= "button is-light" >
登录
</a>
</div>
</div>
</div>
</div>
</nav>
navbar-brand
位于navbar的左侧。它可以包含:
许多个navbar-item
最后一项是汉堡菜单 navbar-burger
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<!-- navbar items, navbar burger... -->
</div>
</nav>
navbar:在触摸设备上<1024px 和桌面上>=1024px,navbar brand始终可见。
因此,建议只使用几个navbar项,以避免在小型设备上水平溢出。
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<a class= "navbar-item" href= "https://bulma.io" >
<img src= "https://bulma.io/images/bulma-logo.png" alt= "Bulma: Free, open source, and modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<a role= "button" class= "navbar-burger" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
</div>
</nav>
在桌面上>=1024px,navbar brand只会占用它需要的空间。
汉堡菜单navbar-burger
,只出现在触摸设备上。它必须作为navbar-brand
的最后一个子节点出现。它必须包含三个空白的span
标签,以便可视化汉堡线或十字架(当激活时)。
<a role= "button" class= "navbar-burger" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
如果修饰符类处于活动状态 is-active
,则显示为X号。
导航栏菜单code>navbar-menu与navbar brand对应。因此,它必须作为navbar的直接子级,作为navbar brand的兄弟。
<nav class= "navbar" role= "navigation" aria-label= "main navigation" >
<div class= "navbar-brand" >
<!-- navbar items, navbar burger... -->
</div>
<div class= "navbar-menu" >
<!-- navbar start, navbar end -->
</div>
</nav>
导航栏菜单隐藏在<1024px的触摸设备上。你需要添加修改符is-active
来显示它。
<div class= "navbar-menu" >
<!-- hidden on mobile -->
</div>
<div class= "navbar-menu is-active" >
<!-- shown on mobile -->
</div>
在桌面上>=1024px,导航栏菜单将填满导航栏中的可用空间,留下navbar_brand所需的空间。它需要两个元素作为直接子项:
he navbar brand just the space it needs. It needs, however, two elements as direct children:
navbar-start
导航栏开始
navbar-end
导航栏结束
Bulma包没有任何JavaScript。
这里是一个Vanilla Javascript实现示例,可以在 navbar-burger
和 navbar-menu
种切换 is-active
状态。
<a role= "button" class= "navbar-burger" data-target= "navMenu" aria-label= "menu" aria-expanded= "false" >
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
<span aria-hidden= "true" ></span>
</a>
<div class= "navbar-menu" id= "navMenu" >
<!-- navbar-start, navbar-end... -->
</div>
document . addEventListener ( ' DOMContentLoaded ' , () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array . prototype . slice . call ( document . querySelectorAll ( ' .navbar-burger ' ), 0 );
// Check if there are any navbar burgers
if ( $navbarBurgers . length > 0 ) {
// Add a click event on each of them
$navbarBurgers . forEach ( el => {
el . addEventListener ( ' click ' , () => {
// Get the target from the "data-target" attribute
const target = el . dataset . target ;
const $target = document . getElementById ( target );
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el . classList . toggle ( ' is-active ' );
$target . classList . toggle ( ' is-active ' );
});
});
}
});
这里是一个jQuery实现示例,同样可以在 navbar-burger
和 navbar-menu
种切换 is-active
状态。
$ ( document ). ready ( function () {
// Check for click events on the navbar burger icon
$ ( " .navbar-burger " ). click ( function () {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$ ( " .navbar-burger " ). toggleClass ( " is-active " );
$ ( " .navbar-menu " ). toggleClass ( " is-active " );
});
});
记住,这些只是实现示例。Bulma包没有任何JavaScript。
navbar-start
和navbar-end
是 navbar-menu
直接和仅有的两个原色.
在电脑端分辨率 >= 1024px :
navbar-start
显示在左边
navbar-end
显示在右边
他们都可以包含多个 navbar-item
.
<div class= "navbar-menu" >
<div class= "navbar-start" >
<!-- navbar items -->
</div>
<div class= "navbar-end" >
<!-- navbar items -->
</div>
</div>
菜单元素navbar-item
是菜单中最小的基本单位,也就是你要导航的最终链接,一般有多个,他有下面几种形式:
导航链接
<a class= "navbar-item" >
Home
</a>
brand logo
<a class= "navbar-item" >
<img src= "https://bulma.io/images/bulma-logo.png" width= "112" height= "28" alt= "Bulma" >
</a>
下拉菜单
<div class= "navbar-item has-dropdown" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<!-- Other navbar items -->
</div>
</div>
下拉菜单子项
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
</div>
一个包含任何内容的容器, 例如表单
<div class= "navbar-item" >
<div class= "field is-grouped" >
<p class= "control" >
<a class= "button" >
<span class= "icon" >
<i class= "fas fa-twitter" aria-hidden= "true" ></i>
</span>
<span> Tweet</span>
</a>
</p>
<p class= "control" >
<a class= "button is-primary" >
<span class= "icon" >
<i class= "fas fa-download" aria-hidden= "true" ></i>
</span>
<span> Download</span>
</a>
</p>
</div>
</div>
它可以是锚定标记<a>
或<div>
,也可以作为以下任一项的直接子项:
navbar
navbar-brand
navbar-start
navbar-end
navbar-dropdown
你可以添加以下修饰符类:
is-expanded
展开以将其转换为全宽元素
is-tab
选项卡,用于在悬停时添加下边框,并使用显示处于活动状态is-active
的下边框
要在任何可视上下文中无缝集成navbar,可以在navbar组件上添加 is-transparent
修饰符。这将从导航栏项目中删除任何悬停或活动背景。
HTML
<nav class= "navbar is-transparent" >
<div class= "navbar-brand" >
<a class= "navbar-item" href= "https://bulma.io" >
<img src= "https://bulma.io/images/bulma-logo.png" alt= "Bulma: a modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-burger" data-target= "navbarExampleTransparentExample" >
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id= "navbarExampleTransparentExample" class= "navbar-menu" >
<div class= "navbar-start" >
<a class= "navbar-item" href= "https://bulma.io/" >
Home
</a>
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link" href= "https://bulma.io/documentation/overview/start/" >
Docs
</a>
<div class= "navbar-dropdown is-boxed" >
<a class= "navbar-item" href= "https://bulma.io/documentation/overview/start/" >
Overview
</a>
<a class= "navbar-item" href= "https://bulma.io/documentation/overview/modifiers/" >
Modifiers
</a>
<a class= "navbar-item" href= "https://bulma.io/documentation/columns/basics/" >
Columns
</a>
<a class= "navbar-item" href= "https://bulma.io/documentation/layout/container/" >
Layout
</a>
<a class= "navbar-item" href= "https://bulma.io/documentation/form/general/" >
Form
</a>
<hr class= "navbar-divider" >
<a class= "navbar-item" href= "https://bulma.io/documentation/elements/box/" >
Elements
</a>
<a class= "navbar-item is-active" href= "https://bulma.io/documentation/components/breadcrumb/" >
Components
</a>
</div>
</div>
</div>
<div class= "navbar-end" >
<div class= "navbar-item" >
<div class= "field is-grouped" >
<p class= "control" >
<a class= "bd-tw-button button" data-social-network= "Twitter" data-social-action= "tweet" data-social-target= "https://bulma.io" target= "_blank" href= "https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms" >
<span class= "icon" >
<i class= "fab fa-twitter" ></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class= "control" >
<a class= "button is-primary" href= "https://github.com/jgthms/bulma/releases/download/0.9.1/bulma-0.9.1.zip" >
<span class= "icon" >
<i class= "fas fa-download" ></i>
</span>
<span> Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
你可以将导航栏固定到页面的顶部或底部。这是一个两步实现过程:
在navbar
添加 is-fixed-top
或 is-fixed-bottom
。
<nav class= "navbar is-fixed-top" >
将相应的has-navbar-fixed-top
或 has-navbar-fixed-bottom
修饰符添加<html>
或 <body>
元素中,为页面提供适当的填充
<html class= "has-navbar-fixed-top" >
点击下面链接在新页面打开演示页
创建下拉菜单,需要 4 个元素:
navbar-item
带has-dropdown
修饰符
navbar-link
带下拉箭头
navbar-dropdown
下拉菜单选项,包含 navbar-item
和 navbar-divider
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
用 CSS 或 JavaScript 控制显示/隐藏下拉列表
navbar-dropdown
在移动设备分辨率 < 1024px 时候显示,
在桌面设备 >= 1024px 隐藏。
但是 下拉列表在桌面设备如何显示取决于其父类。
带有 has-dropdown
修饰符的navbar-item
有两个额外的修饰符:
is-hoverable
:悬停父导航栏项时,将显示下拉列表
is-active
: 下拉列表总是显示。
当CSS:hover实现时,本身就可以完美工作,is-active类可用于希望用JavaScript控制下拉列表显示的用户。
<div class= "navbar-item has-dropdown is-hoverable" >
<!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
<div class= "navbar-item has-dropdown is-active" >
<!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
Right dropdown
如果父navbar-item
位于右侧,则可以使用 is-right
修饰符将下拉列表定位为从右侧开始。
<div class= "navbar-dropdown is-right" >
<!-- navbar-item, navbar-divider etc. -->
</div>
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-menu" >
<div class= "navbar-start" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Left
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</div>
<div class= "navbar-end" >
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Right
</a>
<div class= "navbar-dropdown is-right" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
如果您使用的是底部的导航,比如固定底部的导航,那么您可能需要使用上拉菜单。
只需在父navbar-item
的修饰符 has-dropdown
后面增加has-dropdown-up
修饰符。
<div class= "navbar-item has-dropdown has-dropdown-up is-hoverable" >
<a class= "navbar-link" href= "https://bulma.io/documentation/overview/start/" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" href= "https://bulma.io/documentation/overview/start/" >
Overview
</a>
</div>
</div>
Documentation
Everything you need to create a website with Bulma
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<div class= "navbar-menu" >
<div class= "navbar-start" >
<div class= "navbar-item has-dropdown has-dropdown-up is-active" >
<a class= "navbar-link" >
Dropup
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</div>
</div>
</nav>
Dropdown without arrow
可以通过向导航栏的项添加“无箭头”is-arrowless
修饰符来删除这些项中的箭头。
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link is-arrowless" >
Docs
</a>
<!-- navbar-dropdowns -->
</div>
<div class= "navbar-item has-dropdown is-hoverable" >
<a class= "navbar-link is-arrowless" >
Link without arrow
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
默认 navbar-dropdown
具有:
一个灰色顶边border-top
底部两边有个半圆角border-radius
。
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://bulma.io/images/bulma-logo.png" alt= "Bulma: Free, open source, and modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
当有一个透明的导航菜单时,最好使用下拉列表的装箱版本通,使用 is-boxed
修饰符。
灰色框被移除
添加了轻微的内部阴影
所有的角都是圆的
悬停/活动状态已设置动画
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar is-transparent" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://bulma.io/images/bulma-logo.png" alt= "Bulma: Free, open source, and modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown is-boxed" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
<section class= "hero" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
Documentation
Everything you need to create a website with Bulma
<nav class= "navbar" role= "navigation" aria-label= "dropdown navigation" >
<a class= "navbar-item" >
<img src= "https://bulma.io/images/bulma-logo.png" alt= "Bulma: Free, open source, and modern CSS framework based on Flexbox" width= "112" height= "28" >
</a>
<div class= "navbar-item has-dropdown is-active" >
<a class= "navbar-link" >
Docs
</a>
<div class= "navbar-dropdown" >
<a class= "navbar-item" >
Overview
</a>
<a class= "navbar-item is-active" >
Elements
</a>
<a class= "navbar-item" >
Components
</a>
<hr class= "navbar-divider" >
<div class= "navbar-item" >
Version 0.9.1
</div>
</div>
</div>
</nav>
<section class= "hero is-primary" >
<div class= "hero-body" >
<p class= "title" >
Documentation
</p>
<p class= "subtitle" >
Everything you need to <strong> create a website</strong> with Bulma
</p>
</div>
</section>
你可以在navbar-dropdown
添加navbar-divider
以显示一个水平分割线。
<hr class= "navbar-divider" >
New!
0.5.2
可以使用以下9个颜色修饰符更改导航栏的背景色:
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white
<nav class= "navbar is-primary" >
<!-- navbar brand, navbar menu... -->
</nav>
Type
Name
Description
Spacing
is-spaced
设置为 padding:1rem 2rem;或padding:1rem 2rem 1rem 2rem;
(顺序上、右、下、左,即从头上开始按照顺时针转一圈),
1rem等于html根元素设定的font-size的px值,也就是一个字宽度。
Name
Type
Value
Computed Value
Computed Type
$ navbar-padding-horizontal
size
$ navbar-item-hover-background-color
variable
color
$ navbar-item-active-color
variable
color
$ navbar-item-active-background-color
string
$ navbar-item-img-max-height
size
$ navbar-tab-hover-background-color
string
$ navbar-tab-hover-border-bottom-color
variable
color
$ navbar-tab-active-background-color
string
$ navbar-tab-active-border-bottom-color
variable
color
$ navbar-tab-active-border-bottom-style
string
$ navbar-tab-active-border-bottom-width
size
$ navbar-dropdown-background-color
variable
color
$ navbar-dropdown-border-top
size
$ navbar-dropdown-boxed-radius
variable
size
$ navbar-dropdown-boxed-shadow
shadow
0 8 px 8 px bulmaRgba ( $ scheme-invert , 0 . 1 ), 0 0 0 1 px bulmaRgba ( $ scheme-invert , 0 . 1 )
$ navbar-dropdown-item-hover-color
variable
color
$ navbar-dropdown-item-hover-background-color
variable
color
$ navbar-dropdown-item-active-color
variable
color
$ navbar-dropdown-item-active-background-color
variable
color
$ navbar-divider-background-color
variable
color
$ navbar-bottom-box-shadow-size
size
返回头部