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

[ERLEDIGT] Bootstrap Dropdown

soulxheart

soulxheart

Mitglied
Guten Tag

Ich wollte mal ein wenig mit Bootstrap experimentieren.

index.php:
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <?php
        include "../inc/headers.inc.php";
    ?>
    <title>Startseite</title>
</head>

<body>
    <div id="wrapper">
        <?php
            include "../inc/navigation.inc.php";
        ?>
            
        <div id="content">
            <form>
                <fieldset>
                    <legend>Login</legend>
                        <div class="form-group">
                            <label for="userid">User ID</label>
                                <input type="text" class="form-control" id="userid" placeholder="User ID">
                        </div>
                        <div class="form-group">
                             <label for="password">Passwort</label>
                                 <input type="password" class="form-control" id="password" placeholder="Passwort">
                           </div>
                        <div class="checkbox">
                              <label>
                                <input type="checkbox" id="remind">Merken
                              </label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
              </fieldset>
            </form>
        </div>
        
        <div id="footer">
            <p>Copyright 2013</p>
        </div>
    </div>
</body>
</html>

headers.inc.php:
HTML: 
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="icon" href="../img/favicon.ico" />

navigation.inc.php:
HTML: 
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Startseite</a></li>
    <li><a href="#">Login</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Links <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Testlink1</a></li>
            <li><a href="#">Testlink2</a></li>
            <li><a href="#">Testlink3</a></li>
        </ul>
    </li>
</ul>

Kann mir jemand sagen, was ich hier falsch mache? Die Dropdown-Funktion funktioniert einfach nicht, obwohl ich das genau so von der Bootstrap-Seite übernommen habe.



Grüsse
 
Werbung:
Werden die JS und CSS-Dateien überhaupt geladen?
Wie sieht der HTML-Code aus der im Browser ankommt?
Kann man sich das irgendwo online anschauen?
 
Hallo threadi

Ja, wenn ich das Einbinden des bootstrap.css entferne, sieht die Seite sehr mager aus. Bei der Javascript-Datei weiss ich es nicht, müsste aber auch funktionieren.

Im Browser kommt das folgendermassen an:
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="icon" href="../img/favicon.ico" />    <title>Startseite</title>
</head>

<body>
    <div id="wrapper">
        <ul class="nav nav-tabs">
    <li class="active"><a href="#">Startseite</a></li>
    <li><a href="#">Login</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Links <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Testlink1</a></li>
            <li><a href="#">Testlink2</a></li>
            <li><a href="#">Testlink3</a></li>
        </ul>
    </li>
</ul>            
        <div id="content">
            <div id="headerbild"><img src="../img/edbs_header.jpg" alt="Erziehungsdepartement Basel-Stadt" /></div>
            <form>
                <fieldset>
                    <legend>Login</legend>
                        <div class="form-group">
                            <label for="userid">User ID</label>
                                <input type="text" class="form-control" id="userid" placeholder="User ID">
                        </div>
                        <div class="form-group">
                             <label for="password">Passwort</label>
                                 <input type="password" class="form-control" id="password" placeholder="Passwort">
                           </div>
                        <div class="checkbox">
                              <label>
                                <input type="checkbox" id="remind">Merken
                              </label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
              </fieldset>
            </form>
        </div>
        
        <div id="footer">
            <p>Copyright 2013</p>
        </div>
    </div>
</body>
</html>

Ich habe die Seite mal hier hochgeladen:

Startseite



Grüsse,
soulxheart
 
Werbung:
Das wird daran liegen, dass du eine uralte jQuery-Version (1.2) eingebunden hast... Probiers mal mit einer aktuellen (1.9)
 
Hallo,

was hälst da von, vielleicht liegt es daran.

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

das zum thema
obwohl ich das genau so von der Bootstrap-Seite übernommen habe
Zum Vergrößern anklicken....

und ob ein Datei geladen wird sind in firebug, im browser mal einfach f12 drücken und dann netzwerl :O)

Cheffchen

edit: dein div#wrapper ist auch gut, damit kann kein mediaquery funzen :O)
 
Hallo zusammen

Das mit der alten jQuery-Version war der Fehler, vielen Dank! Verwende nun die Version 1.10.1.



Grüsse,
soulxheart
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben