Bootstrap—导航栏

最新推荐文章于 2023-07-16 23:21:31 发布

Tiramisu_C

最新推荐文章于 2023-07-16 23:21:31 发布

阅读量1.3k

点赞数 2

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 导航栏 nav 响应式导航

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53675628

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Bootstrap学习之路

17 篇文章 17 订阅

订阅专栏

使用Bootstrap制作导航栏，可以让导航栏具有响应式特性，在移动设备中，导航栏中的组件是折叠的，随着页面宽度的增加，导航栏也会水平展开。

简单的导航栏如下图：

制作步骤：

（1）使用nav标签包裹住导航，加入class="navbar navbar-default"样式。

<nav class="navbar navbar-default">

（2）nav中放入导航项。这里放一个class="container"的div，然后再放入组件，如此可让导航内容在大的页面中，放在中间位置，更加美观舒适。

导航栏中的内容可以是无序列表按钮，文本，甚至是表格。这里放置一个ul。

 <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
               <a href="#" class="navbar-brand">主要导航</a>
           </div>
           <ul class="nav navbar-nav">
               <li><a href="#">导航项1</a></li>
               ...
           </ul>
       </div>
   </nav>

代码中可以看到，在ul前面还放了一个class=" navbar-header"的div，中间放了一个a标签，并给他一个class="navbar-brand"的样式，这样做的目的是让文本看起来大一号。

ul中样式为class="nav navbar-nav"。

完整代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">
               <a href="#" class="navbar-brand">主要导航</a>
           </div>
           <ul class="nav navbar-nav">
               <li><a href="#">导航项1</a></li>
               <li><a href="#">导航项2</a></li>
               <li><a href="#">导航项3</a></li>
               <li><a href="#">导航项4</a></li>
               <li><a href="#">导航项5</a></li>
               <li><a href="#">导航项6</a></li>
           </ul>
       </div>
   </nav>
</body>
</html>

导航栏中可以放置的组件有：

（1）表单：放置表单时需要在form标签中加入class="navbar-form"

<form class="navbar-form" role="search">

（2）按钮：需要给button加入navbar-btn样式：

<button type="button" class="btn btn-default navbar-btn">

（3）文本：需要给文本标签元素加入.navbar-text

<p class="navbar-text">文本</p>

导航操作：

（1）对齐组件：给组件加入.navbar-left或者.navbar-right可以让组件向左向右浮动。

（2）固定到顶部：给nav标签加入.navbar-fixed-top，可以让导航栏固定到顶部。

（3）固定到底部：给nav标签加入.navbar-fixed-bottom。

（4）静态的顶部：给nav标签加入.navbar-static-top,让导航栏随着页面一起滚动。

（5）倒置的导航栏：给nav标签加入.navbar-inverse ，可得到黑色背景白色文本的导航栏。

<nav class="navbar navbar-inverse">

接下來讲解一下如何制作响应式的导航栏，即在大尺寸的页面中，导航栏是展开的，在移动设备中是折叠起来的，并由一个按钮来触发弹出导航项。效果如下：

实现方法如下：

（1）在<div class="navbar-header">中放置一个class="navbar-toggle"的button：

 <button class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">

其中：data-toggle="collapse"告诉js要其中的是折叠的效果，data-target="#mycollapse"是你要折叠的目标的id。

按钮中放什么无所谓可以放文本，也可以放图形。这里在移动设备中显示三个横杠，在于阅读器中显示切换导航按钮，代码如下：

 <button class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="sr-only">切换导航</span>
               </button>

（2）将要折叠的内容使用一个<div class="collapse navbar-collapse" id="mycollapse">包裹住。

其中id="mycollapse"是与data-target="#mycollapse"对应，相互绑定折叠和对象。

完整代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
    <script src="../libs/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>
   <nav class="navbar navbar-default">
       <div class="container">
           <div class="navbar-header">

               <button class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="sr-only">切换导航</span>
               </button>
           </div>
           <div class="collapse navbar-collapse" id="mycollapse">
               <ul class="nav navbar-nav">
                   <li><a href="#">导航项1</a></li>
                   <li><a href="#">导航项2</a></li>
                   <li><a href="#">导航项3</a></li>
                   <li><a href="#">导航项4</a></li>
                   <li><a href="#">导航项5</a></li>
                   <li><a href="#">导航项6</a></li>
               </ul>
           </div>
       </div>
   </nav>
</body>
</html>

本文参考资料来自：http://www.runoob.com/bootstrap/bootstrap-navbar.html