Book Image

Web Developer's Reference Guide

By : Joshua Johanan, Talha Khan, Ricardo Zea
Book Image

Web Developer's Reference Guide

By: Joshua Johanan, Talha Khan, Ricardo Zea

Overview of this book

This comprehensive reference guide takes you through each topic in web development and highlights the most popular and important elements of each area. Starting with HTML, you will learn key elements and attributes and how they relate to each other. Next, you will explore CSS pseudo-classes and pseudo-elements, followed by CSS properties and functions. This will introduce you to many powerful and new selectors. You will then move on to JavaScript. This section will not just introduce functions, but will provide you with an entire reference for the language and paradigms. You will discover more about three of the most popular frameworks today—Bootstrap, which builds on CSS, jQuery which builds on JavaScript, and AngularJS, which also builds on JavaScript. Finally, you will take a walk-through Node.js, which is a server-side framework that allows you to write programs in JavaScript.
Table of Contents (22 chapters)
Web Developer's Reference Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
9
JavaScript Expressions, Operators, Statements, and Arrays
Index

The navigation bar


Navigation in Bootstrap helps in navigating through the website. It allows quick access to the links a user visits often.

Default

The navbar class is used to create a simple navigation bar by including .navbar and .navbar-default in the navigation tab:

<nav class="navbar navbar-default" role="navigation">

To make a scalable, responsive menu bar that collapses to a dropdown when displaying on mobile devices, use the following class to wrap the bar:

<div class="navbar-header">

Forms

You can also put forms within a navigation bar by adding the .navbar-form class:

<form class="navbar-form navbar-left" role="search">

Buttons

Similar to the navbar class, .navbar-btn adds a button to the bar that can perform many useful functions:

<button type="button" class="btn btn-default navbar-btn"> … </button>

Text

By adding the .navbar-text class, we can also add text to the navigation bar:

<p class="navbar-text"> … </p>

Non-nav links

The navbar-link class allows...