I am a newbie to symfony 2, so i used the traditionnal way of including bootstrap css and js files, and i faced the problem that the navbar is not working in my twig view, the code is working on a normal php web site. So here is my code
{%block header%}
{{ parent() }}
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ciné-tickets
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><h1>test</h1></li>
<li>Accueil</li>
<li class="dropdown">
<a href = "" class="dropdown-toggle" data-toggle="dropdown">Categories
<i class="caret"></i>
</a>
<ul class="navbar-nav navbar-inverse dropdown-menu">
<li>Marocain</li>
<li>Americain</li>
<li>Egyptien</li>
<li>Indian</li>
</ul>
</li>
<li>Contact</li>
<li>se connecter || s'inscrire</li>
</ul>
</div> <!--fin collapse navbar-collapser-->
</div> <!--fin container-->
</div> <!--fin navbar navbar-inverse navbar-static-top-->
{%endblock%}
nothing show up even the :
<h1> TEST </h1>
Thank you
to dump assets in to web folder you will need to run few commands in the command promt from your working derectory when working in symfony
php ./app/console assets:install ./web --env=prod
php ./app/console assetic:dump --env=prod
for further guidance you check the documentation : http://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command
Related
I've been trying for hours to understand what's happening here, but I didn't manage to understand.
I've written the html body for a navigation bar, which is shown below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
When I open the html file from my computer, they all seem to be as I want.
But when I copied the html body to be an Angular component, the result is this. In addition the toggle button when the screen is small does not work, while in html it works.
Do you know why this happens? Thank you!
EDIT!
I have installed the bootstrap 3.3.6 and I have removed the scripts and link from this html. Then I included in the index.html below the the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
It seems that now it works!
Instead use links use cli to install bootstrap .
But to install 3.3.6 use this command:
npm install bootstrap#3.3.6
Here is working code
EDIT MAKE COLLAPSE WORK WITH ANGULAR
add in ts
collapsed:boolean=true;
html
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" (click)="collapsed = !collapsed;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
The menu drop downs for a brief second and then goes back up. Can anyone please help in fixing it? If someone could suggest me a code to make it work then that would be even better.
This is the code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
You are using Bootstrap version 2.3.2 CSS with Bootstrap version 3.3.6 Javascript. They are not compatible with each other. You need to use the same version of Bootstrap for both CSS and Javascript to get the correct behavior.
(It would have been helpful if you had included the URL to the site you need help with.)
Here you go with a solution https://jsfiddle.net/wqy986bt/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
There are few things:
You have an extra closing div at the end of your code
Check the ordering of the library file
bootstrap CSS
jQuery
bootstrap JS
I've used bootstrap v3.3.7 and jQuery v2.1.1 (in snippet) and jQuery v2.2.4 (in jsfiddle)
Hope this will help you.
Hi I'm trying to make bootstrap work in my cakephp project. I'm just starting to learn cake and I dont know why my collapse doesnt work.
In my webroot\css\ i have my bootstrap.css file. In my webroot\js i have bootstrap.min.js, collapse.js, transition.js files.
In my src\Template\Layout\default.ctp i wrote
<?= $this->Html->css('bootstrap') ?>
<?= $this->Html->script(['bootstrap.min','collapse','transition']) ?>
and on the <body> tag i wrote...
<nav class="navbar navbar-inverse navbar-static-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bookmarks</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Add Bookmarks</li>
<li>Export Data Modified</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</nav>
But everytime I test the collapse by making my browser smaller. When I click the "burger" the items don't come out. Any idea why?
Your not closing your nav tag or did you just forget to post it?
I tried doing it, It works for me. Look for the console error messages. This may be due to the loading of css, script files.May be your server doesnt support <?= ?> tags. Try using <?php ?> tags. And Please tell what are the error messages which you get, when something is not working. So that it will be easier for anyone to debug.
So I'm working with SSI to implement global items like headers, and footers etc. basically for server side scripting since I am using a simple web host.
Now I've checked with the company and SSI is enabled by default. I even ran a few SSI tests which all came back positive to prove my point.
I built a header.html file to be imported into my different pages. The header.html goes a little something like this:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navigation-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Skyline Interactive</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Games <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>State of Gray
</li>
<li>Aldervinia
</li>
<li class="divider"></li>
<li class="dropdown-header">Other</li>
<li>SkyBlog
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am using the SSI include in my html page like below. For example, in home.html (and yes I have a handler that also parses .html and .htm -- I tested these files as well for SSI and they passed):
<!-- #include virtual="/web/includes/header.html" -->
I have this at the very top of my body tag. Am I just missing something? Or are there any ideas where I could have messed something up?
Yeah. I think the issue is that you have to get rid of the space just before the # so that it becomes:
<!--#include virtual="/web/includes/header.html" -->
I'm developping an app in Rails 4 and I use bootstrap 2.3.2 with the bootstrap-twitter gem.
Here is my navbar:
<div class="navbar">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">BRAND</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><%=t 'navbar.home'%></li>
<li><%=t 'navbar.applications'%></li>
<%if signed_in?%>
<% if current_user.admin == true %>
<li><%=t 'navbar.administration'%></li>
<%end%>
<%end%>
<li class="divider-vertical"></li>
<li><button class="btn navbar-btn btn-success" onclick="location.reload();location.href='/items/new'"><%=t 'navbar.share'%></button></li>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= current_user.username %></li>
<li><a data-method="delete" href = "<%= destroy_user_session_path%>" rel="nofollow"><%=t 'navbar.signout'%> <i class="icon-off"></i></a><li>
<% else %>
<li><%=t 'navbar.signup'%></li>
<li><%=t 'navbar.signin'%></li>
<% end %>
<li class="dropdown">
<%=t 'navbar.language'%><b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/en" method="get"><img src="/assets/United-Kingdom-flag-icon.png" class="iconic"> <%=t :english%></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/fr" method="get"><img src="/assets/France-Flag-icon.png" class="iconic"> <%=t :french%></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Sadly it doesn't collapse when I try to display it on a phone. I checked if the regular collapsable menus are working, and they do, so I guess that I'm supposed to have things set up properly. Therefore it must be an error in my code, but I can't find it.
Do you have any clue about what it might be?
I test your code in a static html web page and it works well.
1/ In your html head section, be sure you have included
bootstrap.min.css
bootstrap-responsive.css
jquery.min.js
bootstrap.min.js
2/ Does it works on a computer?
=> if yes: what is your mobile phone browser?
<!DOCTYPE html>
{%load staticfiles%}
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href = "{% static 'your_folder/css/bootstrap.min.css' %} " rel= "stylesheet" type = "text/css" media = "all">
<link href = "{% static 'your_folder/css/styles.css' %}" rel= "stylesheet" type = "text/css" media = "all">
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
<ul class="nav nav-pills">
<button class = "navbar-toggle" data-toggle = "collaps" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-left">
<ul class="nav nav-pills ">
<li > home </li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{% static 'your_folder/js/bootstrap.min.js' %}"></script>
<script src="{% static 'your_folder/js/script.js' %}"></script>
</form>
</body>
</html>
This works for me if I minimize my browser and also in effective in mobile site.
Make sure you have downloaded bootstrap folder and fix into your project folder, I dont know much about ruby but I know a thing or two about Bootstrap, css and html.