Q

बूटस्ट्रैप ड्रॉपडाउन

2012-09-17 28 views 47 likes

47

काम नहीं कर रहा है मैं काम करने के लिए बूटस्ट्रैप ड्रॉपडाउन नहीं बना सकता।बूटस्ट्रैप ड्रॉपडाउन

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.dropdown-toggle').dropdown() 
    }); 
</script>

क्या मैं गलत कर रहा हूँ:

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li class='dropdown'> 
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
    </ul> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

और यहाँ लिपियों हैं: यहाँ एनएवी के लिए मेरे एचटीएमएल है? आपके उत्तरों के लिए धन्यवाद!

स्रोत

2012-09-17 hjuster

+0

समान पोस्टिंग पर मेरा उत्तर की जाँच करें: बूटस्ट्रैप लिंक HTML और jQuery स्क्रिप्ट के सिर पर पेस्ट नीचे दिए गए उदाहरण की तरह HTML के शरीर में पेस्ट http://stackoverflow.com/questions/15592158/twitter-bootstrap-dropdown-not-working-in-any-browser/23486239#23486239 –

+0

मेरी समस्या बूटस्ट्रैप जेएस फ़ाइल गायब थी, अगर किसी और की मदद करता है – Drewdavid

+0

I ने '' 'gruntfile.js''' को अपडेट किया था जो '' jsFileList''' में कुछ पथों को बदलता है ... पथ को अद्यतन करना और उपयुक्त ग्रंट कार्यों (ग्रंट डेव/ग्रंट बिल्ड/आदि) को हल करना मेरे हल मुसीबत। –

A

उत्तर

9

कार्य डेमो: http://codebins.com/bin/4ldqp73

इस

<ul class='nav'> 
    <li class='active'>Home</li> 
    <li> 
    <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">    
     <li><a href="#">asds</a></li> 
     <li class="divider"></li> 
     </ul> 
    </div> 
    </li> 
    <li>Payday loans</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul>

स्रोत

2012-09-17 12:06:53 gaurang171

+0

ओप्स ... मूर्ख मुझे ... मैं bootstrap.css फ़ाइल खो रहा था। यह ठीक काम कर रहा है, धन्यवाद! – hjuster

+25

आपके डेमो में ड्रॉपडाउन अब काम नहीं कर रहा है, या शायद समस्या मेरे ब्राउज़र के साथ है। – Noah

5

क्या आपने jquery.js शामिल किया है?

इसके अलावा, तुम्हारा साथ कोड की इस पंक्ति की तुलना:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

इस संस्करण है कि ठीक से काम करता है देखें।

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap dropdown</title> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <ul class="nav"> 
        <a class="brand" href="#">w3resource</a> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHP</a></li> 
          <li><a href="#">MySQL</a></li> 
          <li class="divider"></li> 
          <li><a href="#">JavaScript</a></li> 
          <li><a href="#">HTML5</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container-fluid"> 
    <h1>Dropdown Example</h1> 
    </div> 
    <script type="text/javascript" src="js/jquery-latest.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    </script> 
</body> 
</html>

स्रोत

2012-09-17 12:05:29 Frankline

21

FYI करें का प्रयास करें: आप bootstrap.js है, तो आप बूटस्ट्रैप-dropdown.js नहीं जोड़ना चाहिए।

मुझे bootstrap.min.js के साथ परिणाम की अनिश्चितता है।

स्रोत

2013-01-22 01:37:49 Fahrenheit

+2

धन्यवाद। मेरे पास dropdown.js और bootstrap.js दोनों थे और इस प्रकार यह काम नहीं किया। ड्रॉपडाउन.जेएस को हटाने से समस्या हल हो गई। – nyxz

+0

आप सबसे अच्छे इंसान हैं, इस मुद्दे पर यह जानने के लिए मैंने लगभग 6 घंटे बिताए !! !! धन्यवाद, – Adel

+1

बहुत बहुत धन्यवाद सर! मुझे एक ही समस्या है, लेकिन मेरे पास 'bootstrap.js' और' bootstrap.min.js.' है। जब मैंने बाद वाले को हटा दिया, तो यह काम करता है। –

11

अपनी शैली के लिए आप आम तौर पर सिर्फ </head> तत्व

<link href="css/bootstrap.css" rel="stylesheet">

अगला से पहले बूटस्ट्रैप के सीएसएस फ़ाइलें, शामिल करने की ज़रूरत आप js फ़ाइलों को शामिल करने की आवश्यकता होगी, यह उनमें से अंत में शामिल करने के लिए अनुशंसा की जाती है दस्तावेज़, आमतौर पर </body> से पहले तो पृष्ठ तेज़ी से लोड होते हैं।

<script src="js/jquery.js"></script>   
<script src="js/bootstrap.js"></script>

स्रोत

2013-03-15 19:36:37

106

मुझे एक ही समस्या थी। बाद मुसीबत शूटिंग के कुछ घंटों में पाया गया कि,

मैं था

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

बजाय

,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

आशा इस कोई मदद करता है

स्रोत

2014-06-01 22:08:03

+0

दोनों में क्या अंतर है? – CodyBugstein

+3

@ जेएस फाइलों का इम्रे ऑर्डर ... एचटी ... –

+1

मेरे लिए चाल है –

5

आप इस में फ़ाइलें आयात करने के लिए है आपके एचटीएमएल के <head></head>।

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

स्रोत

2014-06-27 03:22:35 Martin

+1

मुझे नहीं पता कि मैं गलत तरीके से क्यों कर रहा था या नहीं, लेकिन इस जवाब ने मेरे लिए यह किया। धन्यवाद मार्टिन! – booleanCube

62

मुझे एक ही समस्या थी जब मैंने bootstrap.min.js दो बार शामिल किया था। उनमें से एक को हटा दिया और यह काम करना शुरू कर दिया।

स्रोत

2014-07-10 10:27:53 kubilay

+1

यह मेरी समस्या तय है।मेरा कोणीय ऐप मेरे बॉवर_कंपोनेंट्स – Pakage

+1

इंजेक्ट करने के लिए गलप टास्क के माध्यम से बूटस्ट्रैप की कई प्रतियों में खींच रहा था। यह मेरे मामले में मुद्दा था! ... धन्यवाद – MarioAraya

+0

फिक्स्ड खान भी, धन्यवाद वास्तव में –

5

शरीर टैग के भीतर निम्नलिखित पंक्तियां जोड़ें।

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

स्रोत

2014-08-05 20:00:34

+0

पर काम किया धन्यवाद, यह मुझे कुछ समय बचाया। – DrewT

0

मेरे पास एक ही समस्या थी जो मुझे यहां लाया।

मेरा मुद्दा: मैं अनुशंसित jquery 1.12.0 संस्करण का उपयोग मेरी jquery स्क्रिप्ट फ़ाइल के रूप में कर रहा था।

समाधान: jQuery 2.2.0 संस्करण के साथ jquery स्क्रिप्ट को प्रतिस्थापित किया गया।

यह मेरे लिए हल किया गया।

स्रोत

2016-02-06 17:11:50

2

सिर अनुभाग में इस प्रयास करें

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

स्रोत

2016-02-17 22:06:17

1

आप सीएसएस फ़ाइलें परस्पर विरोधी भी चिह्नित करना होगा/उदाहरण के लिए गुण आप हो सकता था ".nav" कस्टम शैली सामग्री कहीं और अपनी खुद की सीएसएस फ़ाइलों और जाँच अक्षम करने का प्रयास कि अगर फिर से काम करता है की जाँच जो फ़ाइल या कस्टम शैली है कि संघर्ष भी सुनिश्चित करें कि आप अपने कोड

स्रोत

2016-04-18 22:18:53 Mancy

3

यहाँ मैं क्या किया में bootstrap.min.js शामिल कर रहे हैं बनाने के लिए बनाता है .....

बस हटाया bootstr मेरी परियोजना से ap.min.js और इसे करने के लिए bootstrap.js जोड़ा गया है और यह काम करना शुरू किया ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js" 
        //"~/Scripts/bootstrap.min.js"));

स्रोत

2016-06-08 12:34:37

+0

# कुबिले में जोड़ना उत्तर: आपके पास प्रति दस्तावेज़ 'ए' नामक एक एकल श्रेणी हो सकती है। .min.css/.min.js - आम तौर पर वही सीएसएस और जेएस फाइलें होती हैं जिनमें से सभी रिक्त स्थान हटा दिए जाते हैं। यह उन्हें छोटा बनाता है और तेजी से लोड करता है। ब्राउज़र को वैसे भी रिक्त स्थान की आवश्यकता नहीं होगी। –

+0

यदि आपने दोनों का उपयोग किया है तो निकालें –

3

दोनों बूटस्ट्रैप और jQuery शामिल किया जाना चाहिए:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script> 

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

नोट : jquery-xxxmin.js संस्करण संस्करण 2.xx होना चाहिए !!!

स्रोत

2016-07-19 18:42:04 NotAMonkey24

0

मैं यह पता लगा है और इस IST करने के लिए सबसे आसान तरीका है बस कॉपी और बूटस्ट्रैप लिंक की CDN https://www.bootstrapcdn.com/ में पाया जा सकता है कि और jQuery CDN स्क्रिप्ट यहां पाया जा सकता है कि https://code.jquery.com/ और पिछले आप लिंक, नकल के बाद

<!DOCTYPE html> 
    <html> 
     <head> 

     <title>Purrfect Match Landing Page</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <!--<link rel="stylesheet" href="griddemo.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

     </head> 

     <body> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script>  
     </body> 
    </html>

मेरे लिए एकदम सही आशा काम करता है यह आप के लिए भी काम करता है :)

स्रोत

2016-11-15 20:54:35

संबंधित मुद्दे