bootstrap实战（一）-导航栏（电脑端+手机端）

最新推荐文章于 2024-08-19 15:26:51 发布

鲸鱼姐

最新推荐文章于 2024-08-19 15:26:51 发布

阅读量3.5k

点赞数 3

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/103016541

版权

bootstrap 同时被 2 个专栏收录

35 篇文章 7 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

一导航栏效果

电脑端效果：

手机端效果：

参考网址：https://v3.bootcss.com/components/#nav

二 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 
    <script src="jquery-3.4.0.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="navbar-zll.css">
   
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#navbar-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.htm" class="navbar-brand">开发学习</a>
            </div>

            <div class="navbar-collapse collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="index.html">前端开发</a></li>
                    <li><a href="index.html">后端开发</a></li>
                    <li><a href="index.html">联系我们</a></li>
                </ul>
            </div>
        </div>


    </nav>
</body>
</html>

三 css美化

电脑端：

手机端：

navbar-zll.css样式如下

body{
    font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu ;
}

.navbar-default{
    BACKGROUND-COLOR: #FFFFFF;
    BORDER: NONE; 
    BOX-SHADOW: 0PX 2PX 8PX 0PX RGB(50,50,50,0.2);
}

.navbar-default .navbar-brand{
    font-size: 26px;
    font-weight:bold;
    color:#3CBFB8;
    height: 70px;
    line-height: 35px;
}

.navbar-default .navbar-nav>li>a {
    font-size: 16px;
    font-weight: bold;
    color: #666;
    height: 70px;
    line-height: 30px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #666;
}

.navbar-default .navbar-toggle:hover {
    background-color: #3CBFB8;
}
.navbar-toggle{
    margin-top:15px;
}

.navbar-toggle{
    margin-top:12px;
}