Currently I am learning Django framework, I've decided to get familiar with it by making a simple Blog app, but I've problem with navigation bar, I'm trying to make a responsive navbar, with collapse classes etc. I've searched about this problem in this forum, but nothing helped, so I need personal help if possible. That's my code, please note that I did include bootstrap and bootstrap's javascript plugin. Thanks in advance.
How this navbar works: http://scr.hu/28mo/ncxtp
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyBlogName</a>
</div>
<div class="collapse navbar-collapse" id ="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
Collapse needs some Javascript to work properly. You should add it to your template. Quick and dirty with script tags in your posted template. Later read about staticfiles and how to ship them with your app. There is also a quite useful example here: Include CSS and Javascript in my django template
Related
I am converting a simple webapp from Bootstrap to Foundation framework. What is the equivalent of
$(...).modal()
?
It's the reveal component:
https://get.foundation/sites/docs/reveal.html
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
$(document).foundation();
Here is the template in question:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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">
My Company
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
{{#each page in pages}}
<li {{bind-attr class="page.isActive:active"}}><a href="javascript:undefined" {{action 'navigate' page}}>{{page.name}}</a></li>
{{/each}}
</ul>
<form class="navbar-form navbar-left hidden-sm" role="search">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button {{action "search"}} class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>{{#link-to 'cart' class="glyphicon glyphicon-shopping-cart"}}{{/link-to}}</li>
{{#if user}}
<li>{{user}}</li>
{{else}}
<li>{{#link-to 'login'}}Sign In{{/link-to}}</li>
<li>{{#link-to 'register'}}Register{{/link-to}}</li>
{{/if}}
</ul>
</div>
</div>
</nav>
{{outlet}}
<div class="container">
<hr />
<footer class="footer">
© My Company
</footer>
</div>
I compiled them using the ember-template-compiler.js file that came with my version of Ember (1.9.1)
For some reason, these quotes are being added around the nav in the markup and it's messing up the layout of my page.
I thought it might be related to a whitespace issue with ember 1.9, but I tried saving the files with Unix style endings and it didn't help.
Does anyone have any clue what might be causing this issue?
Turns out it was because Visual Studio would save my .hbs files in UTF8 with BOM (with signature) which adds a bunch of hidden characters to the beginning of the file.
I saved them without signature and it works perfectly now. No more empty strings, and my layout is how I expect it to be.
I´ve implemented the Foundation Off-Canvas Menu as a Multilevel Menu. When I use the original code example from the documentation, I´ve the problem, that the submenu isn´t working. It´s shown but it´s not formated (sub-levels not hidden) and the click event to open the submenu is also not triggered.
To me it looks like some parts are not compiled although I compile the whole foundation framework, not only specific modules.
Has anybody an idea where I can start searching? The other parts of the menu work great.
Here´s the HTML code:
<aside class="left-off-canvas-menu" aria-hidden="true">
<ul class="off-canvas-list">
<li><label>Navigationsmenü</label></li>
<li><i class="fa fa-shopping-cart"></i> Mein Warenkorb</li>
<li><i class="fa fa-arrow-right"></i> Zur Kasse</li>
<li><label>Mein Konto</label></li>
<li class="my-account">
<div class="avatar">
<img src="<?php echo "http://www.gravatar.com/avatar/" . md5( strtolower( trim( 'mail#mail.com' ) ) ) . "?s=100";?>" class="avatar" alt="Avatar" />
</div>
<div class="user">
<span class="title">John Doe</span>
<span class="email">email#email.com</span>
</div>
<div class="clearfix"></div>
<i class="fa fa-user"></i> Meine Daten ändern
</li>
<li><i class="fa fa-home"></i> Adressbuch bearbeiten</li>
<li><i class="fa fa-truck"></i> Meine Bestellungen</li>
<li><i class="fa fa-lock"></i> Passwort ändern</li>
<li><i class="fa fa-envelope"></i> E-Mail Adresse ändern</li>
<li><i class="fa fa-power-off"></i> Ausloggen</li>
<li><label>Produktkategorien</label></li>
<li class="has-submenu">Aktionen
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Sonderangebote der Woche</li>
<li>Monatsaktionen</li>
<li>Spezialaktionen
<li>Maximal sparen</li>
</ul>
</li>
<li>Gutscheine</li>
<li class="has-submenu">Ernährung
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Nahrungsergänzungsmittel</li>
<li>Vitamine & Mineralstoffe</li>
<li>Spezialnahrung
<li>Gesund abnehmen</li>
<li>Sportlernahrung</li>
</ul>
</li>
</ul>
</aside>
And that´s the SCSS file (app.scss):
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
#import "settings";
#import "foundation";
Thanks,
Michael
i'm trying out BootStrap in Djangocms 3.0, and can't get it to work. i created a simple html (code below), which is a composite of a banner from this tutorial, and a simple modal from here. i'm call it through a django view.
when i go to the page, what i see depends on what browser i use. in chrome, i see a black banner and the Bootstrap link, and nothing else (not Home, About, etc.., nor the modal). in IE and Mozilla i see the whole banner, but no modal.
if i comment out the references to the bootstrap css and js files, then everything (all the links and the modal contents) appear, but without any styling, of course. so it seems that i have the {{ STATIC_URL }} correct. it is recognizing the classes, just not displaying them correctly (or at all)?
any ideas? thanks!!
<html>
<head>
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
UPDATE:
i reinstalled djangocms, rebuilt my entire site, and re-populated my DB, and now things display properly in the above example. i can even get a modal dialog to pop up and sort of function. however, it works funny. for example, sometimes, the close button works, and sometimes it doesnt. most of the time, everything on the page after the modal element is unresponsive, though not always. i know this is very vague, but the problems are all over the place, so its hard to describe accurately in less than a book. i feel its a conflict of some sort with django, but besides the imported bootstrap files, i have only two js functions of my own, and very little css at this point.
has anyone had similar problems implementing bootstrap in Djano.
try to save all you static file under :
app_name/static/app_name/
in your html code add:
{% load staticfiles %}
<link href="{% static 'app_name/css/bootstrap.min.css' %}" rel="stylesheet">
and check for static filemore information
Do you know how to force django bootstrap toolkit to be responsive? I mean e.g the change of navbar when width is small.
I have in base.html:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
what is "translated" to when checked in view source of page:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
full base.html content here: https://gist.github.com/andilab/785133e800f023c89689
example rendered # jsfiddle here: http://jsfiddle.net/andilab/4Jqab/
Find here the updated jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dogs</li>
<li>Form</li>
<li class="dropdown">
Forms<b class="caret"></b>
<ul class="dropdown-menu">
<li>create</li>
<li>contact</li>
<li>Inline</li>
<li>Search</li>
<li>Using template</li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li>create</li>
<li>contact</li>
<li>Pagination</li>
<li>Buttons</li>
</ul>
</div>
</div>
</div>
</div>
A couple of things were missed:
A fluid container for the nav
You need to specify the collapsible part of the navbar
A navbar toggle button
See http://getbootstrap.com/2.3.2/components.html#navbar