Individual Study Flex Project 2016-2017 Chris Ferguson (20.5)

Learn BootStrap for Creating Web Pages
Why Bootstrap?
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

In other words, Bootstrap allows users to create ONE web page that will format and look good on every size of screen, from a large monitor, to a medium tablet and a small cell phone screen. To prove this point, THIS PAGE is done with Bootstrap and I encourage you to view it from a larger computer screen THEN narrow the window to the width of a cell phone screen.

On a wide screen these three columns display horizontally, with no scrolling needed to view them. On a narrow cell screen the columns stack vertically, scrolling is needed but Bootstrap automatically displays them in pleasing format.

What I did!
As with learning all new technology, I Googled 'Bootstrap'

The links to the left on a wide screen or below on a narrow screen (thanks Bootstrap) are the sites I found most useful in learning and practicing using Bootstrap.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. Which most likely explains why it is 'mobile first', making sure Bootstrap web pages work well with cell phone screens/browsers.

What follows is a tutorial on my experience learning Bootstrap, heavy with examples of the features I have learned.

Bootstrap Links
Bootstrap Home Page

Bootstrap Download Page

Google Bootstrap

W3Schools Bootstrap Tutorial

Here is one of my favorite Bootstrap features: Collapsing The Navigation Bar. On a wide screen the Nav bar stretches horizontally accross the screen. On a narrow screen it 'could' stack vertically but that would take most/all of one cell phone screen just to see the menu. Bootstrap can collapse the entire menu into one small menu icon. Leaving the screen for content, and an icon the user can press to see and/or hide the navigation bar. Again, important to view this example at full width THEN narrow the browser to cell phone width to see the Nav bar replaced with the menu icon:

WebSiteNameHome
Page 1 Page 1-1
Page 1-2
Page 1-3
Page 2
Page 3
Sign Up
Login

Scaling Images
Getting images to display right on any size screen is tricky business. Large images shrunk too small look like mush, and small images expanded too large look like a blur. In the example below the fisrt screen shot is at its natural size, the second is Bootstrap scaling it for the screen size:

The Bootstrap .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Scaling Video
Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio. This is where I first learned of Bootstrap, I tried over and over again to figure out the proper size to display a youtube video embedded on my web page. Every time I seemed to have it I would view the page from another device and it looked terrible. After much research, I found Bootstrap. Start full screen on this video and then shrink to a window size the width of a cell phone:

Who can Use Bootstrap?
Anyone that wants to create mobile ready web pages. A knowledge of HTML is needed and a strong knowledge of Cascading Style Sheets (CSS). If you do not know CSS, stop now and learn CSS first. Bootstrap does have advanced features that use Javascript and JQuery but those ARE NOT required unless you used the advanced features. In fact, a huge advantage is CSS is all you need to know to use Bootstrap to create web pages that scale well between a large computer monitor and a small cell phone screen.

Surprized how much of Bootstrap is visual, enhancements that make web pages look better. I thought it was all about screen size but really a lot has to do with creating good looking menus, buttons, drop down boxes and many other visual elements seen on web pages.

Bootstrap Example (This Web Page)
Here is the HTML/CSS/Bootstrap code that created this web page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Chris Ferguson Flex 2016-2017</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.min">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 3px;
}
</style>

</head>
<body>

<div>
<h1>Individual Study Flex Project 2016-2017</h1>
<h1>Chris Ferguson (20.5)</h1>
<h3>Learn BootStrap for Creating Web Pages</h3>
</div><div>
<div>
<div>
<h3>Why Bootstrap?</h3>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p>In other words, Bootstrap allows users to create ONE web page that will format and look good on every size of screen,
from a large monitor, to a medium tablet and a small cell phone screen. To prove this point, THIS PAGE is done with
Bootstrap and I encourage you to view it from a larger computer screen THEN narrow the window to the width of a cell phone screen.</p>
<p>On a wide screen these three columns display horizontally, with no scrolling needed to view them.
On a narrow cell screen the columns stack vertically, scrolling is needed but Bootstrap automatically
displays them in pleasing format.</p>
</div>
<div>
<h3>What I did!</h3>
<p>As with learning all new technology, I Googled 'Bootstrap'</p>
<p>The links to the left on a wide screen or below on a narrow screen (thanks Bootstrap) are
the sites I found most useful in learning and practicing using Bootstrap.</p>
<p> Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. Which most likely explains why it is 'mobile first',
making sure Bootstrap web pages work well with cell phone screens/browsers.</p>
<p>What follows is a tutorial on my experience learning Bootstrap, heavy with examples of the features I have learned.</p>
</div>
<div>
<h3>Bootstrap Links</h3><p><A HREF='http://getbootstrap.com/'>Bootstrap Home Page</A></p>
<p><A HREF='http://getbootstrap.com/getting-started/#download'>Bootstrap Download Page</A></p>
<p><A HREF='https://www.google.com/#q=bootstrap'>Google Bootstrap</A></p>
<p><A HREF='https://www.w3schools.com/bootstrap/'>W3Schools Bootstrap Tutorial</A></p>
</div>
</div>

</div>
<HR>
<div>
<div>
<div>
<P>Here is one of my favorite Bootstrap features: Collapsing The Navigation Bar. On a wide screen
the Nav bar stretches horizontally accross the screen. On a narrow screen it 'could' stack vertically
but that would take most/all of one cell phone screen just to see the menu. Bootstrap can collapse the
entire menu into one small menu icon. Leaving the screen for content, and an icon the user can press
to see and/or hide the navigation bar. Again, important to view this example at full width THEN narrow
the browser to cell phone width to see the Nav bar replaced with the menu icon:
</div>
</div>
</div>

<nav>
<div>
<div>
<button type="button" data-toggle="collapse" data-target="#myNavbar">
<span></span>
<span></span>
<span></span></button>
<a href="#">WebSiteName</a>
</div>
<div id="myNavbar">
<ul>
<li><a href="#">Home</a></li>
<li>
<a data-toggle="dropdown" href="#">Page 1 <span></span></a>
<ul>
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul>
<li><a href="#"><span></span> Sign Up</a></li>
<li><a href="#"><span></span> Login</a></li>
</ul>
</div>
</div>
</nav>

<HR>
<h2>Scaling Images</h2>
<div>
<div>
<div>
<P>Getting images to display right on any size screen is tricky business. Large images shrunk too small
look like mush, and small images expanded too large look like a blur. In the example below the fisrt
screen shot is at its natural size, the second is Bootstrap scaling it for the screen size:
</div>
</div>
</div>
<IMG width="1284" height="540" src='coc2.png'>
<div>
<div>
<div>
<p>The Bootstrap .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p><img src="coc2.png" alt="College of the Canyons" width="1284" height="540">
</div>
</div>
</div>
<HR>

<div>
<h2>Scaling Video</h2>
<p>Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio.
This is where I first learned of Bootstrap, I tried over and over again to figure out the proper
size to display a youtube video embedded on my web page. Every time I seemed to have it I would
view the page from another device and it looked terrible. After much research, I found Bootstrap.
Start full screen on this video and then shrink to a window size the width of a cell phone:</p>
<div>
<iframe src="https://www.youtube.com/embed/qIULMnbH2-o"></iframe>
</div>
</div>
<HR><div>
<div>
<div>
<h3>Who can Use Bootstrap?</h3>
<p>Anyone that wants to create mobile ready web pages. A knowledge of HTML is needed
and a strong knowledge of Cascading Style Sheets (CSS). If you do not know CSS, stop
now and learn CSS first. Bootstrap does have advanced features that use Javascript and JQuery
but those ARE NOT required unless you used the advanced features. In fact, a huge advantage
is CSS is all you need to know to use Bootstrap to create web pages that scale well between
a large computer monitor and a small cell phone screen.</p>
<p>Surprized how much of Bootstrap is visual, enhancements that make web pages look better. I thought
it was all about screen size but really a lot has to do with creating good looking menus, buttons,
drop down boxes and many other visual elements seen on web pages.</P>
</div>
</div>
</div>