如何使用Bootstrap构建画布外导航布局

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-05-05 06:34:37 发布 672 阅读 AI 写同款· GEO 优化 ›

Bootstrap旨在通过提供一些常用的Web组件来满足许多情况。有按钮，响应式导航栏，选项卡，工具提示，轮播等。尽管如此，即使Bootstrap提供了所有玩具，它仍然缺少一种非常流行的模式：离画布导航。

这种导航方法将菜单从可见区域（画布）中关闭，从而提供了更多空间来聚焦于主要内容。画布外导航最初在本机移动应用程序中变得很流行，然后进入了响应式网络（部分感谢Luke Wroblewski的文章）。通常，它使用jQuery来切换导航状态。

说到这，Bootstrap如此流行，社区支持如此之大，开发人员已经创建了插件或扩展，以包含官方 Bootstrap中不可用的组件。其中包括一个用于实现画布外导航的控件。

在本教程中，我将向您展示如何向Bootstrap添加画布外导航，其扩展名为Arnold Daniels的Jasny Bootstrap 。我选择此选项的两个原因是：

顾名思义，该扩展是专门为Bootstrap构建的。因此，其中的代码库与Bootstrap的代码库保持一致。它在命名和实现组件的方法方面遵循Bootstrap约定。
Jasny Bootstrap附带了画布外导航插件，该插件可通过一系列类，HTML5数据属性和JavaScript初始化灵活配置。

关于凉亭的一点

在本教程中，我将引导您完成一个使用Bower帮助网站维护的工作流。因此，请确保已在系统上安装Bower。如果您不想使用Bower，那很好，但是为了让您入门，我们还发布了一些关于Bower的初学者教程。

好吧，让我们开始吧。

1.入门

让我们通过创建工作目录开始我们的项目，在工作目录中放置所需的点点滴滴。

working-dir
|-- assets
|   |-- css
|   |-- img
|   `-- js
`-- sources
    |-- js
    `-- less

我们将使用资产文件夹来保存网站资产，例如图像，样式表，JavaScript文件等。在sources文件夹中，我们将放置LESS和JavaScript的未编译源代码。然后，我们将与Bower一起定义项目规范-名称，版本，依赖项以及其他。

在工作目录中运行bower init命令，并填写所有提示。

您不必完全按照上面显示的输入进行操作；根据您自己的要求调整输入。完成后，将出现一个新文件名为bower.json ，其中包含我们刚刚填写的项目规范。

2.安装项目依赖项

这个项目需要两个框架。即Bootstrap和Jasny Bootstrap。在安装它们之前，让我们指定Bower必须在其中安装软件包的目录名称。为此，请在工作目录的根目录下创建一个名为.bowerrc的新文件，并将以下几行内容命名为该文件夹。

{
	"directory": "components"
}

然后，在bower.json包含以下行，这将告诉Bower项目依赖项为Bootstrap和Jasny Bootstrap 3.1.1版或更高版本。

"devDependencies": {
    "bootstrap": ">=3.1.1",
    "jasny-bootstrap": ">=3.1.1"
}

在“终端”或“命令提示符”中，运行bower install命令以立即获取swe已指定的所有依赖项。

如.bowerrc指定的.bowerrc ，项目依赖项现在应位于新生成的名为components文件夹中。

3.组织样式表

准备好所有依赖项之后，我们就可以开始进行项目了！我们将通过组织样式表拉开序幕。我们将需要创建四个LESS样式表，即：

variables.less顾名思义，此样式表包含Bootstrap中使用的变量。如果希望在不影响原始文件的情况下自定义变量，我们将制作此副本（从此Gist复制Bootstrap变量）。
variables-jasny.less类似地，此样式表包含在扩展Jasny Bootstrap中使用的变量（在此处复制变量）。
app.less此样式表包含对构建网站所需的Bootstrap和Jasny Bootstrap样式表的引用（您可以在此处复制内容）。
style.less我们将在此样式表中编写我们自己的样式。

创建并放在一起，如下所示：

...
`-- sources
	|-- js
	`-- less
		|-- app.less
		|-- style.less
		|-- variables-jasny.less
		`-- variables.less

接下来是编译这些样式表。为此，我们将使用以下配置的Koala ：

确保已选中“ 自动编译”选项。因此，无论何时进行更改，Koala都会立即将LESS文件编译为CSS。
将app.less以及style.less输出目的地设置为assets/css/目录。
选择Source Map选项以生成.map以便更轻松地调试样式表。如果这是您第一次听说Source Map，请查看我们的Tuts +代码Source Map 101教程。

设置完成后，将LESS编译为CSS。

注意：请记住，如果您喜欢另一种编译LESS文件的方法，则没有义务使用Koala。

4.建立网页

创建一个名为index.html的新HTML文件。除了基本HTML5裸结构之外， index.html文件还将包含meta视口标记，meta description标记，标题以及样式表的链接，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demonstration on adding off-canvas menu to Bootstrap with Jasny Bootstrap">
	<title>Bootstrap Off-canvas Navigation</title>

	<link href="assets/css/app.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>

</body>
</html>

画布外导航

现在，让我们添加画布外导航。当涉及到组件标记时，Jasny Bootstrap使用与Bootstrap类似的方法。这是我们从画布外导航结构开始的方式：

<nav id="offcanvas" class="navmenu navmenu-inverse navmenu-fixed-right navmenu-site offcanvas" role="navigation">
</nav>

它包含几个类。 navmenu ， navmenu-inverse ， navmenu-fixed-right这三个类将元素定义为navmenu 。 导航菜单是Jasny Bootstrap组件之一，它将分配的元素设置为垂直导航。 offcanvas是将元素设置为离开视口的类。此外，我们还添加了一个新类navmenu-site ，它将使我们能够使用自己的样式自定义导航。

可以使用<ul>元素和nav navmenu-nav类来布局画布导航中的菜单项，就像这样。

<nav id="offcanvas" class="navmenu navmenu-inverse navmenu-fixed-right navmenu-site offcanvas" role="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Portfolio</a></li>
	</ul>
</nav>

非常欢迎您将原始的Bootstrap组件与该标记结合在一起，例如Dropdowns和Buttons 。

我们将在本教程中添加的导航HTML标记很长。因此，为简单起见，可以通过此Gist获得完整的标记。。

网页内容

下图显示了我们布置网页内容的计划：

如上所示，网站内容将包括徽标，带有“汉堡包”图标的切换按钮以使导航进出滑动，以及带有大按钮的几行标语-称为号召性用语按钮

内容HTML标记同样冗长，无法粘贴在本教程中。相反，请随时从Gist复制整个内容。

5.风格

本文中的许多样式将仅仅是装饰性的，围绕颜色，尺寸和位置旋转。通过自定义Bootstrap预定义样式并编写我们自己的样式，可以实现这种装饰样式。因此，我不愿逐步执行可能已经显而易见的步骤，而是要指出一些最重要的关键细节。

首先，在编写一行之前，将app.less样式表导入style.less 。这将使我们能够重用其中的变量和Mixins。

@import (reference) 'app.less';

其次，我们创建一个LESS变量来定义图像路径。我们将变量命名为@path-img 。

@path-img: '../../assets/img/';

每当我们需要在样式表中引用图像时，我们都将包含此变量。下面的示例显示了我们如何使用它指向徽标。

.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    text-align: left;
    margin-top: -15px;
    a {
        .text-hide();
        display: inline-block;
        background-image: url('@{path-img}logo.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100px;
        height: 33px;
    }
}

垂直居中

最后，我们想将内容，标语和按钮垂直居中。目前，CSS还没有给我们提供一种仅使用单个属性声明来垂直对齐内容的便捷方法。因此，有许多方法可以实现它，说实话，没有任何方法比其他方法更好。

在这种情况下，我们将使用CSS Table显示方法对齐内容。如果看一下网页标记，您会看到我们用两个<div>包装了网页内容。每个<div>都分配有site-wrapper和site-wrapper-inner类，就像这样。

<div class="site-wrapper">
	<div class="site-wrapper-inner">
	...
	</div>
</div>

为了使内容垂直对齐，我们将site-wrapper的display属性设置为table ，并通过将width和height为100%使其覆盖整个视口。然后，将内部包装器display属性设置为table-cell 。现在，这使我们可以应用vertical-align属性来垂直对齐内容。

.site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}

有关样式规则的详细信息，请参见本要点 。

6.使网页活跃起来

添加样式后，网站现在应该具有外观，如下图所示：

但是，该网站尚未完全正常运行。尝试点击“汉堡包”图标；不会滑出画布。此功能来自JavaScript库，因此我们必须对其进行编译并将其添加到网站中。

为了使用画布外导航，我们需要四个JavaScript库，分别是jQuery ， transition.js ， dropdown.js以启用我们在导航中添加的下拉菜单，最后是offcanvas.js 。要将它们一起编译，请在source / js目录中创建一个新JavaScript文件。在这种情况下，我们将其命名为app.js。

...
`-- sources
	|-- js
	|	`-- app.js
	`-- less

像这样，使用@koala-prepend导入JavaScript库。

//@koala-prepend "../../components/jquery/dist/jquery.js"
//@koala-prepend "../../components/bootstrap/js/transition.js"
//@koala-prepend "../../components/jasny-bootstrap/js/offcanvas.js"

将输出设置到/ assets / js目录，然后单击“ 编译”按钮。不要忘记在网页上链接已编译的文件。

<script src="assets/js/app.min.js"></script>

现在，您应该能够将画布外导航进出。

过渡

此外，您还可以在页面底部添加以下JavaScript，这将启用下拉菜单的过渡效果。

<script>
(function() {
    var $offCanvas = $('#offcanvas'),
        $dropdown  = $offCanvas.find('.dropdown');
    $dropdown.on('show.bs.dropdown', function() {
        $(this).find('.dropdown-menu').slideDown(350);
    }).on('hide.bs.dropdown', function(){
        $(this).find('.dropdown-menu').slideUp(350);
    });
})();
</script>