Your SlideShare is downloading. ×
Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twitter Bootstrap

543
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. …

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
543
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BOOTSTRAP Presenter: SAKSHI ARORA, Mindfire Solutions Date: 10/July/2014
  • 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. Presenter: Sakshi Arora, Mindfire Solutions Why use Bootstrap?  Open source toolkit.  It supports responsive web design.
  • 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. 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. 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. 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. 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. 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. 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. 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. http://www.tutorialspoint.com/bootstrap/ Presenter: Sakshi Arora, Mindfire Solutions http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Modals.php http://getbootstrap.com/
  • 13. Presenter: Sakshi Arora, Mindfire Solutions Thank you