Making Nice Looking Websites

Our goal should be to make really nice websites, with simple ways of navigation, that are intuitive and easy to follow. The Bootstrap framework handles the heavy lifting with CSS (and JavaScript) that makes for a nice experience. It is now time to make our web interface shine.

Installing Bootstrap v4

Lets create a bootstrap test area in ~/public_html/IT350/bs4test and retrieve the bootstrap distribution into that directory.

umask 0022
mkdir -p ~/public_html/IT350/bs4test/web/bootstrap
cd ~/public_html/IT350/bs4test/web/bootstrap
wget https://github.com/twbs/bootstrap/releases/download/v4.5.3/bootstrap-4.5.3-dist.zip
unzip bootstrap-4*-dist.zip
rm -f bootstrap-4*-dist.zip

Lets grab the fixed-top-navbar from the Bootstrap webpage, ever wanted to download a website?, wget is a useful tool...

cd ~/public_html/IT350/bs4test
wget --no-clobber --convert-links -p -E -e robots=off -U mozilla http://getbootstrap.com/docs/4.5/examples/navbar-fixed/

If you ran the wget command above , then you can navigate to

http://midn.cs.usna.edu/~mAlpha/IT350/bs4test/getbootstrap.com/docs/4.5/examples/navbar-fixed

What about our directory structure?

It would pay great dividends to be able to access the bootstrap template from any script within our website. To do this lets make some very important assumptions about our design:

1. /web/bootstrap has all files necessary to use the bootstrap template
2. All of our running scripts will exists within the first directory level of our site (ex. /home/home.php, /review/something.php, etc.)

Now, lets copy some of those files that we just downloaded during our scraping of the boostrap website (you should still be in the ~/public_html/IT350/bs4test/ directory).

cd ~/public_html/IT350/bs4test/web/bootstrap/boot*dist
mv * ..
cd ..
rmdir boot*dist
cd ~/public_html/IT350/bs4test
mkdir test
cp -vn getbootstrap.com/docs/4.5/examples/navbar-fixed/index.html test/
cp -vn getbootstrap.com/docs/4.5/examples/navbar-fixed/navbar-top-fixed.css web/bootstrap/css/mysite.css
cp -vn getbootstrap.com/docs/4.5/assets/js/vendor/* web/bootstrap/js/
sed -i 's_../../dist/_../web/bootstrap/_g' test/index.html
sed -i 's_../../assets/_../web/bootstrap/_g' test/index.html
sed -i 's_navbar-top-fixed.css_../web/bootstrap/css/mysite.css_g' test/index.html
sed -i 's_/vendor/_/_g' test/index.html
# And I dislike dark NavBars, so...
sed -i 's_dark_light_g' test/index.html
rm -rf getbootstrap.com

What just happened? We just modified the index.html file that was the basis of the navbar template, changing the path to the bootstrap css/javascript to something more convenient to our website. If you go to:

http://midn.cs.usna.edu/~mAlpha/IT350/bs4test/test/

Time to review how the template did this

Below you can see the source code for the index.html file that we scraped from the boostrap example. Pay specific attention to everything between the <nav> </nav> tags.

From looking at the code, you can see that bootstrap uses standard HTML tags within <div> tags to build the navbars.

Bootstrap - A CSS framework for responsive websites

Now that we have seen the power of CSS and JavaScript, lets focus our efforts on the most popular framework used on the internet, Bootstrap. We will be focusing on version 3 and 4 of the framework. Their website is easily readible, I suggest you review the 4.5 documentation.

Basic Layout tools

One of the nice things that you get by using the framework, is the ability to cleanly layout your we pages. Bootstrap uses a 12 column grid system to separate content. Lets look at a simple example:

The columns above were created with the following HTML:

<div class="row">
  <div class="col-md-4">
    <b>four columns</b>
    <p>
      Lorem ipsum dolor..
    </p>
    <p>
      Duis in...
    </p>
  </div>
  <div class="col-md-2">
    <b>two columns</b>
    <p>
      Lorem ipsum dolor..
    </p>
  </div>
  <div class="col-md-6">
    <b>six columns</b>
    <p>
      Lorem ipsum dolor..
    </p>
    <p>
      Duis in...
    </p>
  </div>
</div>

Playing with Paragraphs

Lets look at what happens when we align our text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Bootstrap in general

Ok, as a reminder you will want to review the Getting Started and Components sections of the bootstrap pages. There is a considerable amount of content that discusses how boostrap is used and implemented with excellent examples. We will walk through some in class, but you will need to take the time to review all of the options.

A Few practice items

If you go to Components documentation mentioned above, you will see lots of capabilities that a framework like Bootstrap can bring to the table.

The first one discussed is an Alert, so lets try that! Edit the index.html that was created for you above, it should be located in the bs4test/test folder

cd ~/public_html/IT350/bs4test/test

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

Where do I read about Navigation Bars?

For bootstrap 4:

• http://getbootstrap.com/docs/4.5/components/navbar/ - Description of the default Navbar
• http://getbootstrap.com/docs/4.5/examples/navbar-fixed/ - Fixed Top Navbar Example

Practice Problems

1. Modify index.html so that the project name is your name, and there is a drop down navbar option with each of your labs within, all linking correctly.
2. Move index.html to ~/public_html/IT350/bs4test/web/start.php, if you go to start.php now it should just work.
3. If you are new to bootstrap, now would be a great time to play with tables and forms.
4. Create a pretty table in Bootstrap. Take a look at the table options.
5. What do forms look like in bootstrap, try!