BOOTSTRAP
Presenter: SAKSHI ARORA, Mindfire Solutions
Date: 10/July/2014
Presenter: Sakshi Arora, Mindfire Solutions
Bootstrap Introduction

Twitter Bootstrap is the most popular front end
frame...
Presenter: Sakshi Arora, Mindfire Solutions
Why use Bootstrap?

Open source toolkit.

It supports responsive web design.
How it ensures responsiveness?
Bootstrap targets 4 devices on basis on pixel
value:
Mobile Phones
(<768px)
Tablets
(>=768p...
Why use Bootstrap?(cont..)

Easy to use.

Saves development time.

It allows user to customize inbuilt css classes.

M...
Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions

Rows must be placed within a .container (fixed-
width)...
Bootstrap 12 column layout is shown below:
Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions
.container cs...
Bootstrap Grid System
Grid Options available
Presenter: Sakshi Arora, Mindfire Solutions
Heading Extra small
devices
Phone...
Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions

* is value between 1 and 12.

Using col-md-* will app...
Grid System Example

Example:
<div class=”container”>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class=...
Bootstrap Toolkit

CSS classes available for Navigation Bar,
Carousel, Modal Dialog, Buttons, Labels,
Panels, Forms, Tabs...
http://www.tutorialspoint.com/bootstrap/
Presenter: Sakshi Arora, Mindfire Solutions
http://www.tutorialspark.com/twitterB...
Presenter: Sakshi Arora, Mindfire Solutions
Thank you
Upcoming SlideShare
Loading in …5
×

Twitter Bootstrap

1,142 views

Published on

This presentation focuses on the concept of creating responsive design via Bootstrap. In addition it also tries to explain various css classes available in Bootstrap.

Published in: Software
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,142
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
42
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Twitter Bootstrap

  1. 1. BOOTSTRAP Presenter: SAKSHI ARORA, Mindfire Solutions Date: 10/July/2014
  2. 2. Presenter: Sakshi Arora, Mindfire Solutions Bootstrap Introduction  Twitter Bootstrap is the most popular front end framework for faster and easier web development.  Allows user to develop responsive application using HTML, CSS and Javascript.  Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.  It is an open source product.  Download bootstrap toolkit from following link: http://getbootstrap.com/
  3. 3. Presenter: Sakshi Arora, Mindfire Solutions Why use Bootstrap?  Open source toolkit.  It supports responsive web design.
  4. 4. How it ensures responsiveness? Bootstrap targets 4 devices on basis on pixel value: Mobile Phones (<768px) Tablets (>=768px) Medium Desktop Devices (>=992px) Large Desktop Devices (>=1200px) Media queries are written on basis of these pixel value(refer to bootstrap css). Presenter: Sakshi Arora, Mindfire Solutions
  5. 5. Why use Bootstrap?(cont..)  Easy to use.  Saves development time.  It allows user to customize inbuilt css classes.  Mobile first approach.  Supported by popular browsers. Presenter: Sakshi Arora, Mindfire Solutions
  6. 6. Bootstrap Grid System Presenter: Sakshi Arora, Mindfire Solutions  Rows must be placed within a .container (fixed- width) for proper alignment and padding.  Rows can be created via .row css class.  Column css classes are used for creating columns in rows.  Bootstrap grid system span across 12 columns of screen.
  7. 7. Bootstrap 12 column layout is shown below: Bootstrap Grid System Presenter: Sakshi Arora, Mindfire Solutions .container css class .row css class eg: .col-xs-1 (refer next slide)
  8. 8. Bootstrap Grid System Grid Options available Presenter: Sakshi Arora, Mindfire Solutions Heading Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Container Class None (auto) 750px 970px 1170px Column Class .col-xs-* .col-sm-* .col-md-* .col-lg-*
  9. 9. Bootstrap Grid System Presenter: Sakshi Arora, Mindfire Solutions  * is value between 1 and 12.  Using col-md-* will apply specified column layout to medium desktop and large devices but not on extra small(phone) and small devices(tablets). Phone and tablets will have vertical alignment.  Using col-xs-* will apply specified column layout on all devices.
  10. 10. Grid System Example  Example: <div class=”container”> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>  Output: Presenter: Sakshi Arora, Mindfire Solutions .col-md-6 .col-md-6
  11. 11. Bootstrap Toolkit  CSS classes available for Navigation Bar, Carousel, Modal Dialog, Buttons, Labels, Panels, Forms, Tabs, ProgressBar and many more. They form part of bootstrap css.  Then there are no. of Javascript methods and events available for Modals, Dropdown, Scrollspy, Tabs and many more. They form part of bootstrap js.  There are glyphicons available in fonts folder of toolkit. Refer to next page reference links to have detailed study. Presenter: Sakshi Arora, Mindfire Solutions
  12. 12. http://www.tutorialspoint.com/bootstrap/ Presenter: Sakshi Arora, Mindfire Solutions http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Modals.php http://getbootstrap.com/
  13. 13. Presenter: Sakshi Arora, Mindfire Solutions Thank you

×