ナビゲーション
すべてHTMLはクラスとidの両方を指定することができる。
これらは単なるラベルであり、CSSでスタイルを指定するときに使用する。
クラスとidの違いはクラスはページ内で何度でも使用できるが、idは一回しか使用できない点です。
下のheaderタグには、navbar, navba-fixed-top, navbar-inverseという3つのCSSクラスがスペース区切りで与えられています。
<header class = "navbar navbar-fixed-top navbar-inverse">
下のコードをみてください
. navタグは内側がナビゲーションリンクであるという意図を明確に伝える役割があります。
. ulタグに付与されているnav,navbar-nav, navbar-rightクラスもBootstrapにおいて特別な意味を持ちます。
<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>
image_tagヘルパー
このヘルパーは、シンボルを使ってalt属性やwidth属性を設定できる。
下の例では、アセットパイプラインを通してapp/assets/images/の中から該当画像ファイルを探し出してきてくれる。
<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
"https://rubyonrails.org/" %>
renderメソッド
renderメソッドにはapp/viewsを起点とするフルパスを渡すことができます
<%= render "layouts/header"%>
名前付ルート
ページ名 | URL | 名前付きルート |
---|---|---|
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 |