Building web GUIs for your Rasp Pi project with the Bootstrap toolkit
Bootstrap Grid
The Bootstrap grid is a positioning system that supports up to 12 fluid columns that adapt to displays of different sizes, from smartphones to 60-inch LCD monitors. Bootstrap defines four size categories:
- Extra-small – for displays <768 pixels wide.
- Small – for displays between 768 and 992 pixels wide.
- Medium – for displays between 992 and 1200 pixels wide.
- Large – for displays >=1200 pixels wide.
As you define your page layout, you can customize the grid for each size of display. I will work with a small screen. Each row is defined by a <div>
with the row
class attribute.
<div class='row'>
Inside this div
you can define columns of different sizes. If I assume for now that I am developing a page primarily for a tablet, I can define columns specifically for a small display:
<div class='row'> <div class='col-sm-6'>Column 1</div> <div class='col-sm-6'>Column 2</div> </div>
to create two equal-sized columns on the tablet (Figure 2). Medium and large screens will use this layout as well. If someone views the page on a smartphone, though, the two columns will stack vertically (Figure 3). If you want to preserve the layout even on tiny screens, you can add an extra-small class attribute as well.
<div class='row'> <div class='col-sm-6 col-xs-4'>Column 1</div> <div class='col-sm-6 col-xs-8'>Column 2</div> </div>
By adding col-xs-4
and col-xs-8
, extra small screens also display two columns (Figure 4); in this case, however, the left column will be slightly smaller, emphasizing the right column (perhaps to make text more legible on such a small screen). Because the iPad is a small display instead of extra-small, it uses the equally spaced columns as before.
Bootstrap's screen size selectors allow you to customize your page across multiple device types with minimal effort. This feature alone allows you to emphasize the most important elements first and then show supplemental information as larger displays allow. To offset columns, leave a blank space where a column would be and add an offset class, still referencing the screen size that you're defining (Listing 2). Doing so moves the column two slots to the right and creates a div
occupying three grid slots (Figure 5).
Listing 2
Offsetting Columns
<div class='row'> <div class='col-sm-6' style='border:1px black solid;'>Column 1</div> <div class='col-sm-6' style='border:1px black solid;'>Column 2</div> </div> <div class='row'> <div class='col-sm-3 col-sm-offset-2' style='border:1px black solid;'>Offset column</div> </div>
Depending on your page layout, it might make sense to exclude some content completely on smaller screens or to include it only on larger displays. Bootstrap provides the visible
and hidden
utility classes to include or exclude content specifically for each screen size. Although this approach only works for a block element and entire tables, it can still be quite useful. Line 1 of Listing 3 will show up only on extra small screens, whereas line 2 will show up only on the largest of displays.
Listing 3
Including and Excluding Content
01 <div class='visible-xs'>This screen is tiny, check everything before submitting!</div> 02 <div class='hidden-xs hidden-sm hidden-md'>Since I have some room, here's the alphabet in morse code ...</div>
Bootstrap Styles
Bootstrap defines a complementary style for every HTML element. Headings are defined in descending point sizes, body text and paragraphs are defined in 14-point font, and add-on classes are available to add emphasis as needed. For example, a paragraph with the lead
class has larger text (Figure 6):
<h1>Today's news</h1> <p class='lead'>This breaking news just in...</p> <p>Today in the news...</p>
The label
and badge
styles call attention to selected text and display a small amount of supplemental information.
Labels have rounded corners and can use color classes (Listing 4, lines 1-4; Figure 7), whereas badges are more oval in shape and have a grey background (Listing 4, lines 6-9; Figure 8). See Table 1 for the Bootstrap color naming convention.
Tabelle 1
Color Naming Convention
Element Colors |
|||||
---|---|---|---|---|---|
Color | Name | Text | Button | Label |
|
Grey |
Default |
text-default |
btn-default |
label-default |
|
Blue |
Primary |
text-primary |
btn-primary |
label-primary |
|
Green |
Success |
text-success |
btn-success |
label-success |
|
Cyan |
Info |
text-info |
btn-info |
label-info |
|
Orange |
Warning |
text-warning |
btn-warning |
label-warning |
|
Red |
Danger |
text-danger |
btn-danger |
label-danger |
|
None |
Link |
NA |
btn-link |
NA |
|
Emphasis Colors |
|||||
Color | Name | Table Row or Cell | Text Alerts | Progress Bars | Control Groups |
Blue |
active |
active |
alert-info |
progress-bar-info |
NA |
Green |
success |
success |
alert-success |
progress-bar-success |
has-success |
Yellow |
warning |
warning |
alert-warning |
progress-bar-warning |
has-warning |
Red |
danger |
danger |
alert-danger |
progress-bar-danger |
has-error |
NA, not applicable. |
Listing 4
Labels and Badges
01 <h3>Who has paid for new shirts</h3> 02 <div>ScottPAID</div> 03 <div>Joe CONTEST WINNER</div> 04 <div>Amy NOT PAID</div> 05 06 <h3>How many shirts did each person order</h3> 07 <div>Scott 2</div> 08 <div>Joe 1</div> 09 <div>Amy 2</div>
Bootstrap provides formatting for tables as well. Classes alternate background colors, add borders, create a mouseover effect, or highlight rows on the basis of status. To get the selected color, add the class attributes listed in Table 1 to your element. As an example, I'll combine all of the shirt information in Figures 7 and 8 into a table that also includes pickup status (Listing 5; Figure 9).
Listing 5
Colors in Tables
01 <table class='table table-striped table-hover table-bordered'> 02 <tr><th>Name</th><th>Shirts Ordered</th><th>Pay Status</th><th>Notes</th></tr> 03 <tr class='success'><td>Scott</td><td>2</td><td> PAID</td><td>Picked up on Monday</td></tr> 04 <tr class='warning'><td>Joe</td><td> 1</td><td> CONTEST WINNER</td><td>Very excited when he found out he won!</td></tr> 05 <tr class='danger'><td>Amy</td><td> 2</td><td> NOT PAID</td><td>Promises to pay tomorrow</td></tr> 06 </table>
Progress bars are a quick and easy way to give visual feedback of process completion. Bootstrap uses CSS animations to change the size of the bar as values are updated. Additionally, progress bar classes allow you to select a striped or an animated striped bar (Listing 6; Figure 10).
Listing 6
Progress Bar (courtesy of www.getbootstrap.com)
01 <div class="progress progress-striped active">
02 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
03 20% Complete
04 </div>
05 </div>
« Previous 1 2 3 Next »
Buy this article as PDF
Pages: 6
(incl. VAT)