A simple yet annoying error.. I can't load the Bootstrap css using the cdn
Here is the simple code
<html>
<head>
<title>Header template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-default">Hello World</button>
</body>
</html>
Two things might cause this:
The obvious one is that you should remove the spaces in the first link (looks like you already edited that)
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
How are you viewing this file? If it is not served via a webserver (and thus over http of https) then the protocol-less links won't work.
Does your browser say file:/// etc in the address bar? Then add http:// in front of //netdna.bootstrapcdn.com
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Add the the Href with HTTP request. Use this may help you and solve your problem
<html>
<head>
<title>Header template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-default">Hello World</button>
</body>
</html>
The inclusion of the “http:” or “https:” part is partly just a matter of tradition, partly a matter of actually specifying the protocol. If it is defaulted, the protocol of the current page is used; e.g., //www.example.com becomes http://www.example.com or https://www.example.com depending on the URL of the referring page. If a web page is saved on a local disk and then opened from there, it has no protocol (just the file: pseudo-protocol), so URLs like //www.example.com won’t work; so here’s one reason for including the “http:” or “https:” part.
Omitting also the “//” part is a completely different issue altogether, turning the URL to a relative URL that will be interpreted as relative to the current base URL.
The reason why www.example.com works when typed or pasted on a browser’s address line is that relative URLs would not make sense there (there is no base URL to relate to), so browser vendors decided to imply the “http://” prefix there.
For me it was the date and time problem. My date and time were not correct and when I visited the cdn link I got the date and time error. After correcting it was working fine.
Related
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I have several web development projects hosted online. I decided it was important to get the projects into source control, so I created copies of the files on my local machine. The way the projects are hosted online, the css and js are inserted by the website and they don't need to be added to the html code. To develop on my machine, I require the js and css files to be added directly to the html, but I don't want to add anything unnecessary to the code that will be placed back online. My solution is an abstracted html file called main. The css and js are added to the main.html file and the original html file is linked in. Like so...
<!-- main.html-->
<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<link rel="stylesheet"href="bootstrap.min.css">
This works great if the head section is added to the original html file. If the head section is removed, there is unwanted css that suddenly afflicts the original html file.
<!--original.html-->
<head>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body> ... </body>
works fine, but contains the code that I want to abstract.
<!--original.html-->
<body>...</body>
has messed up margins from unwanted CSS
in the main.html file, the original html is linked from a git hub page with
<div w3-include-html="github.com/original.html"></div>
Any Ideas?
This is the HTML code, i don't know if i'm making a mistake in those < link/>
<! DOCTYPE html>
<html lang="es">
<head>
<title>Appicua</title>
<link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="test"></div>
<script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
<script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And now this is the CSS code:
.test{
width:50px;
height:50px;
background-color:red;
border-color:black;
border-width:5px;
border-style:solid;
margin:5%;
}
As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen.
Why is that happening?
Restructure your files into one directory:
- appicua
index.html
- css
main.css
- js
jquery.js
main.js
Then you can get main.css with href="./css/main.css", and main.js with src="./js/main.js". Relative paths are better here, and will probably work.
You also don't need to specify type="text/css" and type="text/javascript"; they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript.
You can also remove the closing / before the > in the link tag. (Unless you're using XHTML.)
Your directory structure looks a little wonky. If I'm getting your links correct your working in a directory tree that looks like this:
If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. The relative links would look like this:
<script src="/js/jquery.js" type="text/javascript"></script>
and
<link href="/css/portalWebStyle.css" rel="stylesheet" type="text/css" />
The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure.
I'm guessing that firefox doesnt handle client-side files the same way. Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open.
I don't know if this will solve your issue, but you have forgotten a / at the end of your second link tag, and have also forgotten to close your second script tag.
I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國：世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.
Here's the website: http://alweso.2ap.pl/koniugator/trarara.html
This is not the first website I'm making using Bootstrap, so I really don't know why it's not working. All files are in place, here's the code:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Polish Verb Conjugator</h1>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="owacewac.php" method="post">
Conjugate: <input type="text" name="verb"><br>
<input type="submit" class="btn btn-default">
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your css file is not found, error 404. Change this line and should be ok:
<link href="../css/bootstrap.min.css" rel="stylesheet">
(relate path was wrong)
Just to help anyone searching and searching.
To solve my issue I had to make sure there were no errors in the browsers javascript console. If you have an error there it can make ALL your javascript (bootstrap stuff) not work. So check the console! I had some kind of error in bootstrap-tooltips. Messed EVERYTHING up.
Removed
//= require bootstrap-tooltips
Everything works now.
Google Chrome console says :
Failed to load resource: the server responded with a status of 404 (Not Found)
then your css file is in a directory other than this
<link href="css/bootstrap.min.css" rel="stylesheet">
UPDATE
your css file is here : http://alweso.2ap.pl/css/bootstrap.min.css
then use
<link href="../css/bootstrap.min.css" rel="stylesheet">
The browser cannot find css/bootstrap.min.css. Most probably you haven't uploaded it yet, since the browser finds js/bootstrap.min.js, and navigating to http://alweso.2ap.pl/koniugator/css throws a 404 Page Not Found.
The server response headers indicate that you use nginx, which should properly serve this files if they were there. If you insist that the files are uploaded, you have to check the nginx configuration to make sure no strange rules for css files exist.
In my case, I made a mistake in my .htaccess file by using a different website address. The night before I had worked long hours and mis-uploaded another website's .htaccess file. Checking for errors with Mozilla console helped to find the error.