Bootstrap中的导航条是非常常用的组件,可以方便的实现不同页面之间的切换和跳转。下面是Bootstrap中的导航条实例代码的详细攻略。
导航条的基本结构
导航条是由<nav>
标签包裹,其中的导航链接用<a>
标签包裹。Bootstrap提供了很多不同类型的导航条,比如常规导航条、响应式导航条等。以下是一个基本的常规导航条的代码例子:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</nav>
在代码中,<nav>
标签定义了导航条,class
属性中的navbar navbar-dark bg-dark
指定了导航条的样式。<a>
标签中的navbar-brand
类指定了导航条的品牌标签,<ul>
标签中的navbar-nav
类定义了导航链接的列表,<li>
标签是每个导航链接的容器,class
属性中的nav-item
指定了该容器的样式,<a>
标签中的nav-link
类指定了链接的样式。
值得注意的是,在导航链接中,可以使用active
类指定当前页面所在的链接,从而在导航条中高亮显示。
更多导航条样式
下拉菜单
在导航条中,有时需要使用下拉菜单来展示多级菜单。Bootstrap提供了dropdown
样式,可以轻松实现下拉菜单效果。以下是一个使用下拉菜单的代码例子:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</nav>
在上面的例子中,我们在第二个导航链接上应用了dropdown
样式,使用了dropdown-toggle
类在导航链接上创建了下拉箭头,并使用dropdown-menu
类创建了下拉菜单。
右侧对齐
有时候,我们需要将导航链接向右对齐。Bootstrap提供了ml-auto
类可以轻松实现右对齐效果。以下是右侧对齐的代码例子:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</nav>
在上面的例子中,我们在<ul>
标签中应用了ml-auto
类,从而将导航链接向右对齐。
结论
Bootstap中的导航条提供了非常丰富的样式和特性,可以轻松实现各种各样的导航条。本文介绍了导航条的基本结构,以及两个常用的样式:下拉菜单和右侧对齐。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:bootstrap中的导航条实例代码详解 - Python技术站