Bootstrap

the most popular HTML, CSS, and JS framework

Created by Anthony Korzan for George Washington University's CSCI1010

What is Bootstrap?

A collection of HTML, and CSS design templates

Created by Twitter for internal use

Released as open source in August 2011

It is one the most starred GitHub development projects [1]

Why should I use Bootstrap?

All the other SEAS students will envy your sites.

Bootstrap automagically creates mobile friendly pages.

But first, what is HTML/CSS/JS?

Press down for examples

HTML

marks the content up into different structural types [2]

html_only.html

<!DOCTYPE html>
<html>
  <head>
    <title>An Ode to Geocities</title>
  </head>
  <body>
    <h1>My First Heading</h1>

    <p>My First Paragraph</p>

    <ul>
      <li>This is an</li>
      <li>unordered</li>
      <li>list</li>
    </ul>
  </body>
</html>

CSS

tells the browser how each type of element should be displayed [2]

example.css

body {
  font-family: Helvetica;
  background-color:#333333;
  color:lightgray;
}
p {
  margin-left: 150px;
}
.myStyle {
  color:#FF0000;
  font-size:200%;
}

html_css.html

<!DOCTYPE html>
<html>
  <head>
    <title>An Ode to Geocities</title>
    <link rel="stylesheet" href="example.css">
  </head>
  <body>
    <h1>My First Heading</h1>

    <p>My First Paragraph</p>

    <ul>
      <li>This is an</li>
      <li class="myStyle">unordered</li>
      <li>list</li>
    </ul>
  </body>
</html>

Javascript

tells the browser how to change the web page in response to events that happen [2][4]

example.js

function myFunction() {
  var foo = document.getElementById('myID');

  if (foo.style.visibility == 'hidden') {
    foo.style.visibility = 'visible';
  } else {
    foo.style.visibility = 'hidden';
  }
}

example_js.html

<html>
  <head>
    <script src="example.js"></script>
  </head>
  <body>
    <h2 id="myID">
      This will disappear!</h2>
    <button onclick="myFunction()">
      Press Me</button>
  </body>
</html>

Don't worry about Javascript, Bootstrap takes care of it

Getting Started

SEAS provides a server for all of its students

Press down to continue

Using your SEAS log-in and password, you can access cobweb.seas.gwu.edu over ssh or sftp

Unix

In Terminal you can open up a shell

ssh username@cobweb.seas.gwu.edu
Windows and Unix

Free Drag and Drop applications for editing and uploading files

Connect to cobweb.seas.gwu.edu on port 22
FileZilla Recommended
CyberDuck
WinSCP Windows Only

Download and Setup

Unix

After opening a SSH session

cd ~/public_html
wget http://github.com/twbs/bootstrap/releases/download/v3.3.0/bootstrap-3.3.0-dist.zip
unzip bootstrap-3.3.0-dist.zip
rm bootstrap-3.3.0-dist.zip
mv dist/* ./.
rm -r dist
the code box scrolls to the right
Windows and Unix

Download Bootstrap

Connect to the server using one of the applications sftp to cobweb.seas.gwu.edu on port 22

Drag and drop the contents of the folder to public_html Don't forget to uncompress the zip file

All bootstrap really is, is a collection of Javascript and CSS

Your folder structure should look the same. Note the directory the folders are located in.

Using Bootstrap

Create a new file named index.html in your public_html directory

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Cute Baby Goats</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <h1>My First Heading</h1>

    <p>My First Paragraph</p>

    <!-- This is a comment; JavaScript for Bootstrap -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Note the inclusion of javascript and the stylesheet

Moar.html

<!DOCTYPE html>
<html>
  <head>
    <title>Cute Baby Goats</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- This is a comment; JavaScript for Bootstrap -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Outside practice

http://www.codecademy.com/skills/make-a-website

Examples

http://getbootstrap.com/getting-started/#examples

References

  1. https://github.com/trending
  2. http://webdesignfromscratch.com/html-css/how-html-css-js-work-together/
  3. http://www.w3schools.com/html/html_intro.asp
  4. http://www.w3schools.com/js/tryit.asp?filename=tryjs_doc_open