Bootstrap
 |
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. |
|---|---|
| wikipedia:: Bootstrap (front-end framework) | |
| url:: Bootstrap · The most popular HTML, CSS, and JS library in the world. |
- https://startbootstrap.com/
- Starter Template with CDN version of Bootstrap
- Hello, world! ¶
<!-- Optional JavaScript -->{=html}<!-- jQuery first, then Popper.js, then Bootstrap JS -->{=html} ¶<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>{=html} ¶<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>{=html} ¶<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>{=html}
- Hello, world! ¶
- CDN Version
- CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">{=html}
- Javascript
- Put at bottom of page, right before closing ¶ tag
- Order Matters
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>{=html}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>{=html}<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>{=html}
- CSS
- Download
- https://getbootstrap.com/docs/4.1/getting-started/download/
- Package Managers
- npm install bootstrap
- Javascript
- Themes, Theming, & SASS
- Icons
- Examples
- https://getbootstrap.com/docs/4.1/examples/
- In Production Examples
- Layout
- https://getbootstrap.com/docs/4.1/layout/overview/
- Grid
- Media Object
- Utilities for Layout
- Containers
- Bootstrap requires a containing element to wrap elements and contain its grid system (more on the grid system next). Bootstrap’s container classes were created specifically for this purpose. Bootstrap containers can be either fixed or fluid.
- .container
- .container-fluid
- Content
- Reboot
- https://getbootstrap.com/docs/4.1/content/reboot/
- Cross-browser Rendering
- Typography
- Code
- Images
- Tables
- https://getbootstrap.com/docs/4.1/content/tables/
- .form-group
- .form-control
- Figures
- Reboot
- Components
- https://getbootstrap.com/docs/4.1/components/alerts/
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button Group
- Card
- Carousel
- Collapse
- Dropdowns
- Forms
- https://getbootstrap.com/docs/4.1/components/forms/
- form-group on ¶
- form-control on
<input>{=html} - Form Example (LaunchCode Cheese MVC)
<label th:for="username">{=html}Username</label>{=html}<input class="form-control" th:field="*{username}">{=html}</input>{=html}
- Input Group
- Jumbotron
- List Group
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Progress
- Scrollspy
- Tooltips
- Utilities
- Utility classes?
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in
combatting CSS bloat and poor page performance. A utility class is
typically a single, immutable property-value pairing expressed as a
class (e.g., .d-block represents display: block;). Their primary appeal
is speed of use while writing HTML and limiting the amount of custom CSS
you have to write.
Specifically regarding custom CSS, utilities can help combat increasing
file size by reducing your most commonly repeated property-value pairs
into single classes. This can have a dramatic effect at scale in your
projects.
- Borders
- https://getbootstrap.com/docs/4.1/utilities/borders/
- Clearfix
- https://getbootstrap.com/docs/4.1/utilities/clearfix/
- Close icon
- https://getbootstrap.com/docs/4.1/utilities/close-icon/
- Colors
- https://getbootstrap.com/docs/4.1/utilities/colors/
- Display
- https://getbootstrap.com/docs/4.1/utilities/display/
- Embed
- https://getbootstrap.com/docs/4.1/utilities/embed/
- Flex
- https://getbootstrap.com/docs/4.1/utilities/flex/
- Float
- https://getbootstrap.com/docs/4.1/utilities/float/
- Image replacement
- https://getbootstrap.com/docs/4.1/utilities/image-replacement/
- Position
- https://getbootstrap.com/docs/4.1/utilities/position/
- Screenreaders
- https://getbootstrap.com/docs/4.1/utilities/screenreaders/
- Shadows
- https://getbootstrap.com/docs/4.1/utilities/shadows/
- Sizing
- https://getbootstrap.com/docs/4.1/utilities/sizing/
- Spacing
- https://getbootstrap.com/docs/4.1/utilities/spacing/
- Text
- https://getbootstrap.com/docs/4.1/utilities/text/
- Vertical align
- https://getbootstrap.com/docs/4.1/utilities/vertical-align/
- Visibility
- https://getbootstrap.com/docs/4.1/utilities/visibility/ - Approach
- Responsive
- Classes
- Components should be built with a base class and extended via modifier classes
- Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., input[type=”text”]) and extraneous parent classes (e.g., .parent .child) that make styles too specific to easily override. As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, .btn and .btn-primary. We use .btn for all the common styles like display, padding, and border-width. We then use modifiers like .btn-primary to add the color, background-color, border-color, etc. Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
- Z-Index
- Component states should obey a common z-index scale
- These components share a standard z-index scale of 0 through 3.
- 0 is default (initial), 1 is :hover, 2 is :active/.active, and , 3 is :focus.
- This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.
- HTML/CSS Over Javascript
- Utilities Over Custom Styles
Frameworks
Bootstrap
Interactive graph
On this page
Bootstrap
Frameworks