Προς το περιεχόμενο

Πρόβλημα dropdown

Gunix

Από τον Gunix
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

Gunix Grand Master

Gunix

Δημοσ.
Δημοσ.

Γεια σας.

 

Θα ήθελα την βοήθεια σας.

Θέλω να φτιάξω μια ιστοσελίδα και χρησιμοποιώ το bootstrap. Αλλά το πρόβλημα μου είναι ότι δεν μου δουλεύει το dropdown. Σας αναρτώ το html.

<!DOCTYPE html>
<html lang='eng'>
<head>
  <title>Interactive</title>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Responsive για mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Loaded Bootstrap Style-->
  <link rel="stylesheet" href="css/bootstrap.css">  <!-- Or <link href="css/bootstrap.min.css" rel="stylesheet"> -->
</head>

<body>

  <div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <!-- Loaded JavaScript -->

  <script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
tzotzosgr Contributor

tzotzosgr

Δημοσ.
Δημοσ.

ξέρεις γιατί δεν σου δουλεύει?

 

γιατί δεν έχεις βάλει jquery 

<!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 -->
    <title>Bootstrap 101 Template</title>

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

    <!-- 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

check http://getbootstrap.com/getting-started/#template

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
Gunix Grand Master

Gunix

Δημοσ.
  • Μέλος
Δημοσ.

Tzotzosgr είχα βάλει την jQuery. Αλλά δεν μου δούλευε γατί την είχα μετά από την JavaScript. Δηλαδή:

 

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

Αλλά γιατί αυτό? Γιατί βάζουμε πρώτα την jQuery και μετά την JavaScript?

 

 

ξέρεις γιατί δεν σου δουλεύει?

 

γιατί δεν έχεις βάλει jquery 

<!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 -->
    <title>Bootstrap 101 Template</title>

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

    <!-- 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

check http://getbootstrap.com/getting-started/#template

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
Predatorkill Experienced

Predatorkill

Δημοσ.
Δημοσ.

Γιατι το DOM παει απο πανω προς τα κατω, δηλαδη πρεπει πρωτα να φορτωσει τη jquery και μετα το js της bootstrap. Στη συγκεκριμενη περιπτωση το αρχειο bootstrap.min.js ζηταει πραγματα απο το αρχειο jquery αρα πρεπει να φορτωσει μετα.

 

Το ιδιο ισχυει με τα αρχεια css, αλλα απο την αναποδη. Δηλαδη αμα δηλωσεις κατι στο πρωτο αρχειο css και μετα πας και αλλαξεις αυτο που εχεις δηλωσει σε καποιο αλλο αρχειο css που φορτωνεις πιο μετα τοτε ισχυει το τελευταιο. (Εκτος και αν παιζεις με !important το οποιο δεν συνισταται).

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
defacer Grand Master

defacer

Δημοσ.
Δημοσ.

Το ιδιο ισχυει με τα αρχεια css, αλλα απο την αναποδη. Δηλαδη αμα δηλωσεις κατι στο πρωτο αρχειο css και μετα πας και αλλαξεις αυτο που εχεις δηλωσει σε καποιο αλλο αρχειο css που φορτωνεις πιο μετα τοτε ισχυει το τελευταιο. (Εκτος και αν παιζεις με !important το οποιο δεν συνισταται).

 

Δύο διορθώσεις.

 

Πρώτον, τα λες πολύ μπερδεμένα. Και με JS μπορείς να κάνεις ακριβώς το ίδιο που περιγράφεις με CSS. Βάλε ένα αρχείο να λέει window.foo = 1 και ένα άλλο window.foo = 2, αυτό που φορτώνεται δεύτερο θα "κερδίσει" στο τέλος.

 

Δεύτερον για τα CSS επειδή βάζεις και το !important μέσα νομίζω ότι επίσης τα έχεις μπερδεμένα. Ναι, αν έχεις δύο ΙΔΙΟΥΣ selectors που σετάρουν το ίδιο attribute τότε ο δεύτερος υπερισχύει, αλλά αν οι selectors έχουν διαφορετικό specificity δεν πάει έτσι.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...