Bootstrap4 类参考
所有 Bootstrap 4 类的完整列表
所有 Bootstrap 4 CSS 类的完整列表以及描述和示例：
| Class | Description | Example | Category |
|---|---|---|---|
.active |
Adds a white text color to the active link in a navbar. | 尝试一下 | Navbar |
.active |
Adds a blue background color to the active list item in a list group | 尝试一下 | List Groups |
.active |
Adds a dark-blue background color to simulate a "pressed" button | 尝试一下 | Buttons |
.active |
Adds a blue background color to the active dropdown item in a dropdown | 尝试一下 | Dropdowns |
.active |
Adds a blue background color to the active pagination link (to highlight the current page) | 尝试一下 | Pagination |
.active |
Displays/shows the current carousel item | 尝试一下 | Carousel |
.alert |
Creates an alert message box | 尝试一下 | Alerts |
.alert-danger |
Red alert. Indicates a dangerous or potentially negative action | 尝试一下 | Alerts |
.alert-dark |
Dark alert. Dark grey alert box | 尝试一下 | Alerts |
.alert-dismissible |
Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) |
尝试一下 | Alerts |
.alert-heading |
Adds color:inherit to the specified element |
尝试一下 | Alerts |
.alert-info |
Teal alert. Indicates a neutral informative change or action | 尝试一下 | Alerts |
.alert-light |
Light alert. Light grey alert box | 尝试一下 | Alerts |
.alert-link |
Used on links inside alerts to provide matching colored links | 尝试一下 | Alerts |
.alert-primary |
Blue alert. Indicates an important action | 尝试一下 | Alerts |
.alert-secondary |
Grey alert. Indicates a "less" important action | 尝试一下 | Alerts |
.alert-success |
Green alert. Indicates a successful or positive action | 尝试一下 | Alerts |
.alert-warning |
Yellow alert. Indicates caution should be taken with this action | 尝试一下 | Alerts |
.align-baseline |
The element is aligned with the baseline of the parent. This is default | 尝试一下 | Utilities |
.align-bottom |
The element is aligned with the lowest element on the line | 尝试一下 | Utilities |
.align-middle |
The element is placed in the middle of the parent element | 尝试一下 | Utilities |
.align-top |
The element is aligned with the top of the tallest element on the line | 尝试一下 | Utilities |
.align-text-top |
The element is aligned with the top of the parent element's font | 尝试一下 | Utilities |
.align-text-bottom |
The element is aligned with the bottom of the parent element's font | 尝试一下 | Utilities |
.align-content-around |
Align gathered items "around" | 尝试一下 | Flex |
.align-content-*-around |
Align gathered items "around" on different screens | 尝试一下 | Flex |
.align-content-center |
Align gathered items in the center | 尝试一下 | Flex |
.align-content-*-center |
Align gathered items in the center on different screens | 尝试一下 | Flex |
.align-content-end |
Align gathered items at the end | 尝试一下 | Flex |
.align-content-*-end |
Align gathered items at the end on different screens | 尝试一下 | Flex |
.align-content-start |
Align gathered items from the start | 尝试一下 | Flex |
.align-content-*-start |
Align gathered items from the start on different screens | 尝试一下 | Flex |
.align-content-stretch |
Stretch gathered items | 尝试一下 | Flex |
.align-content-*-stretch |
Stretch gathered items on different screens | 尝试一下 | Flex |
.align-items-start |
Align single rows of items from the start | 尝试一下 | Flex |
.align-items-*-start |
Align single rows of items from the start on different screens | 尝试一下 | Flex |
.align-items-end |
Align single rows of items at the end | 尝试一下 | Flex |
.align-items-*-end |
Align single rows of items at the end on different screens | 尝试一下 | Flex |
.align-items-center |
Align single rows of items in the center | 尝试一下 | Flex |
.align-items-*-center |
Align single rows of items in the center on different screens | 尝试一下 | Flex |
.align-items-baseline |
Align single rows of items at the baseline | 尝试一下 | Flex |
.align-items-*-baseline |
Align single rows of items at the baseline on different screens | 尝试一下 | Flex |
.align-items-stretch |
Stretch single rows of items | 尝试一下 | Flex |
.align-items-*-stretch |
Stretch single rows of items on different screens | 尝试一下 | Flex |
.align-self-start |
Align a flex item from the start | 尝试一下 | Flex |
.align-self-*-start |
Align a flex item from the start on different screens | 尝试一下 | Flex |
.align-self-end |
Align a flex item at the end | 尝试一下 | Flex |
.align-self-*-end |
Align a flex item at the end on different screens | 尝试一下 | Flex |
.align-self-center |
Align a flex item in the center | 尝试一下 | Flex |
.align-self-*-center |
Align a flex item in the center on different screens | 尝试一下 | Flex |
.align-self-baseline |
Align a flex item at the baseline | 尝试一下 | Flex |
.align-self-*-baseline |
Align a flex item at the baseline on different screens | 尝试一下 | Flex |
.align-self-stretch |
Stretch a flex item | 尝试一下 | Flex |
.align-self-*-stretch |
Stretch a flex item on different screens | 尝试一下 | Flex |
.badge |
Creates a circular badge (grey circle - often used as a numerical indicator) | 尝试一下 | Badges |
.badge-danger |
Red badge. Indicates a dangerous or potentially negative action | 尝试一下 | Badges |
.badge-dark |
Dark badge. Dark grey alert box | 尝试一下 | Badges |
.badge-info |
Teal badge. Indicates a neutral informative change or action | 尝试一下 | Badges |
.badge-light |
Light badge. Light grey alert box | 尝试一下 | Badges |
.badge-pill |
Makes a badge more round | 尝试一下 | Badges |
.badge-primary |
Blue badge. Indicates an important action | 尝试一下 | Badges |
.badge-secondary |
Grey badge. Indicates a "less" important action | 尝试一下 | Badges |
.badge-success |
Green badge. Indicates a successful or positive action | 尝试一下 | Badges |
.badge-warning |
Yellow badge. Indicates caution should be taken with this action | 尝试一下 | Badges |
.bg-danger |
Adds a red background color to an element. Represents danger or a negative action | 尝试一下 | Colors |
.bg-dark |
Adds a dark grey background color to an element | 尝试一下 | Colors |
.bg-info |
Adds a teal background color to an element. Represents some information | 尝试一下 | Colors |
.bg-light |
Adds a light grey background color to an element | 尝试一下 | Colors |
.bg-primary |
Adds a blue background color to an element. Represents something important | 尝试一下 | Colors |
.bg-secondary |
Adds a grey background color to an element. Indicates a "less" important action | 尝试一下 | Colors |
.bg-success |
Adds a green background color to an element. Indicates success or a positive action | 尝试一下 | Colors |
.bg-warning |
Adds a yellow/orange background color to an element. Represents a warning or a negative action | 尝试一下 | Colors |
.blockquote |
Styles quoted blocks of content from another source (adds a larger font-size (1.25rem)) | 尝试一下 | Typography |
.blockquote-footer |
Styles the source title inside the blockquote (light grey text with indentation) | 尝试一下 | Typography |
.border |
Adds a border to an element | 尝试一下 | Utilities |
.border-bottom-0 |
Removes the bottom border from an element | 尝试一下 | Utilities |
.border-danger |
Adds a red border to an element (indicates danger) | 尝试一下 | Utilities |
.border-dark |
Adds a dark border to an element | 尝试一下 | Utilities |
.border-info |
Adds a teal border to an element (indicates information) | 尝试一下 | Utilities |
.border-left-0 |
Removes the left border from an element | 尝试一下 | Utilities |
.border-light |
Adds a light grey border to an element | 尝试一下 | Utilities |
.border-primary |
Adds a blue border to an element | 尝试一下 | Utilities |
.border-right-0 |
Removes the right border from an element | 尝试一下 | Utilities |
.border-top-0 |
Removes the top border from an element | 尝试一下 | Utilities |
.border-secondary |
Adds a grey border to an element | 尝试一下 | Utilities |
.border-success |
Adds a green border to an element (indicates success) | 尝试一下 | Utilities |
.border-warning |
Adds a orange border to an element (indicates warning) | 尝试一下 | Utilities |
.border-white |
Adds a white border to an element | 尝试一下 | Utilities |
.border-0 |
Removes all borders from an element | 尝试一下 | Utilities |
.breadcrumb |
A pagination. Indicates the current page's location within a navigational hierarchy | 尝试一下 | Pagination |
.breadcrumb-item |
Styles list items or links inside the breadcrumb | 尝试一下 | Pagination |
.btn |
Creates a basic button (gray background and rounded corners) | 尝试一下 | Buttons |
.btn-block |
Creates a block level button that spans the entire width of the parent element | 尝试一下 | Buttons |
.btn-dark |
Dark grey button | 尝试一下 | Buttons |
.btn-danger |
Red button. Indicates danger or a negative action | 尝试一下 | Buttons |
.btn-group |
Groups buttons together on a single line | 尝试一下 | Button Groups |
.btn-group-lg |
Large button group (makes all buttons in a button group larger - increased font-size and padding) | 尝试一下 | Button Groups |
.btn-group-sm |
Small button group (makes all buttons in a button group smaller) | 尝试一下 | Button Groups |
.btn-group-vertical |
Makes a button group appear vertically stacked | 尝试一下 | Button Groups |
.btn-info |
Teal button. Represents a neutral informative change or action | 尝试一下 | Buttons |
.btn-light |
Light grey button | 尝试一下 | Buttons |
.btn-link |
Makes a button look like a link (get button behavior) | 尝试一下 | Buttons |
.btn-lg |
Large button | 尝试一下 | Buttons |
.btn-outline-dark |
Dark grey bordered/outlined button | 尝试一下 | Buttons |
.btn-outline-danger |
Red bordered/outlined button. Indicates danger or a negative action | 尝试一下 | Buttons |
.btn-outline-info |
Teal bordered/outlined button. Represents a neutral informative change or action | 尝试一下 | Buttons |
.btn-outline-light |
Light grey bordered/outlined button | 尝试一下 | Buttons |
.btn-outline-primary |
Blue bordered/outlined button. | 尝试一下 | Buttons |
.btn-outline-secondary |
Grey bordered/outlined button. Indicates a "less" important action | 尝试一下 | Buttons |
.btn-outline-success |
Green bordered/outlined button. Indicates success or a positive action | 尝试一下 | Buttons |
.btn-outline-warning |
Orange bordered/outlined button. Represents warning or a negative action | 尝试一下 | Buttons |
.btn-primary |
Blue button. Indicates a something important | 尝试一下 | Buttons |
.btn-sm |
Small button | 尝试一下 | Buttons |
.btn-secondary |
Grey button. Indicates a "less" important action | 尝试一下 | Buttons |
.btn-success |
Green button. Indicates success or a positive action | 尝试一下 | Buttons |
.btn-toolbar |
Combine sets of button groups into button toolbars for more complex components | 尝试一下 | Button Groups |
.btn-warning |
Orange button. Represents warning or a negative action | 尝试一下 | Buttons |
.card |
Creates a card | 尝试一下 | Cards |
.card-body |
Container for card content | 尝试一下 | Cards |
.card-columns |
Container to create a masonry-like grid of cards | 尝试一下 | Cards |
.card-danger |
Adds a red background color to the card. Represents danger or a negative action | 尝试一下 | Cards |
.card-dark |
Adds a grey background color to the card | 尝试一下 | Cards |
.card-deck |
Container to create a grid of cards that are of equal height and width | 尝试一下 | Cards |
.card-footer |
Card footer | 尝试一下 | Cards |
.card-group |
Container to create a grid of cards that are of equal height and width, without side margins | 尝试一下 | Cards |
.card-header |
Card header | 尝试一下 | Cards |
.card-header-tabs |
Styles navigation tabs inside the card header | 尝试一下 | Cards |
.card-header-pills |
Styles navigation pills inside the card header | 尝试一下 | Cards |
.card-img-bottom |
Place the image at the bottom inside a card | 尝试一下 | Cards |
.card-img-overlay |
Turns an image into a card background. Often used to add text on top of the image | 尝试一下 | Cards |
.card-img-top |
Place the image at the top inside a card | 尝试一下 | Cards |
.card-info |
Adds a teal background color to the card. Represents some information | 尝试一下 | Cards |
.card-light |
Adds a light grey background color to the card | 尝试一下 | Cards |
.card-link |
Adds a blue color to any link and a hover effect inside the card | 尝试一下 | Cards |
.card-primary |
Adds a blue background color to the card. Represents something important | 尝试一下 | Cards |
.card-secondary |
Adds a grey background color to the card. Represents something "less" important | 尝试一下 | Cards |
.card-subtitle |
The .card-subtitle is used after a .card-title, and adds the following to an element: margin-top: -.375rem; margin-bottom: 0; |
尝试一下 | Cards |
.card-success |
Adds a green background color to the card. Indicates success or a positive action | 尝试一下 | Cards |
.card-text |
Used to remove bottom margins for a p element if it is the last child (or the only one), inside .card-body |
尝试一下 | Cards |
.card-title |
Adds a title to any heading element inside the card | 尝试一下 | Cards |
.card-warning |
Adds a yellow/orange background color to the card. Represents a warning or a negative action | 尝试一下 | Cards |
.carousel |
Creates a carousel (slideshow) | 尝试一下 | Carousel |
.carousel-caption |
Creates a caption text for each slide in the carousel | 尝试一下 | Carousel |
.carousel-control-next |
Container for "next" carousel/item link | 尝试一下 | Carousel |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" icon/button (right-pointed arrow) |
尝试一下 | Carousel |
.carousel-control-prev |
Container for "previous" carousel/item link | 尝试一下 | Carousel |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" icon/button (left-pointed arrow) |
尝试一下 | Carousel |
.carousel-indicators |
Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing) | 尝试一下 | Carousel |
.carousel-inner |
Container for slide items | 尝试一下 | Carousel |
.carousel-item |
Specifies the content of each slide | 尝试一下 | Carousel |
.clearfix |
Clears floats | 尝试一下 | Utilities |
.close |
Styles a close icon. This is often used for alerts and modals. Often used together with the × symbol to create the actual icon (a better looking "x"). It floats right by default | 尝试一下 | Utilities |
.col-auto |
Make form columns automatically size themselves based on their content | 尝试一下 | Forms |
.col-* |
Creates a column layout for extra small devices (and up/all devices, if not combined with other column classes). The * can be a number between 1 and 12 |
尝试一下 | Grid System |
.col-sm-* |
Creates a column layout for small devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
尝试一下 | Grid System |
.col-md-* |
Creates a column layout for medium devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
尝试一下 | Grid System |
.col-lg-* |
Creates a column layout for large devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
尝试一下 | Grid System |
.col-xl-* |
Creates a column layout for extra large devices. The * can be a number between 1 and 12 |
尝试一下 | Grid System |
.collapse |
Indicates collapsible content - which can be hidden or shown on demand | 尝试一下 | Collapse |
.collapse show |
Show the collapsible content by default | 尝试一下 | Collapse |
.container |
Fixed width container with widths determined by screen sites. Equal margin on the left and right. | 尝试一下 | Containers |
.container-fluid |
A container that spans the full width of the screen | 尝试一下 | Containers |
.container-* |
Responsive containers | 尝试一下 | Containers |
.custom-checkbox |
A wrapper/container for custom checkboxes | 尝试一下 | Custom Forms |
.custom-control |
A wrapper/container for custom forms | 尝试一下 | Custom Forms |
.custom-control-input |
Customized form control | 尝试一下 | Custom Forms |
.custom-control-inline |
Inline (horizontally - side by side) customized form controls | 尝试一下 | Custom Forms |
.custom-control-label |
Customized label, when used together with a custom form control | 尝试一下 | Custom Forms |
.custom-file |
Customized file upload | 尝试一下 | Custom Forms |
.custom-file-input |
Customized file upload | 尝试一下 | Custom Forms |
.custom-file-label |
Customized file label | 尝试一下 | Custom Forms |
.custom-radio |
A wrapper/container for custom radio buttons | 尝试一下 | Custom Forms |
.custom-range |
Customized range control | 尝试一下 | Custom Forms |
.custom-select |
Customized select menu | 尝试一下 | Custom Forms |
.custom-select-lg |
Large customized select menu | 尝试一下 | Custom Forms |
.custom-select-sm |
Small customized select menu | 尝试一下 | Custom Forms |
.custom-switch |
Customized toggle switch | 尝试一下 | Custom Forms |
.disabled |
Disables a button (adds opacity and a "no-parking-sign" icon on hover) | 尝试一下 | Buttons |
.disabled |
Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover) | 尝试一下 | Dropdowns |
.disabled |
Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover) | 尝试一下 | Pagination |
.disabled |
Disables a list item in a list group (cannot be clicked - adds a light grey color and removes the hover effect on list item links) | 尝试一下 | List Groups |
.dropdown |
Creates a toggleable menu that allows the user to choose one value from a predefined list | 尝试一下 | Dropdowns |
.dropdown-divider |
Used to separate links in the dropdown menu with a thin horizontal border | 尝试一下 | Dropdowns |
.dropdown-header |
Used to add headers inside the dropdown menu | 尝试一下 | Dropdowns |
.dropdown-item |
Creates a dropdown item (added to links or buttons inside .dropdown-menu) | 尝试一下 | Dropdowns |
.dropdown-item-text |
Used to add plain text to a dropdown item, or used on links for default link styling | 尝试一下 | Dropdowns |
.dropdown-menu |
Adds the default styles for the dropdown menu container | 尝试一下 | Dropdowns |
.dropdown-menu-right |
Right-aligns a dropdown menu | 尝试一下 | Dropdowns |
.dropdown-toggle |
Used on the button that should hide and show (toggle) the dropdown menu | 尝试一下 | Dropdowns |
.dropleft |
Left-aligns the dropdown | 尝试一下 | Dropdowns |
.dropright |
Right-aligns the dropdown | 尝试一下 | Dropdowns |
.dropup |
Indicates a dropup menu (upwards instead of downwards) | 尝试一下 | Dropdowns |
.d-block |
Creates a block element (adds display:block) |
尝试一下 | Utilities |
.d-*-block |
Creates a block element on a specific screen width | 尝试一下 | Utilities |
.d-inline |
Makes an element inline | 尝试一下 | Utilities |
.d-*-inline |
Makes an element inline on a specific screen size | 尝试一下 | Utilities |
.d-inline-block |
Makes an element inline block | 尝试一下 | Utilities |
.d-*-inline-block |
Makes an element inline block on a specific screen size | 尝试一下 | Utilities |
.d-flex |
Creates a flexbox container and transforms direct children into flex items | 尝试一下 | Flex |
.d-*-flex |
Creates a flexbox container on a specific screen size | 尝试一下 | Flex |
.d-inline-flex |
Creates an inline flexbox container | 尝试一下 | Flex |
.d-*-inline-flex |
Creates an inline flexbox container on a specific screen size | 尝试一下 | Flex |
.d-none |
Hides an element | 尝试一下 | Utilities |
.d-*-none |
Hides an element on a specific screen size | 尝试一下 | Utilities |
.d-table |
Makes an element display as a table | 尝试一下 | Utilities |
.d-*-table |
Makes an element display as a table on a specific screen size | 尝试一下 | Utilities |
.d-table-cell |
Makes an element display as a table cell | 尝试一下 | Utilities |
.d-*-table-cell |
Makes an element display as a table cell on a specific screen size | 尝试一下 | Utilities |
.d-table-row |
Makes an element display as a table row | 尝试一下 | Utilities |
.d-*-table-row |
Makes an element display as a table row on a specific screen size | 尝试一下 | Utilities |
.embed-responsive |
Container for embedded content. Makes videos or slideshows scale properly on any device | 尝试一下 | Images |
.embed-responsive-16by9 |
Container for embedded content. Creates an 16:9 aspect ratio embedded content | 尝试一下 | Images |
.embed-responsive-3by4 |
Container for embedded content. Creates an 3:4 aspect ratio embedded content | 尝试一下 | Images |
.embed-responsive-item |
Used inside .embed-responsive. Scales the video nicely to the parent element |
尝试一下 | Images |
.fade |
Adds a fading effect when closing an alert box | 尝试一下 | Alerts |
.fade |
Adds a fading effect when showing tab/pill content | 尝试一下 | Navs |
.fade |
Adds a fading effect when opening a modal | 尝试一下 | Modal |
.fixed-bottom |
Makes an element stay at the bottom of the screen (sticky/fixed) | 尝试一下 | Utilities |
.fixed-top |
Makes an element stay at the top of the screen (sticky/fixed) | 尝试一下 | Utilities |
.flex-column |
Display flex items vertically | 尝试一下 | Flex |
.flex-*-column |
Display flex items vertically on different screen sizes: | 尝试一下 | Flex |
.flex-column-reverse |
Display flex items vertically, reversed | 尝试一下 | Flex |
.flex-*-column-reverse |
Display flex items vertically, reversed, on different screen sizes | 尝试一下 | Flex |
.flex-fill |
Used on flex items to force it/them into equal width columns | 尝试一下 | Flex |
.flex-*-fill |
Force flex items into equal widths on different screens | 尝试一下 | Flex |
.flex-grow-0|1 |
Used on a single flex item to take up the rest of the available space | 尝试一下 | Flex |
.flex-nowrap |
Don't wrap flex items | 尝试一下 | Flex |
.flex-*-nowrap |
Don't wrap items on different screens | 尝试一下 | Flex |
.flex-shrink-0|1 |
Used on a single flex item to shrink it if necessary | Flex | |
.flex-row |
Display flex items horizontally (side by side) | 尝试一下 | Flex |
.flex-*-row |
Display flex items horizontally on a specific screen size | 尝试一下 | Flex |
.flex-row-reverse |
Display flex items right-aligned and horizontally | 尝试一下 | Flex |
.flex-*-row-reverse |
Display flex items right-aligned and horizontally on a specific screen size | 尝试一下 | Flex |
.flex-wrap |
Wrap flex items | 尝试一下 | Flex |
.flex-*-wrap |
Wrap items on different screens | 尝试一下 | Flex |
.flex-wrap-reverse |
Wrap flex items, in reversed order | 尝试一下 | Flex |
.flex-*-wrap-reverse |
Wrap flex items, in reversed order on different screens | 尝试一下 | Flex |
.float-left |
Floats an element to the left | 尝试一下 | Utilities |
.float-*-left |
Floats an element to the left on different screens | 尝试一下 | Utilities |
.float-none |
Remove floats from an element | 尝试一下 | Utilities |
.float-right |
Floats an element to the right | 尝试一下 | Utilities |
.float-*-right |
Floats an element to the left on different screens | 尝试一下 | Utilities |
.font-italic |
Italic text | 尝试一下 | Typography |
.font-weight-bold |
Bold text | 尝试一下 | Typography |
.font-weight-bolder |
Bolder text (font-weight:bolder) | 尝试一下 | Typography |
.font-weight-light |
Light weight text (font-weight:300) | 尝试一下 | Typography |
.font-weight-lighter |
Lighter weight text (font-weight:lighter) | 尝试一下 | Typography |
.font-weight-normal |
Normal text (font-weight:400) | 尝试一下 | Typography |
.form-check |
Container for checkboxes. Adds proper padding | 尝试一下 | Forms |
.form-check-inline |
Makes checkboxes appear on the same line (horizontally) | 尝试一下 | Forms |
.form-check-input |
Styles checkboxes with proper margins | 尝试一下 | Forms |
.form-check-label |
Ensures proper margins for labels used together with checkboxes | 尝试一下 | Forms |
.form-control |
Used on input, textarea, and select elements to span the entire width of the page and make them responsive | 尝试一下 | Forms |
.form-control-file |
Adds display:block and width:100% to input filed with type="file" |
尝试一下 | Forms |
.form-control-lg |
Large form control | 尝试一下 | Forms |
.form-control-plaintext |
Styles a form control as plain text | 尝试一下 | Forms |
.form-control-range |
Adds display:block and width:100% to input filed with type="range" |
尝试一下 | Forms |
.form-control-sm |
Small form control | 尝试一下 | Forms |
.form-group |
Container for form input and label | 尝试一下 | Forms |
.form-inline |
Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | 尝试一下 | Forms |
.form-row |
Container for responsive columns (less left and right margins than .row/overrides default column gutters) |
尝试一下 | Forms |
.h1 - .h6 |
Makes an element look like a heading of the chosen class (h1-h6) | 尝试一下 | Typography |
.h-25 |
Sets the height of an element to 25% | 尝试一下 | Utilities |
.h-50 |
Sets the height of an element to 50% | 尝试一下 | Utilities |
.h-75 |
Sets the height of an element to 75% | 尝试一下 | Utilities |
.h-100 |
Sets the height of an element to 100% | 尝试一下 | Utilities |
.img-fluid |
Responsive image (adds max-width:100% and height:auto) | 尝试一下 | Images |
.img-thumbnail |
Shapes an image to a thumbnail (thin light grey borders) | 尝试一下 | Images |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
尝试一下 | Typography |
.input-group |
Container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text" | 尝试一下 | Input Group |
.input-group-append |
Input group container for adding help text behind an input field | 尝试一下 | Input Group |
.input-group-lg |
Large input group | 尝试一下 | Input Group |
.input-group-prepend |
Input group container for adding help text in front of an input field | 尝试一下 | Input Group |
.input-group-sm |
Small input group | 尝试一下 | Input Group |
.input-group-text |
Styles the specified help text in an input group | 尝试一下 | Input Group |
.input-lg |
Large input field | 尝试一下 | Input Sizing |
.input-sm |
Small input field | 尝试一下 | Input Sizing |
.invalid-feedback |
Creates a custom validation message used in validated forms (red text color) | 尝试一下 | Forms |
.invalid-tooltip |
Creates a custom validation message used in validated forms (red tooltip) | 尝试一下 | Forms |
.invisible |
Make an element invisible | 尝试一下 | Utilities |
.is-invalid |
Validates a form element (adds a red border to input fields). Note: for server side | 尝试一下 | Forms |
.is-valid |
Validates a form element (adds a green border to input fields). Note: for server side | 尝试一下 | Forms |
.jumbotron |
Creates a padded grey heading/box with rounded corners that enlarges the font sizes of the text inside it. Used for calling extra attention to some special content or information | 尝试一下 | Jumbotron |
.jumbotron-fluid |
Creates a full-width jumbotron (grey padded heading) without rounded borders | 尝试一下 | Jumbotron |
.justify-content-* |
Aligns flex items from the start, at the end, centered, in between and "around" | 尝试一下 | Flex |
.justify-content-*-around |
Aligns flex items "around" on different screen sizes | 尝试一下 | Flex |
.justify-content-*-between |
Aligns flex items in "between" on different screen sizes | 尝试一下 | Flex |
.justify-content-*-center |
Aligns flex items in the center on different screen sizes | 尝试一下 | Flex |
.justify-content-*-end |
Aligns flex items at the end on different screen sizes | 尝试一下 | Flex |
.justify-content-*-start |
Aligns flex items from the start on different screen sizes | 尝试一下 | Flex |
.lead |
Increase the font size and line height of a paragraph | 尝试一下 | Typography |
.list-group |
Creates a bordered list group for <li> elements |
尝试一下 | List Group |
.list-group-flush |
Removes some borders and rounded corners from list items in a list group | 尝试一下 | List Group |
.list-group-horizontal |
Display list items horizontally instead of vertically (side-by-side instead of on top of each other) | 尝试一下 | List Group |
.list-group-horizontal-* |
Display list items horizontally instead of vertically on different screen sizes | 尝试一下 | List Group |
.list-group-item |
Added to each <li> element in the list group |
尝试一下 | List Group |
.list-group-item-action |
Added to links inside the list group to make them stand out on hover (darker background) | 尝试一下 | List Group |
.list-group-item-danger |
Red background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-dark |
Dark grey background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-info |
Light-blue background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-light |
Light grey background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-primary |
Blue background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-success |
Green background color for a list item in a list group | 尝试一下 | List Group |
.list-group-item-warning |
Yellow background color for a list item in a list group | 尝试一下 | List Group |
.list-inline |
Places all list items on a single line (used together with .list-inline-item on each <li> elements) |
尝试一下 | Typography |
.list-inline-item |
Places all list items on a single line (used together with .list-inline on the parent <ul> element) |
尝试一下 | Typography |
.list-unstyled |
Removes all default list-style (bullets, left margin, etc.) styling from a <ul> or <ol> list |
尝试一下 | Typography |
.mark |
Highlights text: Highlighted text | 尝试一下 | Typography |
.media |
Aligns media objects together with content (like images or videos - often used for comments in a blog post etc) | 尝试一下 | Media Objects |
.media-body |
Container for media content | 尝试一下 | Media Objects |
.modal |
Identifies the content as a modal and brings focus to it | 尝试一下 | Modals |
.modal-body |
Defines the style for the body of the modal. Add any HTML markup here (p, img, etc) | 尝试一下 | Modals |
.modal-content |
Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed | 尝试一下 | Modals |
.modal-dialog-centered |
Centers the modal vertically and horizontally within the page | 尝试一下 | Modals |
.modal-dialog-scrollable |
Adds a scrollbar inside the modal | 尝试一下 | Modals |
.modal-footer |
The footer of the modal (often contains an action button and a close button) | 尝试一下 | Modals |
.modal-header |
The header of the modal (often contains a title and a close button) | 尝试一下 | Modals |
.modal-lg |
Large modal (wider than default) | 尝试一下 | Modals |
.modal-sm |
Small modal (less width) | 尝试一下 | Modals |
.modal-xl |
Extra large modal | 尝试一下 | Modals |
.m-# / m-*-# |
Responsive margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.mt-# / mt-*-# |
Responsive top margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.mb-# / mb-*-# |
Responsive bottom margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.ml-# / ml-*-# |
Responsive left margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.mr-# / mr-*-# |
Responsive right margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.mx-# / mx-*-# |
Responsive left and right margin auto (horizontal) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.my-# / my-*-# |
Responsive top and bottom margin auto (vertical) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.mx-auto |
Centers an element horizontally | 尝试一下 | Utilities |
.nav nav-tabs |
Creates a tabbed menu | 尝试一下 | Tabs |
.nav nav-pills |
Creates a pill menu | 尝试一下 | Tabs |
.nav-justified |
Justifies tab/pill links with an equal width | 尝试一下 | Tabs |
.navbar |
Creates a navigation bar | 尝试一下 | Navbar |
.navbar-nav |
Container for navigation links inside the .navbar container | 尝试一下 | Navbar |
.navbar-brand |
Added to a link or a header element inside the navbar to represent a logo or a header | 尝试一下 | Navbar |
.navbar-collapse |
Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | 尝试一下 | Navbar |
.navbar-expand-* |
Responsive collapsible class - stacks the navbar vertically on small (sm), medium (md), large (lg) or extra large (xl) screens | 尝试一下 | Navbar |
.navbar-dark |
Adds a white text color to all links in the navbar | 尝试一下 | Navbar |
.navbar-light |
Adds a black text color to all links in the navbar | 尝试一下 | Navbar |
.navbar-text |
Vertically align any elements inside the navbar that are not links (ensures proper padding) | 尝试一下 | Navbar |
.navbar-toggler |
Styles the button that should open the navbar on small screens. Automatically styled as a hamburger/three bars | 尝试一下 | Navbar |
.nav-link |
Used to style links/anchors inside the navbar | 尝试一下 | Navbar |
.nav-item |
Used to style list items inside the navbar | 尝试一下 | Navbar |
.needs-validation |
Adds validation styles to a submitted form | 尝试一下 | Forms |
.no-gutters |
Remove gutters/extra space from columns | 尝试一下 | Grid System |
.page-item |
Styles list items inside a pagination | 尝试一下 | Pagination |
.page-link |
Styles links inside a pagination | 尝试一下 | Pagination |
.pagination |
Creates a pagination (Useful when you have a web site with lots of pages | 尝试一下 | Pagination |
.pagination-lg |
Large pagination (each pagination link gets a bigger font-size and more padding) | 尝试一下 | Pagination |
.pagination-sm |
Small pagination (each pagination link gets a smaller font size and less padding) | 尝试一下 | Pagination |
.pre-scrollable |
Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) |
尝试一下 | Helpers |
.progress |
Container for progress bars | 尝试一下 | Progress Bars |
.progress-bar |
Creates a progress bar | 尝试一下 | Progress Bars |
.progress-bar-animated |
Animates the progress bar (used together with stripes) | 尝试一下 | Progress Bars |
.progress-bar-striped |
Adds stripes to the progress bar | 尝试一下 | Progress Bars |
.p-# / p-*-# |
Responsive padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.pt-# / pt-*-# |
Responsive top padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.pb-# / pb-*-# |
Responsive bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.pl-# / pl-*-# |
Responsive left padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.pr-# / pr-*-# |
Responsive right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.py-# / py-*-# |
Responsive top and bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.px-# / px-*-# |
Responsive left and right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | 尝试一下 | Utilities |
.rounded |
Adds rounded corners to an element | 尝试一下 | Utilities |
.rounded-bottom |
Adds bottom rounded corners to an element | 尝试一下 | Utilities |
.rounded-circle |
Shapes an element to a circle (not supported in IE8 and earlier) | 尝试一下 | Utilities |
.rounded-left |
Adds left rounded corners of an element | 尝试一下 | Utilities |
.rounded-right |
Adds right rounded corners to an element | 尝试一下 | Utilities |
.rounded-top |
Adds top rounded corners to an element | 尝试一下 | Utilities |
.rounded-0 |
Removes rounded corners from an element | 尝试一下 | Utilities |
.row |
Container for responsive columns | 尝试一下 | Grid System |
.row-cols-* |
Set the number of columns that should appear next to each other | 尝试一下 | Grid System |
.shadow |
Adds a shadow to an element | 尝试一下 | Utilities |
.shadow-lg |
Adds a large shadow to an element | 尝试一下 | Utilities |
.shadow-none |
Removes shadows from an element | 尝试一下 | Utilities |
.shadow-sm |
Adds a small shadow to an element | 尝试一下 | Utilities |
.small |
Creates a lighter, secondary text in any heading | 尝试一下 | Typography |
.spinner-border |
Creates a spinner/loader | 尝试一下 | Spinners |
.spinner-border-sm |
Creates a smaller spinner/loader | 尝试一下 | Spinners |
.spinner-grow |
Creates a spinner/loader that "grows" | 尝试一下 | Spinners |
.spinner-grow-sm |
Creates a smaller spinner/loader that "grows" | 尝试一下 | Spinners |
.sr-only |
Hides an element on all devices except for screen readers | 尝试一下 | Utilities |
.sr-only-focusable |
Hides an element on all devices except for screen readers | 尝试一下 | Utilities |
.sticky-top |
Makes an element stay sticky/fixed at the top of the page when you scroll past it | 尝试一下 | Utilities |
.stretched-link |
Added to a link to make its containing block (parent) clickable (works only for parent elements with position:relative) | 尝试一下 | Utilities |
.tab-content |
Used together with .tab-pane to creates toggleable/dynamic tabs/pills |
尝试一下 | Tabs |
.tab-pane |
Used together with .tab-content to creates toggleable/dynamic tabs/pills |
尝试一下 | Tabs |
.table |
Adds basic styling to a table (padding, bottom borders, etc) | 尝试一下 | Tables |
.table-active |
Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) |
尝试一下 | Tables |
.table-bordered |
Adds borders on all sides of the table and cells | 尝试一下 | Tables |
.table-borderless |
Remove borders from a table | 尝试一下 | Tables |
.table-condensed |
Makes a table more compact by cutting cell padding in half | 尝试一下 | Tables |
.table-dark |
Adds a black background with white text to the table | 尝试一下 | Tables |
.table-hover |
Creates a hoverable table (adds a grey background color on table rows on hover) | 尝试一下 | Tables |
.table-responsive-* |
Makes a table responsive (adds a horizontal scrollbar when needed). By default, the scrollbar is added to the table on screens that are less than 992px wide (if needed). There's no difference when viewing anything lager than 992px wide. However, you can use sm|md|lg|xl to decide WHEN the table should get a scrollbar, depending on the screen width | 尝试一下 | Tables |
.table-striped |
Adds zebra-stripes to a table | 尝试一下 | Tables |
.text-break |
Prevents long text from breaking layout | 尝试一下 | Typography |
.text-capitalize |
Indicates capitalized text | 尝试一下 | Typography |
.text-center |
Center-aligns text | 尝试一下 | Typography |
.text-*-center |
Center-aligns text on different screens | 尝试一下 | Typography |
.text-danger |
Red text color. Indicates danger | 尝试一下 | Colors |
.text-dark |
Dark grey text color | 尝试一下 | Typography |
.text-decoration-none |
Removes the underline from a link | 尝试一下 | Typography |
.text-hide |
Hides text (helps replace an element's text content with a background image) | 尝试一下 | Typography |
.text-info |
Light-blue text color. Indicates information | 尝试一下 | Colors |
.text-light |
Light grey text color | 尝试一下 | Colors |
.text-justify |
Indicates justified text | 尝试一下 | Typography |
.text-left |
Aligns the text to the left | 尝试一下 | Typography |
.text-*-left |
Left-aligns text on different screens | 尝试一下 | Typography |
.text-lowercase |
Changes text to lowercase | 尝试一下 | Typography |
.text-muted |
Grey text color | 尝试一下 | Colors |
.text-nowrap |
Prevents the text from wrapping | 尝试一下 | Typography |
.text-primary |
Blue text color. Indicates something important | 尝试一下 | Colors |
.text-secondary |
Grey text color. Indicates something "less" important | 尝试一下 | Colors |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | 尝试一下 | Typography |
.text-right |
Aligns text to the right | 尝试一下 | Typography |
.text-*-right |
Right-aligns text on different screens | 尝试一下 | Typography |
.text-success |
Green text color. Indicates success | 尝试一下 | Colors |
.text-uppercase |
Makes text uppercase | 尝试一下 | Typography |
.text-warning |
Yellow/orange text color. Indicates warning | 尝试一下 | Colors |
.text-white |
White text color | 尝试一下 | Colors |
.thead-dark |
Adds a black background color to table headers | 尝试一下 | Tables |
.thead-light |
Adds a grey background color to table headers | 尝试一下 | Tables |
.toast |
Creates a toast (alert box that disappears after a few seconds) | 尝试一下 | Toast |
.toast-body |
Toast body | 尝试一下 | Toast |
.toast-header |
Toast header | 尝试一下 | Toast |
.valid-feedback |
Creates a custom validation message used in validated forms (green text color) | 尝试一下 | Forms |
.valid-tooltip |
Creates a custom validation message used in validated forms (green tooltip) | 尝试一下 | Forms |
.visible |
Make an element visible | 尝试一下 | Utilities |
.was-validated |
Adds validation styles to a form element | 尝试一下 | Forms |
.w-25 |
Sets the width of an element to 25% | 尝试一下 | Utilities |
.w-50 |
Sets the width of an element to 50% | 尝试一下 | Utilities |
.w-75 |
Sets the width of an element to 75% | 尝试一下 | Utilities |
.w-100 |
Sets the width of an element to 100% | 尝试一下 | Utilities |
上表显示了所有可用的 Bootstrap 4 类。
提示：查看所有的完整列表Bootstrap3课程，去我们的所有 Bootstrap 3 CSS 类参考。