Bootstrap

Standard

For this project we decided to use bootstrap as the source of our CSS and jQuery. This decision was made as we wanted to concentrate our efforts to make the PHP and HTML work rather than spend a long time trying to get the CSS to work. Another point was that we looked at Bootstrap and decided that it would be a good thing to use as it would increase our knowledge of a widely used form of CSS.

We started by having a look at the videos on the internet on how to set up Bootstrap and link it into out HTML page. This is one the videos I used to understand Bootstrap in more detail:

Bootstrap 3: Getting Started (part 1: setup & adding templates) from Ericca Hope Garrison on Vimeo.

We had a look on the website to see some of the elements of Bootstrap we could use in our website. These elements include:

  • Carousel
  • Form
  • Buttons
  • Nav bar (we wanted it to be static)
  • General alignment
  • Jumbotron (to use as divs within the page)
  • Image elements (circular images)

One of the more complicated parts of Bootstrap was the Javascript elements like the carousel. We liked the default one given to use on Bootstrap so copied the code. The hard part was working out where to place this code and how to adjust the code to add our images.

 

This is what the Bootstrap code looks in our project:

Screen Shot 2015-04-17 at 16.10.11

Advertisements

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