I am trying to understand how t use the standard Bootstrap 4 css with a vue.js app..
I set up a simple test project using vue-cli webpack , and copied a standard Bootstrap navbar in a header component.
It displays BUT no links are visible ....
added into package.json
"bootstrap": "4.0.0-beta.3",
added into main.js
import 'bootstrap/dist/css/bootstrap.css'
App.vue
<template>
<div id="app">
<myheader></myheader>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
import myheader from '#/components/Header'
export default {
name: 'app',
components: { myheader }
}
</script>
<style>
</style>
Header.vue
<template>
<header id="myheader">
<div class="container">
<nav class="navbar navbar-light bg-faded rounded ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="containerNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>z
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</header>
</template>
<script>
import router from '#/router/index'
export default {
name: 'myheader',
router
}
</script>
<style>
</style>
**UPDATE**
I added jQuery and popper.js with npm
and updated my webpack.dev.config
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
I also updated my .eslintrc
globals: {
"$": true,
"jQuery": true
},
Now the Bootstrap navbar collapse runs correctly , but still no horizontal links...
Some of Bootstrap v4 requires a DOM API wrapping library like jQuery to function:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following s near the end of your pages,
right before the closing tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
This is also the case with Bootstrap v3:
Please note that all JavaScript plugins require jQuery to be included,
as shown in the starter template. Consult our bower.json to see which
versions of jQuery are supported.
Although a lot of Bootstrap can get used without any JavaScript, some components like dropdowns, alert dismissing, and other cross-cutting widgets need the extra power that JavaScript provides. You can probably get away without it if you are just using the grid system.
However, if you would rather not explicitly depend on jQuery, you could try Vue Bootstrap which is a Vue plugin that provides most of the Bootstrap components and wraps the things that jQuery is necessary for in a Vue oriented way.
As Bootsrap4 is still in beta (3) I am using in my test the wrong standard classes, I rather should use :
nav class="navbar navbar-dark bg-dark navbar-expand-md">
up and running now ....
I have Aurelia - ASP.NET core 2 template project.. You can download it from GITHUB and run it to verify the error.
I had made significant changes until I found an error in the navmenu.html not recognising a function.
I went back to the template and did a quick test and found the same error in the base template.
I registered this question on my original solution with the same problem but have now realised its to do with the actual Aurelia template I got. So I have uploaded the entire project to github so someone can see the whole thing.
To get this error all I am doing is creating a function on the navmenu and referencing that on a button using "click.deligate". Here is the navmenu.html:
<template bindable="router">
<require from="./navmenu.css"></require>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#/home">Jobsledger.API</a>
</div>
<div class="clearfix"></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li repeat.for = "row of router.navigation" class="${ row.isActive ? 'link-active' : '' }" >
<a href.bind = "row.href">
<span class="glyphicon glyphicon-${ row.settings.icon }"></span> ${ row.title }
</a>
</li>
</ul>
</div>
</div>
</div>
<div>
<h1>Counter</h1>
<p>This is a simple example of an Aurelia component.</p>
<p>Current count: <strong>${currentCount}</strong></p>
<button click.delegate="incrementCounter()">Increment</button>
</div>
Here is the viewmodel.ts file
import { autoinject } from "aurelia-framework";
#autoinject
export class Navmenu {
//loggedInService: LoggedInService;
public currentCount = 0;
public incrementCounter() {
this.currentCount++;
}
}
The error is:
aurelia-binding.js:1905 Uncaught Error: incrementCounter is not a function
at getFunction (aurelia-binding.js:1905)
at CallScope.evaluate (aurelia-binding.js:1508)
at Listener.callSource (aurelia-binding.js:5082)
at Listener.handleEvent (aurelia-binding.js:5091)
at HTMLDocument.handleDelegatedEvent (aurelia-binding.js:3223)
As I say there is a working asp.net core solution that has the spa in it and can be downloaded from github.
It would be great if someone could assist me here as this is currently a show stopper for me.
You are requiring your navmenu as a template only, e.g. <require from="../navmenu/navmenu.html"></require>. In order to use your view with your javascript please see this guide about custom elements.
I am really a newbie in bootstrap 3.
I have made this menu that will collapse when screen is resized, but nothing happend when I click on the button.
<button type="button" class="btn btn-navbar-highlight btn-lg btn-primary" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown active">Home</li>
<li class="dropdown">About</li>
<li class="dropdown">
Page <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Page</li>
<li>Two Column</li>
<li>Three Column</li>
<li>Documentation</li>
<li class="dropdown">
Dropdown Item »
<ul class="dropdown-menu sub-menu">
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Gallery</li>
<li class="dropdown">Contact</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
What am I doing wrong?
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher.
You can use version 1.12.0, which is the last one of the 1.X branch at the moment, and it should work :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Bootstrap should have notified you about this in your browser's javascript console directly, you should enable it as soon as you develop with projects that deal with JavaScript.
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
I've just started learning Boostrap and I'm having a couple of problems with the navigation bar toggle. I've checked up answers from here (like this: Bootstrap 3.0 nav responsive toggle button not working) but I still can't find a solution to what the problem might be.
I'll be glad if someone can help me look into the code and tell me what the problem is. I've linked to the relevant script files (both bootstrap and jquery js files) but I have no with the problem.
here is my code,
<!-- Nav Bar Starts-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand text-muted" href="#"> eLeanr</a>
<button type="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>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home
</li>
<li> About eLeanr
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</div>
<!-- Nav Bar Ends-->