本节课我们来开始学习 Bootstrap 的提供导航栏组件功能。
一.导航栏
- 导航栏是一种响应式的组件,主要使用.navbar-toggler 来实现;
<nav class="navbar navbar-expand-md navbar-light bg-light"> <span class="navbar-brand">Logo</span> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="#" class="nav-link">首页</a> </li> <li class="nav-item"> <a href="#" class="nav-link">列表</a> </li> <li class="nav-item"> <a href="#" class="nav-link">图文</a> </li> <li class="nav-item"> <a href="#" class="nav-link">关于</a> </li> </ul> </div> </nav>
- 如果你不想使用 ul>li 这种方式实现导航列表,可以使用 div>a;
<div class="collapse navbar-collapse" id="navbar"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">首页</a> <a href="#" class="nav-item nav-link">列表</a> <a href="#" class="nav-item nav-link">图文</a> <a href="#" class="nav-item nav-link">关于</a> </div> </div>
- 给导航栏增加一个查询的表单;
<form action="" class="form-inline"> <input type="text" class="form-control" placeholder="关键字"> <button class="btn btn-outline-secondary ml-2">搜索</button> </form>
- 如果你想给导航栏增加文本,使用.navbar-text;
<span class="navbar-text">这里是文本! </span>
- 导航栏可以设置主题配色,主要修改.navbar-dark 和.bg-dark 两个样式;
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
- 如果想要响应式的菜单按钮显示在左边,只要把 LOGO 移入隐藏切换区域即可;
<div class="collapse navbar-collapse" id="navbar"> <span class="navbar-brand">Logo</span> ...
网友评论