Bootstrap 课程参考


所有Bootstrap类的完整列表

所有 Bootstrap 类的完整列表以及描述和示例:

Class Description Example Category
.active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) 尝试一下 Tables
.active Adds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar. 尝试一下 Navbar
.active Adds a blue background color to the active list item in a list group 尝试一下 List Groups
.active Adds a blue background color to simulate a "pressed" button 尝试一下 Buttons
.active Animates a striped progress bar 尝试一下 Progress Bars
.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
.affix The Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and off 尝试一下 Affix
.alert Creates an alert message box 尝试一下 Alerts
.alert-danger Red alert box. Indicates a dangerous or potentially negative action 尝试一下 Alerts
.alert-dismissible Together with the .close class, this class is used to close the alert 尝试一下 Alerts
.alert-info Light-blue alert box. Indicates some information 尝试一下 Alerts
.alert-link Used on links inside alerts to add matching colored links 尝试一下 Alerts
.alert-success Green alert box. Indicates a successful or positive action 尝试一下 Alerts
.alert-warning Yellow alert box. Indicates caution should be taken with this action 尝试一下 Alerts
.badge Creates a circular badge (grey circle - often used as a numerical indicator) 尝试一下 Badges
.bg-danger Adds a red background color to an element. Represents danger or a negative action 尝试一下 Helpers
.bg-info Adds a light-blue background color to an element. Represents some information 尝试一下 Helpers
.bg-primary Adds a blue background color to an element. Represents something important 尝试一下 Helpers
.bg-success Adds a green background color to an element. Indicates success or a positive action 尝试一下 Helpers
.bg-warning Adds a yellow background color to an element. Represents a warning or a negative action 尝试一下 Helpers
.breadcrumb A pagination. Indicates the current page's location within a navigational hierarchy 尝试一下 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-danger Red button. Indicates danger or a negative action 尝试一下 Buttons
.btn-default Default button. White background and grey border 尝试一下 Buttons
.btn-group Groups buttons together on a single line 尝试一下 Button Groups
.btn-group-justified Makes a group of buttons span the entire width of the screen 尝试一下 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-xs Extra small button group (makes all buttons in a button group extra small) 尝试一下 Button Groups
.btn-group-vertical Makes a button group appear vertically stacked 尝试一下 Button Groups
.btn-info Light-blue button. Represents information 尝试一下 Buttons
.btn-link Makes a button look like a link (get button behavior) 尝试一下 Buttons
.btn-lg Large button 尝试一下 Buttons
.btn-primary Blue button. 尝试一下 Buttons
.btn-sm Small button 尝试一下 Buttons
.btn-success Green button. Indicates success or a positive action 尝试一下 Buttons
.btn-warning Yellow button. Represents warning or a negative action 尝试一下 Buttons
.btn-xs Extra small button 尝试一下 Buttons
.caption Adds a caption text inside a .thumbnail 尝试一下 Images
.caret Creates a caret arrow icon , which indicates that the button is a dropdown 尝试一下 Dropdowns
.carousel Creates a carousel (slideshow) 尝试一下 Carousel
.carousel-caption Creates a caption text for each slide in the carousel 尝试一下 Carousel
.carousel-control Container for next and previous links 尝试一下 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
.center-block Centers any element (Sets an element to display:block with margin-right:auto and margin-left:auto) 尝试一下 Helpers
.checkbox Container for checkboxes 尝试一下 Inputs
.checkbox-inline Makes multiple checkboxes appear on the same line 尝试一下 Inputs
.clearfix Clears floats 尝试一下 Helpers
.close Indicates a close icon 尝试一下 Helpers
.col-*-* Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12. 尝试一下 Grid
.col-*-offset-* Move columns to the right. These classes increase the left margin of a column by * columns 尝试一下 Grid
.col-*-pull-* Changes the order of the grid columns 尝试一下 Grid
.col-*-push-* Changes the order of the grid columns 尝试一下 Grid
.collapse Indicates collapsible content - which can be hidden or shown on demand 尝试一下 Collapse
.collapse in 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
.control-label Allows a label to be used for form validation 尝试一下 Forms
.danger Adds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative action 尝试一下 Tables
.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 grey background color and a "no-parking-sign" icon on hover) 尝试一下 List Groups
.divider Used to separate links in the dropdown menu with a thin horizontal border 尝试一下 Dropdowns
.dl-horizontal Lines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side 尝试一下 Typography
.dropdown Creates a toggleable menu that allows the user to choose one value from a predefined list 尝试一下 Dropdowns
.dropdown-header Used to add headers inside the dropdown menu 尝试一下 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
.dropup Indicates a dropup menu (upwards instead of downwards) 尝试一下 Dropdowns
.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-4by3 Container for embedded content. Creates an 4:3 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
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them responsive 尝试一下 Forms
.form-control-feedback Form validation class 尝试一下 Inputs 2
.form-control-static Adds plain text next to a form label within a horizontal form 尝试一下 Inputs 2
.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-horizontal Aligns labels and groups of form controls in a horizontal layout 尝试一下 Forms
.glyphicon Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set 尝试一下 Glyphicons
.has-danger Adds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with .has-feedback) 尝试一下 Forms
.has-feedback Adds feedback icons for inputs (checkmark, warning and error signs) 尝试一下 Forms
.has-success Adds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) 尝试一下 Forms
.has-warning Adds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) 尝试一下 Forms
.help-block A block of help text that breaks onto a new line and may extend beyond one line. 尝试一下 Input Sizing
.hidden Forces an element to be hidden (display:none) 尝试一下 Helpers
.hidden-* Hides content depending on screen size 尝试一下 Helpers
.hide Deprecated. Use .hidden instead 尝试一下 Helpers
.h1 - .h6 Makes an element look like a heading of the chosen class (h1-h6) 尝试一下 Typography
.icon-bar Used in the navbar to create a hamburger menu (three horizontal bars) 尝试一下 Navbar
.icon-next Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon 尝试一下 Carousel
.icon-prev Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon 尝试一下 Carousel
.img-circle Shapes an image to a circle (not supported in IE8 and earlier) 尝试一下 Images
.img-responsive Makes an image responsive 尝试一下 Images
.img-rounded Adds rounded corners to an image 尝试一下 Images
.img-thumbnail Shapes an image to a thumbnail (borders) 尝试一下 Images
.in Fades in tabs 尝试一下 Tabs
.info Adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action 尝试一下 Tables
.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 it as a "help text" 尝试一下 Inputs
.input-group-lg Large input group 尝试一下 Inputs
.input-group-sm Small input group 尝试一下 Inputs
.input-group-addon Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field 尝试一下 Inputs
.input-group-btn Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar 尝试一下 Inputs
.input-lg Large input field 尝试一下 Input Sizing
.input-sm Small input field 尝试一下 Input Sizing
.invisible Makes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the page 尝试一下 Helpers
.item Class added to each carousel item. May be text or images 尝试一下 Carousel
.jumbotron Creates a padded grey box with rounded corners that enlarges the font sizes of the text inside it. Creates a big box for calling extra attention to some special content or information 尝试一下 Jumbotron
.label Adds a grey rounded box to an element. Provides additional information about something (e.g. "New") 尝试一下 Labels
.label-danger Red label 尝试一下 Labels
.label-info Light-blue label 尝试一下 Labels
.label-success Green label 尝试一下 Labels
.label-warning Yellow label 尝试一下 Labels
.lead Increase the font size and line height of a paragraph 尝试一下 Typography
.left Used to identify the left carousel control 尝试一下 Carousel
.list-group Creates a bordered list group for <li> elements 尝试一下 List Group
.list-group-item Added to each <li> element in the list group 尝试一下 List Group
.list-group-item-heading Creates a list group heading (used on other elements besides <li>) 尝试一下 List Group
.list-group-item-text Used for item text inside the list group (used on other elements besides <li>) 尝试一下 List Group
.list-group-item-danger Red 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-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 (horizontal menu) 尝试一下 Tabs
.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 (like images or videos - often used for comments in a blog post etc) 尝试一下 Media Objects
.media-body Text that should appear next to a media object 尝试一下 Media Objects
.media-heading Creates a heading inside the media object 尝试一下 Media Objects
.media-list Nested media lists 尝试一下 Media Objects
.media-object Indicates a media object (image or video) 尝试一下 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 Sets the proper width and margin of 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-open Used on the <body> element to prevent page scrolling (overflow:hidden) 尝试一下 Modals
.modal-sm Small modal (less width) 尝试一下 Modals
.modal-title The title of the modal 尝试一下 Modals
.nav nav-tabs Indicates a tabbed menu 尝试一下 Tabs
.nav nav-pills Indicates a pill menu 尝试一下 Tabs
.nav .navbar-nav Used on a <ul> container that contains the list items with links inside a navigation bar 尝试一下 Navbar
.nav-justified Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered) 尝试一下 Tabs
.nav-stacked Vertically stack tabs or pills 尝试一下 Tabs
.nav-tabs Creates a tabbed menu 尝试一下 Tabs
.navbar Creates a navigation bar 尝试一下 Navbar
.navbar-brand Added to a link or a header element inside the navbar to represent a logo or a header 尝试一下 Navbar
.navbar-btn Vertically aligns a button inside a navbar 尝试一下 Navbar
.navbar-collapse Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) 尝试一下 Navbar
.navbar-default Creates a default navigation bar (light-grey background color) 尝试一下 Navbar
.navbar-fixed-bottom Makes the navbar stay at the bottom of the screen (sticky/fixed) 尝试一下 Navbar
.navbar-fixed-top Makes the navbar stay at the top of the screen (sticky/fixed) 尝试一下 Navbar
.navbar-form Added to form elements inside the navbar to vertically center them (proper padding) 尝试一下 Navbar
.navbar-header Added to a container element that contains the link/element that represent a logo or a header 尝试一下 Navbar
.navbar-inverse Creates a black navigation bar (instead of light-grey) 尝试一下 Navbar
.navbar-left Aligns nav links, forms, buttons, or text, in the navbar to the left 尝试一下 Navbar
.navbar-link Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) 尝试一下 Navbar
.navbar-nav Used on a <ul> container that contains the list items with links inside a navigation bar 尝试一下 Navbar
.navbar-right Aligns nav links, forms, buttons, or text in the navbar to the right. 尝试一下 Navbar
.navbar-static-top Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) 尝试一下 Navbar
.navbar-text Vertical align any elements inside the navbar that are not links (ensures proper padding) 尝试一下 Navbar
.navbar-toggle Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) 尝试一下 Navbar
.next Used in the carousel control to identity the next control 尝试一下 Carousel
.next Used to align pager buttons to the right side of the page (next button) 尝试一下 Pager
.page-header Adds a horizontal line under the heading (+ adds some extra space around the element) 尝试一下 Page Header
.pager Creates previous/next buttons (used on <ul> elements) 尝试一下 Pager
.pagination Creates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements) 尝试一下 Pagination
.pagination-lg Large pagination (each pagination link gets a font-size of 18px. Default is 14px) 尝试一下 Pagination
.pagination-sm Small pagination (each pagination link gets a font-size of 12px. Default is 14px) 尝试一下 Pagination
.panel Creates a bordered box with some padding around its content 尝试一下 Panels
.panel-body Container for content inside the panel 尝试一下 Panels
.panel-collapse Collapsible panel (toggle between hiding and showing panel(s)) 尝试一下 Collapse
.panel-danger Red panel. Indicates danger 尝试一下 Panels
.panel-info Light-blue panel. Indicates information 尝试一下 Panels
.panel-success Green panel. Indicates success 尝试一下 Panels
.panel-warning Yellow panel. Indicates warning 尝试一下 Panels
.panel-footer Creates a panel footer (light background color) 尝试一下 Panels
.panel-group Used to group many panels together. This removes the bottom margin below each panel 尝试一下 Panels
.panel-heading Creates a panel header (light background color) 尝试一下 Panels
.panel-title Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px) 尝试一下 Panels
.popover Popup-box that appears when the user clicks on an element 尝试一下 Popover
.pre-scrollable Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) 尝试一下 Helpers
.prev Used in carousels to indicate a "previous" link 尝试一下 Carousel
.previous Used to align pager buttons to the left side of the page (previous button) 尝试一下 Pager
.progress Container for progress bars 尝试一下 Progress Bars
.progress-bar Creates a progress bar 尝试一下 Progress Bars
.progress-bar-danger Red progress bar. Indicates danger 尝试一下 Progress Bars
.progress-bar-info Light-blue progress bar. Indicates information 尝试一下 Progress Bars
.progress-bar-striped Creates a striped progress bar 尝试一下 Progress Bars
.progress-bar-success Green progress bar. Indicates success 尝试一下 Progress Bars
.progress-bar-warning Yellow progress bar. Indicates warning 尝试一下 Progress Bars
.pull-left Float an element to the left 尝试一下 Helpers
.pull-right Float an element to the right 尝试一下 Helpers
.right Used to identify the right carousel control 尝试一下 Carousel
.row Container for responsive columns 尝试一下 Grid
.row-no-gutters Removes the gutters from a row and its columns 尝试一下 Grid
.show Shows an element (display:block) 尝试一下 Helpers
.small Creates a lighter, secondary text in any heading 尝试一下 Typography
.sr-only Hides an element on all devices except for screen readers 尝试一下 Helpers
.sr-only-focusable Hides an element on all devices except for screen readers 尝试一下 Helpers
.success Adds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive action 尝试一下 Tables
.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-bordered Adds borders on all sides of the table and cells 尝试一下 Tables
.table-condensed Makes a table more compact by cutting cell padding in half 尝试一下 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) 尝试一下 Tables
.text-capitalize Indicates capitalized text 尝试一下 Typography
.text-center Center-aligns text 尝试一下 Typography
.text-danger Red text color. Indicates danger 尝试一下 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 尝试一下 Typography
.text-justify Indicates justified text 尝试一下 Typography
.text-left Aligns the text to the left 尝试一下 Typography
.text-lowercase Changes text to lowercase 尝试一下 Typography
.text-muted Grey text color 尝试一下 Typography
.text-nowrap Prevents the text from wrapping 尝试一下 Typography
.text-primary Blue text color 尝试一下 Typography
.text-right Aligns text to the right 尝试一下 Typography
.text-success Green text color. Indicates success 尝试一下 Typography
.text-uppercase Makes text uppercase 尝试一下 Typography
.text-warning Yellow/orange text color. Indicates warning 尝试一下 Typography
.thumbnail Adds a border around an element (often images or videos) to make it look like a thumbnail 尝试一下 Images
.tooltip Popup-box that appears when the user moves the mouse pointer over an element 尝试一下 Tooltip
.visible-* Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead 尝试一下 Helpers
.visible-print-block Displays the element (display:block) in print (pre)view   Helpers
.visible-print-inline Displays the element (display:inline) in print (pre)view   Helpers
.visible-print-inline-block Displays the element (display:inline-block) in print (pre)view   Helpers
.hidden-print Hides the element (display:none) in print (pre)view   Helpers
.warning Adds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warning 尝试一下 Tables
.well Adds a rounded border around an element with a gray background color and some padding 尝试一下 Wells
.well-lg Large well (more padding) 尝试一下 Wells
.well-sm Small well (less padding) 尝试一下 Wells

上表显示了所有可用的 Bootstrap 3 类。

提示:查看所有的完整列表Bootstrap4课程,去我们的所有 Bootstrap 4 CSS 类参考