diff options
Diffstat (limited to 'misc/openlayers/examples/bootstrap.html')
-rw-r--r-- | misc/openlayers/examples/bootstrap.html | 81 |
1 files changed, 0 insertions, 81 deletions
diff --git a/misc/openlayers/examples/bootstrap.html b/misc/openlayers/examples/bootstrap.html deleted file mode 100644 index 7f3b78b..0000000 --- a/misc/openlayers/examples/bootstrap.html +++ /dev/null @@ -1,81 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>Bootstraped OpenLayers</title> - <link rel="stylesheet" href="../theme/default/style.css"> - <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet"> - <style> - body { - padding-top: 60px; - padding-bottom: 40px; - } - #map { - height: 350px; - background-color: #eee; - } - .olControlAttribution { - bottom: 3px; - left: 10px; - line-height: 9px; - font-size: 9px; - color: #ccc; - } - </style> - <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-responsive.min.css" rel="stylesheet"> -</head> -<body> - <div class="navbar navbar-inverse navbar-fixed-top"> - <div class="navbar-inner"> - <div class="container-fluid"> - <a class="brand" href="/">openlayers.org</a> - <ul class="nav"> - <li> - <a href="./"> - <i class="icon-globe icon-white"></i> examples - </a> - </li> - </ul> - </div> - </div> - </div> - <div class="container-fluid" ng-controller="AlertsCtrl"> - <div class="row-fluid"> - <div class="span7"> - <div id="map"></div> - </div> - <div class="span5"> - <h4>OpenLayers and Bootstrap</h4> - <p> - This example demonstrates an OpenLayers map in a fluid - layout using Bootstrap CSS. - </p> - <p> - Note that the OpenLayers stylesheet is loaded before - Bootstrap. The Bootstrap CSS sets the maximum width for - images to be 100% (of their containing element). - </p> -<pre><code>img { - max-width: 100%; -} -</code></pre> - <p> - This causes problems for images that you might want to be - bigger than their containing element (e.g. big tile in small - map viewport). To overcome this, the OpenLayers CSS - overrides this <code>max-width</code> setting. If you are - not loading the OpenLayers default CSS or are having trouble - with tile sizing and Bootstrap, add the following to your - markup: - </p> -<pre><code><style> - img.olTileImage { - max-width: none; - } -</style></code></pre> - </div> - </div> - </div> - <script src="../lib/OpenLayers.js"></script> - <script src="bootstrap.js"></script> -</body> -</html> |