Twitter Bootstrap Question posted in

Rails bootstrap – Twitter bootstrap

Ok, i have no idea what i am doing. I have no skills regarding front end.

I want to make a drop-down menu using bootstrap.
I got the example code, but the menu isn’t working…
I am pretty sure i have either a missing gem, or a missing include in some css or js file.

Rails 4.2.0

Ruby 2.2.0

aplication.css:

 *= require_self
 *= require_tree .
 *= require flat-ui
 */

bootstrap_and_overrides.css

/*
  =require twitter-bootstrap-static/bootstrap

  Use Font Awesome icons (default)
  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
  =require twitter-bootstrap-static/fontawesome
  */

gemfile

gem 'sass-rails', '~> 4.0.0'
gem 'jquery-rails'
gem "twitter-bootstrap-rails"
gem 'flatui-rails'
# Turbolinks gem is commented

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require flat-ui

application.html.erb

<div class="navbar navbar-fluid-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="ic on-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href=<%=displays_path%>>Visualizeitor</a>

      <div class="container-fluid nav-collapse">
        <ul class="nav">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>


          <li><%= link_to "majors", majors_path  %></li>
          <li><%= link_to "students", students_path  %></li>
          <li><%= link_to "courses", courses_path  %></li>
          <li><%= link_to "teachers", teachers_path  %></li>
          <li><%= link_to "students", students_path  %></li>

        </ul>
        <ul class="nav pull-right">
          <% if teacher_signed_in? %>
          <li><%= link_to 'Edit profile', edit_teacher_registration_path, :class => 'navbar-link' %></li>
          <li><%= link_to "Logout", destroy_teacher_session_path, method: :delete, :class => 'navbar-link'  %></li>
          <% elsif student_signed_in? %>
          <li><%= link_to 'Edit profile', edit_student_registration_path, :class => 'navbar-link' %></li>
          <li><%= link_to "Logout", destroy_student_session_path, method: :delete, :class => 'navbar-link'  %></li>
          <% else %>
          <li><%= link_to "Login - teacher", new_teacher_session_path, :class => 'navbar-link'  %></li>
          <li><%= link_to "Login - student", new_student_session_path, :class => 'navbar-link'  %></li>
          <% end %>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

How i make my dropdown work?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I have no idea why. But when i changed the code to this, it worked.

              <li class="dropdown">
            <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Visualizator
              <span class="caret"></span>
            </button>
              <ul class="dropdown-menu">
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
              </ul>
          </li>

  2. 0

    check if your bootstrap is included by running $().modal in the Chrome Development console, it should return a function definition. if it returns undefined, your bootstrap is not included properly.

    when i was learning this, the best approach for me was to open the chrome developer console, read http://guides.rubyonrails.org/asset_pipeline.html until my brain is no longer taking in information, and then play with the console and application.html.erb until i got a

    <div class="btn btn-small btn-danger">kirka</div>

    when inserted into my DOM, to show up as the proper button with styling.

    then i would go to http://getbootstrap.com/components and go nuts.

    toodles

    Login or Signup to reply.
  3. 0

    I think your missing the javascript addition 🙂

    <script src="../pathtoyourfile/bootstrap.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search