Listing 18.1: A Button That Changes State

Listing 18.2: The Script to Change Button State


  $('#myButton').on('click', function () {
    var $btn = $(this);
    $btn.button('loading');
  })

Listing 18.3: A Standard Toggle Button

Listing 18.4: A Pre-Toggled Button

Listing 18.5: Checkboxes as Buttons

Listing 18.6: Radio Input Types as Buttons

Listing 18.7: Four Different Alerts

Listing 18.8: Dismissible Alert

Listing 18.9: A Basic Progress Bar

20% Read

Listing 18.10: Progress Bar with No Visible Label

20% Read

Listing 18.11: A Stacked Progress Bar

54% love dandelions
13% love roses
30% love orchids

Listing 18.12: CSS to Modify Buttons

.btn-info { 
  background-color: #025301; 
  border-color: #999; 
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
  background-color: #80D464;
  border-color: #999;
  color: #000;
}

Listing 18.13: Change the Width of a Progress Bar


$(document).ready(function() {
  $("#myBar").click(function() {
    $(this).css('width','25%');
    $(this).text('25%');
  });
});