Bulma - Navbar
描述
Navbar 是响应式组件，可用作您网站的导航标题。
Navbar 组件包括以下结构 −
navbar −
navbar-brand − 它包括 <a> 标签元素，其中包含一些链接或徽标。
navbar-burger −它是一个汉堡图标，可在小型设备(例如手机)上切换导航栏菜单。
navbar-menu − 它是一个右侧菜单，在桌面上可见，在小型设备上隐藏。
navbar-start − 它出现在菜单的左侧。
navbar-end − 它出现在菜单的右侧。
navbar-item − 它指定导航栏的单个项目。
navbar-link −它指定下拉箭头。
navbar-dropdown − 它指定带有导航栏项和分隔线的下拉菜单。
navbar-divider − 它指定用于划分下拉项的水平线。
以下示例演示了 Navbar 组件中上述元素的用法 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Navbar
</span>
<br>
<br>
<nav class = "navbar">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target="navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" 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 = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">Python</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">One more separated link</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 = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "button is-info" href = "https://www.tutorialspoint.com/java/java_tutorial.pdf">
<span class = "icon">
<i class = "fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
它显示以下输出 −
导航栏颜色
Bulma 允许使用以下修饰符 − 更改导航栏的背景颜色
is-primary
is-link
is-info
is-success
is-warning
is-danger
is-black
is-dark
is-light
让我们在 navbar 类中使用上述任意一个修饰符来创建一个简单的示例−
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Navbar Color
</span>
<br>
<br>
<nav class = "navbar is-primary">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" 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 = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</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 = "Google plus" href = "#">
<span class = "icon">
<i class = "fab fa-google-plus-square fa-2x"></i>
</span>
</a>
</p>
<p class = "control">
<a class = "bd-tw-button button" data-social-network = "Twitter" href = "#">
<span class = "icon">
<i class = "fab fa-twitter fa-2x"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
它显示以下输出 −
在上面的例子中，我们使用了 is-primary 修饰符。如果您想使用其他修饰符，请在 navbar 类中将此修饰符替换为您的修饰符。
下拉导航栏
Bulma 允许通过在 navbar-item 中使用 has-dropdown 和 has-dropdown-up 修饰符在导航栏上方显示下拉菜单，如下例所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Dropup Navbar
</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown has-dropdown-up is-active">
<a class = "navbar-link" href = "#">Programming Languages</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
它显示以下输出 −
右侧下拉菜单
您可以使用 is-right 修饰符将下拉菜单放置在右侧，如下例所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Right Dropdown
</span>
<br>
<br>
<nav class = "navbar is-info" role = "navigation" aria-label = "dropdown navigation">
<div class = "navbar-brand">
<a class = "navbar-item" href = "#">TutorialsPoint</a>
<div class = "navbar-burger burger" data-target = "navbarExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "navbarExample" class = "navbar-menu">
<div class = "navbar-start">
<a class = "navbar-item" href = "https://bulma.io/">Home</a>
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Left Menu</a>
<div class = "navbar-dropdown is-boxed">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
<div class = "navbar-end">
<div class = "navbar-item has-dropdown is-active">
<a class = "navbar-link" href = "#">Right Menu</a>
<div class = "navbar-dropdown is-right">
<a class = "navbar-item" href = "#">JavaScript</a>
<a class = "navbar-item" href = "#">PHP</a>
<a class = "navbar-item" href = "#">Java</a>
<hr class = "navbar-divider">
<a class = "navbar-item" href = "#">Separated link</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</section>
</body>
</html>
它显示以下输出 −
bulma_components.html
