Getting started with Bootstrap.

THINGS YOU SHOULD KNOW

What is a framework?

A framework is a structure that a programmer can use to build a piece of software on.

Be familiar with Java terminology.

Java class, Scanner class, Library

What is a responsive website?

Responsive web design is a modern approach to web development that allows websites and pages display on all screen sizes by automatically adapting to the screen size (ie. desktop, smartphone, laptop, and tablet.)


WHAT IS BOOTSTRAP & HOW TO USE IT?

Bootstrap is a very useful tool for any web developer. It is a CSS Framework for developing responsive websites. To put it into programmers terms Bootstrap is to CSS what the Scanner class is to your custom Java class.

Basically a user would import Bootstrap into their HTML file, using one of two following methods.

1. Download Bootstrap onto your machine and load it into your HTML page like a stylesheet.

2. Go on to the official Bootstrap page in order copy the link provided and paste it into your head for the HTML page like a normal stylesheet.

 After it has been imported you have access to a library of premade Bootstrap CSS classes. Those classes have been pre-styled and have their own stylesheet which allow users to better style their HTML pages with less effort and light tweaking. Simply put, it allows web developers to be more efficient and have to do less trouble shooting in the long run.

in order to use bootstrap you must first put it into your HTML5 page and the where ever you desire to use it you must use a predetermined Bootstrap class. The container class is the most basic unit in Bootstrap and is used in order to make use of the Bootstrap Grid System. From there we break things down into smaller and smaller portions. Their classes are case sensitive so do not misspell anything or you will be left wondering why you cant make anything change.

Here are step by step instructions on how to implement some Bootstrap into your websites:

1. Import Bootstrap into your HTML.(Externally Link It. Or Download It)

In both cases users would go to the official Bootstrap page and find their respective choice. I my case I chose to link it from an external source.


2. Paste the link into your HTML page inside the head tags.



3. Use the desired classes inside the designated HTML tags in order to apply the style or JavaScript.

PROS & CONS

Some of the positives that come from using Bootstrap are:

  • Easy to use
  • Free to use
  • Desirable in todays job market
  • Efficient way to style a page
  • Bootstrap grid system
  • Responsive websites
  • Easy JavaScript
  • Good starting skeletal structure for web sites

Some of the drawbacks include:

  • There is a medium to large learning curve (depending on the desired level of understanding)
  • makes your HTML code slightly harder to read.
  • All websites will look very similar if not customized substantially (Very generic boiler plate)

COMMANDS I USED

sm stands for small size screens ≥576px
md stands for medium size screens ≥768px
lg stands for large size screens ≥992px
xl stands for extra large size screens ≥1200px
  • container or container-fluid
  • row
  • col-xx-yy (xx = "sm, md, lg, or xl" & yy = "1-12")
  • order-xx-yy (xx = "sm, md, lg, or xl" & yy = "1-12")
  • order-xx-yy (xx = "sm, md, lg, or xl" & yy = "1-12")
  • justify-content-center
  • align-items-center
  • p-3 (p here stands for padding & 3 is in rem NOT px)
  • border 
  • bg-light (bg here stands for background light is a predetermined themes set in Bootstrap)

WHY USE BOOTSTRAP

The main reasons for using bootstrap from my research suggests that it is mainly used to create responsive websites. This means that you as a developer can be more efficient with your CSS without having to write as much CSS yourself. There is also the ability to use JavaScript in a very similar fashion. This effectively cuts down on the amount of work the developer has to do in order to make web design more streamlined. I have made a video here in order to demonstrate some of these uses. Another reason to use it is that having to spend less time doing CSS and JavaScript frees you up to be able to work on the accessibility of the website which in tern will increase traffic and usability of the site. It is also very easy to learn and very simple to use. It is desirable in todays job market to be able to design and create web pages and this is a tool that will facilitate that for you. Lastly it is a great starting point for any great website. 

DISCLAIMER: If you do not modify your web page using your own CSS you run the risk of creating a very static bland page due to the fact that Bootstrap is boiler plate not final copy. I did so for educational reasons.

If you have any questions you can contact me here: andres.tovardibenedetto@edu.siat.ca

Comments

Post a Comment