Alle HTML-Code kann sowohl Klasse als auch ID angeben. Dies sind nur Beschriftungen und werden beim Stylen in CSS verwendet.
** Der Unterschied zwischen Klasse und ID besteht darin, dass die Klasse innerhalb der Seite mehrmals verwendet werden kann, die ID jedoch nur einmal. ** ** **
Das folgende Header-Tag enthält drei CSS-Klassen: navbar, navba-fixed-top und navbar-inverse, die durch Leerzeichen getrennt sind.
<header class = "navbar navbar-fixed-top navbar-inverse">
Siehe den Code unten Das .nav-Tag hat die Aufgabe, die Absicht klar zu kommunizieren, dass ** das Innere ein Navigationslink ** ist. Die an das .ul-Tag angehängten Klassen nav, navbar-nav und navbar-right haben auch in Bootstrap eine besondere Bedeutung.
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
Dieser Helfer kann Symbole verwenden, um die Attribute alt und width festzulegen. Im folgenden Beispiel wird die entsprechende Bilddatei in App / Assets / Images / über die Asset-Pipeline gesucht.
<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
"https://rubyonrails.org/" %>
Sie können den vollständigen Pfad von App / Views an die Rendermethode übergeben
<%= render "layouts/header"%>
Seitenname | URL | Benannte Route |
---|---|---|
Home | / | root_path |
About | /about | about_path |
Help | /help | help_path |
Contact | /contact | contact_path |
Sign up | /signup | signup_path |
Log in | /login | login_path |
Recommended Posts