I am new to Bootstrap 3.0. Can any one tell me what is significance of 'navbar-brand' class in below code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">Vacation Rentals</a>
</div>
</div>
</nav>
<div id="body" class="container">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/bootstrap.js")
#RenderSection("scripts", required: false)
</body>
</html>
Also, I would like to know something about magical text 'Toggle Navigation'. When I am re-sizing my browser I can see a small rectangle on right hand side of the screen, but where is the text 'Toggle Navigation'?
Thanks,
Hemant Shelar
navbar-brand class is applied to typical branding logo you see in the top navigation bar.It may just contain a typical image logo or text. Refer to the image below to better understand.
Now coming to the second question.
The class applied to Toggle Navigation is sr-only that stands for screen reader only.
According to bootstrap documentation, the class is used to hide information used for screen readers.
To know more about accessibility of site for screen readers I would recommend going through the following .
Invisible Content Just for Screen Reader Users and google web accessibility course
Related
I am new to bootstrap and am trying to figure out why my menu on the a smaller screen overlaps my picture instead of pushing it down.
I want to have a fixed menu on all screen sizes and it is fine on the desktop sizes, and is actually fixed on 768px. But it needs to push the content down vertically on smaller sizes and right now it is going over the top of my picture.
I have seen the post that said to change to a static header, which I tried, but lost the fixed header in the desktop and still did not push the picture down when expanding the menu on a smaller screen. Something must be off with my basic structure perhaps, as opposed to my css, as I have not really styled the small sized screens yet with css since it seems like a different type of problem. I want to keep the fixed header at all times, and push content down on smaller sizes using the sandwich menu, in what I would think is a more normal process.
Bootstrap is v3.3.7
Any insight would be greatly appreciated
<!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>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
<link href="css/navbar1.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<link href="css/first-picture.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim 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]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header"><div class="top-header">
<div id="header-wrapper">
<div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
<div class="tele-number">530-273-1343</div>
<div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
<div class="email-address">Email CBC</div>
</div>
</div></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li>I'm New</li>
<li>Beliefs</li>
<li>Ministries</li>
<div class="menu-picture"><span class="navbar-brand" href="#"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></span></div>
<li>Missions</li>
<li>Sermons</li>
<li>News/Events</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="container-fluid test">
<div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I'm learning HTML and CSS on my own by resources available online.
I took this template using Bootstrap and made it my own using my content. I have the problem that when I make changes to style on CSS, these changes doesn't take effect on the page when refreshing.
It looks like CSS doesn't over ride some code in the Bootstrap. Any suggestion or correction into making style effective?
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">
<title>Home Cleaning Services in the SF Bay Area</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="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="#">Sparkling Cleaning SF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Estimates</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<img class="Cleaning-Logo" src="img/SparklingCleanLogo.jpg">
<h1>Cleaning Services in the SF Bay Area</h1>
<p>With a growing economy and a vibrant style of life, the SF Bay area has become home for professionals, families, artists and everyone who wants to be part of this great region.
Due to this, it’s very difficult to devote time to clean or organize our space where we live or work.
Sometimes we say to ourselves we will get to clean up our stubborn room or bathroom, but we don’t get to do it because you don’t have the time or the least thing you would like to do in your free time is to get to the obstinate place.</p>
</div>
<section>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.js"></script>
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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" href="index.html">EXAMPLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I coded a navigation bar with three links. The navigation bar should be responsive which means that if the window becomes small enough the links should disappear (as they do) and a new button with three horizontal lines should appear (which does not).
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="btn btn-navbar" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-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="/server">APL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Impressum</li>
<li class="active">Documentation</li>
</ul>
</div>
</div>
</div>
</nav>
Why does the button in the following JSFiddle demo stay invisible (same markup)?
http://jsfiddle.net/BaR3q/22/
The menu button is there, but it's white so you can't see it.
Add navbar-inverse class to the navbar and it shows up:
http://jsfiddle.net/BaR3q/23/
UPDATE
Your original question only asked “Why does the button in the following JSFiddle demo stay invisible” and my above jsfiddle example solved that. But per your comment below, I looked at your jsfiddle again.
The reason the menu button wasn't toggling the menu was you didn't have a valid link to bootstrap.min.js nor did you preload jQuery. After adding both, you can see your demo works: http://jsfiddle.net/BaR3q/25/
This is a JsFiddle issue.
I already got this one, with a Bootstrap-3 navbar. Your code perfectly works, you can try it in a blank file. You can also copy paste the Bootstrap-3 navbar example to see the issue.
A working JSBin.
Bootstrap's JavaScript was incorrectly linked in the jsFiddle. It was added without an http:// and was linking to jsfiddle.net.
Also, Bootstrap's JavaScript requires jQuery, but the Fiddle did not include it.
I fixed the reference to Bootstrap's JS and added jQuery as a dependency. I also inverted the colors on the navbar so you could see it more easily with navbar-inverse. Everything works great:
http://jsfiddle.net/BaR3q/24/
I put your menu code into my boilerplate BS3 nav bar template and it works. Tested in Firefox 17, Chrome 29 and IE8 (I my environment I have to support IE8, so I included some info about that, too). Let me know if you have need anything else or have any questions.
UPDATE: JSFiddle Demo
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
SET UP THE FOLLOWING FOR YOUR ENVIRONMENT IF YOU WANT TO SUPPRT IE8.
See https://github.com/scottjehl/Respond for more. Note that the Respond.js script
will not function locally in IE8 due to browser security restrictions.
-->
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="btn btn-navbar"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-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="/server">APL</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Impressum</li>
<li>Documentation</li>
</ul>
</div>
</nav>
</body>
</html>
I have the following test code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ti Productions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>home</li>
<li>about</li>
<li>help</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap-collapse.js"></script>
</body>
</html>
I'm basically trying to test out the collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
I've downloaded the boostrap responsive css file as per the instructions, and also the collapse.js file.
The page loads file, with the menu showing. Then when I shrink the browser size, the menu collapses..and the button appears. But I can't open the menu. Whenever i click on the button to display the collapsed menu, I get the following error:
--
[19:08:40.348] TypeError: $ is undefined #
https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of that file looks like this:
$.fn.collapse = function (option) {
I'm not sure what I'm doing wrong. Any guesstions would be appreciated.
EDIT 1
I've added in the missing jquery.js file but that hasn't resolved the issue.
The includes at the bottom of the page now looks like this:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
The $ is a jQuery function and needs to be included before the bootstrap-collapse.js.
Try this sequence
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
check if jquery is properly loaded or not . IN Firebug or console try running "$". This type of errors comes , if jquery is not loaded before custom script or their is a conflict with other library using '$' like prototype.