Ruby On Rails Lesson
The div tag is a generic division; it doesn’t do anything apart from dividing the document into distinct parts. In older-style HTML, div tags are used for nearly all site divisions, but HTML5 adds the header, nav, and section elements for divisions common to many applications. In this case, each div has a CSS class as well. As with the header tag’s classes, these classes have special meaning to Bootstrap.
After the divs, we encounter some embedded Ruby:
This uses the Rails helper link_to to create links (which we created directly with the anchor tag a in Section 3.3.2); the first argument to link_to is the link text, while the second is the URI. We’ll fill in the URIs with named routes in Section 5.3.3, but for now we use the stub URI ’#’ commonly used in web design. The third argument is an options hash, in this case adding the CSS id logo to the sample app link. (The other three links have no options hash, which is fine since it’s optional.) Rails helpers often take options hashes in this way, giving us the flexibility to add arbitrary HTML options without ever leaving Rails.
The second element inside the divs is a list of navigation links, made using the unordered list tag ul, together with the list item tag li:
The nav tag, though formally unnecessary here, communicates the purpose of the navigation links. The nav and pull-right classes on the ul tag have special meaning to Bootstrap. Once Rails has processed this layout and evaluated the embedded Ruby, the list looks like this:
The final part of the layout is a div for the main content:
As before, the container class has special meaning to Bootstrap. As we learned in Section 3.3.4, the yield method inserts the contents of each page into the site layout. Apart from the site footer, which we’ll add in Section 5.1.3, our layout is now complete, and we can look at the results by visiting the Home page. To take advantage of the upcoming style elements, we’ll add some extra elements to the home.html.erb view (Listing 5.2).
Listing 5.2 The Home page with a link to the signup page.
In preparation for adding users to our site in Chapter 7, the first link_to creates a stub link of the form