Bootstrap Framework

bootstrap book written by Hirdesh bhardwaj
Web Designing – 1st Edition

Bootstrap Framework

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap, also called Twitter Bootstrap is completely free to download and use.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in August 2011 on GitHub.

Bootstrap assumes you are just layman in designing and all you want to do is write some HTML as per the Bootstrap specifications. In short, Twitter Bootstrap has already a CSS style sheet, inbuilt jQuery support and also has some popular JavaScript tools for you.

Bootstrap is responsive to screen of various sizes and resolutions and scalable.

 

How to start

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>  <!—To globalize your project in different languages –>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Bootstrap 101 Template</title>

<link href=”css/bootstrap.min.css” rel=”stylesheet”>  <!—Link boostrap CSS File –>

</head>

<body>

// Your HTML code goes here

</body>

</html>

Bootstrap Navigation Classes

.nav

  • the basic class for every navigation structure (<ul>), removes any list-style, left padding and bottom margin
  • also sets display: block and position relative for its <li> children
  • must be set on every navigation

.active

  • class for a list item (nav item, li) that makes it look active / current

.nav-tabs

  • class for navigation structure that gives it a tab style (proper borders + float: left)

.nav-pills

  • class for navigation structure that gives it a pills style (background on active nav item)

.nav-stacked

  • makes vertical pills navigation
  • used together with .nav-pills (and .nav of course)

.dropdown

  • class for an
  • nav item to make it dropdown
  • needs additional classes elsewhere to work (see below)

.dropdown-toggle

  • class for an <a> which is within <li class=”dropdown”> to make a dropdown menu
  • needs additional classes elsewhere to work (see below)

.dropdown-menu

  • class for an <ul> which is within <a class=”dropdown-toggle”> to make a dropdown menu
  • provides proper displaying and hiding
  • the most important dropdown menu class
  • needs .dropdown and .dropdown-toggle classes on parent elements (see above)

.nav-justified

  • class for an <ul>, together with .nav-tabs or .nav-pills creates a navigation with centered text and links’ parent elements of the same width

.disabled

  • class for <li> in a navigation
  • disables the link inside VISUALLY and also adds a special mouse cursor, but the link remains active – you need to remove the href attribute of the <a> to completely disable the link

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/07/20/bootstrap-framework-and-its-navigation-class
YouTube39
YouTube