django and bootstrap carousel - use offline - django

I am using bootstrap offline with :
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
in my template, but the code for the first carousel shown here http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
does not work unless I have the CDN links:
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
what {% %} do I need to make carousel work ?

Ok.. I have got the answer for Offline Carousel for bootstrap.
Download > jquery slim build (https://code.jquery.com/jquery-3.3.1.slim.js)
Copy the contents in your own File as JS file (like copy paste codes in your file and save as jquery.js)
Link your script inside body tag (before body tag ends) like...<script src="jquery.js"></script>
Finally link bootstrap js file as step 3.
Thank You!

From looking at the documentation, it does not appear that you can use Bootstrap features offline by default. If you look at the default settings for django-bootstrap3, you will see that this package does use the CDNs behind the scenes.
As far as I know, the only way to use bootstrap offline would be to have a copy of the Bootstrap css and JavaScript files saved on your local machine, as well as the jQuery files, since the Bootstrap JavaScript plugins depend on that.
I have not used django-bootstrap3 but it looks like if you have a copy of the necessary Bootstrap files stored locally, you should be able to update your Django settings for django-bootstrap3 to point to these local copies instead of the copies on the various CDNs.

Related

What are the differences between django-bootstrap4 and bootstrap4?

I am beginner in Django web development & currently I am using using bootstrap4 by loading bootstrap.min.css & bootstrap.min.js as below in html files.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Recently I have found that there been module in Django named django-bootstrap4 & I am reading its documentation also.
https://django-bootstrap4.readthedocs.io/
I have tried to find difference between those but not found any.
Which will be suitable to use in web development?
Tried to find answer on google but not found any so please can someone explain me difference between these two?
The Bootstrap itself is an independent CSS framework that you can use to build your UI no matter the application framework. But django-bootstrap4 is basically a helper library to seamlessly integrate Bootstrap with your Django project UI.
For example consider you want to use alert component in Bootstrap. After adding bootstrap.min.css & bootstrap.min.js to your template, every time you want to show the alert you should add code like this:
<div class="alert alert-danger" role="alert">
Something went wrong
</div>
But with django-bootstrap4 you can simply use {% load bootstrap4 %} in your template and then there in no need to writing all the tags and classes.
{% bootstrap_alert "Something went wrong" alert_type='error' %}
So they are basically is the same but the later is cleaner and more maintainable.

Ember: Application.hbs not generating in body while building

I have a problem with ember-cli build option.
While running server by ember s it's showing normal page with content, styles etc.
But now I want to build this app and put it on my website by ftp so i tried ember build which build my project into /disk folder but the index.html file doesn't contain the stuff from application.hbs + no styles from styles/app.css.
I'm new to ember. What am I doing wrong? Docs of ember are saying nothing about this.
All of your app is actually pulled in through external assets.
So, looking at your pre-built index.html, you'll see something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>emberclear</title>
{{content-for "head"}}
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/emberclear.css">
{{content-for "head-footer"}}
</head>
<body class='has-navbar-fixed-top'>
{{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/emberclear.js"></script>
{{content-for "body-footer"}}
</body>
</html>
my application is https://emberclear.io, named emberclear, so substitute your app name where applicable.
In the head, we see two link tags.
the first link is for all the styles that your addons may include (maybe such as material-ui, or bootstrap, or bulma).
The second link is your actual app styles. for me, emberclear.css includes everything from app.css, and all of its dependencies (I'm actually using scss, so I can include stuff via scss' #import).
Down in the body we see two script tags.
vendor.js will contain ember itself, and any addon dependencies that need to be included at run time, such as ember-paper's library of components.
emberclear.js includes your app -- routes, templates, etc.
This technique is common for all single page apps, and isn't exclusive to ember. anything built with react, or vue, has a similar pattern.
If you're wanting to have html and css be a part of your index.html, fastboot (https://www.ember-fastboot.com/) + prember (pre-rendered ember: https://github.com/ef4/prember ) may be of interest to you.
Hope this helps! :)
If something is wrong, feel free to copy your built index.html from dist (and maybe additional files as well).
Some follow up questions for you, depending on the issues you are running in to:
Are you getting any errors?
What happens when you try to open the dist/index.html file locally?
You're uploading the contents of dist to an ftp folder. This in-of-itself is fine, but has the web-sever been told to use that ftp folder for a website?
How are you attempting to access the ftp folder via browser?
Maybe there is a domain/path we could look at to see additional details?

Django Materialize.css Navbar

I'm working on a Django webapp and I'm using Materialize for CSS I have placed the Materialize file in the static folder in the app. I have issues with the Navbar that it works fine when in full-screen but when I resize the browser the hamburger icon for mobile navbar doesn't work. When clicked on it, it just goes to the /# page and doesn't openup from the side as it should. Do I have to make any change in the Django or Javscript files files? How can I fix this issue?
Materialize uses a materialize.js file. This file needs to be in your static folders under js. (ie js/materialize.js) You then need to declare this file in your html template after the JQuery script statement as below. Have you done this?
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>

how to import Bootstrap

I saw some examples,bu it don't solve my problem!
Any help will be Appreciated....
As you already have the files locally in the static folder, you can just use them in the html templates, for example:
{% load static %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
CDNs, or content delivery networks, are code files hosted on the web that you can include in your project. Using a CDN is the fastest way to get set up with Bootstrap.
Find a CDN for Bootstrap. MaxCDN hosts the latest version:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Simply include the code above in your HTML head element and you will be good to go!
Another option is to download your own copy of Bootstrap and integrate it into your project structure.
I have solved this problem ,the version of the Django is 1.11. I check the Django website,it told me I must build files like this and set setting.py like this.But thanks for all of you!
enter image description here

How can I deal with image file with django-pipeline?

I use django-pipeline to deal with css, javascript files in my Django projects.
But I wonder how I could deal with image files using django-pipeline.
There is no manual for image in docs.
Should I use Django built-in {% load staticfiles%} for images?
Then should I use both {% load staticfiles%} and {% load pipelines %}?
Thanks.