Bootstrap Introduction
What is Bootstrap?
Bootstrap is a front-end framework for quickly developing Web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.
History
Bootstrap wasTwitterofMark OttoandJacob ThorntonDeveloped by. Bootstrap is an open source product released on GitHub in August 2011.
Why Use Bootstrap?
- Mobile-firstSince Bootstrap 3, the framework includes mobile-first styles throughout the entire library.
- Browser supportAll major browsers support Bootstrap.
- Easy to get startedAs long as you have basic knowledge of HTML and CSS, you can start learning Bootstrap.
- Responsive designBootstrap's responsive CSS can adapt to desktops, tablets, and phones. For more about responsive design, seeBootstrap Responsive Design。
- It provides a clean and unified solution for developers to create interfaces.
- It contains powerful built-in components that are easy to customize.
- It also offers web-based customization.
- It is open source.
Bootstrap Package Contents
- Basic structureBootstrap provides a basic structure with a grid system, link styles, and background. This will beBootstrap Basic Structureexplained in detail in the section.
- CSSBootstrap comes with the following features: global CSS settings, styles for basic HTML elements, extensible classes, and an advanced grid system. This will beBootstrap CSSexplained in detail in the section.
- ComponentsBootstrap includes more than a dozen reusable components for creating images, dropdown menus, navigation, alerts, popovers, and so on. This will beLayout Componentsexplained in detail in the section.
- JavaScript PluginsBootstrap includes more than a dozen custom jQuery plugins. You can include all the plugins directly, or include them one by one. This will beBootstrap Pluginsexplained in detail in the section.
- CustomizationYou can customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version.
Online Examples
This site's Bootstrap tutorial contains hundreds of examples.
You can use our online editor to edit code online and click the Run button to view the result.
Bootstrap Examples
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize the window to see the responsive effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>What you learn is not only technology, but also dreams!</p>
<p>No matter how great the dream, it can't withstand your foolish persistence.</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>What you learn is not only technology, but also dreams!</p>
<p>No matter how great the dream, it can't withstand your foolish persistence.</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>What you learn is not only technology, but also dreams!</p>
<p>No matter how great the dream, it can't withstand your foolish persistence.</p>
</div>
</div>
</div>
Try it »
More Examples
Bootstrap Examples 2
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>
Try it »
Click the "Try it" button to see how it works.
Other Extensions