使用Bootstrap在页面内链接

Question

我对如何链接到页面中的元素非常困惑.我正在学习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>

我知道列表元素中的锚标记是#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>

感谢您的任何帮助!

〜Carpetfizz

Answer 1

链接是占位符.如果要保持它们相同,例如#about,您需要在页面中使用该ID定义元素.例如,制作一个较长的页面,并包含以下标记:

<h1 id="about">Here's the About Content</h1>

单击该链接将跳转到页面中的该位置.

维基百科使用这种方法跳转到文章中的部分.例如,检查<span>包含"另请参见"文本的标签:

http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also

但是,由于它们是Bootstrap模板中的占位符,因此您可以根据需要放入自己的链接.例如,如果您想添加一个指向Yahoo的链接,您需要输入自己的HREF,如下所示:

<a href="http://www.yahoo.com">Yahoo</a>

或定位您网站中的任何其他链接.

他们只是占位符.如果您希望这些目标存在,则必须在它们指向的URL处创建页面.

如果您正在开发单页面应用程序(SPA),这样的哈希链接可能会有所不同,但我认为我已经涵盖了让您感到困惑的更简单的答案.即,哈希链接尝试跳转到页面内的ID,但是具有该ID的元素需要存在以发生任何明显的事情.

此行为内置于HTML中; 它不是使用Bootstrap独有的东西.