·

10.04K

· mkjones

Slightly left-field but this took me a while to work out. HAML is great but the extra meta and elements needed to make Bootstrap work were a bit of a pain:

HAML code

.nav-collapse.collapse
 %ul.nav
 %li.active
 %a{:href => "#"} Home
 %li.dropdown
 %a.dropdown-toggle{:href => "#", "role" => "button", "data-toggle" => "dropdown", "data-target" => "#"} 
 The dropdown item
 %b.caret
 %ul.dropdown-menu{"role" => "menu"}
 %li
 %a{:href => "#link1"} 
 Dropdown #1
 %a{:href => "#link2"} 
 Dropdown #2
 %a{:href => "#link3"} 
 Dropdown #3
 %a{:href => "#link4"} 
 Dropdown #4
 %li
 %a{:href => "#contact"} Contact

HTML output (Bootstrap)

<ul class="nav">
 <li class="active">
 <a href="#">Home</a>
 </li>
 <li class="dropdown">
 <a role="button" href="#" data-toggle="dropdown" data-target="#" class="dropdown-toggle">
 The dropdown item
 <b class="caret"></b>
 </a>
 <ul role="menu" class="dropdown-menu">
 <li>
 <a href="#link1">
 Dropdown #1
 </a>
 <a href="#link2">
 Dropdown #2
 </a>
 <a href="#link3">
 Dropdown #3
 </a>
 <a href="#link4">
 Dropdown #4
 </a>
 </li>
 </ul>
 </li>
 <li>
 <a href="#contact">Contact</a>
 </li>
</ul>

Related protips

Have a fresh tip? Share with Coderwall community!

Post

Post a tip

Sponsored by

#native_company#

#native_desc#

#native_cta#

Filed Under

Accelerate Your Web Development Skills

Post a job for only 299ドル

Sponsored by #native_company# — Learn More