\$\begingroup\$
\$\endgroup\$
I need a second set of eyes to look at my twitter bootstrap 3 header. I would welcome some insight on the code structure and methodology as it relates to bootstrap best practices and efficiency.
<!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>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
#navbar-xs { min-height:35px; border-radius:0; margin-bottom:10px; border-bottom: solid thin #ddd;}
#navbar-xs .navbar-inverse .navbar-toggle { border-color: none;}
#navbar-xs .navbar-toggle { padding:0;}
#navbar-xs .navbar-brand { padding: 8px 0px; font-size: 16px; line-height: 22px; height: 30px; }
#navbar-xs h4.navbar-brand { margin: 0px; }
#navbar-xs .navbar-nav > li a { padding: 0px 10px; margin:8px 0;}
#navbar-xs .navbar-nav > li + li a { border-left:1px solid #ddd; }
#mainNav .container { margin-bottom: 12px;}
#mainNav.navbar-default { background-color: transparent; border-width: 0;}
#mainNav .nav { padding: 30px 0 0 20px;}
#mainNav .navbar-nav > li > a { padding-bottom: 10px; padding-top: 10px;}
#mainNav .navbar-brand { float: none; padding: 0; margin: 10px 0; width:250px; }
@media (max-width: 767px) {
#navbar-xs h4.navbar-brand { font-size: 14px; padding:6px 5px; }
#navbar-xs .navbar-brand { width: 280px;}
#mainNav .navbar-brand { padding:0 60px 10px; margin:0; width:100%; height: auto; }
#mainNav .nav, .navbar-collapse { padding: 0; margin:0; border-width:0;}
#mainNav .navbar-collapse .navbar-nav { background-color: #f3f3f3; border-width: 0;}
}
</style>
</head>
<body>
<!-- Start navbar-xs Top Navigation -->
<nav id="navbar-xs" class=" navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle -->
<div class="navbar-header">
<h4 class="navbar-brand">
Place Main Tagline Goes Here -
<small>Sub Tag Here</small>
</h4>
<button type="button" class="navbar-toggle btn-sm" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Company Name</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#"><i class="fa fa-facebook"></i></a></l>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"> <i class="glyphicon glyphicon-earphone"></i>
1-800-555-1234
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-search"></i>
Search
</a>
<ul class="dropdown-menu">
<li>
<div class="input-group input-group-sm" style="margin:5px; width:300px;">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Customer Service <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link One</a>
</li>
<li>
<a href="#">Link Two</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Section Two</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- End navbar-xs -->
<!-- Start mainNav Navigation -->
<nav id="mainNav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand" align="center">
<a href="/">
<img class="img-responsive " src="http://placehold.it/350x70">
</a>
</div>
</div>
<!-- toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="row visible-xs">
<img class="img-responsive" src="http://placehold.it/1200x10">
</div>
<ul class="nav navbar-nav navbar-right ">
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li class="divider"></li>
<li> <a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<div class="row"> <img class="img-responsive" src="http://placehold.it/1200x10" alt="">
</div>
<!-- /.container -->
</nav>
</body>
</html>
200_success
145k22 gold badges190 silver badges478 bronze badges
asked Apr 11, 2015 at 19:36
1 Answer 1
\$\begingroup\$
\$\endgroup\$
- There's an "i" missing from facebook
</li>tag (you can leave out the closing tags completely). - Since you declared HTML5 doctype, avoid using
<i>and<b>for icons as they have semantic meaning, use<span>instead. align=""attribute is deprecated, use css instead.- don't use
<li class="divider"></li>elements, use css instead. - don't use
<small>for styling purposes, use<span>and css instead.
answered May 15, 2015 at 15:19
lang-css