Ruby On Rails Classroom image

Anil  Bist / Professional / Web Technology

 
To post your Question Join Classroom
 
Lesson Topics's No:-  |1 | 2|Last
Lessons:-Site Navigation

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:

< div  class=   "container" >
<%=  yield   %>
</div>

 

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.
app/views/static_pages/home.html.erb

                                  

 

In preparation for adding users to our site in Chapter 7, the first link_to creates a stub link of the form

  <a  href=  "#"  class=  "btn btn-large btn-primary">  Sign up now !  </a>

 

 
 
 
image
Anil  Bist

Skills    Ruby On Rails

Qualifications :- High School - SLV, College/University - Graphic Era Deemed Univ University,
Location :-Dehradun,Dehradun,Uttarakhand,India
Description:-

I started my Professional Journey in 2006 with one of the Web Development Company in Bangalore and my 1st framework was "Ruby on Rail" as Web development and delivered around 5+ Projects using this platform. Then came another dimension as JEE/Sturst framework, Gradually I realized that I want to build something on my own and give my passion and energy on creating something different a
Explore

 

  Students (0)