codehs- Web Design- 7.0 Bootstrap Vocabulary

(7.6) Navigation Bar

An important part of most websites to make moving from page-to-page easier for the user

(7.2) Bootstrap Skeleton

Bootstrap code added to the head of an HTML web page

(7.5) Buttons

Bootstrap provides premade CSS classes that style any <a> tag or button tag as professional looking buttons

(7.5) Page Headers

Classes that help appropriately space out sections of the page by adding a horizontal line and some padding

(7.1) Bootstrap

A framework for developing beautiful, responsive, mobile-friendly websites

(7.7) Dropdowns

A great way to pack more options into a Navbar while keeping the interface simple

(7.5) Glyphicon

- Created by making a span and setting the span's class to the proper glyph - there should be no text inside the span

(7.6) Bootstrap Thumbnails

- Used for styling linked images - created by adding a .thumbnail class to the <a> tag

(7.2) .container

- fixed width - width updates occasionally as window is resized - nice margins on the left and the right

(7.2) .container-fluid

- full width - width constantly updated to be full width of the window

(7.2) How can you add additional CSS with Bootstrap?

Add code AFTER the Bootstrap CSS file

(7.2) Where do you find the Bootstrap starter template in codeHS?

Docs>Bootstrap>Adding Bootstrap

(7.5) Bootstrap Components

Pre-packaged user-interface elements, such as buttons, icons, and tables, that we can use on our pages

(7.4) The Grid System

allows us to set up our webpages in rows and columns, and define how those rows and columns change when the screen size changes. This is the key to building mobile responsive websites.

(7.4) Column Overflow

if more than 12 columns are placed within a single row, each group of extra columns will wrap onto a new line

(7.3) Jumbotron

large callouts that draw attention to something on a webpage.

(7.2) Text Styling classes

see image

(7.3) Jumbotron code

see image

(7.4) Different Layouts for Different Screen Sizes

see image

(7.4) The Grid System (columns)

see image

(7.5) Buttons Examples

see image

(7.6) Basic Table

see image

(7.6) Bootstrap Table Classes

see image

(7.6) Bordered Table Example

see image

(7.6) Buttons

see image

(7.6) Glyphicons

see image

(7.6) Zebra-Striped Table Example

see image

(7.6) Simple Navigation Tabs

the active class should be added to the current page code.