Die Verlinkung innerhalb einer Seite mit Bootstrap

Ich bin sehr verwirrt darüber, wie sich die Verknüpfung, um ein element innerhalb einer Seite funktioniert. Ich Lerne die starter-Vorlage für Twitter Bootstrap, und es enthält den folgenden code in das navbar:

<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>

Ich verstehen, dass in der Liste Elemente sind Anker-tags zu #about und #contact, aber wo ist der Inhalt definiert? In der Beispiel-site, die .starter-template div bleibt die gleiche, wenn ich auf die navbar-buttons. Was muss ich tun, um zu ändern, div, wenn ein navbar-button geklickt? Ich habe versucht zu tun, aber es machte einfach einen Riesen link, wie man es erwarten würde:

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

Danke für jede Hilfe!!!

~Carpetfizz

InformationsquelleAutor Carpetfizz | 2013-12-16

  1. 9

    Die links sind Platzhalter. Wenn Sie möchten, halten Sie die gleiche, wie #about wollen Sie definieren ein element in der Seite mit dieser ID. Zum Beispiel, machen Sie eine längere Seite, und den folgenden tag:

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

    Klick auf den link springt zu der Stelle in der Seite.

    Wikipedia verwendet diesen Ansatz, um zu springen, um Abschnitte in einem Artikel. Zum Beispiel, überprüfen Sie die <span> tag mit dem "Siehe Auch" - text hier:

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

    Jedoch, da Sie Platzhalter in der Bootstrap-Vorlage, die Idee ist, dass Sie in Ihre eigenen links, wie Sie sehen, passen. Zum Beispiel, wenn Sie hinzufügen wollen, einen link zu Yahoo, würden Sie geben Sie Ihre eigene HREF, etwa so:

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

    Oder eine beliebige andere link in Ihre Website.

    Sie sind nur Platzhalter. Und wenn Sie möchten, dass diese Ziele vorhanden sind, müssen Sie zum erstellen der Seiten auf die URLs, die Sie zeigen.

    Solche hash-links können Verhalten sich ein wenig anders, wenn Sie die Entwicklung einer Single-page-Application (SPA), aber ich denke, ich habe behandelt die einfachere Antwort auf das, was ist verwirrend. I. e., hash-links versuchen zu springen, um eine ID, die innerhalb der Seite, aber ein element mit dieser ID muss vorhanden sein für alles, was Auffällig auftreten.

    Dieses Verhalten ist gebaut in HTML; es ist nicht etwas einzigartiges zu mit Bootstrap.

    Vielen Dank für deine Antwort! Eigentlich bin ich daran interessiert, ein SPA, aber ich denke, ich werde brauchen einen anderen Rahmen zu tun, die Bindung, wie Eckig?

    InformationsquelleAutor Marc

Schreibe einen Kommentar