如下所示的bootstrap樣式乘盖，定義了一個(gè)導(dǎo)航欄，當(dāng)瀏覽器寬度變窄時(shí)憔涉，列表項(xiàng)自動(dòng)折疊订框，在右邊邊會(huì)出現(xiàn)一個(gè)button，點(diǎn)擊按鈕列表項(xiàng)會(huì)下拉出現(xiàn)：
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
</button>
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
Learning Log</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>Hello, {{ user.username }}.</a></li>
<li><a href="{% url 'users:logout' %}">log out</a></li>
{% else %}
<li><a href="{% url 'users:register' %}">register</a></li>
<li><a href="{% url 'users:login' %}">log in</a></li>
{% endif %}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
滿(mǎn)屏?xí)r：
滿(mǎn)屏
窄屏?xí)r：
窄屏
<nav>標(biāo)簽是導(dǎo)航欄兜叨，中間的樣式可以網(wǎng)上查穿扳。
.navbar-header樣式使頭部的文字看起來(lái)大一些，而且也是導(dǎo)航欄的頭部国旷，當(dāng)在小屏幕上時(shí)是唯一能夠顯示的導(dǎo)航欄內(nèi)容之一矛物。
botton按鈕定義的就是小屏幕右邊的東西。其樣式class=“navbar-toggle collapsed”是必不可少的跪但。navbar-toggle樣式是控制按鈕的履羞，
collapsed是為了響應(yīng)折疊插件的。
data-toggle=“collapse”表明這個(gè)button是一個(gè)折疊控件屡久，其折疊的內(nèi)容指向data-target="#navbar"忆首，即是id為navbar的內(nèi)容。
aria-expanded=“false”表示初始控件是折疊的被环。
<id="navbar">中的class="navbar-collapse collapse"糙及，nvabar-collapse是導(dǎo)航欄的折疊樣式，collapse這是表示初始時(shí)是折疊的筛欢，沒(méi)有collapse樣式浸锨，那么縮放后導(dǎo)航欄元素將是展開(kāi)的。
