Tried to create a vertical navbar as suggested in th docs in
https://react-bootstrap.github.io/components/navs/
const navInstance = (
<Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
);
But it seems that the stacked keyword does nothing and the nav appears horizontal:
The result I got
And this is what it should look like:
Snapshot of docs
What am I doing wrong?
You need to add bootstrap css explicitly.
Bootstrap Guide for react
Add following links to your public/index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
Related
I want to use some **Boostrap** elements into the **django admin** interface.
For that purpose, I have overided the *admin/base.html* template. I want to add the links to bootstrap javascripts (the two lines of code you have to put just before the `` in order to use bootstrap) into that template.
As it is out of any `{% block %}` in the original *admin/base.html*, is there a nice way to do that without copying the entire section ?
in your admin/base.html file add bootstrap style and js scripts using CDN as below;
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
I hope this will help you as it works for me. Please try and if you have any queries related to this please add a comment.
Getting started with Bootstrap
I am using a bootstrap index file in the header.html in a django project. Can anyone point out a fix or the easiest method to link the bootstrap file to the static folder. In what places does it need to be done, and how?
Also, for use of bootstrap, could I just use the index file rather than header?
I can see the error (below) but do not know the syntax to fix it. The route i've tried is using Jinja logic and it is on that line that the first error arises. (line 14)
Current error:
Error during template rendering
In template C:\Users\User\Desktop\pythonsite\mysite\aboutme\templates\aboutme\header.html, error at line 14
Invalid block tag on line 14: 'static'. Did you forget to register or load this tag?
4 <head>
5
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 <meta name="description" content="">
9 <meta name="author" content="">
10
11 <title>Freelancer - Start Bootstrap Theme</title>
12
13 <!-- Bootstrap core CSS -->
14 <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
15
16 <!-- Custom fonts for this template -->
17 <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
18 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
19 <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
20
21 <!-- Plugin CSS -->
22 <link href="{% static 'vendor/magnific-popup/magnific-popup.css' &}" rel="stylesheet" type="text/css">
23
24 <!-- Custom styles for this template -->
Update:
I changed the static and use of jinja to simply what it was originally in the bootstrap index file: e.g.
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
and this worked in that it ran the webpage, but without CSS>
I still cannot figure out how to link the css from this index page to the templates folder and how/where what syntax.
Current site structure:
The name of the folder is "aboutme" (name of main app)
Inside it is the static folder.
Inside the static folder, I have dropped the entire contents of the bootstrap download (e.g. the fonts, css and js folders)
I have the templates folder in which I have the aboutme folder and in that is are the header.html and home.html. The header.html is the file that I am using (below), trying to reference the css/js etc so the site looks and displays correctly.
Do I simply use:
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
instead of
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
and do I do this in each case? Or should I be using jinja logic?
Somewhere (anywhere) before that, put in
{% load static %}
The first thing is to load the static, for that we use the following:
{% load static %}
To call any static file, it would be like this:
<link href="{% static 'FILE PATH' %}" rel="stylesheet">
<script src="{% static 'FILE PATH' %}"></script>
Example:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anything</title>
<!-- Bootstrap CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Font Awesome -->
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
If you have a base template and you want to extend the other templates, you should use the following:
{% extends 'BASE FILE PATH' %}
I am using below bootstrap nav in my new website.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h
When i am changing active tab( tab1 to tab2), it's still showing earlier active tab's contents.
Is there any way to resolve the issue.
Thanks in advance.
Have you included all of the Bootstrap assets? You might be missing bootstrap.min.js and/or jquery.
Are there any errors in your JS console?
Make sure you have all of these CDNs linked (or that you've downloaded these files locally and linked them in your HTML):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Bootstrap 4 Docs
I was having trouble while using dal and tried to build a simple example.
I did almost the exactly the same as Django autocomplete light: field not populated and also applied the answer of the link.
Here are the steps I went through:
Step 1) When I add like this on header of html (just the same as the above answer):
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
The error of browser inspector console is like this:
Uncaught ReferenceError: yl is not defined(anonymous function) # autocomplete.init.js:75select2.js:117
Uncaught ReferenceError: yl is not defined(anonymous function) # select2.js:117
Step 2) So I added jquery.js and other js files on the dal library:
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
And the error changed like this:
select2.js:66 Uncaught TypeError: $(...).select2 is not a function(anonymous function) # select2.js:66dispatch # jquery.js:4435elemData.handle # jquery.js:4121trigger # jquery.js:4350(anonymous function) # jquery.js:4901each # jquery.js:374each # jquery.js:139trigger # jquery.js:4900initialize # autocomplete.init.js:45each # jquery.js:374each # jquery.js:139(anonymous function) # autocomplete.init.js:50fire # jquery.js:3099fireWith # jquery.js:3211ready # jquery.js:3417completed # jquery.js:3433
Step 3) And for the last, I found these two plugins and added and it worked!
Plugins of [Step 2)] +
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
So here are my questions:
A) Should I add all the plugins above? For example, there are two select2.js on the plugins of [step 3)] and I'm confused and wonder if they work on different ways.(If I remove one of them, it doesn't work.)
B) According to the question Django autocomplete light: field not populated, shouldn't step 2 work? Why does it occur the error?
C) On this sample code, the part of following code seems not working at all. If not with admin account, the foreign key doesn't appears on the text field, in other words, nothing can be found on the list. (from the dal tutorial, it allows 'Using autocompletes outside the admin')
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
# I also checked django-autocomplete-light not working - select2 is not a function and rearrange the installed app didn't work.
First you need to include Jquery and after that your third-party library for selection field.
Select2.min.js(Minified version of the JS file)
Select2.min.css(Minified version of the CSS file)
Then import autocomplete.js
the first select2 library file does not exists. selected link raise Host Not Found Error
select2 library is same if you comment first one it not raised error. you can download library into your static folder.
also jquery link in the last example does not exists. you can download jquery and put it into static folder.
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.