Bulma 导航栏
说明
导航栏是用作网站导航标题的响应式组件。
Navbar 组件包括以下结构-
导航栏-
navbar-brand-它包含 标签元素，其中包含一些链接或徽标。
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 = "#">Lidihuo</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.lidihuo.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 允许使用以下修饰符更改导航栏的背景颜色-
是主要的
是链接
是信息
就是成功
警告
是危险
是黑色的
是黑暗的
很轻
让我们通过在
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 = "#">Lidihuo</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 = "#">Lidihuo</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 = "#">Lidihuo</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>
它显示以下输出-
