Bootstrap3 API CHM，探索其功能与应用
Bootstrap 3 API Cheat Sheet
Introduction
Bootstrap is a popular front-end framework for developing responsive and mobile-first websites. This cheat sheet provides a quick reference to the most commonly used classes, components, and utilities in Bootstrap 3. Whether you are new to Bootstrap or need a quick refresher, this guide will help you streamline your development process.
Layout
Grid System
Bootstrap's grid system uses a series of containers, rows, and columns to create responsive layouts. It's built with a 12-column grid, making it easy to create complex layouts.
| Class Prefix | Description | Example |
.col-xs | Extra small devices (phones, less than 768px) | .col-xs-12 |
.col-sm | Small devices (tablets, 768px and up) | .col-sm-6 |
.col-md | Medium devices (desktops, 992px and up) | .col-md-4 |
.col-lg | Large devices (large desktops, 1200px and up) | .col-lg-3 |
Example
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">Column 1</div>
<div class="col-xs-12 col-sm-6 col-md-4">Column 2</div>
<div class="col-xs-12 col-sm-6 col-md-4">Column 3</div>
</div>
</div>Components
Buttons
Bootstrap includes several types of buttons for different contexts. You can customize their appearance using various classes.
| Class | Description | Example |
.btn | Standard button | |
.btn-primary | Primary action button | |
.btn-success | Successful action button | |
.btn-info | Informational button | |
.btn-warning | Warning button | |
.btn-danger | Dangerous action button | |
Forms
Bootstrap provides styles for forms to ensure they look good on all devices.
| Class | Description | Example |
.form-control | Apply to form controls for styling | |
.form-group | Group label and control together | |
.has-error | Add error state | |
Utilities
Text Alignment
Bootstrap offers utility classes for text alignment within any element.
| Class | Description | Example |
.text-left | Align text to the left | |
.text-center | Center align text | |
.text-right | Align text to the right | |
.text-justify | Justify text | |
.text-nowrap | Prevent text from wrapping | |
Visibility Classes
These classes control the visibility of elements based on screen size.
| Class | Description | Example |
.visible-xs | Always visible | Always visible |
.visible-sm | Visible on small devices | Visible on small devices |
.visible-md | Visible on medium devices | Visible on medium devices |
.visible-lg | Visible on large devices | Visible on large devices |
.hidden-xs | Hidden on extra small devices | Hidden on extra small devices |
.hidden-sm | Hidden on small devices | Hidden on small devices |
.hidden-md | Hidden on medium devices | Hidden on medium devices |
.hidden-lg | Hidden on large devices | Hidden on large devices |
Colors
Bootstrap comes with a set of predefined color classes that can be applied to any element.
| Class | Description | Example |
.text-muted | Set text to a muted grey color | |
.text-primary | Set text to primary color | |
.text-success | Set text to success color | |
.text-info | Set text to info color | |
.text-warning | Set text to warning color | |
.text-danger | Set text to danger color | |
Questions and Answers
Q1: How do I make a button disabled in Bootstrap?
A1: You can use thedisabled attribute along with the appropriate button classes to disable a button:
<button class="btn btn-primary" disabled>Disabled Button</button>
This renders a primary button that is visually styled as disabled and non-interactive.
Q2: How can I center an element horizontally using Bootstrap?
A2: To center an element horizontally, you can use the.text-center utility class:
<div class="text-center"> <h1>Centered Heading</h1> </div>
Alternatively, you can use the grid system to center elements by placing them in a column with offset classes, like so:
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4">Centered Content</div>
</div>
</div>到此，以上就是小编对于“bootstrap3 api chm”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
暂无评论，1人围观