bootstrap4--导航及导航栏的创建

导航创建

面包屑导航创建

导航栏创建

导航创建

创建一个简单的导航方式如下：

●水平导航：<ul>元素上添加.nav类(创建导航必须基础类)，每个<li>选项上添加.nav-item类，如果想要实现选项是链接形式，可以添加.nav-link类

●垂直导航：<ul>元素上添加.flex-column类

●导航对齐方式：导航默认左对齐，我们可以设置居中对齐和右对齐：

居中对齐：<ul>元素上添加.justify-content-content类

右对齐：<ul>元素上添加.justify-content-end类

●选项设置不可用：<li>元素上添加.disabled类

测试代码：

        <!-- 简单水平导航 --><p>水平导航</p><ul class="nav"><!-- <ul class="nav justify-content-center"></ul> --><!-- <ul class="nav justify-content-end"></ul> --><li class="nav-item"><a href="#" class="nav-link">link1</a></li><li class="nav-item"><a href="#" class="nav-link">link2</a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul><br><!-- 垂直导航 --><p>垂直导航</p><ul class="nav flex-column"><li class="nav-item"><a href="#" class="nav-link">link1</a></li><li class="nav-item"><a href="#" class="nav-link">link2</a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul>

显示效果：

我们会发现，这种基础导航阅读性不高，所以我们可以使用选项卡式导航或者胶囊式导航，增加导航阅读性，注意使用这种导航的时候我们就可以使用.active类来标记选中选项

●选项卡导航：<ul>元素添加.nav-tabs类 .active类标记选中选项

●胶囊导航：<ul>元素添加.nav-pills类 .active类标记选中选项

●导航等宽：<ul>元素添加.nav-justified类

测试代码：

        <p>选项卡式导航</p><ul class="nav nav-tabs"><li class="nav-item"><a href="#" class="nav-link active">active</a></li><li class="nav-item"><a href="#" class="nav-link">link1</a></li><li class="nav-item"><a href="#" class="nav-link">link2</a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul><br><!-- 胶囊式导航 --><p>胶囊式导航+等宽</p><ul class="nav nav-pills nav-justified"><li class="nav-item"><a href="#" class="nav-link active">active</a></li><li class="nav-item"><a href="#" class="nav-link">link1</a></li><li class="nav-item"><a href="#" class="nav-link">link2</a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul>

显示效果：

上述导航都是静态的，在平时我们使用的通常都是动态式导航，也就是可切换选中选项的导航，bootstrap4中设置动态式导航步骤如下：

1.每个选项/链接添加data-toggle="tab"属性

2.每个选项对应的内容上添加.tab-pane类

3.对应选项卡内容<div>元素使用.tab-content类

●如果希望实现淡入效果可以在.tab-pane类后添加.fade类

测试代码：

        <!-- 动态选项卡 --><!-- 导航 --><ul class="nav nav-tabs"><li class="nav-item"><a href="#one" class="nav-link active" data-toggle="tab">one</a></li><li class="nav-item"><a href="#two" class="nav-link" data-toggle="tab">two</a></li><li class="nav-item"><a href="#three" class="nav-link" data-toggle="tab">three</a></li></ul><!-- 内容栏 --><div class="tab-content"><div class="tab-pane container active" id="one">内容1</div><div class="tab-pane container" id="two">内容2</div><!-- 添加淡入效果 --><div class="tab-pane container fade" id="three">内容3</div></div><br><br><br><br><br><br><br><!-- 动态选项卡 --><!-- 导航 --><ul class="nav nav-pills"><li class="nav-item"><a href="#one1" class="nav-link active" data-toggle="pill">one</a></li><li class="nav-item"><a href="#two2" class="nav-link" data-toggle="pill">two</a></li><li class="nav-item"><a href="#three3" class="nav-link" data-toggle="pill">three</a></li></ul><!-- 内容栏 --><div class="tab-content"><div class="tab-pane container active" id="one1">内容1</div><div class="tab-pane container" id="two2">内容2</div><!-- 添加淡入效果 --><div class="tab-pane container fade" id="three3">内容3</div></div>

实现效果：

面包屑导航创建

面包屑导航是一种基于网站层次信息的显示方式。可以发布日期、类别、标签等，展示了当前页面在导航层次结构内的位置。一个基本面包屑导航创建方式如下(列表形式创建)：

1.<ul>(或者<ol>)添加.breadcrumb类

2.列表项添加.breadcrumb-item类

●可以通过在列表项中非链接选项添加.active类，这样可以使非链接文本呈现灰色，否则是默认黑色，使用在链接选项上没有效果

使用列表创建基本面包屑导航代码：

        <!-- 面包屑导航 --><ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">one</a></li><li class="breadcrumb-item"><a href="#">two</a></li><li class="breadcrumb-item">three</li><li class="breadcrumb-item active">four</li></ul>

显示效果：

上面使用的是列表形式创建面包屑导航，我们也可以使用非列表形式进行创建，例如直接使用<a>标签创建链接形式导航选项，<span>标签创建文本形式导航选项：

        <nav class="breadcrumb"><a href="#" class="breadcrumb-item">one</a><a href="#" class="breadcrumb-item">two</a><span class="breadcrumb-item active">three</span></nav>

创建出来的效果和使用列表形式是一样的：

导航栏创建

比起导航，导航栏是我们常见且常用到的，导航栏创建方式如下：

1.使用.navbar类创建一个标准的导航栏

2. .navbar-expand-xl|lg|md|sm(大屏幕水平铺开，小屏幕垂直堆叠)创建响应式的导航栏

3.导航栏上的选项使用<ul>元素并添加class="navbar-nav"类

4.<li>元素上添加.nav-item类

5.<a>元素上添加.nav-link类

一个响应式的导航栏创建代码可以用下列步骤实现：

        <p>水平导航栏 </p><nav class="navbar navbar-expand-sm bg-light"><ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link">link1</a></li><li class="nav-item"><a href="#" class="nav-link">link2</a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul></nav>

水平导航栏的特点是可以响应页面大小变化，导航栏默认水平，在大屏幕上水平铺开，小屏幕上垂直堆叠。

实现效果：

我们同样也可以修改大屏幕下导航栏的状态，可以将默认水平改为垂直，只需要删除.navbar-expand-xl|lg|md|sm类就可以实现，这里就不多加演示。除了导航栏的基本创建，我们还可以通过添加类来实现更多样式：

● .justify-content-center：实现导航栏居中对齐

● .bg-*：修改导航栏背景颜色(*代表诸如success、info等有代表意义的颜色类)

● .navbar-light：设置深色文本颜色

● .navbar-dark：设置浅色文本颜色

● .navbar-brand：高亮显示设置(可用于高亮显示品牌/logo，应用于图片可以设置图片自适应导航栏)

● .active：高亮显示选中选项

● .disabled：设置链接不可点击

●.fixed-top：将导航栏固定在页面头部

●.fixed-bottom：将导航栏固定在页面底部

●.navbar-text：设置导航栏上非链接文本(保证水平对齐，颜色与内边距相同)

上述设置中额外需要注意的是导航栏颜色设置，尤其是字体设置，.navbar-light类用于设置深色文本颜色，.navbar-dark类用于设置浅色文本颜色。对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。

        <p>居中对齐水平导航栏 </p><nav class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center"><ul class="navbar-nav"><!-- 激活状态 --><li class="nav-item"><a href="#" class="nav-link active">active</a></li><li class="nav-item"><a href="#" class="nav-link">link</a></li><!-- 高亮显示品牌/logo --><li class="nav-item"><a href="#" class="navbar-brand">link</a></li><!-- 添加图片 --><li><a href="#" class="navbar-brand"><img src="../../../pict/p/User.png" style="width: 30px;"></a></li><li class="nav-item"><a href="#" class="nav-link disabled">disabled</a></li></ul></nav>

显示效果：

我们会发现上面这种响应式导航栏有一个缺点，小屏幕状态下垂直显示会占据比较大的面积，影响视觉效果。那么我们可以使用折叠导航栏，大屏幕时展开，小屏幕时自动隐藏导航选项，点击按钮展开选项，创建方式：

1.添加按钮，按钮上添加class="navbar-toggler",data-toggle="collapse",data-target="#thetarget"类

2.在设置了class="collapse navbar-collapse"类的div上包裹导航内容，div元素上的id按钮匹配data-target上指定的id

导航栏还可以实现更多样式，例如设置下拉菜单，设置表单与按钮等等，通常导航栏的表单<form>元素使用class="foem-inline"类来排版输入框与按钮，我们可以结合折叠菜单做一个演示：

        <p>折叠导航栏</p><nav class="navbar navbar-expand-md bg-dark navbar-dark"><!-- 高亮logo --><a href="#" class="navbar-brand">折叠导航栏</a><!-- 折叠按钮 --><button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#idname"><span class="navbar-toggler-icon"></span></button><!-- 折叠菜单 --><div class="collapse navbar-collapse" id="idname"><ul class="navbar-nav"><!-- 链接文本 --><li class="nav-item"><a href="#" class="nav-link">link</a></li><!-- 非链接文本 --><li class="nav-item"><span class="navbar-text">text</span></li><!-- 加上下拉菜单 --><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">link3</a><div class="dropdown-menu"><a href="#" class="dropdown-item">子菜单1</a><a href="#" class="dropdown-item">子菜单2</a><a href="#" class="dropdown-item">子菜单3</a></div></li><!-- 加上表单与按钮 --><li class="nav-item"><form class="form-inline"><input type="text" class="form-control" placeholder="search"><button type="submit" class="btn btn-secondary">搜索</button></form></li></ul></div></nav>

显示效果：