shift + command + C 高亮实时预览

下面， 我们看一下在 Bootstrap 里面的响应式的导航栏。 在小尺寸的设备上，导航栏上的东西，比如这个菜单，搜索框，订阅按钮这些东西，都会被折叠到一块儿 ... 然后在窗口的右上角显示的一个按钮 ... 点击这个按钮，可以把折叠起来的内容显示出来。

我们需要先把要折叠起来的东西，用一个元素包装起来 ... 可以使用一个 div 标签 ... 在这个标签上面，需要一些 css 类，还要再定义一个 id ...

添加一个叫 collapse 的类 ... 还有 navbar-collapse ... 在上面再定义一个 id ，一会儿，在切换显示它的按钮上，需要用到这个 id ... 这里我们可以叫它 responsive-navbar ..

div.collapse.navbar-collapse#responsive-navbar

用这个 div 标签，包装一下要在导航栏上折叠起来的东西 ...

然后，我们再去定义切换显示它的那个按钮 ...

在这个 navbar-brand 元素的上面 ...

添加一组 button 标签 ... 上面加上一个叫 navbar-toggle 的类 ...

button.navbar-toggle

在这个按钮上，还需要两个 data 属性 ... 一个是 data-toggle ... 它的值设置成 collapse ... 这个属性可以开启这个按钮的切换显示折叠内容的功能 ...

然后再添加一个 data-target 的属性 ... 它的值设置成在折叠的包装元素上面定义的那个 id ... 就是这个 id ... responsive-navbar ...

这个属性的意思就是，指定了要切换显示折叠的内容 ...

<button class="navbar-toggle" data-toggle="collapse" data-target="#reponsive-navbar"></button>

在这个按钮的里面，再加上几个东西 ...

一个 span 标签，上面加上一个 icon-bar 的类 .. 需要三个这样的东西 ... 它们就是在按钮上显示的那三条横线 ...

span.icon-bar*3

最后再把这个按钮，还有导航栏上的标志，放在一组带 navbar-header 这个类的容器里面 ...

div.navbar-header ...

预览

下面，再到浏览器上试一下 ... 保存 ... 回到浏览器 ...

调整浏览器的窗口的宽度 ... 缩小到一定程度以后 ... 你会发现 ... 导航栏上的内容就会被隐藏起来了 ... 然后在导航栏的右边会显示出一个按钮 ...

点击这个按钮 ... 会出现一个下拉菜单 ... 在这里，会显示出被折叠起来的导航栏上的内容 ...

我们可以再调整一下内容在这里的显示 ... 比如这个搜索按钮的位置 ... 还有这个 订阅课程 的按钮，在这里可以把它隐藏起来 ....