Bootstrap navigation
Brief introduction
Use Bootstrap, you can create a static navigation bar. This tutorial will teach you how to do that.
We will use HTML5 page with content and see how to add a header navigation bar. The following is the final output:
Here is the code page HTML5 with no content.
<! DOCTYPE html> <Html lang = & quot; en & quot;> <Head> <Meta charset = & quot; utf-8 & quot;> <Title> Bootstrap basic navigation based on the tag </ title> <Meta name = & quot; description & quot; content = & quot; Bootstrap Basic Tab Based Navigation Example & quot;> <Link href = & quot; ../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css & quot; rel = & quot; stylesheet & quot;> </ Head> <Body> <! - We will create in this navigation -> </ Body> </ Html>
To create the basic structure contains navigation, you need HTML5 code is shown above, followed by
Behind the label insert the following code:<Div class = "navbar navbar-fixed-top"> <Div class = "navbar-inner"> <Div class = "container"> <-! Navigation does here -> </ Div> </ Div> </ Div>
Now, let us Replace the following code to create the first set of navigation. Please note, here's "brand" class presented in different ways, which can be used to present your company name or organization name.
<Ul class = "nav"> <Li class = "active"> <a class="brand" href="#"> w3big </a> </ Li> <Li> <a href="#"> About </a> </ li> <Li> <a href="#"> Portfolio </a> </ li> <Li> <a href="#"> Contact </a> </ li> </ Ul>
If you need to create a drop-down menu, you need to keep up with the HTML code in the last block of code displayed after insert the following code.
<Ul class = "nav"> <Li class = "dropdown"> <A href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Services <B class = "caret"> </ b> </a> <Ul class = "dropdown-menu"> <Li> <a href="#"> Web Design </a> </ li> <Li> <a href="#"> Web development </a> </ li> <Li> <a href="#"> Wordpress Theme development </a> </ li> </ Ul> </ Li> </ Ul>
However, due to the drop-down menu Bootstrap need to use JavaScript, so you need to insert the following two lines of code in an HTML page. You can insert them into Front label.
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script> <Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
If you want the navigation bar to insert a search form, just in a drop-down menu list <ul> After, insert the following code. Please note, class "pull-left" is aligned to the left search form. If you want to align the right, use the "pull-right" class.
<Form class = "navbar-search pull-left"> <Input type = "text" class = "search-query" placeholder = "Search"> </ Form>
Now we want to insert the navigation bar item interactive buttons, located on the right side of the navigation bar. We will insert Google Plus, Facebook Like and Tweet buttons. You need to search form behind insert the following code.
<Ul class = "nav pull-right">
<Li class = "dropdown">
<A href = "#"
class = "dropdown-toggle"
data-toggle = "dropdown">
Social
<B class = "caret"> </ b>
</a>
<Ul class = "dropdown-menu">
<Li class = "socials"> <-! Put this tag placed in a position to render the +1 button ->
<G: plusone annotation = "inline" width = "150"> </ g: plusone>
</ Li>
<Li class = "socials"> <div class = "fb-like" data-send = "false" data-width = "150" data-show-faces = "true"> </ div> </ li>
<Li class = "socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document," script "," twitter-wjs "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
class "socials" is not part of bootstrap.css. Because we want to give all interactive buttons are centered, so we need it to create some padding (padding). Code is as follows:
.socials {
padding: 10px;
}
You can write directly on the page, use Surrounded, you can add it to an external CSS file and referenced.
Finally, you need to insert two codes. A button for Facebook, another for Google Plus. These are provided by Facebook and Google for dynamic insertion button into your page.
Therefore, the body behind the start tag, insert the following code, this is for Facebook
<Div id = "fb-root"> </ div>
<Script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName (s) [0];
if (d.getElementById (id)) return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, fjs);
} (Document, 'script', 'facebook-jssdk')); </ script>
Then at the end of the front body of the tag, insert the following code, this is for Google Plus
<Script type = "text / javascript">
(Function () {
var po = document.createElement ( 'script'); po.type = 'text / javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'script') [0]; s.parentNode.insertBefore (po, s);
}) ();
</ Script>
Here is the final code
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap navigation Examples </ title>
<Meta name = "description" content = "Bootstrap navbar Example">
<Link href = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
.socials {
padding: 10px;
}
</ Style>
</ Head>
<Body>
<Div id = "fb-root"> </ div>
<Script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName (s) [0];
if (d.getElementById (id)) return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, fjs);
} (Document, 'script', 'facebook-jssdk')); </ script>
<Div class = "navbar navbar-fixed-top">
<Div class = "navbar-inner">
<Div class = "container">
<Ul class = "nav">
<Li class = "active">
<a class="brand" href="#"> w3cschool </a>
</ Li>
<Li> <a href="#"> About </a> </ li>
<Li> <a href="#"> Portfolio </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>
<Ul class = "nav">
<Li class = "dropdown">
<A href = "#"
class = "dropdown-toggle"
data-toggle = "dropdown">
Services
<B class = "caret"> </ b>
</a>
<Ul class = "dropdown-menu">
<Li> <a href="#"> Web Design </a> </ li>
<Li> <a href="#"> Web development </a> </ li>
<Li> <a href="#"> WordPress Theme development </a> </ li>
</ Ul>
</ Li>
</ Ul>
<Form class = "navbar-search pull-left">
<Input type = "text" class = "search-query" placeholder = "Search">
</ Form>
<Ul class = "nav pull-right">
<Li class = "dropdown">
<A href = "#"
class = "dropdown-toggle"
data-toggle = "dropdown">
Social
<B class = "caret"> </ b>
</a>
<Ul class = "dropdown-menu">
<Li class = "socials"> <-! Put this tag placed in a position to render the +1 button ->
<G: plusone annotation = "inline" width = "150"> </ g: plusone>
</ Li>
<Li class = "socials"> <div class = "fb-like" data-send = "false" data-width = "150" data-show-faces = "true"> </ div> </ li>
<Li class = "socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document," script "," twitter-wjs "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Div>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "../ bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script type = "text / javascript">
(Function () {
var po = document.createElement ( 'script'); po.type = 'text / javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'script') [0]; s.parentNode.insertBefore (po, s);
}) ();
</ Script>
</ Body>
</ Html>
Click here to view the online instance.
Please note that you need to start after the body tag add a 40px of padding (padding). And before it is added after the core Bootstrap CSS, optional responsive CSS.
Bootstrap also allows you to create responsive navigation bar. Here is the code:
Examples
<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">
<-! .nav, .navbar-Search, .navbar-form, etc ->
</ Div>
</ Div>
</ Div>
</ Div>
Click here to download the tutorial to use all the HTML, CSS, JS and image files.