References:  http://bootstrapdocs.com/

Determine version:
    Check included file contents for < 3.3.7.
    jQuery.fn.tooltip.Constructore.VERSION  OR  $.fn.tooltip.Constructor.VERSION   for v.3.3.7 - 4
    sbootstrap.Tooltip.VERSION  for version 5

Version 5 as no jQuery dependency.

Doesn't require jQuery unless using certain components.
They say to put the <script src...> elements right before </body>.
Normally I think jQuery should be loaded in <head/> at least according to
w3schools.com

Tutorials are all for Bootstrap JS v.3 because v.4 has only just been released
in alpha.

Generally, classes are non-inclusive.
Must aggregate class values like "table table-condensed",
  "well well-lg", "alert alert-danger".

W3.CSS is a smaller, faster, easier alternative to Bootstrap JS.

The viewport meta element enables proper rendering and touch zooming.

Load Bootstrap JS into page via local hosting or CDN.

SOMETIMES? Require top-level container div.  One of {
Container seems to be optional and just says whether to 100%-width the contents.
They give examples of fixed (class="container") page except that the jumbotron
is completely outside the container to be 100% width.
Looks like expected to mix freely.  Say you want bg color to paint entire page,
then root level fluid, with independent fixed-width container sections.
    <div class="container">  Fixed-width container (should set body width?;
                                                    what is the default?)
    <div class="container-fluid">  FULL-width container.
      Edges stick to browser edges.
    However, there are some examples where another element like
<div class="jumbotron"> or <nav class="navbar"> is at top level and has
the container div inside it.??
In other examples the top level has multiple (peer) container divs.
Footer may also be at root-level with the container class directly.

Grids: <div class="row[-fluid]"><div class="col...
  OR
     <form class="form-horizontal"><div class="form-group"><label class="col...
-fluid:  TODO: Check the bootstrap docs.  Seems to just screw it up.
Long cell contents:
    text wraps
    Images bleed outside of cell to the right
Docs say that top-level grid cols must total 12 to work right.
  I find that in practice if you specify < 12, the grid will be filled out to
  12 correctly.
Always work in 1/12 table-width column-spans.
COLSPAN number indicates size >= that can be a column (as opposed to splitting onto its own line).
Classes:
    row
    col-*-*
    col-*-offset-*  (means skip-before)
(Can move columns with .col-*-push|pull-*, but pretty useless).
Class-types:  E.g. col-xs-<COLSPAN>, col-xs-offset-<COLSPAN>
    xs (for phones) < 768px
    sm (for tablets) > 768px, < 992px
    md (for desktops)  (seems to not make columns at all?) > 992px, < 1200px
    lg (for larger desktops) > 1200px
All columns regardless of size get 15 px padding on each side (gutter).
Can nest.  The nested rows can have < 12 cols.

Default Settings and Stylings
font-size: 14px
line-height: 1.428
p.margin-bottom: 1/2 * line-height (10px)
hX font sizes:  12px for h6 to 36px for h1
<small>
    <h1>Primary Text<small>secondary/sub-header</small></h1>
        small is for lighter, smaller text in a header
<mark> for subtle text highlighting
<abbr> supposed to underline but has no effect for me
<footer> lighter and smaller, may be used inside blockquotes.
<blockquote> is not like <pre> and requires internal elements.
  Has a vertical bar to the left.
<blockquote-reverse> is same but right-justified and with bar to the right
<dl> has custom formatting
<code> rendered RED, for inline code snippets
<kdb> strongly styled keystroke instructions
<pre> nicely formatted

Provided utility classes
  ul|ol.unstyled removes all bullet and enumeration from direct child li's.
  ul|ol.list-inline
  pre.pre-scrollable
  *.small
  text.text-left|center|right
  text.text-justify  No idea what this does.
  text.text-nowrap
  text.upper|lowercase

Contextual classes for "text" color and "bg" color table cell bg, where <type>
is one of: text-, bg-, "" (for <td> or <tr>), btn-, label-, list-group-item-,
panel-.
    .text-muted, .<TYPE>-primary (no tr/td/alert/list-group),
    .<TYPE>-success, .<TYPE>-info, .<TYPE>-warning, .<TYPE>-danger
    (.has supports only .has-success, .has-warning, .has-error)
15 styling convenience/utility classes like ".text-left"
  http://www.w3schools.com/bootstrap/bootstrap_typography.asp

Tables.  Talking explicit tables here, not Grids.
Panels wrap these very well.
Table classes are not cumulative.
  Explicitly specify all you want (notably "table").
.table  Only horizontal row lines (horizontal borders)
.table-bordered  Has cell and table borders
.table-striped
.table-hover  Hover-highlights rows
.table-condensed  Halves cell padding
.table-responsive  Horizontal scrolling if device < 768px [xs size]
                           (device?  What is size a desktop browser?)
  (If using fieldsets, need a Mozilla work-around. See http://getbootstrap.com/css/)

Images
.img-rounded, .img-circle (pretty useless), .img-thumbnail(adds slight frame)
* thumbnails to be superceded by cards with Bootstrap JS v4.
.img-responsive (to parent el) applies: display:block; max-width:100%; height:auto;
   May need to add style="display:inline" to allow it to be centered ("text-center').
   Add style="width:100%" within a grid to have stretch when it starts to stack.
.thumbnail to some parent element to center and frame inside a Grid

Responsive Videos, Slide shows
.embed-responsive-item for the target element
.embed-responsive-16by9, .embed-responsive-4by3 to its container

Jumbotron is an attention-grabbing div
Put inside a <div class="container"> for nice margins

div|header.page-header adds margin and underline

Well.  A gray padded, rounded panel.  Seems to be an extreme subset of Panel.
No contextual variants.
* wells to be superceded by cards with Bootstrap JS v4.
div.well
Can add well-sm, well-lg
Text often added without <p>s.

Alert Wells
Like wells but with contextual variants and close ability.
div.alert + alert-success, etc. + optional fade + in for fading effect.
(latest docs say use class "dismissible" but I don't see that that helps anything).
class="close" + data-dismiss="alert" to any link or button will close it.
Standard close code INSIDE the div!:
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  (The "aria-label" is for screen-readers)
Text often added without <p>s.
Internally have class alert-link to decorate a's.

Buttons
Button groups are pretty cool.  The individual buttons join up nicely.
button.btn, a.btn, input.btn +
  "btn-default" or "btn-link" or "btn-primary", etc.
  Default NO-context (not context "default"):
      <a> defaults to link context color <button> default to black on gray.
  Display when any context specified (incl. "default") indistinguishable <a> vs. <button>
Can add btn-lg, btn-md, btn-sm, btn-xs.  (Can set size on button group instead)
  (I don't see purpose for btn-md, since that is default and can't override)
Stretching block buttons:  btn-block
active and disabled classes to emulate rendering of states for some reason.
  (definitely does not alter real behavior!)
div.btn-group for a ADJOINING horizontal line of buttons
div.btn-group-vertical for a ADJOINING vertical line of buttons (inclusive!)
Can add btn-group-lg, etc. (but apparently not context color setting)
div.btn-group + btn-group-justified stretches like btn-block for a group.
  (For some reason, a's work as desired but every button in vert group must
  be wrapped in its own div.btn-group).

Dropdown Menu created by ul within a div.btn-group or div.dropdown/up.
The triggering button is wrapped in a div.btn-group for just it* and its menu branch.
  <div class="btn-group"> OR  <div class="dropdown"> or <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Tablet</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Header here</li>
      <li class="disabled"><a href="#">Smartphone</a></li>
    </ul>
  </div>
Split button is a button group 
* For a split button there is just one button group containing both regular button + carat button + ul.
Can add role and aria attributes to support screen readers.

Glyphicons.  260 from Glyphicons Halflings set.
<span class="glyphicon glyphicon-<NAME>"></span>
(Often need a space character immediately before or after the span to give a margin between preceding/following text).
Full list:  http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
With old versions, used to be: <i class="icon-plus"></i>.
They automatically size in attempt to match container.

Badges and labels (bg-colored text)
<span class="badge">TEXT</span>  Single small size, very rounded
<span class="label">TEXT</span> + REQUIRED label-default or label-primary, etc.
(Often need a space character immediately before or after the span to give a margin between preceding/following text).
Badges inside list group items (directly) will be right-justified.
Labels BUT NOT badges, support context coloring with "label-info", etc.

Progress Bars not supported in Explorer <= 9.
Optional context:  progress-bar-X
    <div class="progress" style="width:50%">
      <div class="progress-bar [progress-bar-success]" style="width:70%">
        Optional text
      </div>
      <div class="progress-bar [progress-bar-error] progress-bar-striped active" style="width:70%">
        Other text
      </div>
    </div>
"active" only has an effect if progress-bar-striped also present.

Pagination and breadcrumbs (only for display. Must wire with JS to really page)
pagination shows integers in squares; breadcrumbs are like: Word / Word
u.pagination, u.breadcrumb
Can add pagination-lg, pagination-sm
<li [class="active|disabled"><a...
Disabled apparently is just for presentation, does not affect action.

Pager linear nav buttons (like prev/next), centered by default.  (display-only)
ul.pager
<li [class="previous|next"]><a...  Attrs to left or right justify a item.

Lists with .list-group* look like single-column tables.
ul.list-group + li.list-group-item
Badges inside the list items (directly) will be right-justified.
Can add "list-group-item-success", etc.
Lists without are pretty plain but look just as you would expect.
Only get underscore upon hover.

List with hyperlinks  (Menu of a's within div)
div.list-group
<a class="list-group-item[ active|disabled]"...>
Link labels will not get underscore decoration that you would get with ul list group containing a elements.
  (To get hover underscore, replace div with ul and wrap a's in li's).
ALL div content must be within a tags.
Badges inside the list items (directly) will be right-justified.
Disabled apparently is just for presentation, does not affect action.
The a may contain nearly anything.
Can add "list-group-item-success", etc.

Panel
Text often added without <p>s.
Do not have close ability.
Particularly good wrapping tables.
* panels to be superceded by cards with Bootstrap JS v4.
div.panel + REQUIRED panel-default, panel-primary, etc.
[div.panel-heading] [hX.panel-title]  (w3school neglects panel-title but it's important!)
div.panel-body
[div.panel-footer]
div.panel-group parent just reduces bottom-margins of children panels.

Collapsibles.
See docs on how to collapse (with an a or button) a div, panel, and panels within group, list group with "collapse" class.
<button data-toggle="collapse" data-target="#collapsee">
OR
<a data-toggle="collapse" data-target="#collapsee">
OR
<a data-toggle="collapse" href="#collapsee">
Add "in" class to target to show by default.
+ the collapsee needs to be marked with class="collapse"

Horizontal menu
ul.list-inline
<li><a ...

Tabs and Pills  (pills are tabs without the connectors.
<ul class="nav nav-tabs [nav-justified]"> OR <ul class="nav nav-pills [nav-justified]">
(add "nav-stacked" for vertical; nav-justified for centering)
  <li [class="active"]><a href="#targ" [data-toggle="tab|pill"] ...
...
<div class="tab-content">
  <div id="targ" class="tab-pane [fade] [in active]">
    ...

Nav Bar (hor nav menu at top of page)  (nav element)
The <nav> must be at root level before the rest of the page.  It nests ITS OWN div container.
??Put the container div INSIDE the div.??
  If you put outside of a fixed nav bar, it will have no effect.
  FOR SOME REASON Fixed container still has bg span 100% though text is padded.
BEFORE the main container div!:
    <nav class="navbar navbar-default [navbar-fixed-top|bottom]">
    OR <nav class="navbar navbar-inverse [navbar-fixed-top|bottom]">
      <div class="container-fluid">   OR "container"!  I think fluid for fixed-top.
        <div class="navbar-header"> <!--header remains in place when collapse-->
          <a class="navbar-brand"...  <!-- just the home title -->
        </div>
      <ul class="nav navbar-nav">  <!-- Leftish items -->
        <li [class="active">]<a ...
        ...
      </ul>
      <ul class="nav navbar-nav navbar-right">  <!-- Rightish items -->
        <li [class="active">]<a ...
        ...
<li> could also be a drop-down like so:
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="x">text
      <span class="caret"><span></a>
      <ul>...
See docs for making it collapsible and adding a button to it to reveal.
Cool Javascript to prevent fixed menu from overlaying body content:
    function adjust_body_offset() {
        $("body").css("padding-top", $("nav.navbar").outerHeight(true) + "px");
    }
    $(window).resize(adjust_body_offset);
    $(document).ready(adjust_body_offset);
      OR!!!  One-or-the-other.
    $(function() {
        adjust_body_offset();
    });

Forms
For non-trivial layouts (more than one input, but not all, per line), your choices are:
    V Grid:  labels above (or below) input fields
    H Grid:  labels before (or after) input fields
MEMORIZE:  input.form-control; div|fieldset.form-group; label.control-label for hors.
Don't know if true, but docs say to always specify input 'type', so don't
 reply on default of "text".
TODO:  Test to see if disabled, readonly are only for visibility.
<form role="form"> helps screen readers.
input.form-control, textarea.form-control, select.form-control have width:100%;
button (submit).form-control also in one example.  Mistake!  For "text" inputs!
Wrap ALL labels and form controls in <div|fieldset* class="form-group">
    (Inside fieldset if any. I.e. fieldset above form-group)
    Group label + input for a single field,
    where input has "form-control" (except for checkbox/radio/button)
    (can also have internal interposed layout div "col-*-*" here too;
     can also have glyphicons spans right beside the input).
With newer versions to use glyphicons you need to add legacy  bootstrap css:
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  Add that AFTER the bootstrap css include, because they do conflict.
Label and checkbox|radio need to be inside a checkbox|radio group too.
     Group class is checkbox|radio, not form-group
     (Only this div for non-horizontals.  No example for horizontals!)
Form Layout
    Vertical by default, with all fields 100% width
    .form-inline <form class="form-inline"> requires 768px width.
    .form-horizontal
        Add .control-label to all <label> elements  EVEN FOR HOR INSTEAD OF X-inline?????
        They suggest using a Grid.  Use <div class="form-group"> in place of <row> (and <div class="col..." and <label class="col..." within each div.form-group).
        *At least with version 3.3.5, if you specify no col's then
         form-horizontal is completely vertical.
        Size inputs and labels by add "form-group-sm", "form-group-lg" to "form-group".
GRIDDED Forms.  div.form-group = row
    V forms grid lable+input pairs
      Col div wraps each label+input.  (Labels and inputs do not specify col spans)
    H forms grid individual labels and input
      Inputs have dedicated col div wrappers; labels specify colspans directly.
To add text IN PLACE OF AN INPUT with a label, must use <p class="form-control-static">
fieldset.disabled also works BUT NOT WITH IE!
Size inputs and with input.input-sm, input.input-lg (does not effect labels).
span.help-text adds vertically-separated dimmed help text for a item.
    The helped input references with: aria-describedby="idOfHelpSpan"
div.input-group-addons:
    Add immediately before and/or after text input inside of div.input-group a
    div.input-group-addon to add a prefixed  or suffixed bg-colored stuff.
fieldset legends always have a line break after them, even with inline form.
  (Also have line break before as long as are above form-groups).
  legends definitely can have col-* specifiers
* Be aware that unlike div.form-group, fieldset.form-group in inline forms
 are not block, and adding display:block does not fix this.

Checkboxes And Radio inputs
  Vertical:  Put each checkbox + label into a <div class="checkbox|radio">
      Seems impossible to get checkboxes or radios to display AFTER label text.
  Horizontal:  label.checkbox|radio-inline for each button
    (just write one label after the other)
    For horizontal MAKE SURE TO USE "<label for=...", not label nesting!
    MAKE SURE do not put inside of checkbox/radio class div!

label.sr-only  For hidden labels because screen readers require a label for every input.

Simple manual validation styling:
Apply .has-success|has-warning|has-error classes to an ancestor element.

EXTREMELY USELESS SINCE STATES HAVE NO AUTOMATION
Form Feedback icons for form-control inputs.  Seems entirely useless without JS.
Add "has-feedback" + .has-success|has-warning|has-error to an ancestor element (in examples div.form-group).
Add class "form-control-feedback" to the glyphicon span (beside the form-control input).
It works to do all of this statically and then have JS:
    $("#kasFeedbackId").toggleClass("has-X");
Feedback icon does not display nicely along with a SUFFIXED input-group-addon.

Carousel.  See example in my grimrock webapp.  Requires bootstrap JS file.
Doesn't work with IE <= 9.
In addition to docs:
Style images with "margin:auto" for them to center themselves.
Wrap entire div.item contents with an <a> to have slides link.  I.e.:
    <div class="item"><a href=...

Modal.  Requires bootstrap JS file.
Try to place them at top level.
Only one-at-a-time supported without custom coding.  (I don't think this is true).
Mobile device limitations.
    Autofocus for mobiles requires JS boilerplate.
Add to <button> or <a>:  data-toggle="modal" data-target="#modalDivId">
<div id="modalDivId" class="modal [fade]">
  <div class="modal-dialog [modal-sm|modal-lg]">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">The title</h4>
      </div>
      <div class="modal-body><p>some text</p></div>
      <div class="modal-footer"/>  <!-- right-aligned by default -->
Close buttons like
    Image:  <button type="button" class="close" data-dismiss="modal">&times;</button>
    (Put this inside the modal-header AT TOP).
    Text:  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
The p tag seems to have no effect.
Invoke programmatically like:  $("#goodUpdateDiv").modal("show")
Do not have direct context styling (like have with panels and alerts).  Style the generic components manually.

Tooltips.  Requires bootstrap JS file and boilerplate code:
  $(function() {
      $('[data-toggle="tooltip"]').tooltip(); // Init all Bootstrap JS Tooltips
  });
(by virtue of being an opt-in data api).
After that, just add attr data-toggle="tooltip" to all elements with 'title' attr.
+ optional: data-placement="top|bottom|left|right|auto"
Alignment still VERY poor for v3.  Works awfully!

Popovers.  Requires bootstrap JS file and boilerplate code:
  $(function() {
      $('[data-toggle="popover"]').popover(); 
  });
(by virtue of being an opt-in data api).
Like tooltips with title + content.
After that, just add attrs: data-toggle="popover" data-trigger="hover" data-content="..." in addition to 'title' attr.
+ optional: data-placement="top|bottom|left|right|auto"
  (defaults to "right"; can mix "auto" with another)
Change from tooltip/hover behavior by changing data-trigger attr value:
    click (default):  LMB right on triggering el to show and hide
    manual:  render ONLY programmatcally
    hover:  tooltip
    focus:  Supposed to work just like "click" except invert the hide LMB range,
      but RMB invocation works also (conflicting with browser RMB) and there
      are other element and attribute requirements for this to work, and STILL
      doesn't work with IE11.
Manual rendering:  $("#id").popover("show"); $("#id").popover("hide")
Special work-around needed to use within button or input groups.

Scrollspy.  See docs.  Updates menu to indicate current (scroll?) location.
For in-page TOC menus.  Apply some attrs to body tag, nav, target elements.

Affix Plugin.  Glues a panel (probably any block element) when vertically scrolling.
Unlike "navbar-fixed-top" and similar, it purposefully scrolls within limits.
I guess JS plugin.
Seems to do nothing to protect from overwriting.
Horizontal element:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Vertical element:
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Probably need the contents to have an explicit bg and have 100% width so that
when scroll it will overwrite.
But some other elements, such as buttons, still overwrite this!