【问题标题】:Bootstrap working on Local Host but not on online server引导程序在本地主机上工作但不在在线服务器上
【发布时间】:2016-02-06 03:37:10
【问题描述】:

代码在带有 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>

【问题讨论】:

标签: javascript php jquery css twitter-bootstrap


【解决方案1】:

试试这个 改变

<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

【讨论】:

  • 仅供参考,&lt;img src="//johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"&gt; 也可以。我会使用相对路径而不是绝对路径..
【解决方案2】:

检查console 是否有错误。

它说,Bootstrap 的 JavaScript 需要 jQuery,正如我所见,你已经包含了它并且它被正确加载了。在包含 bootstrap.min.js

之前包含该文件

同时更正该图像路径。您的请求网址变为:http://www.johnnythyroid.com/johnnythyroidcom.ipage.com/Img/first%20rocket.jpg,这是不正确的。

注意:只是瞎猜,不正确的路径可能是因为.htaccess

【讨论】:

  • 非常感谢人造丝。老实说,我不知道检查错误的控制台方式。对于其他正在看你的人,我相信只需按 f12。问题在于我顺便链接的方式,你和萨兰加都指出了这一点。 Saranga 的修复是正确的,只需在链接中添加:'http://'。这必须为我所有的href 完成,而不仅仅是img src。不知道这是否有意义,但它可能会对某人有所帮助。
猜你喜欢
  • 2015-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多