The best Bootstrap Profile Tutorial In 2024, In this tutorial you can learn
What is Bootstrap?,history,Why Bootstrap?,Bootstrap package contents,Online examples,Bootstrap examples,More examples,Bootstrap Example 2,
Bootstrap Profile
Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, JAVASCRIPT's.
Bootstrap byTwitter'sMark Otto andJacob Thorntondevelopment. Bootstrap is August 2011 published on GitHub open source products.
- The basic structure: Bootstrap provides the basic structure of the link style background with a grid system.This will be explained in detailBootstrap basic moiety.
- CSS: Bootstrap comes with the following features: global CSS settings, define the basic HTML element styles, scalable class, and an advanced grid system.This section will explain in detail theBootstrap CSS.
- Components: Bootstrap contains a dozen reusable components for creating images, drop-down menus, navigation, alert box pop-up box, and so on.This will be explained in detailthe layout of the component parts.
- JavaScript widget: Bootstrap contains a dozen custom jQuery plugin.You can include all plug-ins, these plug-ins can also contain individually. This will be explained in detailBootstrap plug part.
- Customization: You can customize Bootstrap components, LESS variables and jQuery plug-in to get your own version.
Online examples
Bootstrap tutorial site contains hundreds of examples.
You can use our online editor online editor code, and click the Run button to view the results.
Bootstrap examples
<Div class = "container">
<Div class = "jumbotron">
<H1> My first Bootstrap page </ h1>
<P> resets the window size to view the responsive effect! </ P>
</ Div>
<Div class = "row">
<Div class = "col-sm-4 ">
<H3> Column 1 </ h3 >
<P> learning is not only technology, but also a dream! </ P>
<P> again Niubi dreams, but also give way and you like stick sucker! </ P>
</ Div>
<Div class = "col-sm-4 ">
<H3> Column 2 </ h3 >
<P> learning is not only technology, but also a dream! </ P>
<P> again Niubi dreams, but also give way and you like stick sucker! </ P>
</ Div>
<Div class = "col-sm-4 ">
<H3> Column 3 </ h3 >
<P> learning is not only technology, but also a dream! </ P>
<P> again Niubi dreams, but also give way and you like stick sucker! </ P>
</ Div>
</ Div>
</ Div>
More examples
Bootstrap Example 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>
Click the "Try" button to see how it works.