Bootstrap API Cheat Sheet
1. Introduction to Bootstrap
Bootstrap is a popular front-end framework developed by Twitter, designed to make web development faster and easier. It provides a set of predefined classes and components that you can use to create responsive and mobile-first websites. The Bootstrap API includes various elements such as grids, buttons, navigation bars, forms, modals, and more. This cheat sheet will cover some of the most commonly used Bootstrap classes and their functionalities.
2. Grid System
The Bootstrap grid system allows you to create a responsive layout by dividing your page into 12 columns. You can use these columns to create different layouts depending on the screen size. Below is a table summarizing the basic grid classes:
| Class | Description |
.container |
A fixed-width container |
.container-fluid |
A full-width container |
.row |
A horizontal group of columns |
.col |
Shorthand for.col-sm-12 (full-width column) |
.col-xs |
Extra small devices (<768px) |
.col-sm |
Small devices (≥768px) |
.col-md |
Medium devices (≥992px) |
.col-lg |
Large devices (≥1200px) |
.col-xl |
Extra large devices (≥1400px) |
.offset |
Move columns to the right |
.order |
Reorder columns |
3. Typography
Bootstrap provides various classes for typography, including headings, paragraphs, and text alignment. Here are some common classes:
| Class | Description |
.h1,.h2, etc. |
Headings (h1 to h6) |
.lead |
Larger text for emphasis |
.display-1,.display-2, etc. |
Display sizes (large text) |
.text-left |
Left-align text |
.text-center |
Center-align text |
.text-right |
Right-align text |
.text-justify |
Justify text alignment |
4. Colors
Bootstrap uses a set of predefined colors for text, backgrounds, and borders. You can apply these colors using utility classes like:
| Class | Description |
.text-primary |
Primary color text |
.text-secondary |
Secondary color text |
.text-success |
Success color text |
.text-info |
Info color text |
.text-warning |
Warning color text |
.text-danger |
Danger color text |
.text-light |
Light color text |
.text-dark |
Dark color text |
.bg-primary |
Primary color background |
.bg-secondary |
Secondary color background |
.bg-success |
Success color background |
.bg-info |
Info color background |
.bg-warning |
Warning color background |
.bg-danger |
Danger color background |
.bg-light |
Light color background |
.bg-dark |
Dark color background |
5. Buttons
Bootstrap offers a variety of button styles and sizes. Here are some common button classes:
| Class | Description |
.btn |
Base class for all buttons |
.btn-primary |
Primary button |
.btn-secondary |
Secondary button |
.btn-success |
Success button |
.btn-info |
Info button |
.btn-warning |
Warning button |
.btn-danger |
Danger button |
.btn-light |
Light button |
.btn-dark |
Dark button |
.btn-link |
Link-style button |
.btn-block |
Full-width button |
.btn-lg |
Large button |
.btn-sm |
Small button |
.btn-xs |
Extra small button |
6. Forms
Bootstrap provides a range of input types, layouts, and validation states for forms. Some common form classes include:
| Class | Description |
.form-control |
Apply to form controls for default styles |
.form-group |
Group label and control |
.form-inline |
Inline form layout |
.form-horizontal |
Horizontal form layout |
.form-check |
Checkbox or radio button |
.valid-feedback |
Show when input is valid |
.invalid-feedback |
Show when input is invalid |
7. Tables
Bootstrap tables are responsive and come with various classes for styling:
| Class | Description |
.table |
Base class for all tables |
.table-striped |
Striped rows |
.table-bordered |
Borders on all sides |
.table-hover |
Hover state for rows |
.table-sm |
Smaller table (dense) |
8. Navbars
Bootstrap's navigation bar (navbar) component is a responsive component that adapts its layout based on the device's screen size. Common classes include:
| Class | Description |
.navbar |
Base class for all navbars |
.navbar-expand |
Make the nav horizontal at all breakpoints |
.navbar-expand-sm |
Make the nav horizontal from small up |
.navbar-expand-md |
Make the nav horizontal from medium up |
.navbar-expand-lg |
Make the nav horizontal from large up |
.navbar-expand-xl |
Make the nav horizontal from extra large up |
.navbar-dark |
Dark navbar variant |
.navbar-light |
Light navbar variant |
.navbar-brand |
Brand logo or name |
9. Modals
Modals are dialog boxes that can be triggered by a button or link and contain content that requires user interaction before proceeding. Key classes include:
| Class | Description |
.modal |
Base class for all modals |
.modal-dialog |
Centered modal dialog |
.modal-content |
Content of the modal |
.modal-header |
Top section of header |
.modal-title |
Text inside header |
.modal-body |
Main content area of modal |
.modal-footer |
Footer section |
.modal-close |
Close button icon |
Questions and Answers
Q1: How do I create a responsive grid layout with two equal columns using Bootstrap?
A1: To create a responsive grid layout with two equal columns, you can use the following HTML structure with appropriate Bootstrap classes:
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
This code will create two columns that are each half the width of the container on medium and larger screens. On smaller screens, the columns will stack vertically.
Q2: What does the.navbar-expand class do in a Bootstrap navigation bar?
A2: The.navbar-expand class is used to make the navigation bar horizontal on all breakpoints. This means that the navigation items will not stack vertically on any screen size, providing a consistent horizontal layout across devices. If you want the nav bar to collapse into a vertical format on smaller screens, you should use one of the other.navbar-expand classes, such as.navbar-expand-md, which makes the nav horizontal from medium screens upwards.
各位小伙伴们，我刚刚为大家分享了有关“bootstrap api chm”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/714608.html
微信扫一扫 