css二级下拉菜单 Bootstrop实现多级下拉菜单功能(3)

注意 .navbar-collapse，它是说在视口的宽度小于 768px 的时候，将导航变成垂直方向。

大于 768px

小于 768px

4.3 三明治菜单

变成垂直的导航也不方便，我们希望成为流行的样式，比如这样。

我们需要额外做一些工作，一方面，我们需要说明，在视口小于一定宽度的时候，显示出来我们的特定的导航，添加额外的导航内容。

其实里面是两部分组成的，button 部分看起来很多，就是用来画出右面的三明治按钮。后面的 a 元素则是左边的导航。

通常它不会显示出来。

然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

这样，我们的导航就是这样的了。

5. 内容和边栏

主要内容部分，我们使用 div 来进行布局。

这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

这张表格则给出了详细的说明。

现在页面看起来是这样的。

6. 侧边栏导航

在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。

7. 参考资料

1. 20 分钟打造你的 Bootstrap 站点

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持梦搏网络。

网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法

[10416]

网站发布到IIS后，发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。于是跟踪http请求，发现woff字体请求出现GET .woff 404 (Not Found)的问题，但是项目中woff字体的文件并未丢失。后经排查，原来是服务器上IIS没有添加woff字体的MIME类型，导致发送HTTP请求时，IIS无法处理和识别此类型的文件。

解决方法1：在Web.config配置文件中添加woff字体的MIME类型

解放方法2：在IIS中添加woff字体的MIME类型

woff字体简介

MIME类型简介

解决方法一：在Web.config配置文件中添加woff字体的MIME类型

如果网站是使用ASP.NET 或者ASP.NET MVC 编写的，可以很方便的直接使用配置文件进行woff字体的配置。只要在Web.config中的system.webServer节点添加下面的配置可以了。

这里要注意下的是这个配置，添加此节点是防止出现这个错误：“在唯一密钥属性“fileExtension”设置为“.woff”时，无法添加类型为“mimeMap”的重复集合项”，这个问题可以点击此链接查看解决方法。如果只添加下面的这个节点，而且没有报这个错误的话，remove节点可以不用添加。另外”font/x-font-woff”是woff字体的MIME类型值。

将该节点添加到网站的配置文件后，在重新打开网站即可正常显示woff字体。此方法可用于没有权限操作IIS管理器的时候作为解决方案。