Bootstrap

Class Monday, March 12, 2018

 Today’s Goals:

  • Continue learning about Bootstrap, a very popular web development framework: why we use it for web development; what its features are; how to begin using it yourself

 Today’s featured website:

  • http://builtwith.com/– This site will tell you what websites are created with (Bootstrap, WordPress, etc.)

 Bootstrap Features

  • Responsive grid layout
  • Built-in JavaScript for things like photo slideshows, pop-up windows, etc.
  • Extensive documentation and code samples to help developers get started quickly and easily
  • Why do people use Bootstrap?

 Explore the Bootstrap Website

  • Let’s explore the Bootstrap webpage. You will find answers to the following questions.
    1. Does the site have code examples? Where can you find details about the code?
    2. Does this site have themes? If so, what is different about the themes than what you might find somewhere else online?
    3. What steps do you have to take to get started with Bootstrap?
    4. Can you make your images responsive when using Bootstrap? How? (Hint- look here).
    5. What are Bootstrap’s grid classes called? For example, Skeleton used row and column. What does Bootstrap use? (Hint- see here).
    6. Bootstrap’s grid is built with what? (Hint- see here).
    7. As a group- let’s check out the Components page.

 Bootstrap Tutorials

  • These tutorials will give us a basic idea of how to begin using Bootstrap. Please note the latest version of Bootstrap is 4; these tutorials don’t use the latest version but are still helpful.
  • Bootstrap basics #1- page set up, HTML tags, and CSS classes: Let’s try this basic Bootstrap tutorial. Let’s pay attention to what files are need to make Bootstrap work and the HTML tags and CSS classes used.
  • Bootstrap basics #2- column classes and their sizes: Bootstrap provides options for page layout on small, medium, and large screens. You can simply choose to have your content stack vertically on small screens (like we saw with Skeleton) or you can preserve your horizontal layout on a small screen by using the xs class like this. Let’s get rid of the xs classes except for the last row and see what happens. Let’s see more about Bootstrap’s grid here.