为多个页面编写一次 Twitter Bootstrap 导航栏

2024-04-16

我正在尝试开始使用 Twitter Bootstrap 3。我想让每个导航栏项目都转到新的 href。例如,我希望导航栏项目“关于”和“联系”链接到对应的about.html and contact.html pages.

我发现的许多网站似乎只是在一个非常高的页面中滚动,但我不太喜欢这种方法,因为当我浏览这些页面时,它总是让我失望,而且看起来会很慢当页面变大时。

然而,让导航栏项目转到新的 href 的问题似乎是,当我更新和重写导航栏代码时,我必须在所有页面上保持导航栏代码同步。这显然是不正确的。

我是否误解了导航栏的预期用途——即使用 href 是错误的方法吗?如果没有,谁能告诉我一种在不同 html 页面上重用导航栏代码的有效方法?我找到了涉及使用的解决方案.shtml文件,但我宁愿不这样做。

Edit:一些解决方案确实提供了基本上包含 html 的可能性,这很棒。但这是做事的“引导方式”吗?或者当我应该以另一种方式做时,我是否正在努力使用旧系统?这似乎是一个足够广泛的问题,我已经继续了在这里问的 https://stackoverflow.com/questions/22615270/what-is-the-correct-way-to-navigate-using-the-twitter-bootstrap-navbar.


如果你使用grunt在你的项目中,你还可以使用咕噜烘烤 https://github.com/MathiasPaumgarten/grunt-bake用于 html 模板。 您可以创建导航栏.html并将其包含在任何 html 文件中,如下所示:

<!--(bake includes/navbar.html)-->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为多个页面编写一次 Twitter Bootstrap 导航栏 的相关文章

  • DataTable 破坏了 Nested Repeater 和 Bootstrap

    我遇到了数据表和嵌套重复器的问题 它基本上表明我还没有获得正确匹配的 tr td 标签 然而 我已经按照下面的链接中的 Nested Repeater 教程进行操作 对我来说 HTML 的格式正确 当我检查 DOM 时 一切似乎都很好 该表
  • 具有不同高度块的三列布局

    我有基于 Twitter Bootstrap 的简单 3 列布局 唯一的问题是 每根柱子都是由不同高度的块组装而成 div class container div class row div class span4 div class bl
  • Bootstrap 100% 宽度/全宽度

    我想用 Bootstrap 创建一个新网站 我需要它的宽度为 100 但我不希望它是流畅的 至少现在不是 我遇到的问题是 使用 bootstrap 标准将您限制为 960px 并且使用流体布局它是全宽的 但其行为就像流体布局应该通过在窗口尺
  • Bootstrap 模态对话框,show.bs.modal 事件相关Target 未定义。我怎样才能获得被点击的元素?

    按钮调用模式对话框 单击按钮时 会触发事件 结果事件引用 e latedTarget 未定义 那么 如何从处理程序中获取调用按钮呢 e 似乎不包含任何对调用按钮的引用
  • 如何在引导程序中将边框半径应用于?

    我需要一行应该是圆角的 并且行与行之间有间距 到目前为止 我尝试了如下所示的表格 曲线类 任何建议 修改都会有帮助 My CSS table curved border collapse separate table curved bord
  • 幻灯片引导轮播之间的空白

    我正在网站主页上使用引导轮播作为滑块 当轮播自动滑动时没有问题 但一旦我单击下一个和上一个箭头 幻灯片之间就会出现 140px 宽的空白 我已经检查了 css 并删除了 HTML 中的所有空白 但我一点运气都没有 轮播 HTML div c
  • Bootstrap 4.1.1 form-check form-check-inline 单选按钮

    我正在尝试将单选按钮显示为内联选项 在 Bootstrap 4 1 1 文档中 示例代码是 div class form check form check inline div
  • 我的引导页面页脚下方的空白

    虽然我之前在身体下方确定了 50 像素的填充 但我仍然遇到页面页脚下方有一堆空白的问题 我是否只需要延长内容即可填充垂直空间 我第一次使用 bootstrap 来创建我的新网站 但我陷入了这个恼人的困境 这是一个有问题的页面的链接 http
  • 无法更改 Bootstrap 4 中的导航栏链接颜色

    我正在尝试更改导航栏的一个链接的颜色 而我尝试了所有方法它仍然具有默认颜色 这是代码 li class nav item signup a class nav link Sign Up a li css navbar light navba
  • bootstrap-3 在 div 底部对齐链接和按钮

    从下面的屏幕截图中可以看出 链接并未在底部对齐div 如何对齐按钮edit delete add cart在底部div 注意我没有使用table bottomaligned position absolute bottom 0 margin
  • AngularJS/Bootstrap 推荐的日期选择器是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 使用 Angular Bootstrap 时 有多种添加日期选择器控件的选择 有 更好 的吗 这是我发现的 HTML 5 日期输入类型 不同浏览
  • 如何使字形更大? (改变尺寸?)

    我想让地球字形更大 以便它覆盖页面的很大一部分 它是矢量图像 它不是在按钮或任何东西中 而是在按钮中 它只是孤独的 有没有办法做到这一点 div class jumbotron span class glyphicon glyphicon
  • Bootstrap 折叠 - 转到打开项目的顶部?

    我正在使用引导折叠功能 但是当我打开一个包含大量内容的元素 然后打开下一个元素时 它会向下跳转并且不会转到打开元素的顶部 我尝试过使用scrollto插件 如下所示 但它不起作用 JS function a accordion toggle
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • Bootstrap 全角,有 2 种不同的背景(和 2 列)

    这有点难以解释 这就是为什么我在谷歌上也找不到答案 我正在使用 Bootstrap 3 并且需要全宽背景图像 在那 2 个透明颜色背景之上 我制作了一个示例图片以使其更清楚 1 2 组合透明彩色背景 3 4 组合透明彩色背景 1 2 3 4
  • 循环浏览 Bootstrap 3 jumbotron 的背景图像

    我正在尝试获取 3 个图像作为 Bootstrap 3 jumbotron 的背景循环播放 但问题是我在大屏幕中有 3 个 div 到目前为止我尝试过的所有解决方案都要求我将大屏幕的位置更改为相对位置 将背景图像更改为绝对位置 而且因为我试
  • 引导下拉菜单 同一水平行上的两个链接

    我正在使用 Bootstrap 制作下拉菜单 我想要的选项之一是下拉菜单中同一水平行上的两个链接 我将如何实现这一目标 div class navbar div class navbar inner li class dropdown a
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • 如何使弹出窗口出现在我的鼠标进入悬停目标的位置?

    这是一个示例代码 用于显示我的按钮下方的弹出窗口 fn popover defaults extend fn tooltip defaults placement bottom content 现在我希望弹出窗口出现在光标移动的位置 不仅是

随机推荐