Bootstrap Navigation Basics

Questions and Answers

What is the element that creates a gray line at the top of the screen, used as the base for the nav bar?

What would you use to bring the items closer inward in a nav bar?

How would you create a brand link typically used to bring you back to the websites homepage?

BrandNameHere

How would you put other items, such as 'contact' and 'about', into a nav bar?

<ul class='nav navbar-nav'> Signup and view all the answers

How would you get elements onto the right side of the page in a nav bar?

<div class='navbar-right'> Signup and view all the answers

What are the two languages required to make the dropdown aspect of the navbar work, and in what order do they have to be placed?

<p>jQuery and Bootstrap's JavaScript, with jQuery first</p> Signup and view all the answers

How would you set certain elements to collapse when mobile size is reached, and what element is required?

<div class='collapse'> Signup and view all the answers

How do you get the hamburger button, and where is it placed in the code?

<p><button class='navbar-toggle'>Toggle navigation</button></p> Signup and view all the answers

What do you need to do to create a thumbnail?

<p>Wrap content in <div class='thumbnail'></p> Signup and view all the answers

How would you get a glyphicon onto the nav bar using Bootstrap's premade ones?

<p>Use <span class='glyphicon glyphicon-camera'></span></p> Signup and view all the answers

How would you fix a nav bar to the top of the screen?

<p>Add the class 'navbar-fixed-top' to the navbar</p> Signup and view all the answers

How would you fix the issue of the navbar covering a jumbotron or other elements at the top of the screen?

<p>By adding padding-top: 70px to the body</p> Signup and view all the answers

How would you change the background color of a navbar?

<p>Select a navbar class in CSS and alter it</p> Signup and view all the answers

Study Notes

The navbar is initiated with the <nav> element, creating a gray separator line at the top of the page.
To add padding and move navbar items inward from the screen edge, wrap elements in a <div class="container">, but do not nest the navbar itself within this container.

Brand Link Creation

The "brand" link is generated using the <a> tag with the class navbar-brand, providing a reference back to the homepage.

Insert additional navbar items (e.g. "About", "Contact") by creating a <ul> or <div> (with <ul> being conventional) assigned the class nav navbar-nav.
Use nested <li> tags within the list to link to the respective sections of the website.

Aligning Elements

Place elements on the right side of the navbar by adding the class navbar-right to the parent element.

Required Languages for Dropdowns

The dropdown functionality relies on jQuery and Bootstrap's JavaScript, with jQuery loaded first followed by Bootstrap's JS.

Making Elements Collapsible on Mobile

To enable collapsing elements in mobile views, enclose them in a <div class="collapse" id="...">, linking it to a hamburger icon.
If the hamburger button is not implemented, the enclosed items will simply disappear.

Implementing the Hamburger Button

The hamburger button code is sourced from the Bootstrap website and is placed before the brand link within the header tag.
Ensure that the id of the hamburger button matches the id in the collapse element for proper functionality.

Thumbnail Creation

Elements placed within the <div class="thumbnail"> will gain thumbnail attributes, enhancing visual presentation.

Adding Glyphicon

Incorporate Bootstrap's glyphicon by using respective classes, such as the "camera" icon, which can be used as inline text or image.

To prevent the navbar from scrolling with the page, apply the class navbar-fixed-top to the navbar element.

To mitigate the navbar overlapping other top elements like a jumbotron, add padding to the body's top margin, typically set to 70px.

Alter the background color of the navbar by modifying one of its assigned classes in CSS, such as navbar, navbar-default, or navbar-fixed-top.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on Bootstrap navigation elements with these flashcards. Learn about the essential components that create a functional navigation bar and how to style it effectively. Perfect for anyone looking to enhance their web development skills using Bootstrap.