Html 使用 Bootstrap 在页面内链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20605009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Linking within a page with Bootstrap
提问by Carpetfizz
I'm very confused about how linking to an element within a page works. I'm learning the starter templatefor Twitter Bootstrap, and it contains the following code in the navbar:
我对链接到页面中的元素的工作方式感到非常困惑。我正在学习Twitter Bootstrap的入门模板，它在导航栏中包含以下代码：
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
I understand that within the list elements are anchor tags to #aboutand #contact, but where is the content defined for this? In the example site, the .starter-templatediv stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
我知道在列表元素中是指向#about和的锚标记#contact，但是为此定义的内容在哪里？在示例站点中，.starter-template每当我单击导航栏按钮时，div 都保持不变。每当单击导航栏按钮时，我该怎么做才能更改 div？我试过这样做，但它就像你所期望的那样建立了一个巨大的链接：
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
感谢您的任何帮助！
~Carpetfizz
~Carpetfizz
回答by Marc
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
链接是占位符。如果您想让它们保持不变，例如#about，您需要使用该 ID 在页面中定义一个元素。例如，制作一个更长的页面，并包含以下标签：
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
单击该链接将跳转到页面中的该位置。
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span>tag containing the "See Also" text here:
维基百科使用这种方法跳转到文章中的部分。例如，在<span>此处检查包含“另请参阅”文本的标签：
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
但是，由于它们是 Bootstrap 模板中的占位符，因此您可以根据需要放入自己的链接。例如，如果您想添加一个指向 Yahoo 的链接，您需要输入您自己的 HREF，如下所示：
<a href="http://www.yahoo.com">Yahoo</a>
Or target any other link in your site.
或定位您网站中的任何其他链接。
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
它们只是占位符。如果您希望这些目标存在，您必须在它们指向的 URL 处创建页面。
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
如果您正在开发单页应用程序 (SPA)，此类哈希链接的行为可能会有所不同，但我想我已经介绍了对让您感到困惑的问题的更简单的答案。即，散列链接尝试跳转到页面内的 ID，但需要存在具有该 ID 的元素才能出现任何明显的情况。
This behavior is built into HTML; it's not something unique to using Bootstrap.
此行为内置于 HTML 中；这并不是使用 Bootstrap 的独特之处。
