Bootstrap Anfänger Problem

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DidgeFrank

Mitglied
1 August 2017
31
0
6
43
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:

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>
 

basti1012

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
Mit den Link würde ich mal so versuchen.
Code:
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
Weil das andere zeug was da drinne steht kann ich leider nicht zuordnen und das könnte vieleicht auch ein Problem sein
 

basti1012

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
hast du mal den originalen Link von bootsramp genommen?

der irgendwie so in der art aussieht
Code:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Weil damit habe ich schon mal ein Slider der zumindest der sache schon mal näher kommt.
 
Werbung:

Latest posts