引导在本地主机上工作,但不在联机服务器上工作
Bootstrap working on Local Host but not on online server
代码在带有xampp的本地主机上运行良好。我所做的只是将其上传到服务器,现在它不起作用。我也上传了所有的BS文件。我还将href链接修复为"..../js/bootstrap.min.js"等。没有图像加载,我认为也没有引导。我认为问题来自 Bootstrap 的原因是因为所有文本/按钮仍然出现,它们只是没有像 BS 那样使用 css/JS 进行自定义。
它们是php文件。
这是指向该网站的链接:http://www.johnnythyroid.com。我只是新手,这只是为了学习,所以非常感谢所有的建议。
这是我认为的相关代码,我删除了很多愚蠢的文本以使其更短:
<!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>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroidcom.ipage.com/css/custom icons.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="johnnythyroidcom.ipage.com/js/bootstrap.min.js"></script>
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroidcom.ipage.com/dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="johnnythyroidcom.ipage.com/dansite1.php">Home</a></li>
<li><a href="johnnythyroidcom.ipage.com/About.php">About</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li><a href="#accountLogin" data-toggle="modal">Login</a></li>
<li><a href="#accountCreate" data-toggle="modal">Create Account</a></li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Welcome, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
<a href="#" class="btn btn-primary"> Bg </a>
<a href="#" class="btn btn-success"> ng</a>
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
<a href="johnnythyroidcom.ipage.com/rocket.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/stars.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
<a href="johnnythyroidcom.ipage.com/stars.php" class="btn btn-danger">View more</a>
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/sky.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
<a href="johnnythyroidcom.ipage.com/sky.php" class="btn btn-danger">View more</a>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
试试这个改变
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
到
<img src="http://johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
将 http://添加到所有映像 SRC
检查
console
是否有错误。
它说,Bootstrap的JavaScript需要jQuery,正如我所看到的,你已经包含了它并且它被正确加载了。在包含 bootstrap.min 之前包含该文件.js
还要更正图像的路径。您的请求 url 变为:http://www.johnnythyroid.com/johnnythyroidcom.ipage.com/Img/first%20rocket.jpg
这是不正确的。
注意:只是一个盲目的猜测,不正确的路径可能是因为.htaccess
引用第三方时包括CSS或JSS如果您的服务器使用 HTTPS,则必须使用 HTTPS否则使用 http例如,您正在访问您的网站 http://yoursite.com 或 http://localhost那么 http://getbootstrap.com/css/bootstrap.min.js 或 CSS 将起作用这就是为什么它适用于本地主机但是,如果您将HTTPS用于Yoru Site https://yoursidte.com那么 http://getbootstrap.com/css/bootstrap.min.js 或 CSS 将不起作用你将不得不使用https例如 https://getbootstrap.com/css/bootstrap.min.js 或 CSS
这就是为什么我的菜单在本地计算机上工作而不是通过https工作的原因,从http更改为 https://getbootstrap.com/css/bootstrap.min.js 或CSS后,现在它正在工作..所有这些文件都可以位于不同的位置例如,您可以将bootstrap.min.css保存在站点文件夹中,以防您编辑该文件。
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Eonasdan日期时间选择器没有'不能在联机模式下工作
- 节点.js Websocket 服务器无法联机工作
- 引导在本地主机上工作,但不在联机服务器上工作
- $(“Iframe”).contents()在本地主机上工作,但不能联机
- 匹配,除非存在“转义”字符;必须联机和背靠背工作
- 导航器显示Internet连接状态.联机不正常工作,并显示错误的状态,而互联网没有连接
- 灯箱可以脱机工作,但不能联机
- 事件处理-JavaScript'return false'仅与HTML联机工作