Ссылка на страницу с Bootstrap

Question

Я очень смущен тем, как работает ссылка на элемент внутри страницы. Я учусь starter template для 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, но где содержание определяется для этого ? В примере сайта div .starter-template остается таким же, как только я нажимаю кнопки навигации. Что мне нужно сделать, чтобы изменить div, когда нажата кнопка навигации? Я попытался сделать это, но он просто сделал гигантскую ссылку, как и следовало ожидать:

<a name="about"> 
    <div class="container"> 
     <div class="starter-template"> 
      <h1>About.</h1> 
       <p class="lead">#about</p> 
     </div> 
    </div> 
</a> 

Благодарим за помощь!

0 Carpetfizz

Answer 1

Ссылки являются заполнителями. Если вы хотите сохранить их одинаковыми, например #about, вы хотите определить элемент на своей странице с этим идентификатором. Например, сделать более длинную страницу, и включают в себя следующие теги:

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

При нажатии на ссылку будет прыгать на это место на странице.

Wikipedia использует этот подход для перехода к разделам в статье. Например, проверить <span> тег, содержащий «Смотрите также» текст здесь:

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

Однако, поскольку они являются заполнители в шаблоне Bootstrap, идея заключается в том, что вы будете ставить в свои собственные ссылки, как вы усмотрению. Например, если вы хотите добавить ссылку на Yahoo, нужно ввести свой собственный HREF, например, так:

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

Или цель любой другой ссылке на вашем сайте.

Они просто заполнители. И если вы хотите, чтобы эти цели существовали, вам нужно создать страницы по указанным им URL-адресам.

Такие хеш-ссылки могут вести себя по-другому, если вы разрабатываете одностраничное приложение (SPA), но я думаю, что я рассмотрел более простой ответ на то, что вас сбивает с толку. I.e., хеш-ссылки пытаются перейти к идентификатору внутри страницы, но элемент с этим идентификатором должен существовать для чего-либо, что может произойти.

Это поведение встроено в HTML; это не что-то уникальное для использования Bootstrap.