Building web GUIs for your Rasp Pi project with the Bootstrap toolkit

Forms

So far I've looked at the output formatting classes that allow you to design nice-looking data output with minimal effort. However, Bootstrap has just as many features to stylize form input if you want to provide input to your Rasp Pi project.

Bootstrap supports all HTML5 character-based input types, as well as textarea, checkbox, radio (radio buttons), and selects are also supported. Listing 7 creates the example form shown in Figure 11. After your JavaScript or Ajax has validated form input, a Bootstrap class can be applied to give quick user feedback (Listing 8). These emphasis classes allow input fields to be green, yellow, or red (Figure 12).

Listing 7

Forms

01 <form role="form">
02   <div class="form-group">
03     <label for="exampleInputEmail1">Email address</label>
04     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
05   </div>
06   <div class="form-group">
07     <label for="exampleInputPassword1">Password</label>
08     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
09   </div>
10   <div class="form-group">
11     <label for="exampleInputFile">File input</label>
12     <input type="file" id="exampleInputFile">
13     <p class="help-block">Example block-level help text here.</p>
14   </div>
15   <div class="checkbox">
16     <label>
17       <input type="checkbox"> Check me out
18     </label>
19   </div>
20   <button type="submit" class="btn btn-default">Submit</button>
21 </form>

Listing 8

Form Highlighting

01 <div class="form-group has-success">
02   <label class="control-label" for="inputSuccess">Input with success</label>
03   <input type="text" class="form-control" id="inputSuccess">
04 </div>
05 <div class="form-group has-warning">
06   <label class="control-label" for="inputWarning">Input with warning</label>
07   <input type="text" class="form-control" id="inputWarning">
08 </div>
09 <div class="form-group has-error">
10   <label class="control-label" for="inputError">Input with error</label>
11   <input type="text" class="form-control" id="inputError">
12 </div>
Figure 11: Bootstrap form control styles [3].
Figure 12: Input color coded by Bootstrap [3].

Form control heights can be sized by adding the input-lg or input-sm class attributes, whereas form control widths are controlled by adding the input element to a parent grid element. A control will automatically expand to fill 100 percent of its parent, so the grid size effectively controls the size of the form element.

Conclusion

With many other classes, options, and features available for you to use, Bootstrap can give your projects a polished look, without having to focus on major GUI development.

Infos

  1. Bootstrap website: http://www.getbootstrap.com
  2. Bootstrap download: http://getbootstrap.com/getting-started
  3. Examples as noted are provided by the Bootstrap documentation. No endorsement or ownership is implied by its use. Bootstrap documentation is released under the Creative Commons CC By 3.0 license: http://creativecommons.org/licenses/by/3.0/

Der Autor

Scott Sumner is Producer/Educator at the Mayborn Science Theatre on the campus of Central Texas College in Killeen, Texas. When not flying through the universe or writing the next great tale of the galaxy, he enjoys dabbling with Linux computers and Lionel trains. Scott thanks his employees Matt and Matt for introducing him to Bootstrap and being willing to explore it with him.

Buy this article as PDF

Express-Checkout as PDF

Pages: 6

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content