I want to add bootstrap template in my django app. I have downloaded it and kept in my static folder, then added its path in setting.py file as-
STATICFILES_DIRS = '/home/dc/my_django_apps/mutech_website/mutech/static/'
index.html of template is-
{% load staticfiles %}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- 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 id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>
but still its not working. Any suggestion will be appreciated.
First configure the static files app, in setting.py by adding this setting
STATIC_URL = '/static/'
and make sure you have all your static files/folders inside a folder called static in the root or in static folder inside your app but make sure to run collectstatic command, then reference JS file from static files please use this syntax
<script src="{% static 'js/classie.js' %}"></script>
and for linking the CSS:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
You will need 3 variables in your settings.py:
# Alias that will be written in the source code
STATIC_URL = '/public/'
# The actual folder where static files will be collected
STATIC_ROOT = 'static'
# Location of folders that will be added to static folder
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "folder_one", "folder_two", "static"),
)
After this, you'll need to run the command
python manage.py collectstatic
that will copy all static files to the STATIC_ROOT.
After this, you can use the static files in the template. Just add the tag to the template
{% load staticfiles %}
and use the static tag:
{% static 'folder_one/folder_two/path_to_static' %}
You can also use
... src="/public/folder_one/folder_two/path_to_static" ...
but if you want to change the alias one day, you'll have to change all of them... so, the first option is much better.
You'll have to check the static folder to see what path you'll have to use.
And django will write something like this
'/public/folder_one/folder_two/path_to_static'
When you make this work, have a look at bower and bower-installer
The first will download all packages that you need with a single command. The second will put all the files you need in a specific folder. This is quite good because you don't have to download one by one.
bower.json example
{
"name": "your_project_name",
"version": "1.0.0",
"authors": [
"you Name <your#email>"
],
"license": "License type",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"dependencies": {
"jquery": "latest",
"bootstrap": "latest"
},
"install": {
"path": "where/do/you/want/your/files"
}
}
Just add more dependencies and you're done. Then check bower-installer. It will copy only the files you need to a directory and not the whole source code for each package. when you're done you can remove the bower folder if you want and leave only the bower-installer folder.
Related
I work on a project of Django with bootstrap 5 sass
when I run my project, CSS effects do not apply.
then I tried to (npm run scss) to discover the problem
i got this error message:
Rendering Complete, saving .css file...
Error: EEXIST: file already exists, mkdir 'C:\Users\10\Desktop\Projects\Markvira\static\css\base.css'
This is My project Files:
base.html
{% load static %}
<!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">
<title>Markvira</title>
<link rel="shortcut icon" type="image/jpg" href="{% static 'images/base/favicon.ico' %}"/>
<link rel="stylesheet" type="text/css" href="{% static './css/base.css' %}">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!------>
<!--Navbar-->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</header>
<!--Navbar-->
<!----->
<main>
{% block content %}
{% endblock %}
</main>
<footer>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch ./static/scss/base.scss -o ./static/css"
},
"dependencies": {
"bootstrap": "^5.0.0-beta3",
"node-sass": "^6.0.0"
}
}
base.scss
#import "custom_bootstrap";
#import "navbar";
html, body {
margin: 0;
height: 100%;
background-color: black;
}
project tree
can you help in the following:
why base.css file does not show effects in my website?
should i after installing (npm i bootstrap#next) to include links by jsDelivr, because i noticed some effects did not show till i include jsDelivr bootstrap links?
Thank you
I am creating a website with django and I have a dropdown menu like this:
<li class="dropdown">
<a data-toggle="dropdown" href="#">{{ user.username }}</a>
<ul class="dropdown-menu dropdown-menu-left">
<li>Profile</li>
<li>Requests</li>
<li>Your cars</li>
<li>Your reservations</li>
</ul>
</li>
If I go to a page that contains this piece of code:
{% load bootstrap3 %}
{% bootstrap_javascript jquery='full' %}
The dropdown menu is not working, but if I remove the 2 lines above the dropdown menu works fine.
Knowing that I have to keep this 2 lines, how I am doing to solve this problem
you need to follow the sequence first bootstrap.css file second jquery.js then popper.js and then boostrap.js don't forgot to link popper.js this file are use for the open model
boostrap.css using link tag
jquery.js using script tag
popper.js using script tag
bootsrap.js using script tag
<head>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
i give CDN link put in your code other wise download those file and link them,i gave you the above stuff follow those sequence & don't forgot proper.js or jquery.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
if this work then make right answer if don't work please give the console error that show you in your browser,
Okay, so I tried having a folder with static template elements accessible by all apps with two css files and one html file.
In settings.py I went to TEMPLATES and added: 'DIRS': os.path.join(BASE_DIR, 'static_files'),, as seen here (I edited out confidential info therefrom).
My template fragment topnav.html looks like this:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<title>EvoLang</title>
</head>
<!-- Content will go here -->
<body>
<script src="myScript.js"></script>
<!-- Navigation -->
<nav class="topnav">
<ul class="topnav">
<li><a href="#">Entrywords
<li><a href="#">Sentences
</ul>
</nav>
<!-- / Navigation -->
</body>
Then, in previously working index.html in my app biblio looks like this:
{% extends "topnav.html" %} {# this enables using the top navigation bar #}
<p>Lorem ipsum</p>
What I get while accessing that page is the following error: [Errno 22] Invalid argument: 'E:\\MyProject\\myproject\\:\\biblio\\index.html'
I don't really get what is this \\:\\ part here.
I am using Django 1.11.2 with Python 3.6.
The DIRS setting should be a list. You are missing the square brackets and the trailing comma. Try:
'DIRS': [os.path.join(BASE_DIR, 'static_files')],
My topbar in foundation 6 is somehow not working (Not somehow, the foundation.topbar.js isn't there). So, please help me get it added.
I'm new to foundation — like a total noob. I'm 13. So, please consider that. :)
And here's the WHOLE code:
<!doctype html>
<html class="no-js" 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" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><i>Title</i></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>HEADER</h1>
</div>
</div>
</div>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is what happens:
This is my JS folder:
just you're coding in Foundation 5.x style. Look at this : http://foundation.zurb.com/sites/docs/top-bar.html
thank you. and also download and import the .js folder from the foundation on git.
the the topbar will "work".
It looks like you're just running this as a static page (html)
Yet in the path for your javascript includes you're including
<? bloginfo('template_url'); ?>
Which looks to be a php function
Might I suggest you run the likes of WAMPserver ( given you're running windows it's a simple way of getting Apache Mysql and PHP up and running on your local machine.
Additional note: As was said however it looks like you're including foundation 5.x code
"<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!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>Hello, world!</h1>
<!-- 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>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!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>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.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>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>