I have been looking at code reusability (for example) and have been experimenting with HTML import tags. I want to auto include my bootstrap code in every webpage and would like to do it with one line of code as opposed to multiple.
After doing some research online, the answer seemed to be to use the tag, most namely the following format:
<head>
<import rel="import" href="includes/bootstrap.html">
</head>
My bootstrap.html file is just some normal bootstrap links as follows:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm simply trying to avoid importing the same three lines across all my pages. However, my browser (Chrome) does not seem to implement include in any way, even when I use for reasons other than Bootstrap.
How should I properly include my bootstrap files across the head of all my pages?
Alex
Change import tag to link tag
<head>
<link rel="import" href="includes/bootstrap.html">
</head>
Refer this
How about creating a header file 'header.php' with the links like so,
<head>
<title>Your Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
And when you write your code just include the header.php part.
<html>
<? include ("header.php");?>
</html>
Related
<!doctype html>
Multi Level Dropdown
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
...................
<script type="text/javascript" src="scripts.js"></script>
it is hard to understand your problem based on the context you gave. Consider to be more precise and share all of your code. However a couple of ideas:
Your <script> tag should be placed within the <body> ... </body> tag
Use <script type="text/javascript" src="./scripts.js"></script>
Check/ confirm whether your stylesheet "style.css" is working
Check for valid javascript code by testing with simple code such as alert('Test'); in your scripts.js file
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 my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
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?
I would like to include a webix table such as this one into a sphinx document.
I've found that directive:
.. raw::
:file: data.html
Unfortunately it does not work because the head should be included into <head>. Also the relative links should be updated according to the sphinx generated html.
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8">
<script src="webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="samples.css">
<script src="testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
How to include a webix widget into a static sphinx page?
One possible solution would be to fully include the html using jquery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
However this requires to add stuff into the <head> of the page
It sounds like what you want to do is create a custom HTML theme for use in Sphinx. This is less work than it sounds like, since you can probably just inherit from an existing theme, and only override a small part of it in your new theme. See the Sphinx docs re: templating and theming
Also, see this answer, which might be helpful:
Adding a javascript script tag some place so that it works for every file in sphinx documentation