Bootstrap Concept

Bootstrap-Concept.markdown

Bootstrap Concept

Proof of concept... Nothing to see here... I should really just go pro. :)

A Pen by Russ Beye on CodePen.

License.

index.html

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="nav-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsed-content">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Something</a>
    </div>
    
    <div class="collapse navbar-collapse" id="collapsed-content">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="St. Louis, MO">
        </div>
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
        <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-heart"></span></button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About Us</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-off"></span> Logout</li>
      </ul>
    </div>
  </div>
</nav>

<section class="map-canvas">
  <div id="map"></div>
</section>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

script.js

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([
38.6272,-90.1978], 12);

// add MapQuest tile layer, must give proper OpenStreetMap attribution according to MapQuest terms
          L.tileLayer('http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap</a>'
          }).addTo(map);

style.css

body {
  padding-top: 51px;
}

#map {
  height: 100vh; /* http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window */
}