Copy and paste HTML cheats and sheets for Bootstrap, JQuery, HTML5

Main menu

Category Archives: bootstrap

The only thing better than a Bootstrap-styled user interface is a wizard written using Bootstrap.js, and Vincent Gabriel’s oh-so-capable Twitter Bootstrap Wizard Plugin lets create one quickly and easily. What I wanted was a step-by-step wizard with a lot of features:

Customizable Previous and Next buttons

A Customizable Finish button

Support for an arbitrary number of steps

A progress bar

Here’s what the sequence should look like visually:

Twitter Bootstrap Wizard Example Step 1.

Note how in Step 1 the First and Previous buttons are disabled, as they should be. You can use class and style attributes to modify default behavior.

Twitter Bootstrap Wizard Example Step 2.

In Step 2 the First and Previous buttons have automatically become active.

Twitter Bootstrap Wizard Example Step 3.

In Step 3 the Finish button has automatically been replaced with a Done button. The default behavior for the Done button is to appear as disabled, but that behavior is easily modified using a bit of jQuery.

I think Bootstrap has changed in such a way that Vince’s code no longer works as written with the current version. At least I couldn’t get it to work, but I’m pretty sure that’s more a reflection on me than Vince. Not being a Bootstrap expert I had to go back to first principles and understand their tab markup, then add Vince’s good work on top of that.

By the way, I try to include running code here through the use of CDNs, but the Twitter Bootstrap Wizard Plugin isn’t available on cdnjs, even though it appears to be.

Inside it nest a div of class “progress-bar”. It requires an ID, in this case, I used progressBar. jQuery will be used to update the div dynamically as the user clicks Previous and Next buttons and it needs the ID to know which div to work on.

The “progress-bar-striped” attribute is optional. It looks more dynamic and gives the user a feeling of real progress while filling out a form.

XHTML

54

55

56

57

58

59

60

<div class="progress">

<div id="progressBar"class="progress-bar progress-bar-striped" >

<div class="bar">

<span></span>

</div>

</div>

</div>

I put the progress bar just below the tabs but it can go anywhere. For example, it looks just as good if you switch steps 2 and 3.

The tab panes are where content goes. You can only see one at a time, even though they’re all in a single piece of markup.

Create a div of class “tab-content” to enclose all tab pane divs. It doesn’t need an ID.

The tab panes are separate divs of class “tab-pane” nested inside the class “tab-content” div. Each tab pane has a separate ID, which must match the named anchors in the li declarations in Step 1.

The first tab tab pane has “active” in its class attribute. That selects the tab on page load.

XHTML

63

64

65

66

67

68

69

70

71

72

73

74

75

<div class="tab-content">

<div class="tab-pane active"id="step1">

<h1>Step 1: Beginning</h1>

<p>You're making some progress</p>

</div>

<div class="tab-pane"id="step2">

<h1>Step 2: Middle</h1>

<p>You're part way through</p>

</div>

<div class="tab-pane"id="step3">

<h1>Step 3: End</h1>

<p>You're Done!</p>

</div>

4. Previous/Next Buttons: Unordered list of class “page wizard”

The First, Next, Previous, and Done buttons make clever use of the unordered list markup.

The ul must include the attribute class="pager wizard"

They do not need to be named First, Next, Previous, and Done because their function and position are both determined by a class attribute:

XHTML

79

80

81

82

83

84

85

<ul class="pager wizard">

<!-- These show as disabled on first tab. Add style="display:none;" to make the First button disappear when first tab. -->

<li class="first previous"><a href="#"accesskey="f">First</a></li>

<li class="previous"><a href="#"accesskey="p">Previous</a></li>

<li class="last"style="display:none;" ><a href="#">Done</a></li>

<li class="next"><a href="#"accesskey="n">Next</a></li>

</ul>

Each li tag contains an a link as the target.

As a bonus I’ve included access key attributes on the a links, which have nothing to do with the wizard. I just like keyboard shortcuts. Access keys let you use a letter key in conjunction with a system-defined key or key set to activate a control. For example, the Next button uses a href="#" accesskey="n". On a PC you’d press Alt+N key as the equivalent of the Next button, and on a Mac it would be Control+Option+N

5. Load the jquery.bootstrap.wizard.min.js in a script tag

The jquery.bootstrap.wizard.min.js file should be included as far down in the body as as possible, because sometimes Javascript files can page rendering.

XHTML

110

<script src="js/jquery.bootstrap.wizard.min.js"></script>

6. Add Javascript code in a script tag

The magic in Vince’s progress bar code is in using jQuery to redraw the Bootstrap-provided progress bar div according to which tab is selected:

XHTML

128

129

130

131

132

// Dynamically change percentage completion on progress bar

vartabCount=navigation.find('li').length;

varcurrent=index+1;

varpercentDone=(current/tabCount)*100;

$('#rootwizard').find('#progressBar').css({width:percentDone+'%'});

I added a few lines of optional code. For example, this section makes sure the Done button appears only when at the last tab, and that it’s active:

XHTML

134

135

136

// Optional: Show Done button when on last tab;

// It is invisible by default.

$('#rootwizard').find('.last').toggle(current>=tabCount);

In Vince’s code, the Next button appears on the last tab, although it’s disabled. In my version, it’s removed on the last tab only:

Share this:

This minimal HTML5 app template shows Bootstrap and JQuery working together. It’s big enough to show off features of both Bootstrap and JQuery but small enough to hollow out and use for your own purposes.

A lot of the Bootstrap examples I’ve seen are far more complicated than they need to be. Copy and paste this code to knock together an attractive, feature-packed website as prototypes or as a starting point for production apps.

It has a little behavior built in:

A preformatted area called a “well” in bootstrap terminology is hidden using a standard CSS

display: none;attribute until you click the Show button.

XHTML

1

<div id="showMe"class="well"style="display: none;">Now hide me!</div>

At the same time the well is displayed (using JQuery’s toggle() feature, the button’s text gets changed to Hide:

Share this:

Learn how to use Bootstrap from a single file-no CSS or Javascript directory needed because they are loaded from a public website (called a CDN)

This quick tutorial shows how to use Bootstrap from a CDN, or content delivery network. You know how normally you create a CSS directory for stylesheets and a JSS (or whatever you call it) for Javascript assets? You can pull these files off someone else’s server instead (the CD).

I like this for quick prototyping tests on code that uses resources such as Jquery and Bootstrap because I can do a test in one file.

In production, it may be better to host Bootstrap and Jquery yourself. You have more control over them and the performance may be better, but that all depends on the CDN.

How to use Bootstrap with a CDN

It’s easy to use Bootstrap with a CDN.

1. Instead of using a local file reference, just include an href to the stylesheet somewhere between the <head> and </head> tags:

XHTML

1

2

<!-- Obtain Bootstrap style sheet from CDN (online service) so it doesn't have to be on my machine -->

Here’s everything you need to put up a Bootstrap site, all in a single file. Simply copy and paste into a file called index.html or whatever you wish to name it. It will work fine on your own machine or on a server, unchanged. And you don’t have to remember to create Bootstrap or JQuery directories.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<!DOCTYPE html>

<html>

<head>

<title></title>

<!-- Obtain Bootstrap style sheet from CDN (online service) so it doesn't have to be on my machine -->