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 select
s 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>
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
- Bootstrap website: http://www.getbootstrap.com
- Bootstrap download: http://getbootstrap.com/getting-started
- 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/
« Previous 1 2 3 Next »
Buy this article as PDF
Pages: 6
(incl. VAT)