Bootstrap

Bootstrap is the complete mobile-first user interface design framework for websites and mobile applications. It is created by a designer and developer at twitter.com. It is one of the most popular front-end and open source tools in the world.

Bootstrap is fully responsive with mobile-first motto which is developed along with HTML, Javascript and css(cascading style sheet).

Why should we use Bootstrap?

It increases development speed : if you’re a professional web/app developer you need it for faster completion of your project work.
Responsiveness: with increase in number of internet user on mobile phones worldwide, there is a huge demand for it. Availability of readymade classes with lots of resolutions to fit in any device size.
Customizable: It is fully tailor made according to your application requirements.

You can customize like:

a) Custom css (font, forms, color, tables, buttons etc.)
b) components (navigation bar, glyphicons, input elements, breadcrumbs etc.)
c) javascript components (slider or carousel, modal, tooltips, dropdowns, animations etc.)

Consistency: with consistency accross all devices.
Support: There are many community of developer who help you always.

CDN sites for bootstrap supporting files

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Simple Example

Create a following bootstrap example

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width,

 initial-scale=1">

 <link rel="stylesheet"

 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/cs

 s/bootstrap.min.css">

 <script

 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque

 ry.min.js"></script>

 <script

 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b

 ootstrap.min.js"></script>

 </head>

 <body>

 <h1> BootStrap Button example </h1>

 <button type="button" class="btn btn-default"> Default

 </button>

 <button type="button" class="btn btn-primary"> Primary

 </button>

 <button type="button" class="btn btn-success"> Success

 </button>

 <button type="button" class="btn btn-warning"> Warning

 </button>

 <button type="button" class="btn btn-danger"> Danger

 </button><hr>

 <h2> Code highlighter Example </h1>

 <h3> Web technologies: <code>html </code>, <code>

 php </code>, <code>mysql </code> etc. </h3>

 </body>

 </html>

2. View in browser (as following )

Bootstrap NavBar

Bootstrap

Why should we use Bootstrap?

You can customize like:

CDN sites for bootstrap supporting files

Related Posts