I'm trying to add twitter-bootstrap to a django project. I've got a html file called base.html which acts as a wrapper file for other html code which is placed inside of it before it gets send back in the HttpResponse.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="{% static '/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "{% static '/js/bootstrap.min.js' %}"></script>
<title>TITLE</title>
</head>
<body>
{% autoescape off %}{{ content }}{% endautoescape %}
</body>
</html>
This file is the only file which will ever get send back to the visitor of the webside so I would imagine that if I add the files bootstrap needs inside base.html that it would work also on the code in content. Infact, all the css stuff seems to work fine but whenever I try to open a dropdown menu in the navbar of my site, it does not show up.
This is the source code of the page that has difficulties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src = "/static/js/bootstrap.min.js"></script>
<title>TITLE</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="?p=index">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="?p=channel">testchannel</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="?p=Channel">Visit Channel</a>
<a class="dropdown-item disabled" href="#">Statistics</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Settings</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>A TEST HEADER</h1>
</body>
</html>
Clicking on the "/static/css/bootstrap.min.css" or "/static/js/bootstrap.min.js" both redirects me to a file (no 404 error pops up).
what could be the problem causing the navbar to not work? How can I fix it?
EDIT:
As requested the settings.py part that handles static:
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# some more stuff here like INSTALLED_APPS and TEMPLATES
STATICFILES_DIRS = (
'/home/<name>/Desktop/django/myproject/Bootstrap',
)
STATIC_URL = '/static/'
Please make sure you have included the correct static path in the settings.py file.
I have used something like the following in one of my project and it works fine.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Related
This question already has an answer here:
How can I reuse HTML code across several HTML files
(1 answer)
Closed 28 days ago.
I have header HTML page and I want to implement this header to all other HTML pages. Can I do it using HTML or JS? without PHP.
I am a beginner in web programming and I made a simple frontend website using HTML and CSS.
header.html 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.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<title>White Aim</title>
</head>
<body>
<div id="header">
<nav class="navbar navbar-expand-lg" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo-style" src="assests/logo.svg" alt="White Aim">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about-us.html">نبذة عنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="our-experience.html">خبرتنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="contact-us.html">تواصل معنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="profile.html">الملف التعريفي</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
You could save the header code inside a global javascript variable and then render it with insertAdjacentHTML()
JS:
const header = `
<div id="header">
<nav class="navbar navbar-expand-lg" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img class="logo-style" src="assests/logo.svg" alt="White Aim">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0 navbar-text">
<li class="nav-item mx-2">
<a class="nav-link active" aria-current="page" href="index.html">الصفحة الرئيسية</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about-us.html">نبذة عنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="our-experience.html">خبرتنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="contact-us.html">تواصل معنا</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="profile.html">الملف التعريفي</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
`;
document.addEventListener('DOMContentLoaded', (event) => {
const homepage = document.querySelector('.homepage');
homepage.insertAdjacentHTML('afterbegin', header);
});
<body class="homepage">
<!-- CONTENT -->
<script src="script.js"></script>
</body>
This way you could render your header variable in all the html files in which you include the script.js.
Keep in mind that this is probably not a best practice, there are better ways to create HTML components, however this will do what you need using just vanilla JS without using external libraries or PHP.
The better way would be to use a php include. This lets the server do the include which saves a round trip.
<?php include 'footer.php';?>
It is also possible to import/include via Javascript on page load per what you asked (you asked for a non php solution). However it will cause another round trip to the server and unnecessarily slow your website down. I don't recommend it, but if you do want to go that route you can look at the Javascript script below based on https://www.w3schools.com/howto/howto_html_include.asp:
html:
<div w3-include-html="content.html"></div>
js:
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.querySelectorAll("[w3-include-html]");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
At the bottom of the page:
<script>
includeHTML();
</script>
You could also opt for a build step (preprocessing) at author time using a templating language. This makes things a bit more complex for a beginner, it is somewhat similar to writing php. But in contrast to php the html is assembled before the website is requested by users, al work is done before it is put online.
Some preprocessing languages are pug, ERB, haml, twig, ... here's a feature overview: https://css-tricks.com/comparing-html-preprocessor-features/
I don't use it but I know Adobe Dreamweaver has also a feature where you can include html snippets. It then builds the html with the included snippets which you can put online. But I don't recommend Dreamweaver.
I'm having a bit of an issue where my dropdown won't work using bootstrap.
The dropdown only appears from screens smaller than the $md variable.
The issue is when I click the dropdown icon it doesn't seem to be working
I have the HTML code below but if you want the whole project take a look at this Github repo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Sass-Bootstrap Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-primary ">
<a class="navbar-brand text-primary_invert px-3" href="#">Navbar</a>
<button class="navbar-toggler bg-primary_invert" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-primary_invert" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-primary_invert" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary_invert" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled text-primary_invert" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
try adding the JQuery & Popper.js links
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
more info here.
I have an image with a map on it, to make clickable elements. The image is responsive, to fit different screen widths. When the image is resized, the image map link breaks, and points to the wrong place, predictably.
I want this to behave in a way where the links remain on the image in the correct places, even when resized.
I have attempted using this plugin
https://github.com/davidjbradshaw/image-map-resizer
I have also attempted using this plugin
https://github.com/stowball/jQuery-rwdImageMaps
In both cases, I installed the scripts correctly, exactly as instructed, and I experienced no difference in the way my image map wasn't working. Is there a problem in my code that I am missing? Is there a better tool that works, which is comparably simple to implement for a relative beginner?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 99%;
height: auto;
}
</style>
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"><img src="LOGO.png" width="50" height="50" alt=""/> <a class="navbar-brand" href="Home.html">Business Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="blog.html">Blog </a></li>
<li class="nav-item"> <a class="nav-link" href="aboutus.html">About Us<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" href="forum.html/">Forum </a></li>
<li class="nav-item"> <a class="nav-link" href="performance.html">Performance</a></li>
<li class="nav-item"> <a class="nav-link" href="contactus.html">Contact Us </a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<img src="home.png" alt="" width="1920" height="1020" usemap="#banners" class="responsive">
<map name="banners">
<area shape="rect" coords="946,3,1162,218" href="forum.html">
</map>
<script>$('map').imageMapResize();</script>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/imageMapResizer.js"></script>
</html>
While working through a web dev course, I got to a portion on learning BootStrap. I have a Navbar added to my page, directly copied from the example given here: https://getbootstrap.com/docs/4.0/components/navbar/
While all of the Navbar components are loading in, and all of the buttons are functioning, the Navbar will not expand. I am running a Node server on my local machine, and requesting an HTML page which correctly renders, except for the menu not expanding.
Here is my HTML page with the Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= typeof name !== "undefined" ? name : "Error" %></title>
<meta name="description" content="Boilerplate HTML Page">
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Express Demo</a>
<button onclick="" class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/rand" >Random</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/chickens">Chickens</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/soccer">Soccer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/r/mightyharvest">MightyHarvest</a>
</li>
</ul>
</div>
</div>
</nav>
<h1>Browsing r/<%= typeof name !== "undefined" ? name : "Error"%></h1>
<h2><%= description %></h2>
<p>Sub count: <%= subscribers %></p>
<hr>
<% for(let post of posts) { %>
<article>
<p><%=post.title%> - <b><%= post.author %></b></p>
<% if (post.img) { %>
<img src="<%= post.img %>" alt="">
<% } %>
</article>
<% } %>
</body>
</html>
I have tried the most up to date links offering the Bootstrap and jQuery versions, but the problem persists. As mentioned, the code for the Navbar are identical to the example code, save for changing the button text and href.
I copied your source and omitted the jquery. I used CDNs for the Bootstrap CSS and JS and the menu expands (assuming the window is small enough).
Try swapping
<script src="/js/bootstrap.min.js"></script>
for
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Might have to use a CDN for the CSS as well.
I'm trying to use Bootstrap 4 in Symfony 4 using yarn package manager but somehow the JavaScript is not working. I have no errors in the console but when I try to trigger the navbar collapsed button I won't open the navbar.
This is my code:
app.js
var $ = require('jquery');
require("bootstrap/js/dist/");
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">CRM Fabriek</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}{% endblock %}
<script src="{{ asset('build/js/app.js') }}"></script>
</body>
</html>
I compiled the js to the build/js/app.js file by using yarn run encore dev
Import Bootstrap’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js):
import 'bootstrap';
or indicate the path completely
import 'bootstrap/dist/js/bootstrap';
or if you prefer require()
require('bootstrap/dist/js/bootstrap');
Alternatively, you may import plugins individually as needed:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...
https://getbootstrap.com/docs/4.1/getting-started/webpack/#importing-javascript
In the webpack-encore documentation says that you must in your webpack.config.js file add a call .autoProvidejQuery() because Bootstrap expects jQuery to be available as a global variable.
// webpack.config.js
Encore
// ...
.autoProvidejQuery();
http://symfony.com/doc/current/frontend/encore/bootstrap.html#importing-bootstrap-javascript