2016-11-22 159 views
-2

當我鏈接到本地​​時,它們不起作用。 當我使用Internet鏈接,然後工作。 請告訴我,沒有互聯網連接,我該如何使用。 我將使用此選項卡來codeigniter。基本上,我想管理本地主機的活動。我喜歡使用不會放慢速度。bootstrap選項卡在localhost中不工作

例 -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Tabs</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 
    <script src="jquery/3.1.1/jquery.min.js"></script> 

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
--> 
</head> 

<body> 

<div class="container"> 

    <ul class="nav nav-pills"> 
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li> 
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
    </div> 
    </div> 
</div> 

</body> 
</html> 
+4

在bootstrap.js之前包含jquery –

+0

請您分享錯誤 –

+0

的截圖,包括jquery之前的bootstrap.js。另外我懷疑你的js和css文件的相對路徑可能不正確。你確定在這個html文件所在的目錄中有'jquery','bootstrap-3.3.7-dist'等目錄嗎? –

回答

0

Bootstrap是使用jQuery構建的,所以它依賴於jQuery。當你使用具有依賴關係的庫或框架時,確保將它們包含在庫/框架之前,否則將不起作用。

<script src="jquery/3.1.1.min.js"></script> 
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 

另一種建議是,你should put your scripts before close body。這是因爲,當您要求頁面時,DOM將開始從頭開始加載,並且當解析器找到script標記時,解析器加載它,但會阻止文檔加載,直到腳本完成加載。如果您頭腦中有許多腳本,頁面加載時間將比您想象的要長得多。

您可以在關閉正文標記之前放置腳本,也可以在script標記內添加defer屬性。此屬性會導致腳本異步加載,但要遵守它們聲明的順序。請記住,當您使用defer時,將在加載完整文檔後加載腳本

0

您可以瞭解更多關於自舉:http://getbootstrap.com/getting-started/ 哪些事情你需要補充的是引導正常工作可以有太多被發現。

此外,您需要在進行引導工作之前包含jquery。