Bootstrap导航栏和下拉菜单

来源：互联网发布：网络暴力典型案例中国编辑：程序博客网时间：2024/04/28 01:10

导航栏写法示例：
这里写图片描述

<nav class="nav navbar-default">    <div class="container">        <div class="navbar-header">            <!--此处写导航栏的Header-->            <p class="navbar-brand">IT</p>        </div>        <ul class="nav navbar-nav">            <li class="active"><a href="#">Java</a></li>            <li><a href="#">C/C++</a></li>            <li><a href="#">Shell</a></li>            <li><a href="#">Python</a></li>        </ul>    </div></nav>

此例中，导航栏有个nav标签作为整个导航栏的容器，它的class是nav navbar-default;下一层则是一个div标签作为一个Bootstrap的container容器，这里的作用是限定容器为页面的中心位置，并左右各据边界一定距离，让页面看起来不偏不倚;里层责包含的两个部分，一部分是导航栏的头（header），div作为导航栏的头部，class为navbar-header，在这个div里可以安排一些内容作为导航栏最左边的头部;还有一部分就是无序表，作为导航menu，ul的class为nav navbar-nav。

下拉菜单示例：
这里写图片描述

<div class="dropdown">    <button class="btn btn-primary" data-toggle="dropdown">        Dropdown        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Java</a></li>        <li><a href="#">C/C++</a></li>        <li><a href="#">Python</a></li>        <li><a href="#">Php</a></li>    </ul></div>

在下拉菜单中，它的容器是div，class为dropdown;里层由button构成触发btn，由ul/li无序表构成触发后的下拉菜单列表。button的class为btn btn-primary，还需要设置属性data-toggle=”dropdown”,才能实现下拉的功能;ul的class为dropdown-menu。

完整代码实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title>    <link rel="stylesheet" href="css/bootstrap.css"></head><body><nav class="nav navbar-default">    <div class="container">        <div class="navbar-header">            <!--此处写导航栏的Header-->            <p class="navbar-brand">IT</p>        </div>        <ul class="nav navbar-nav">            <li class="active"><a href="#">Java</a></li>            <li><a href="#">C/C++</a></li>            <li><a href="#">Shell</a></li>            <li><a href="#">Python</a></li>        </ul>    </div></nav><hr><div class="dropdown">    <button class="btn btn-primary" data-toggle="dropdown">        Dropdown        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Java</a></li>        <li><a href="#">C/C++</a></li>        <li><a href="#">Python</a></li>        <li><a href="#">Php</a></li>    </ul></div>    <script src="js/jquery-3.1.1.js"></script>    <script SRC="js/bootstrap.js"></script></body></html>

阅读全文

0 0