BootStrap3 导航条组件

最新推荐文章于 2020-08-02 22:38:08 发布

爱喝水的qdy

最新推荐文章于 2020-08-02 22:38:08 发布

阅读量422

点赞数

分类专栏： BootStrap3 文章标签： bootstrap3 导航条 navbar

本文链接：https://blog.csdn.net/qq_32617703/article/details/103220012

版权

BootStrap3 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

官方地址

https://v3.bootcss.com/components/#navbar

整体结构

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">BootStrap</a>
        </div>

        <div id="example" class="navbar-collapse collapse">
            <!-- 导航菜单 -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
                <li class="dropdown">
                    <a role="button" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 导航表单

                一定要加navbar-left

            -->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <label for="search"></label>
                    <input id="search" type="search" class="form-control"/>
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>

            <!--

                1. 非导航链接和导航文字，必须包裹在p中；
                2. 非导航链接的p要添加navbar-text类，链接a要添加navbar-link
                3. 导航文字的p要添加navbar-text类
                4. 非表单按钮一定会出现在非导航链接以及导航文字的后面，不管它的代码写在哪里

            -->

            <!-- 非导航链接 -->
            <p class="navbar-text">
                <a href="#" class="navbar-link">navbar-link</a>
            </p>

            <!-- 导航文字 -->
            <p class="navbar-text">
                <span>navbar-text</span>
            </p>

            <!-- 非表单按钮 -->
            <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>
        </div>
    </div>
</nav>

导航头

.navbar-header

 <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
     </button>
     <a href="#" class="navbar-brand">BootStrap</a>
 </div>

响应式图标

.navbar-toggle
data-toggle
data-target
.collapsed
.icon-bar

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
 </button>

品牌图标

.navbar-brand

<a href="#" class="navbar-brand">BootStrap</a>

导航体

.navbar-collapse
.collapse

导航菜单

.nav
.navbar-nav

  <!-- 导航菜单 -->
  <ul class="nav navbar-nav">
      <li>
          <a href="#">菜单项1</a>
      </li>
      <li>
          <a href="#">菜单项2</a>
      </li>
      <li>
          <a href="#">菜单项3</a>
      </li>
      <li class="dropdown">
          <a role="button" class="dropdown-toggle" data-toggle="dropdown">
              Dropdown
              <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
              <li>
                  <a href="#">菜单项1</a>
              </li>
              <li>
                  <a href="#">菜单项1</a>
              </li>
              <li>
                  <a href="#">菜单项1</a>
              </li>
          </ul>
      </li>
  </ul>

导航表单

.navbar-form
注意：导航表单一定要加.navbar-left

  <form class="navbar-form navbar-left">
      <div class="form-group">
          <label for="search"></label>
          <input id="search" type="search" class="form-control"/>
      </div>
      <button type="submit" class="btn btn-info">Submit</button>
  </form>

非导航链接

.navbar-link
非导航链接的p要添加navbar-text类，链接a要添加navbar-link

  <!-- 非导航链接 -->
  <p class="navbar-text">
      <a href="#" class="navbar-link">navbar-link</a>
  </p>

导航文字

.navbar-text
导航文字的p要添加navbar-text类

  <!-- 非导航链接 -->
  <p class="navbar-text">
      <a href="#" class="navbar-link">navbar-link</a>
  </p>

非导航按钮

.navbar-btn

  <!-- 非表单按钮 -->
  <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>

特别说明

非导航链接和导航文字，必须包裹在p中；
非导航链接的p要添加navbar-text类，链接a要添加navbar-link
导航文字的p要添加navbar-text类
非表单按钮一定会出现在非导航链接以及导航文字的后面，不管它的代码写在哪里

导航条组件固定在顶部

.navbar-fixed-top
但需要为 body 元素设置内补（padding）
body { padding-top: 70px; }
导航条的默认高度是 50px。

<nav class="navbar navbar-default navbar-fixed-top">

导航条组件固定在底部

.navbar-fixed-bottom
但需要为 body 元素设置内补（padding）
body { padding-bottom: 70px; }
导航条的默认高度是 50px。

<nav class="navbar navbar-default navbar-fixed-bottom">

导航条组件静止在顶部

.navbar-static-top

<nav class="navbar navbar-default navbar-static-top">

导航条反色

.navbar-reverse

<nav class="navbar navbar-reverse">

组件排列

.navbar-left
.navbar-right

整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>32导航条</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        <!--

        body {
            padding-top: 70px;
        }

        -->
    </style>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="">

<pre class="pre-scrollable">

    导航条：
        导航条组件

            固定在顶部
            固定在底部
            静止在顶部
            导航条颜色

            导航头
                响应式图标
                品牌图标
            导航体
                1. 导航菜单
                2. 导航表单
                3. 非导航链接
                4. 导航文字
                5. 非表单按钮
                6. 组件排列
</pre>

<nav class="navbar navbar-default">
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <!--<nav class="navbar navbar-inverse navbar-fixed-bottom">-->
    <!--<nav class="navbar navbar-inverse navbar-static-top">-->
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">BootStrap</a>
        </div>

        <div id="example" class="navbar-collapse collapse">
            <!-- 导航菜单 -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
                <li class="dropdown">
                    <a role="button" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                        <li>
                            <a href="#">菜单项1</a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 导航表单

                一定要加navbar-left

            -->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <label for="search"></label>
                    <input id="search" type="search" class="form-control"/>
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>

            <!--

                1. 非导航链接和导航文字，必须包裹在p中；
                2. 非导航链接的p要添加navbar-text类，链接a要添加navbar-link
                3. 导航文字的p要添加navbar-text类
                4. 非表单按钮一定会出现在非导航链接以及导航文字的后面，不管它的代码写在哪里

            -->

            <!-- 非导航链接 -->
            <p class="navbar-text">
                <a href="#" class="navbar-link">navbar-link</a>
            </p>

            <!-- 导航文字 -->
            <p class="navbar-text">
                <span>navbar-text</span>
            </p>

            <!-- 非表单按钮 -->
            <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>
        </div>
    </div>
</nav>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

爱喝水的qdy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap3 导航条组件

目录官方地址整体结构导航头响应式图标品牌图标导航体导航菜单导航表单非导航链接导航文字非导航按钮特别说明导航条组件固定在顶部导航条组件固定在底部导航条组件静止在顶部导航条反色组件排列整体代码官方地址https://v3.bootcss.com/components/#navbar整体结构<nav class="navbar navbar-default"> <div...
复制链接

扫一扫