bootstrap导航

最新推荐文章于 2022-04-19 14:02:18 发布

xxiaowen

最新推荐文章于 2022-04-19 14:02:18 发布

阅读量1k

点赞数 1

分类专栏： bootstrap JAVAWEB

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/44283549

版权

JAVAWEB 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

bootstrap

7 篇文章 0 订阅

订阅专栏

导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
标签页
注意 .nav-tabs 类依赖 .nav 基类

代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
   <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
  </body>
</html>

效果图

胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
  </ul>
  </body>
</html>

效果图

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
  </ul>
  </body>
</html>

效果图

两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
两端对齐的导航条导航链接已经被弃用了。
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
  </ul>
  </body>
</html>

效果图

禁用的链接
对任何导航组件（标签页、胶囊是标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  <ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  </ul>
  </body>
</html>

效果图

添加下拉菜单
用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。
带下拉菜单的标签页
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>

  <ul class="nav nav-tabs">
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation" class="active"><a href="#">Home</a></li>
       <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
  </li>
</ul>
  </body>
</html>

效果图

带下拉菜单的胶囊式标签页
代码如下

<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap导航</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>

  <ul class="nav nav-pills">
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation" class="active"><a href="#">Home</a></li>
       <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
  </li>
</ul>
  </body>
</html>

效果图

注：本文来自java教程网，更多学习资料尽在java教程网

xxiaowen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap导航

导航Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。标签页注意 .nav-tabs 类依赖 .nav 基类代码如下 bootstrap导航 Home Profile Messages 效果图
复制链接

扫一扫