Bootstrap
A responsive, component-driven CSS framework for building consistent interfaces without writing layout CSS from scratch.
18 节课
Bootstrap
开始课程Getting Started
The Grid System
- Containers, Rows, and ColumnsThe three building blocks of Bootstrap's 12-column grid system.
- Responsive BreakpointsHow Bootstrap's breakpoint infixes let one set of grid classes adapt across screen sizes.
- Grid Alignment and OrderingFlexbox utility classes for aligning, justifying, and reordering columns within the grid.
Typography & Utilities
- Typography UtilitiesClasses for controlling font weight, size, alignment, and text color without writing custom CSS.
- Spacing and Sizing UtilitiesThe margin, padding, and sizing shorthand classes that replace most one-off CSS rules.
- Flex and Display UtilitiesToggling display and building flexbox layouts entirely with utility classes.
Common Components
- Buttons and Button GroupsBootstrap's button variants, sizes, states, and how to group related actions together.
- CardsA flexible content container for grouping images, text, and actions into a single component.
- The Navbar ComponentBuilding a responsive, collapsible navigation bar with Bootstrap's navbar classes.
- ModalsBuilding dialog overlays with Bootstrap's modal component, and how it's structured under the hood.
Forms
JavaScript, Customization & Best Practices
- JavaScript Components and Data AttributesHow dropdowns, carousels, and collapses are wired up declaratively with data attributes instead of hand-written JS.
- Accessibility in Bootstrap ComponentsWhat Bootstrap handles for you out of the box, and what you still need to check yourself.
- Customizing Bootstrap with SassOverriding Bootstrap's default theme by recompiling its Sass source instead of fighting it with overrides.
- Best Practices and When Not to Use BootstrapCommon mistakes, how to keep a Bootstrap project maintainable, and when a utility-first library might fit better.