Hi friends,
I tried out all the functions of bootstrap and I have the following
problems:
1. Carousel:
- Only 2 items possible
- no "back" function with a click on the arrow
2. Tooltip:
- no graphics, just the normal tooltip
3. Dropdown:
- 2 arrows?
Thanks for your help and your hints.
Here's the code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>...</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="description" content="">
<meta name="author" content="Alexander">
<!-- Le styles -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/
1.4.0/bootstrap.min.css">
<link href="./css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></
script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-
touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-
touch-icon-114x114.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-
target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">MY TEST</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Startseite</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Lernmodule
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Modul 1</a></li>
<li><a href="#">Modul 2</a></li>
<li class="divider"></li>
<li><a href="#">Modul 3</a></li>
<li class="divider"></li>
<li><a href="#">Modul 4</a></li>
</ul>
</li>
<li><a href="#about">Über das Projekt</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to
action -->
<div class="row">
<div class="span8">
<div class="hero-unit">
<h1>Herzlich Willkommen!</h1>
<p>Auf diesem Online-Portal erleben Sie dies und das.</p>
<p><a class="btn btn-primary btn-large">Mehr darüber »</
a></p>
</div>
</div>
<div class="span4">
<div class="well">
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/mw_01.picture.jpg" alt="">
<div class="carousel-caption">
<p>Bild 1</p>
</div>
</div>
<div class="item">
<img src="./img/mw_02.telefon.jpg" alt="">
<div class="carousel-caption">
<p>Bild 2</p>
</div>
</div>
<div class="item">
<img src="./img/mw_03.papagei.jpg" alt="">
<div class="carousel-caption">
<p>Vielfalt, Spontanität, Kreativität und
Innovationen</p>
</div>
</div>
<div class="item">
<img src="./img/mw_04.chor.jpg" alt="">
<div class="carousel-caption">
<p>Bild 4</p>
</div>
</div>
<div class="item">
<img src="./img/mw_05.kinder.jpg" alt="">
<div class="carousel-caption">
<p>Von Kindern lernen und etwas Sinnvolles
weitergeben</p>
</div>
</div>
<div class="item">
<img src="./img/mw_06.weg.jpg" alt="">
<div class="carousel-caption">
<p>Wir helfen bei Entscheidungen</p>
</div>
</div>
<div class="item">
<img src="./img/mw_07.spruch.jpg" alt="">
<div class="carousel-caption">
<p>Do it!</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-
slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-
slide="next">›</a>
</div>
</div>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Musiktheorie</h2>
<p>Blablabla...auf dem <a href="#" rel="tooltip" title="Ein
Klavier hat 88 Tasten.">Klavier</a> erklingen. Auch Eure Ideen werden
mit einbezogen. </p>
<p>
<a href="#" class="btn btn-danger" rel="popover"
title="Wirklich!" data-content="So einfach geht es an dieser Stelle
weiter. Klicken bitte!">Hier geht's weiter »</a>
</p>
</div>
<div class="span4">
<h2>Terminabsprachen</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Kommunikation</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Vestibulum id ligula porta felis euismod
semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster --
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/
jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-
twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-
popover.js"></script>
<script type="text/javascript">
(function() {
$("[rel=popover]").popover();
})();
</script>
<script type="text/javascript" src="http://platform.twitter.com/
widgets.js"></script>
<script src="./js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/js/google-code-
prettify/prettify.js"></script>
<script src="./js/bootstrap-transition.js"></script>
<script src="./js/bootstrap-alert.js"></script>
<script src="./js/bootstrap-modal.js"></script>
<script src="./js/bootstrap-dropdown.js"></script>
<script src="./js/bootstrap-scrollspy.js"></script>
<script src="./js/bootstrap-tab.js"></script>
<script src="./js/bootstrap-tooltip.js"></script>
<script src="./js/bootstrap-popover.js"></script>
<script src="./js/bootstrap-button.js"></script>
<script src="./js/bootstrap-collapse.js"></script>
<script src="./js/bootstrap-carousel.js"></script>
<script>
$(document).ready(function() {
// set up the Carousel with no additional options
$('#Carousel').carousel();
});
</script>
<script src="./js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/js/
application.js"></script>
</body>
</html>
