All HTML can specify both class and id. These are just labels and are used when styling with CSS.
** The difference between a class and an id is that a class can be used multiple times within a page, but an id can only be used once. ** **
In the header tag below, three CSS classes, navbar, navba-fixed-top, and navbar-inverse, are given separated by spaces.
<header class = "navbar navbar-fixed-top navbar-inverse">
See the code below The .nav tag is responsible for clearly communicating the intent that ** the inside is a navigation link **. The nav, navbar-nav, and navbar-right classes attached to the .ul tag also have special meaning in 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>
This helper can set alt and width attributes using symbols. In the example below, the corresponding image file will be searched for in app / assets / images / through the asset pipeline.
<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
"https://rubyonrails.org/" %>
You can pass the full path starting from app / views to the render method
<%= render "layouts/header"%>
| Page name | URL | Named 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