Bootstrap

Use the Internet to review and research the Bootstrap framework.

Based upon your research address the following topics:

1. Briefly describe Bootstrap and its primary uses.

Bootstrap is a library of css that will allow for easy responsive web design. You emlplement Bootstarp by adding classes to the element you want the grid system to be applied too. Bootstrap also has a ton of other functions such as image responsive, table styleing, button styling and form field styles.

2. What is a CSS framework?

CSS framwork is a bunch of predetermained css rules (typicly in classes). So if you want to style a green button with bootstap you would add a class of .btn-success to whay you want to style.

3. Why is Bootstrap referred to as a framework?

Becuase it is a library of css that you use to style elements and grid system to make you website responsive.

4. What are some of the advantages and disadvantages to using a framework?

advantages: easy to implement, fast, takes a lot of the busy work out of building a web page.

Disadvantages: You have to keep your version up to date, sometimes conflicts with other styles you may be trying to apply.

5. List and describe at least five features or functions that Bootstrap provides as part of its framework.
• Grid System

Bootstrap's grid system allows up to 12 columns across the page. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

• Images

The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners). The .img-circle class shapes the image to a circle (IE8 does not support rounded corners). The .img-thumbnail class shapes the image to a thumbnail. Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an .img-responsive class to the img tag. The image will then scale nicely to the parent element. The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image

• Button Styles

Bootstrap provides seven styles of buttons:

Default Primary Success Info Warning Danger Link
• Glyphicons

Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button: Search

Search icon on a styled button: Search

Print icon:

Print icon on a styled link button: Print

• Progress Bar

A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. A default progress bar in Bootstrap looks like this:

70% Complete