I am using Xampp to test my perl cgi scripts. When I open the cgi script the css does not seem to apply to the page. I have tried the exact same code in an html file and it works fine which suggests the html is linking to the correct place to find the CSS.
$self->{content}=<<HTML;
<!DOCTYPE html>
<html>
<head>
<title>$title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/additional.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" >Bridge : $env </a>
<ul class="nav">
<li><a href="#"><i class="icon-upload"></i>upload</a></li>
<li><a href="#"><i class="icon-search"></i>Search</a></li>
<li><a href="#"><i class="icon-cog"></i>Admin</a></li>
</ul>
</div>
</div>
<div class="container">
...
</div>
</body>
</html>
HTML
localhost/xampp/cgi-bin/web/css/bootstrap.min.css
Your web server is probably configured to treat everything in cgi-bin
as an executable.
CSS is not a programming language that the server can interpret, so it will likely be offering up a 500 error when you try to load it.
Don't keep static resources in cgi-bin
.
Perhaps it would be possible to test with http connection: Something like: <link rel="stylesheet" href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" media="screen">
Here is my script (very very dirty):
#!/usr/bin/perl
use CGI qw(:standard);
print header;
print_hdetails();
print"<body data-spy=\"scroll\" data-target=\"\.bs-docs-sidebar\">\n";
print_navbar();
print_headerofpage();
print_mysidebar();
print_mybodycontent();
print end_html;
sub print_hdetails{
print <<FORMULE;
<!DOCTYPE html>
<html>
<head>
<base href="http://192.168.0.32/cgi-bin/"><!--[if lte IE 6]></base><![endif]-->
<title>bootstrapstyle page</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- for Bootstrap -->
<script type="text/javascript" src="http://192.168.0.32/bootstrap/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://192.168.0.32/bootstrap/js/bootstrap.min.js"></script>
<link href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--link href="http://192.168.0.32/silverstripe/themes/bootstrap/css/myadded.css" rel="stylesheet" media="screen"-->
<!--link rel="shortcut icon" href="http://192.168.0.32/silverstripe/themes/bootstrap/images/favicon.ico" /-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--link rel="stylesheet" type="text/css" href="themes/bootstrap/css/form.css?m=1373645318" /-->
</head>
FORMULE
}
sub print_headerofpage {
print <<CONTENT;
<header class="jumbotron subhead" id="overview">
<div class="container">
<p>
<h2>bonjour!</h2><br>
</p>
</div>
</header>
CONTENT
}
sub print_mysidebar{
print <<MYSIDEBAR;
<div class="container">
<div class="row-fluid">
<div class="span2">
<h6>Sidebar content</h6>
<p>
class=span2
</p>
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#components"><i class="icon-chevron-right"></i> 1. Choose components</a></li>
<li><a href="#plugins"><i class="icon-chevron-right"></i> 2. Select jQuery plugins</a></li>
<li><a href="#variables"><i class="icon-chevron-right"></i> 3. Customize variables</a></li>
<li><a href="#download"><i class="icon-chevron-right"></i> 4. Download</a></li>
</ul>
</div>
MYSIDEBAR
}
sub print_mybodycontent{
print <<MYBODYCONTENT;
<div class="span10">
<h1>Hello, world! </h1>
<p>
ici c'est le body content class=span10
</p>
<p>
<h4>Le sourire, il fait plaisir a ceux qui vous aiment. Il emmerde ceux qui vous detestent. </h4>
</p>
</div>
MYBODYCONTENT
}
sub print_navbar {
print <<LANAVBAR;
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Home</a>
</li>
<li class="">
<a href="./getting-started.html">Get started</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">JavaScript</a>
</li>
<li class="active">
<a href="./customize.html">Customize</a>
</li>
</ul>
</div>
</div>
</div>
</div>
LANAVBAR
}
it works for me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.