Latest web development tutorials

Bootstrap Profile

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, JAVASCRIPT's.

history

Bootstrap byTwitter'sMark Otto andJacob Thorntondevelopment. Bootstrap is August 2011 published on GitHub open source products.

Why Bootstrap?

  • Mobile First: since Bootstrap 3 onwards, the framework includes libraries throughout the mobile device priority of style.
  • Browser support: All major browsers support Bootstrap.

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • Easy to use: as long as you have a basic knowledge of HTML and CSS, you can begin to learn Bootstrap.
  • Responsive design: Bootstrap Responsive CSS capable of adaptive desktops, tablets and mobile phones.For more information about responsive design, available Bootstrap responsive design .

    Responsive design

  • It developers create simple interface provides a unified solution.
  • It includes a powerful built-in components, easy to customize.
  • It also provides Web-based customization.
  • It is open source.

Bootstrap package contents

  • 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>

try it"

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>

try it"

Click the "Try" button to see how it works.