Bootstrap - Navbar (响应式导航栏)

灰太狼 2022-05-18 10:57 371阅读 0赞

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

**响应式的导航栏**

上面代码就是一个简单的响应式导航栏。什么是响应式了？在浏览器窗口大小变化的情况下，依然保持美观（按照已经设计好的页面）。

![70][]

![70 1][]![70 2][]

上面是当浏览器窗口比较的大的时候的情况，下面是浏览器窗口比较小的时候，旁别有个button,点击以后就出现那些导航元素。

下面是实现代码

<nav class='navbar navbar-inverse navbar-fixed-top'>
            <div class='container'>
                <div class='navbar-header'>
                    <button class='navbar-toggle' type='button' data-toggle='collapse' data-target='#collapse'>
                        <span class='sr-only'>切换导航栏</span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                    </button>
                    <a class='navbar-brand' href='#toppage' ><strong>DeepusAcademy</strong></a>
                </div>
                <div id='collapse' class='collapse navbar-collapse' >
                    <ul class='nav navbar-nav navbar-right'>
                       <li><a href='#who'>WHO ARE YOU</a></li>
                       <li><a href='#getInvolved'>GET INVOLVED</a></li>
                    </ul>
                </div>
            </div>
        </nav>

.navbar-inverse 表示反色的导航栏，是一个带有黑色背景白色文本的反色的导航栏。

.navbar-fixed-top表示固定到头部，也就是不随浏览器页面滚动

.navbar-toggle来修饰button表示这是一个控制切换状态的button

data-toggle='collapse'  这个十分重要，表示切换状态是以折叠形式展现

data-target=''  这个是说明对象的，你要折叠的是谁。

.sr-only 不可见（可以去掉）  下面那三个span 是表示button上面的三条线的

.navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

.collapse 表示一开始是隐藏的，换句话说就是button没有被点击![70 3][]

.collagse in 表示一开始是展开的，就是button被点了一下![70 4][]

[70]: /images/20220518/dc50bcad2d27495fa3ed5f493bf2f5b6.png
[70 1]: https://img-blog.csdn.net/20180802194019414?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220518/696f863fdda94d83976d7344712383ad.png
[70 3]: /images/20220518/454c512bde094437a02f6a63c347c0c9.png
[70 4]: /images/20220518/071204c4897946e59a38e22c61d443be.png