Bootstrap Reviewer

What is Bootstrap?
It is a mobile first front-end framework for easier web development. It uses html, css & javascript

What are advantages of using Bootstrap?
Mobile first approach
Browser support
Easy to get started
Responsive design

What does Bootstrap includes?
Basic structure – grid system & styles
CSS settings
Layout components
Javascript plugins

What is Normalize?
It establishes cross browser consistency. It is a modern alternative to CSS resets.

What is Grid System?
It is a responsive, mobile first fluid grid system that scales up to 12 columns as the viewport size increases

What is the basic Grid Structure?

react

<div class=”col-md-*”> / .col-md-offset-* / .col-md-push-* / .col-md-pull-* / .visible-md / .hidden-md

xs, sm, md, lg

 

What are Offset column?
It can be used to push columns over for more spacing

What is Bootstrap Navbar?
It is a responsive meta components that collapse in mobile views and become horizontal as the viewport increases.

How do you create a Tabbed Navigation Menu?
Add class .nav-tabs
How do you create a Pills Navigation Menu?
Add class .nav-pills
How do you create a Vertical Pills Nav Menu?
Add class .nav-stacked and .nav-pills

How do you use the Dropdown plugin?
Add data-toggle=”dropdown” to a link or button

How do you make Images Responsive?
By adding a class .img-responsive to the img tag.
This class applies max-width: 100% and height: auto to the image so that it scales nicely to the parent element

What are Glyphicons?
Glyphicon are icon fonts. You add the icon code in the class attribute.

What is Media Queries?
It allows you to move, show and hide content based on viewport size
@media screen and (max-width: 550px) {…}

What is Scrollspy Plugin?
It allows you to target sections of the page based on the scroll position. As you scroll, you can add .active classes to the navbar based on the scroll position.

What is Affix Plugin?
It allows a div to become affixed to a location on the page. When the page hits a certain mark, the div will be locked in a place and will stop scrolling with the rest of the page

What is Bootstrap Carousel?
It is a flexible and responsive slider

What are Media Objects?
It features left-aligned or right-aligned image alongside the textual content.

What is Bootstrap Jumbotron?
It increases the size of headings and add a lot of margin for landing page content.

What is Bootstrap Well?
It is a container in div that causes the content to have an inset effect.

What is the Contextual classes of Table?
It allows you to change the background color of your table
.active / .success / .warning / .danger

react

What is Bootstrap Breadcrumbs?
It indicates the current page’s location within a navigational hierarchy. It is simply an unordered list with a class of .breadcrumb

Devices:
Tablets: xs (<768px) / sm (>=768px)
Desktop: md (>=992px)
Large Desktop: lg (>=1200px)

Typography:
.lead
.small
.text-lowercase / .text-uppercase
.text-capitalize
.initialism
.list-unstyled
.list-inline
.dl-horizontal
.pre-scrollable

 

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in Bootstrap. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s