I am not an expert on css or bootstrap but after a while I manage to get a bootstrap nav menu almost finished. What I am missing is the css for the third level menu items. I think this are probably already on the bootstrap css, but maybe I have not added the class names properly.

This is the bootstrap css that I have overwritten:

    /**
    Bootstrap nav
    **/
    .navbar-default {
      background-color: #0090e5;
      border: 0 !important;  
    }
    
    .navbar-default ul {
        list-style-type: none;
    }
    
    .navbar-default .navbar-brand {
      color: #ecf0f1;
    }
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
      color: #ffffff;
    }
    .navbar-default .navbar-text {
      color: #ecf0f1;
    }
    .navbar-default .navbar-nav > li a {
      color: #ecf0f1;
    }
    .navbar-default .navbar-nav > li a:hover,
    .navbar-default .navbar-nav > li a:focus {
      color: #ffffff;
    }
    .navbar-default .navbar-nav > li .dropdown-menu {
      background-color: #0090e5;
    }
    .navbar-default .navbar-nav > li > .dropdown-menu > li a {
      color: #ecf0f1;
    }
    .navbar-default .navbar-nav > li > .dropdown-menu > li a:hover,
    .navbar-default .navbar-nav > li > .dropdown-menu > li a:focus {
      color: #ffffff;
      background-color: #63b7e8;
    }
    .navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
      background-color: #63b7e8;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #ffffff;
      background-color: #63b7e8;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
      color: #ffffff;
      background-color: #63b7e8;
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
      color: #ffffff;
      background-color: #63b7e8;
    }
    .navbar-default .navbar-toggle {
      border-color: #63b7e8;
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: #63b7e8;
    }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #ecf0f1;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
      border-color: #ecf0f1;
    }
    .navbar-default .navbar-link {
      color: #ecf0f1;
    }
    .navbar-default .navbar-link:hover {
      color: #ffffff;
    }
    
    @media (max-width: 767px) {
      .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #63b7e8;
      }
    }

And this is how I made the nav bar with a javascript to add classes.

    <!-- Begin Navbar -->
                  	<div class="col-sm-10 col-md-8 col-md-offset-1">
                      <div class="navbar navbar-default " role="navigation">
                          <div class="container-fluid">
                              <div class="navbar-header">
                                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                      <span class="icon-bar"></span>
                                      <span class="icon-bar"></span>
                                      <span class="icon-bar"></span>
                                  </button>                            
                                  <div class="collapse navbar-collapse">
                                      <jdoc:include type="modules" name="menu"/>
                                  </div> <!-- /.navbar-collapse collapse -->
                              </div> <!-- /.container-fluid -->
                          </div><!-- /.navbar .navbar-inverse -->
                      </div>
                      <!-- End Navbar --> 

This comes after the </body> tag

    <script type="text/javascript">
      (function($){
            jQuery(document).ready(function(){
              $('.navbar-nav > .parent').addClass('dropdown');
              $('.navbar-nav > .parent > a').addClass('dropdown-toggle');
              $('.navbar-nav > .parent > a').attr('data-toggle', 'dropdown');
              $('.navbar-nav > .parent > a').attr('href','#');
              $('.navbar-nav > .parent > a').append('<span class="caret"></span>');
              $('.navbar-nav > .parent > ul').addClass('dropdown-menu');
            });
          })(jQuery);
	</script>