DidgeFrank
Mitglied
Hi Leute, ich wollte meine website mal überarbeiten und dachte, dass Bootstrap vielleicht eine gute Hilfe darstellen könnte.
Jedoch habe ich schon Probleme bei den einfachsten Sachen. Kann mir jemand sagen, warum ich einen Navigationsbereich erzeugen kann, wenn ich im Header auf die .css Datei auf meiner Festplatte verweise, aber sonst nichts funktioniert, wenn ich den link (darunter mal auskommentiert) benutze? Wie gesagt ist er einfach durch copy und paste von der Bootstrap homepage erzeugt worden. Wenn ich ein Bilderkarussel erzeugen will, klappt das auch nur mit dem lokalen link, sonst alles Kraut und Rüben. Ich poste mal den Code von beiden Beispielen:
Jedoch habe ich schon Probleme bei den einfachsten Sachen. Kann mir jemand sagen, warum ich einen Navigationsbereich erzeugen kann, wenn ich im Header auf die .css Datei auf meiner Festplatte verweise, aber sonst nichts funktioniert, wenn ich den link (darunter mal auskommentiert) benutze? Wie gesagt ist er einfach durch copy und paste von der Bootstrap homepage erzeugt worden. Wenn ich ein Bilderkarussel erzeugen will, klappt das auch nur mit dem lokalen link, sonst alles Kraut und Rüben. Ich poste mal den Code von beiden Beispielen:
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">-->
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
</button>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<style>
#meinCarousel {
max-width: 600px;
margin: auto;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="meinCarousel" class="carousel slide"
data-ride="carousel">
<!-- Indikatoren -->
<ol class="carousel-indicators">
<li data-target="#meinCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#meinCarousel" data-slide-to="1"></li>
<li data-target="#meinCarousel" data-slide-to="2"></li>
</ol>
<!-- Bilder für die Diashow -->
<div class="carousel-inner">
<div class="item active">
<img src="bilder/nacht.jpg">
<div class="carousel-caption">
<h3>Nacht</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
<div class="item">
<img src="bilder/berge.jpg">
<div class="carousel-caption">
<h3>Berge</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
<div class="item">
<img src="bilder/weg.jpg">
<div class="carousel-caption" >
<h3>Weg</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
</div>
<!-- Icons zum Durchblättern -->
<a class="left carousel-control" href="#meinCarousel"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#meinCarousel"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
