欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Bootstrap自适应导航栏的实现

程序员文章站 2023-12-30 17:57:16
...

bootstrap的导航栏有成熟的组件，在移动端和PC端都能够做到自适应，这里只是稍微做了一点修改，做一下笔记~

效果图：

Bootstrap自适应导航栏的实现

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 在移动端不缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>导航条</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
 
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">

    </script>
    <style type="text/css">
            /* 导航项的底下指示条，并添加过渡动画*/
            .underline-bar {
                height: 2px;
                width: 0%;
                margin: 0 auto;
                background-color: #ffffff ;
                transition:width 1.5s;              /**/
	            -webkit-transition:width 1.5s; /* Safari */
            }

            /* 鼠标经过导航项的时候显示过渡动画*/
            li:hover>.underline-bar{
                width: 100%;
            }
            
            /* 选中状态，指示条显示*/
            .active>.underline-bar{
                width:100%;
            }

    </style>
</head>
<body>
    <!-- 定义反白导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!-- 申明logo的容器 -->
            <div class="navbar-header">
                <!-- 针对logo等固定内容的样式 -->
                <a href="#" class="navbar-brand">logo</a>
                <!-- 定义隐藏下拉按钮 -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>


            <!-- 做隐藏菜单 -->
            <div class="collapse navbar-collapse" id="togglemenu">
                <!-- 菜单项 -->
                <ul class="nav navbar-nav">
                    <!-- "cative"：定义当前页 -->
                    <li class="active">
                        <a href="#">首页</a>
                        <div class="underline-bar"></div>
                    </li>
                    <li>
                        <a href="#">公司新闻</a>
                        <div class="underline-bar"></div>
                    </li>
                    <li>
                        <a href="#">行业动态</a>
                        <div class="underline-bar"></div>
                    </li>
                    <li><a href="#">招才纳贤</a>
                        <div class="underline-bar"></div>
                    </li>
                    <li><a href="#">关于我们</a>
                        <div class="underline-bar"></div>
                    </li>
                </ul>

                <!-- <button class="btn btn-default navbar-btn">按钮</button> -->

                <!-- 定义搜索框和按钮 -->
                <!-- <button class="btn btn-default navbar-btn navbar-right">搜索</button> -->
                <!-- 定义表单 -->
                <form class="navbar-form navbar-right">
                    <!-- 声明表单组 -->
                    <div class="form-group">
                        <!-- 声明输入框组 -->
                        <div class="input-group">
                            <!-- 声明文本输入框 -->
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <!-- 放大镜按钮 -->
                                <button class="btn btn-default">
                                    <!-- 用文字代替图标 -->
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</body>
</html>

Bootstrap自适应导航栏的实现

上一篇：

下一篇：

推荐阅读