响应式Bootstrap导航栏案列

最新推荐文章于 2021-10-07 17:41:53 发布
最新推荐文章于 2021-10-07 17:41:53 发布
阅读量398 收藏
点赞数
分类专栏： 小白 笔记 文章标签： html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48445738/article/details/108939931
版权

当我们学习了媒体查询后 我们可以试试去写一下Bootstrap的导航栏 练练手

当屏幕尺寸小于767px的时候它的导航栏样式为下图所示

在这里插入图片描述

首先我们先来写个布局 写响应式网站的时候原则是从大到小 或从小到大 （屏幕） 我们写的是从小到大

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            height: 50px;
            background-color: black;
            line-height: 50px;
        }

        h1 {
            max-width: 300px;
            color: #9d9d9d;
            float: left;
            font-size: 20px;
            padding-left: 10px;
        }

        /* svg的样式 */
        .icon {
            fill: white;
        }

        .svgdiv {
            height: 20px;
            float: right;
            border: 1px solid #333;
            padding: 5px 10px;
            line-height: 30px;
            margin-top: 10px;
            text-align: center;
        }

        /* 装下拉列表的盒子 默认隐藏 */
        .ul_list {
            border-top: 1px solid #333;
            height: 280px;
            background: black;
            display: none;
            clear: both;
        }

        .ul_list_ul {
            list-style: none;
        }

        .ul_list_ul li {
            height: 40px;
            color: #9d9d9d;
            padding-left: 10px;
            line-height: 40px;

        }

        .ul_list_ul li:hover {
            color: white;
        }
        .blockk {
            display: block;
        }

        .noneee {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>Bootstrap中文网</h1>
        <div class="svgdiv">
            <svg t="1601970135882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1179" width="20" height="20">
                <path
                    d="M44.4 245.9h935.2c24.4 0 44.4-20 44.4-44.4s-19.8-44.4-44.4-44.4H44.4C20 157.1 0 177.1 0 201.5s20 44.4 44.4 44.4z m935.2 221.8H44.4C20 467.7 0 487.7 0 512.1s20 44.4 44.4 44.4h935.2c24.4 0 44.4-20 44.4-44.4s-20-44.4-44.4-44.4z m0 310.4H44.4C20 778.1 0 797.8 0 822.5s20 44.4 44.4 44.4h935.2c24.4 0 44.4-19.8 44.4-44.4s-20-44.4-44.4-44.4z"
                    p-id="1180"></path>
            </svg>
        </div>
        <div class="ul_list">  
            <ul class="ul_list_ul">
                <li>Bootstrap3中文文档</li>
                <li>Bootstrap4中文文档</li>
                <li>Sass 教程</li>
                <li>Less 教程</li>
                <li> jQuery API</li>
                <li>网站实例</li>
                <li>关于</li>
            </ul>
        </div>
    </header>
</body>

</html>

写出来的效果是这样的
在这里插入图片描述
接下来我们写第二个查询 屏幕大于767px 小于 991px

需要隐藏 h1标签 和 下拉按钮
需要把ul给显示出
需要把最后一个li（关于）隐藏

 /* 当屏幕大于767px的时候 */
        @media all and (min-width: 767px) and (max-width: 991px) {
            h1 {
                display: none;
            }

            .svgdiv {
                display: none;
            }

            .ul_list {
                display: block;
                height: 50px;
            }

            .ul_list li {
                height: 50px;
                line-height: 50px;
                width: 15%;
                float: left;
                font-size: 14px;
                text-align: center;
                padding: 0;
            }

            /* .ul_list li:first-of-type {
                width: 20%;
            } */

            .ul_list li:nth-of-type(-n+2) {
                width: 20%;
            }

            .ul_list li:last-of-type {
                display: none;
            }

            .noneee {
                display: block !important;
            }
        }

在这里插入图片描述

第三个查询 屏幕大于991px

需要在原来的基础上把最后一个显示 然后调整一下布局就好


        @media all and (min-width: 991px) {
            h1 {
                max-width: 20%;
                display: block;
                float: left;
            }

            .svgdiv {
                display: none;
            }

            .ul_list {
                width: 80%;
                display: block;
                height: 50px;
                float: right;
                border: none;
                position: absolute;
                right: 0;
                top: 0px;
            }

            .ul_list li {
                width: 12%;
                height: 50px;
                line-height: 50px;
                float: left;
                font-size: 14px;
                text-align: center;
                padding: 0;
            }

            .ul_list li:nth-of-type(-n+2) {
                width: 20%;
            }

            .noneee {
                display: block !important;
            }

        }

在这里插入图片描述

写出来就是这样 再加上 点击显示下拉的效果

        var svgdiv = document.querySelector('.svgdiv')
        var isok = true
        svgdiv.addEventListener('click', function () {
            if (isok) {
                document.querySelector('.ul_list').className = 'ul_list blockk'
            } else {
                document.querySelector('.ul_list').className = 'ul_list noneee'
            }
            isok = !isok
        })

基本实现了响应式导航栏

全部代码
<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            height: 50px;
            background-color: black;
            line-height: 50px;
            /* z-index: 2; */
        }

        h1 {
            max-width: 300px;
            color: #9d9d9d;
            float: left;
            font-size: 20px;
            padding-left: 10px;
        }

        /* svg的样式 */
        .icon {
            fill: white;
        }

        .svgdiv {
            height: 20px;
            float: right;
            border: 1px solid #333;
            padding: 5px 10px;
            line-height: 30px;
            margin-top: 10px;
            text-align: center;
        }

        /* 装下拉列表的盒子 默认隐藏 */
        .ul_list {
            border-top: 1px solid #333;
            height: 280px;
            background: black;
            display: none;
            clear: both;
        }

        .ul_list_ul {
            list-style: none;
        }

        .ul_list_ul li {
            height: 40px;
            color: #9d9d9d;
            padding-left: 10px;
            line-height: 40px;

        }

        .ul_list_ul li:hover {
            color: white;
        }

        /* 当屏幕大于767px的时候 */
        @media all and (min-width: 767px) and (max-width: 991px) {
            h1 {
                display: none;
            }

            .svgdiv {
                display: none;
            }

            .ul_list {
                display: block;
                height: 50px;
            }

            .ul_list li {
                height: 50px;
                line-height: 50px;
                width: 15%;
                float: left;
                font-size: 14px;
                text-align: center;
                padding: 0;
            }

            /* .ul_list li:first-of-type {
                width: 20%;
            } */

            .ul_list li:nth-of-type(-n+2) {
                width: 20%;
            }

            .ul_list li:last-of-type {
                display: none;
            }

            .noneee {
                display: block !important;
            }
        }

        @media all and (min-width: 991px) {
            h1 {
                max-width: 20%;
                display: block;
                float: left;
            }

            .svgdiv {
                display: none;
            }

            .ul_list {
                width: 80%;
                display: block;
                height: 50px;
                float: right;
                border: none;
                position: absolute;
                right: 0;
                top: 0px;
            }

            .ul_list li {
                width: 12%;
                height: 50px;
                line-height: 50px;
                float: left;
                font-size: 14px;
                text-align: center;
                padding: 0;
            }

            .ul_list li:nth-of-type(-n+2) {
                width: 20%;
            }

            .noneee {
                display: block !important;
            }

        }

        .blockk {
            display: block;
        }

        .noneee {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>Bootstrap中文网</h1>
        <div class="svgdiv">
            <svg t="1601970135882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1179" width="20" height="20">
                <path
                    d="M44.4 245.9h935.2c24.4 0 44.4-20 44.4-44.4s-19.8-44.4-44.4-44.4H44.4C20 157.1 0 177.1 0 201.5s20 44.4 44.4 44.4z m935.2 221.8H44.4C20 467.7 0 487.7 0 512.1s20 44.4 44.4 44.4h935.2c24.4 0 44.4-20 44.4-44.4s-20-44.4-44.4-44.4z m0 310.4H44.4C20 778.1 0 797.8 0 822.5s20 44.4 44.4 44.4h935.2c24.4 0 44.4-19.8 44.4-44.4s-20-44.4-44.4-44.4z"
                    p-id="1180"></path>
            </svg>
        </div>
        <div class="ul_list">
            <ul class="ul_list_ul">
                <li>Bootstrap3中文文档</li>
                <li>Bootstrap4中文文档</li>
                <li>Sass 教程</li>
                <li>Less 教程</li>
                <li> jQuery API</li>
                <li>网站实例</li>
                <li>关于</li>
            </ul>
        </div>
    </header>
    <script>
        var svgdiv = document.querySelector('.svgdiv')
        var isok = true
        svgdiv.addEventListener('click', function () {
            if (isok) {
                document.querySelector('.ul_list').className = 'ul_list blockk'
            } else {
                document.querySelector('.ul_list').className = 'ul_list noneee'
            }
            isok = !isok
        })  
    </script>
</body>

</html>

拜

桃花朵朵开3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-22
bootstrap实现响应式自适应导航栏，并实现平滑滚动
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）
最新发布
stu_kk的博客
12-18 3085
响应式布局2：手写响应式导航栏（BootStrap实现以及原生实现）笔记
Bootstrap 响应式导航栏
qq_40890601的博客
06-01 275
问题描述： 今天想做一个响应式的导航栏，可汉堡导航图标一直没响应，找了半天原来是Bootstrap版本问题，它在IE11上无法运行。 解决： 换成最新的bootstrap版本（bootstrap-4.4.1）就好了。 其实说到底还是自己太过粗心吧！ 当固定导航条遮挡住内容时应该怎么办？ 直接在文档完成之后给它添加一个导航栏的高度，（我这里是固定在上部所以用padding-top）,如果是固定在左边就是用padding-right. <script type="text/javascr
BootStrap响应式导航条
Sunflowerfiona的博客
04-27 1328
http://getbootstrap.com/components/#navbar <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div class="container"> <div class="nav
Bootstrap响应式的导航栏
蹦极的考拉
08-16 229
Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的导航栏</title> <link rel="stylesheet" href="https://cdn.s...
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
09-01
Bootstrap是一个流行的前端开发框架，它提供了一套响应式设计和移动设备优先的解决方案，使得开发者能够轻松创建适应不同...对于想要学习和实践Bootstrap响应式布局导航栏功能的开发者，这个例子提供了一个很好的起点。
BootStrap响应式导航条实例介绍
09-02
Bootstrap响应式导航条是Web开发中一个重要的组件，尤其在当前多设备浏览的时代，它能够根据用户所使用的设备（如桌面、平板或手机）自动调整布局，提供最佳的用户体验。Bootstrap作为一款流行的前端框架，其响应式...
Bootstrap响应式侧边栏导航菜单代码
06-05
Bootstrap响应式侧边栏导航菜单是现代网页设计中不可或缺的一部分，尤其在移动优先的设计策略下。Bootstrap框架以其灵活性和易用性，成为了构建此类菜单的首选工具。本资源提供的代码正是利用Bootstrap，jQuery以及...
bootstrap 响应式 导航栏
07-17
bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。
Bootstrap响应式侧边栏导航菜单代码.zip
07-11
Bootstrap响应式侧边栏导航菜单代码
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
08-28
主要为大家详细介绍了bootstrap响应式导航条模板使用详解，含下拉菜单，弹出框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap响应式导航栏
weixin_30768175的博客
11-07 124
转自http://www.jianshu.com/p/d0c2e0d47645 <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏</title> <meta http...
Bootstrap的响应式导航栏
正在山路上的博客
10-07 3216
大屏幕时正常显示，小尺寸屏幕时为避免排版杂乱和为了提高展示效果而隐藏详细的内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device..
bootstrap 响应式的导航栏
丿灬安之若死
08-22 2569
响应式的导航栏 为了给导航栏添加响应式特性，您要折叠的内容必须包裹class.collapse、.navbar-collapse 的&lt;duv&gt;中。折叠起来的导航栏实际上是 一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript 需要对按钮做什么，第二个是data-target ，指示要切换到哪一个元素.三...
响应式前端框架Bootstrap系列（9）导航条与导航栏
@黄小泽的个人博客
01-13 6818
导航条，是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外，还可能有搜索、登录和注册等功能块，常位于网页中的最顶部。 导航条 bs提供的导航条有两种：标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示，胶囊式用.nav .nav-
Bootstrap 响应式导航条
歪脖先生的博客
03-10 3397
响应式导航条响应式导航条能够根据浏览器窗口宽度，自动调整导航条的显示状态。一般会为响应式导航提供一个导航条和一个按钮。当浏览器窗口足够宽时，正常显示导航条而不显示按钮。当浏览器窗口宽度缩小到一定程度时，自动隐藏导航条并显示按钮。此时，用户点击按钮，隐藏的导航条就会显示出来。要使用Bootstrap中的响应式导航条，需要把导航条放在 .nav-collapse.collapse 的容器中，并添加一个...
bootstrap4 实现响应式导航栏
hugejihu9的专栏
01-15 2964
文章来自：源码在线https://www.shengli.me/css/579.html          
BootStrap入门：打造响应式navbar导航栏
4. 响应式设计：Bootstrap的响应式CSS使得网站能适应不同设备的屏幕尺寸。 5. 统一的解决方案：Bootstrap提供了一套统一的界面设计方法。 6. 强大的内置组件：包括网格系统、导航、表单、按钮等，易于使用和自定义。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值