bootstrap选项卡在localhost中不工作

问题描述：

当我链接到本地时，它们不起作用。当我使用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>

在bootstrap.js之前包含jquery –

请您分享错误 –

的截图，包括jquery之前的bootstrap.js。另外我怀疑你的js和css文件的相对路径可能不正确。你确定在这个html文件所在的目录中有'jquery'，'bootstrap-3.3.7-dist'等目录吗？ –

答

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时，将在加载完整文档后加载脚本。

答

您可以了解更多关于自举：http://getbootstrap.com/getting-started/ 哪些事情你需要补充的是引导正常工作可以有太多被发现。

此外，您需要在进行引导工作之前包含jquery。

bootstrap选项卡在localhost中不工作

相关推荐