Jim Driscoll's Blog

Notes on Technology and the Web

Bootstrap for Responsive Design

leave a comment »

This post is part of a series examining the Modern Web. Currently, I’m trying to assess pain points in creating a Single Page application, and to do that, I’ve created a simple application which does inventory management. You can find the (somewhat sloppy) code on Github, if you want to follow along.

After my previous post looking at the Model layer, today we’ll examine how to handle responsive design using Bootstrap. (Please forgive the hokey formatting in this post, WordPress Markdown support is still pretty badly broken.)

I just need to say it: using Bootstrap is a treat, and I’m utterly in love. Can you love a UI framework? Apparently so.

Consider the process of making a menu that will appear at the top of your page. You want it to look nice, both on mobile devices as well as the desktop. Let’s also make it “stick” to the top of the page, even when you scroll.

To do that, you take a nav tag, and decorate it with a few CSS classes:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

The part that you want to display when collapsed goes into a separate header:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" 
      data-toggle="collapse" data-target="#navbar-collapse">
        <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="#home">JQ Product</a>
</div>

The three spans with class="icon-bar" are there to show a classic “three lines” icon when the menu is collapsed. Now, when the navigation menu is too small horizontally to display everything, only the three lines icon and your branding link are displayed.

After that, just list all the links you want to see in the navbar, as a list:

<div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#products&page=1">Product</a>
        </li>
        <li>
            <a href="#categories&page=1">Category</a>
        </li>
    </ul>

(Note that since this div collapses, I’ve added the appropriate CSS classes. Uncollapsed, this will all appear horizontally, collapsed, this all appears vertically. It’s a nice effect on a phone.)

There’s even facilities to to add search forms, as well as to right justify elements of your menu:

        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input id="searchinput" type="text" 
                    class="form-control" placeholder="Search">
            </div>
            <span id="search-nav-btn-holder">
                <div id="search-nav-btn" class="btn-group">
                    <button type="button" 
                       class="btn btn-default dropdown-toggle" 
                       data-toggle="dropdown">
                        Search
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a class="search-btn" 
                              href="#products&search=">
                                Search Products
                              </a>
                        </li>
                        <li>
                            <a class="search-btn" 
                              href="#categories&search=">
                                Search Categories
                              </a>
                        </li>
                    </ul>
                </div>
            </span>
        </form>
    </div>
</nav>

This last bit of code you see above sets up a form in the menu bar for search, pulls it all the way to the right, and adds a drop down selection button, using the dropdown-menu on a ul tag. All declaratively. Annotating an a tag with class="search-btn" even gives a nice rounded button which distinguishes search buttons from other types of buttons on the page.

As I said in the intro, I’m quite smitten with Bootstrap, and I could probably go on and on about what it does, but if this example looks interesting to you, check out their documentation on what components it offers, it’s quite good. Their whole website is a nice example of use as well, and view source is very instructive.

Next up, we’ll deal with some of the harder parts of creating your own Thin Server app – specifically, view management.

Advertisements

Written by jamesgdriscoll

January 25, 2014 at 12:05 PM

Posted in Bootstrap, HTML5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: