Comments on W3Schools Bootstrap 3 Tutorial
This document is being created with Dreamweaver CS6. When this document is linked to the CDN for bootstrap.min.cs, the minified version of jQuery and the boostrap.css file, a slight delay results when one is entering text in Design view. The delay is reduced if one comments out the two JavaScript files, but some delay still results. If one switches to a local version of Bootstrap, the delay seems about the same, or perhaps a little worse.
The W3C Bootstrap 3 tutorial is very helpful. I've put some comments below on some of the sections of the tutorial. Changes made in Bootstrap 4 are described at https://getbootstrap.com/docs/4.0/migration/, some of which are noted below
- Text/typography
- Tables - Bootstrap tables have a width of 100%, some padding, and only horizontal dividers.
- Images - In the "Try it" for the Responsive Images, there is an image which is given the height and width attributes in pixels but because it is given the img-responsive class, it becomes responsive if the size of the container is less than the size specified in pixels. Bootstrap 4 changes:
- img-rounded class been renamed to .rounded
- img-circle class has been renamed to .rounded-circle
- Jumbotron - A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
- Wells (dropped in Bootstrap 4 in favor of cards) - The .well class adds a rounded border around an element with a gray background color and some padding.
- Alerts - Unlike JavaScript alerts which are take the focus away from the current window, Bootstrap alerts display in the current window with a box with slightly rounded corners and one of four colors, depending on which class is applied.
- Buttons - The button classes can be used on an <a>, <button>, or <input> element. The background color of the button depends on which button class is applied. Other classes will determine the size of the button, whether it is a block level element spanning the size of the container, whether it is active (can be clicked), or is disabled. Renamed .btn-default to .btn-secondary in Bootstrap 4.
- Button Groups - These can be horizontal or vertical and do not have spaces between the buttons. Justified button groups span the entire width of the screen, Button groups can be combined with dropdowns.
- Glyphicons - Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. They can be used by themselves, as a link, or on a button. Dropped in Bootstrap 4 - see migration document for alternatives
- Badges and Labels - Badges are numerical indicators of how many items are associated with a link, They can also be used inside buttons.
- Progress Bars - A progress bar can be used to show a user how far along he/she is in a process. One can show with or without a percent.
- Pagination - A number (typically) will appear inside each box and serve as a link to that page. One can show a page as active (with a different color) or disabled. One can also display breadcrumbs.
- Pager (Dropped in Bootstrap 4) - Provides Next and Previous button links.
- List Group - List groups display as boxes stacked vertically and occupying much of the width of the page. They can be display with badges, can be made into links, can have an item with a highlighted background color, can have disabled items, and can display with the success, info, warning, and danger colors used in Bootstrap alerts.
- Panels (dropped in Bootstrap 4 in favor of cards) - A panel in bootstrap is a bordered box with some padding around its content
- Dropdowns - A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list. The items in the list are generally links and thus are different than the dropdowns created by a select tag in a form.
- Collapse - Collapsibles are useful when you want to display or hide large amounts of content.
- Tabs and Pills - Pills look like buttons (at least to me) but will have one highlighted.
- Thumbnails - dropped in Bootstrap 4 in favor of cards
- Navigation Bar - A navigation bar is a navigation header that is placed at the top of the page:
- Forms - Bootstrap provides three types of form layouts:
Vertical form (this is default), Horizontal form (this is a two column layout), and Inline form
- Form Inputs -
- Form Inputs (cont.)
- Input Sizing in Forms
- Align Media Objects (e.g. Images and Videos) - Useful for putting text beside an image
- Carousel Plugin - Bootstrap plugins can be included individually (e.g. using Bootstrap's individual "carousel.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
- Modal Plugin -
- Tooltip Plugin - If you cursor over the words "Tooltip Plugin" to the left, you will see an example. In addition to the standard links to jQuery and the bootstrap.js file, one needs a little extra JavaScript to enable this (see the W3C article referenced in the link)
- Popover Plugin - Similar to tooltip but with more content. In addition to the standard links to jQuery and the bootstrap.js file, one needs a little extra JavaScript to enable this (see the W3C article referenced in the link)
- Scrollspy Plugin - A navigation bar has links to fragment identifiers with the page. As you scroll the page, the corresponding link in the navigation bar is highlighted.
- Affix Plugin -allows an element to become affixed (locked) to an area on the page as one scrolls. Dropped in Bootstrap 4 - see migration document
Bootstrap Grids
Revised: April 15, 2018