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.


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:


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):

College of the Canyons

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 class="jumbotron text-center">
  <h1>Individual Study Flex Project 2016-2017</h1>
    <h1>Chris Ferguson (20.5)</h1>
  <h3>Learn BootStrap for Creating Web Pages</h3> 
</div>
  
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <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 class="col-sm-4">
      <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 class="col-sm-4">
      <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 class="container">
  <div class="row">
    <div class="col-lg-12">
<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 class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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 class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>



<HR>
<h2>Scaling Images</h2>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
<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 class="container">
  <div class="row">
    <div class="col-sm-12">
  <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" class="img-responsive" alt="College of the Canyons" width="1284" height="540"> 
</div>
    </div>
  </div>
<HR>
  
<div class="container">
  <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 class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qIULMnbH2-o"></iframe>
  </div>
</div>
<HR>  
  

<div class="container">
  <div class="row">
    <div class="col-sm-12">
	  <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>