I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Google</li>
<li>Bing</li>
<li>Bing2</li>
<li class="dropdown">
More choices <b class="caret"></b>
<ul class="dropdown-menu">
<li>Yahoo</li>
<li>CNN</li>
<li>Weather</li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.
Related
I have a dropdown in my menu for a site I'm creating with bootstrap and the dropdown doesn't seem to work. I am using Bootstrap 2.3.2 Below is the code for my dropdown:
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
And after doing a little bit of research, I've read that the order of the .js, .css, and jQuery links might have an affect. This is the current order I have them in, perhaps this order is what is causing the problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/css/NewStrap.css" rel="Stylesheet" />
<script src="Styles/js/bootstrap.min.js"></script>
1st, load css first, put your css in <head></head> tag
2nd, load js before the </body>
example:
<!-- load all css first -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
<!-- put all js before </body> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Okay I found out what was wrong. Bootstrap 2.3.2 is not compatible with JQuery 3.0 and higher. Using JQuery 1.9 fixed the issues.
I'm having an issue with getting the icons to display while using MaterializeCSS. I'm using the bare bones "Getting Started" from the documentation but for whatever reason icons refuse to show up. Below is the code I'm using
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<ul class="hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">First Sidebar Link</li>
<li class="bold">Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
$('.collapsible').collapsible();
</script>
</body>
</html>
All this code is trying to do is display a navbar, it was pulled directly from the documentation.
The hamburger menu doesn't appear when the browser is resized
The dropdown arrow doesn't appear beside the dropdown menu item.
I feel like it's something stupid that I'm missing but I've been looking at it for 2 hours and my brain is melted. Any help would be appreciated.
EDIT: Here's the updated code for the dropdown arrow too:
<i class="material-icons right">arrow_drop_down</i>
I ran into this issue too and wondered where my hamburger icon went!
Unfortunately, a lot of their documentation hasn't been refreshed, so the code you are using is a bit outdated.
Change this:
<i class="mdi-navigation-menu"></i>
to this:
<i class="material-icons">menu</i>
and you should see the icon. If you check their source code, you'll see that even their site uses the updated code that's different from their docs:
CHANGE HTTP TO HTTPS in linking font library. It worked for me.
I am trying to use button from bootstrap material design from below link:
http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html
I downloaded the dropdown button and all needed CSS and JavaScript from the above link. When I am trying to test a sample dropdown button it is not drawn properly. Below is the sample html code and output.
I am not able to find out what I am missing. I tried to find the answers from net but didn't find any! So I am posting it here.
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="css/roboto.min.css" rel="stylesheet">
<link href="css/material.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
</head>
<body>
<h3>Why this dropdown icon height is half of button????</h3>
<div class="btn-group">
Primary
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
Setting the doctype to HTML5 did the trick for me -- add <!doctype html> to the top of your document.
I don't know why, but it's the FIRST thing I thought of.
I have a website I'm creating, still in it's beginning stages. I have it hosted locally, but when I click the links, it says the files cannot be found even though they do in fact exist. Also, the styling won't apply. My index.html is below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>Sports</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/TeamsCtrl.js"></script>>
<script src="js/services/TeamsService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container">
<!-- HEADER -->
<nav class="container-fluid navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="HeaderController">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i>Sports</a>
</div>
<ul class="nav navbar navbar-nav">
<li ng-class="{ active: isActive('/teams') }">Teams</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> Log In</li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>
The part I do not understand is that this runs fine on my work computer. I zipped it up, sent it to myself at home, and it doesn't run correctly. When I click the Teams link, it takes me here: file:///C:/teams, which isn't correct. I have no idea where to even start looking, as this is my first web project. Any help would be greatly appreciated as to where I should start/what the issue could be. Thank you ahead of time.
use ~ symbol infront of all your links. For example use ~/teams instead of /teams.
~ symbol will take you current folder where the files are located.
I wasn't running a localhost web server on my machine. Once I did, everything worked fine.
This is my first try using bootstrap. I am just trying to get a basic menu bar working. From what I see everything works fine, but just doesnt look ok. I tried to switch out the css with a new download, but still doesnt seem to fix anything.
This is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar">
<div class="navbar-inner">
test
<ul class="nav">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Nothing complex. Got the basic structure from Bootstrap website. Just added the new menu.
It looks like this
I have checked the CSS files to be in the right place and also the bootstrap js file.
Add the class navbar-brand to the first 'a' tag
test
And add the class navbar-nav to the first 'ul' tag:
<ul class="nav navbar-nav ">
With these changes the example looks better.
I can't post images yet, but in the next link you can see how the example look after this changes: