Wie fange ich mit Bootstrap an?

Hallo,

ich habe mich dazu entschlossen mal Bootstrap auszuprobieren.
Leider ist der Einstieg nicht so einfach für mich.
Auf folgender Seite habe ich mir Bootstrap heruntergeladen:
http://getbootstrap.com/getting-started/

Jetzt würde ich aber gerne das Template "Fixed navbar" einbauen.
An sich funktioniert es wenn ich das komplette Bootstrap-Repository in einen Ordner packe und die Template-Seite unter docs/examples aufrufe.
Leider verlangen es die Verweise, zu den einzelnen benötigten Dateien, die Ordnerstruktur beizubehalten, was etwas unpraktisch ist, wenn man immer alle Templates mit verschiebt.
Gibt es da eine einfachere Möglichkeit, als jeden einzelnen Verweis zu verschieben und verändern?

MfG

Zitat von FineTime

Du musst folgendes in deinen HTML-Head packen:

HTML

<link href="[ORDNER MIT BOOTSTRAP]/bootstrap.min.css" rel="stylesheet">

Kleiner Tipp: http://holdirbootstrap.de/ - die komplette Seite von Bootstrap auf Deutsch

Entweder hast du mich falsch verstanden, oder ich habe mich nicht zu 100% verständlich ausgedrückt.
Ich will einfach nur einen Ordner mit dem Template "Fixed navbar".
Nur alleine die bootstrap.min.css mit einem neuen Verweis versehen reicht nicht aus.
Es sind haufenweise andere JavaScripts und andere Dateien, die dann nicht verlinkt sind.
Ebenfalls weiß ich auch nicht in welche HTML Datei ich das eventuell reinmachen soll.

MfG

Zitat von FineTime

Falls du eine Header-Datei hast, musst du das da reinmachen.Da kannst du auch eine Navbar erstellen, die auf allen Seiten angezeigt werden soll.

Schalte bitte mal von dem Gang "Fortgeschritten" zu "Anfänger" runter.
Ich habe keine Header-Datei und auch nicht mehrere Seiten auf dem eine Navbar angezeigt werden soll.

Ich will keine einzelne Navbar auf mehreren Seiten, sondern nur die Templateseite "Fixed Navbar".

MfG

Zitat von AlterHase.

Ich denk @FineTime versteht dich einfach nicht. Ich denke aber... ich auch nicht.

Du kannst mit "../" rausspringen. Sprich sagen wir mal du hast diese Ordner:

Hauptseite
FixedNavbar

In dem Ordner Hauptseite sind nun die ganzen Bootstrap Dinger drin. Sprich:

Hauptseite/bootstrap/bootstrap.CSS

In der HTML Datei für im Ordner "Fixed Navbar" machst du nun also:

"../Hauptseite/bootstrap/bootstrap.css"

Hoffe ich hab verstanden .

Alles anzeigen

Ich verstehe gerade nicht, wie ich mich noch verständlicher ausdrücken soll..
Auf der Seite http://getbootstrap.com/getting-started/ gibt es dieses Template:

Hier einmal komplett:

Somit verlange ich nur, dass die relevanten Quellcode-Dateien in einem Ordner sind, um diese Seite anzeigen zu können.
Ich kenne mich mit Dateipfaden und mit HTML an sich aus, deswegen verstehe ich eure Antwort mit "Einfach die bootstrap.css verschieben und den Dateipfad anpassen" nicht.
Denn es sind auch Bilder und JavaScript Dateien in dem Template Quellcode, die damit nicht verlinkt werden.

Ich will nur ein Hauptverzeichnis in dem alle benötigten Dateien drin sind, die für diese Templateseite benötigt werden.
Was ist daran so unverständlich, erklärt es mir bitte, was versteht ihr denn darunter?

MfG

Zitat von AlterHase.

Das ist jetzt nicht dein Ernst...

Rechtsklick > Speichern unter

..................................................
Wenn ich auf die Templateseite gehe und nur diese Seite mit "Speichern unter" abspeichere, fehlen immer noch diese Dateien:

Zitat von J0a9

ich weiß nicht was er genau möchte...
Kommst du mit der Bootstrap strukturierung nicht zurecht oder weißt du nicht welche Java und CSS du einbinden sollst?

Wenn du die Ordnerstruktur meinst sieht das Standartgemäß so aus:

Code

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Alles anzeigen

Danke schon mal für deine Hilfe, probiere es noch mal etwas genauer zu beschreiben.
Also.. ich gehe auf die Seite http://getbootstrap.com/getting-started/ drauf, scrolle etwas runter und lade mir dort Bootstrap herunter:

Dann sieht meine Ordnerstruktur genau so aus wie die, die du gepostet hast.
Außerdem füge ich noch eine index.html in den Ordner bootstrap hinzu, mit folgendem Beispieltemplate-Quellcode:

Wenn ich jetzt aber das Beispiel "Fixed Navbar" haben möchte, fangen die Probleme an.
Ich lade mir das Bootstrap repository herunter, gehe in docs/examples/navbar-fixed-top und nehme die index.html in diesem Ordner und ersetze meine index.html in dem Ordner bootstrap.
Jetzt habe ich folgenden Quellcode in meiner index.html stehen:

<!DOCTYPE html>
<html lang="en">
  <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 -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link  href="../../favicon.ico">


    <title>Fixed Top Navbar Example for Bootstrap</title>


    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="navbar-fixed-top.css" rel="stylesheet">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


  <body>


    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container">


      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>


    </div> <!-- /container -->




    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Jetzt ist das Problem, dass die Verweise nicht mehr richtig sind, z.B. in Zeile 6, 15 und 18.

Wie kann ich das am Einfachsten lösen, ohne jede Datei einzeln zu suchen?

MfG

Zitat von BurningSimon

Musst du dir einzeln zusammensuchen, bzw ganz einfach kopieren und die Pfade abändern

Hab ich jetzt auch so gemacht und es funktioniert.

Danke noch mal an
@J0a9
@Trabuhot
@Masuyo_Nakamura
für die Hilfe und Lösungsvorschläge per PN.
Falls ich noch Fragen oder Probleme habe, melde ich mich bei euch oder poste es hier.

MfG