I read several posts about which bootstrap package use (mainly Crispy-form VS django-toolkit-integration)
But I'm pretty new to Django and I still don't understand what is the real need about these packages.
I mean, Twitter bootstrap is nothing more than css/js files.
So, I thought using bootstrap by linking my Django forms and field to HTML classes (using widgets for .py forms, and directly in .html templates for other fields)
So, what are the benefits of these packages? Is it just convenience or am I really missing something if I choose to not use it?
Thank you for help!
It is just a convenience for forms. It provides you with template tags. Django provides two methods as_p, as_ul and as_table but none of them works smoothly with bootstrap. So you use something like instead.
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% form|crispy %}
{% endblock %}
It also provides some convenient classes to configure in the Django Forms.
So, it is not necessary but it will save you some hassles to configure forms. You can start without them and when the problems come, you will find them useful.
As you yourself said, Twitter Bootstrap are only CSS and JS files that you will apply in your HTML structure and get a new face of its elements. The Bootstrap provides a number of ready-made elements and styles.
Many websites come ready structures and even site templates ready using Bootstrap, as: Bootsnipp, Bootswatch, Wrapbootstrap and many others. The big advantage I see is not wasting time with styles (I'm not disparaging the designers) and focus more on programming.
My final note is: give a chance to the Twitter Bootstrap, it is very useful in creating models and styles faster, more focused on the end product.
Some of this packages are made to be able to write your CSS in Less (the language), and compile them automatically. Also, some may add compression and concatenation of assets.
As Bootstrap is nothing more than a bunch of CSS and Javascript files (and I don't use Less) so far all I need is form integration, which is easily achieved by this:
NOTE: This is a very specific example of my own code, but you get the idea.
<div class="row">
<div class="span6 offset3">
<form id="form-history" class="form-horizontal text-center"
action="/somepath/" method="post">
<fieldset>
<legend><h3>History</h3></legend>
{% for field in form %}
<div class="row">
<div class="span3">{{ field.label }}</div>
<div class="span3">{{ field }}</div>
</div>
{% endfor %}
<div class="row pull-right">
<button class="btn btn-primary btn-large" type="submit">
<i class="icon-ok icon-white"></i> Find
</button>
</div>
</fieldset>
</form>
Related
I'm experiencing a weird behavior with Jinja. I made a dynamic flask route and so I made a jinja modular template, it's just a for loop to create an element for each article present in some data (in a dict) I give to Jinja, the template looks like this :
{% for theme in article_data %}
{% for article in theme["article"] %}
{% if article["main"] == 1 %}
<div style="background-image: url('{{article['content']['image1']}}');" class="theme-item-bg frow space-between">
{% endif %}
{% endfor %}
<div class="wrapper-row space-between pinkfilter">
<div class="uB theme-item-text">{{theme["name"]}}</div>
<div class="pageChanger waves-effect waves-light btn uL primaryB" page="/nos-articles/{{theme['name']}}" title="{{theme['name']}}">Voir plus d'articles</div>
</div>
</div>
{% endfor %}
It does work correctly for most of my pages but for one, it have a really weird behavior, Jinja render one of the article correctly and nest the others in a strong element.
The data used to render the page have the same structure and is correctly parsed.
Is there a way to prevent Jinja from nesting stuff in a strongelement?
There must be either some html inside theme["name"] (fix it by escaping it with theme["name"]|escape), or a <strong> tag not closed in one your templates.
Jinja doesn’t insert random html tags, but the browsers do when trying to parse and fix a broken html code
I have stored the rules in database in form of questions and want to ask questions by user and then conclude to a result.
I want questions to be displayed on user's screen with yes or no option and ask further questions according to the choices. i am unable to find a solution that how should i compare user input from front end with backend (django)
so far i have tried
views.py
def fetch_rules(request):
if request.method=='POST':
issueid=request.POST['issueid']
rules=Rules.objects.all().filter(parentissue=issueid)
return render(request,"questions.html",{"rules":rules})
else:
return HttpResponse("Not found")
template
{% extends 'base.html' %}
{% block content%}
<div class="questionwrapper">
{% for rul in rules %}
<div class="question">
<h1>{{rul.question}}</h1>
</div>
<div class="solution">
<p>{{rul.solution}}</p>
</div>
<p style="text-align: center;font-weight: bold;">Your issue solved?</p>
<div class="question_btns">
<a id="yes_q" >Yes</a>
<a id="no_q" >No</a>
</div>
{%endfor%}
</div>
{% endblock %}[![My template][1]][1]
currently template shows all the questions but i want to display once at a time and then display one after another according to the user's choice.
If you want to add content dynamically, you must use front-end technology. All you have to do is hide the questions using CSS display:none,then make onclick events on the buttons and a simple JS script will change the display of a specific child display:nth-child(n):inline-block
You may also do somethink similar using objects id, for example:
<div class="question" data-id={{rul.question.id}}>
<h1>{{rul.question}}</h1>
</div>
And now you can sort or display objects with data-id and JavaScript
I have a regular website where HTML5, CSS3, JQUERY and static images have been used.
I also have a Blog written in Django and I would like to integrate it in the website.
I am really new to Django so I was wondering which is the best approach to use.
Should I integrate the website code as part of the Django project or there are some other solutions?
thanks!
You have 2 ways of integrating your current site with Django.
1) You can write API with DjangoRestFramework and make requests with jQuery AJAX in order to get content from Django.
2) You can use your current HTML files as your Django project templates for rendering content from Django.
You can use a Django template. The template defines placeholders and various bits of basic logic (template tags) that regulate how the document should be displayed. Usually, templates are used for producing HTML, but Django templates are equally capable of generating any text-based format.
If you've used a templating engine like ''. They look somehow similar.
<html>
<head>
<title>Ordering notice</title>
</head>
<body>
<h1>Ordering notice</h1>
<p>Dear {{ person_name }},</p>
<p>Thanks for placing an order from {{ company }}. It's scheduled to ship on {{ s\
hip_date|date:"F j, Y" }}.</p>
<p>Here are the items you've ordered:</p>
<ul>
{% for item in item_list %}
<li>{{ item }}</li>{% end for %}
</ul>
{% if ordered_warranty %}
<p>Your warranty information will be included in the packaging.</p>
{% else %}
<p>
You didn't order a warranty, so you're on your own when the products inevitably stop working.
</p>
{% endif %}
<p>Sincerely,<br />{{ company }}</p>
</body>
</html>
check here for more details https://djangobook.com/django-templates/
How would I return text with template markup from an expression and have the tags rendered by Jinja? It looks like Jinja only makes one pass, and just escapes and dumps the text in without further processing it as part of the template (which would be the right thing 99% of the time). Is there a way to make two passes with the renderer, or render the result of my expression first and pass it to the template?
Simplified Problem
I have included further details below in case there is more to this than I think, but this should be all the information needed for the problem.
If do_render() returns <p>Hello there {{ current_user.name }}</p>, how could I do the following in a template, so that I obtain the value of name?
<div>
{{ do_render() }}
</div>
This renders as <div><p>Hello there {{ current_user.name }}</p></div>, when I want <div><p>Hello there Sam</p></div>.
Complete Problem
I'm using Flask, Flask-Bootstrap, and Flask-Nav with Python 2.7. I could just create the navigation bar myself and none of this would matter, but "autogenerated" sounded so much simpler...
Flask-Bootstrap provides a Flask-Nav compatible renderer; I have subclassed it to modify my navigation bar. I'm trying to add a logon form in the navigation bar, right-aligned. Because the BootstrapRenderer generates the complete navbar, I have to inject my form into it prior to the closing tags (alternatively, I could skip super() and do it all myself).
class MyRenderer(BootstrapRenderer):
def visit_Navbar(self, node):
""" Returns the html for a Bootstrap navigation bar. """
root = super(MyRenderer, self).visit_Navbar(node)
# Replace the navbar style with my custom css
root['class'] = 'navbar navbar-mystyle'
# Here I try injecting a login form. This is the correct position,
# and it inserts properly; it just treats {{, }}, {%, %}
# as nothing special.
elem = root[0][1] # div class="navbar navbar-collapse"
elem.add(
dominate.util.include(
os.path.join(
config.app_path_root, app.template_folder, 'inc/login_form.jinja')))
# I have also tried
# elem.add('{% block nav_right %}{% endblock %}')
# thinking I would use inheritance later (still my preference).
return root
I then register the renderer with Flask-Nav, and render it by inserting {{ nav.main_nav.render() }} into my base template, which my .html files inherit from. All of this works.
My problem is that I only want the login form when the person is not logged in.
The login_form is:
{% if not current_user.is_authenticated() %}
<form class="navbar-form navbar-right" role="search" action="login" method="post">
<div class="form-group"><input type="text" name="username" /></div>
<div class="form-group"><input type="password" name="password" /></div>
</form>
{% else %}
<div class="navbar-right">
Welcome {{ current_user.name }} | Logout
</div>
{% endif %}
My HTML output is identical to the template; neither statements, expressions, nor comments are treated as such.
Other attempts: I have generated the navbar first, then passed it to the template via render_template('index.html', navbar=navbar) but I have the same problem. I have also tried macros. I'm about ready to write my navigation menu in the base template myself and be done with it, but now it feels like that would be giving up.
Other than {% include ... %} and {% extends ... %}, you're not going to be able to have the template system automatically render something that's added to a template during runtime without a bit of customization.
The beautiful part about Jinja 2 is that its API is very powerful and you can do many things without having to feel like your "hacking" the system. To do what your first example is implying, you just need to have the function render the included template snippet snd return a rendered string. If you're expecting the template to be rendered with the context of the parent template, that's not gonna happen automatically, but that's not a problem since you can pass in whatever you need directly in your function call in the template.
I've been researching this a long time and experimenting and I can't seem to figure out what the best way to go about accomplishing this. I know I'm doing it wrong so some clarification as well as some quick examples would help a lot.
I was wondering about using a bootstrap3 theme from https://wrapbootstrap.com/ with Django. I researched into the django-bootstrap3 and django-bootstrap-themes packages. On the github page of django-bootstrap-themes it says it's compatible with bootswatch. I don't like their themes so I was wondering if it was compatible with wrapbootstrap.com themes. The themes I would select from wrapbootstrap.com are Responsive HTML themes. I wanted to know if out of personal experience anyone knows which of these packages are best for using themes from wrapbootstrap.com with django.
I understand it is possible to just take from the theme the stylesheets, scripts, place them into their respective folders in static, and turn the HTML base into a base template as well as other pages. Then install bootstrap from a CDN. I know this is also possible with django-bootstrap3. But I can't find the answer anywhere as to what is currently the best way to go about integrating one of those themes and twitter bootstrap3 into a Django website, and some quick examples of doing this.
Thanks, and any advice for doing so would help a ton.
The package django-bootstrap3 is a nice utility app which allows you to produce less HTML markup in your templates that would be otherwise required for bootstrap to work. It uses some additional template tags for this purpose.
I find this package a nice one and sometimes I use it, but it is usually after you have got involved well into bootstrap that you appreciate it.
The package django-bootstrap-themes seems to be an app which it too offers some template tags like the former package, but apparently less. But it also allows you to easily integrate themes from Bootswatch into your Django templates, which is nice if you find those templates appealing. Other than that I personally find no other reason to use it. But again, both packages could be used together if it fits you.
Some examples:
In order to get bootstrap going in your templates without any other package, you would have to include the following in your base html file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
{# HTML5 shiv and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
And at the bottom:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
With django-bootstrap3 this becomes:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
But some other markup gets very much simplified. For instance a bootstrap form (see the official docs example) would become easy as:
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
To load bootstrap with django-bootstrap-themes:
{% load bootstrap_themes %}
{% bootstrap_script use_min=True %}
And apparently this is how you would use one of the themes from bootswatch:
{% bootstrap_styles theme='cosmo' type='min.css' %}
To sum up, if you wish to use any other ready-made bootstrap theme in your templates, you would still need to go with the standard approach that you describe in your question, possibly using some of the above tools on top.