Bootstrap how it can help you build better websites
•Download as PPTX, PDF•
0 likes•234 views
This document discusses Bootstrap, a free front-end framework for building responsive, mobile-first websites. Bootstrap includes HTML and CSS templates for common elements like typography, forms, buttons, navigation, and more. It also contains optional JavaScript plugins. Bootstrap allows developers to easily create responsive designs that automatically adjust for different screen sizes from phones to desktops. The document provides examples of how to implement various Bootstrap components like grids, typography, tables, forms, and images.
Recommended
More Related Content
Similar to Bootstrap how it can help you build better websites
Similar to Bootstrap how it can help you build better websites (20)
Recently uploaded
Recently uploaded (20)
Bootstrap how it can help you build better websites
- 2. A (web) UI framework provides a set of CSS classes and/or Javascript functions that: • Simplify the development of layout • Provide an attractive look-and-feel • Provide consistent results across browsers.
- 4. Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs
- 5. Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
- 8. Design: Build responsiveness into your websites and applications Content: Think about content from a mobile first perspective
- 10. There are currently three types of "hosts" for modern Internet applications: › Laptops operating system irrelevant (use browser) normal size screens (~1280 pixels wide) large screens (~2500+ pixels wide) › Tablets Two operating systems (iOS, Android) typical size screens (~768 pixels wide) › Phones Three operating systems (iOS, Android, Windows) small screen sizes (480 – 640 pixels wide)
- 11. A responsive website does not make responsive content Curate your content down to its essential points Consider the needs of the mobile user first
- 12. Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
- 16. Create your beginning project HTML5 code To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element
- 18. Container
- 20. Stacked-to-horizontal Mobile and desktop Mobile, tablet, desktop Column wrapping http://getbootstrap.com/css/#grid-example-basic
- 23. Create lighter, secondary text for heading (<small>)
- 24. Marked text (<mark>) Alignment classes
- 25. Naming Source /Quote Address http://www.w3schools.com/bootstrap/bootstrap_typography.asp http://getbootstrap.com/css/#type
- 26. Basic table
- 27. Striped Rows Bordered Table
- 28. Contextual Classes Responsive Table http://www.w3schools.com/bootstrap/bootstrap_tables.asp http://getbootstrap.com/css/#tables
- 29. Basic form
- 30. Inline form Horizontal form
- 32. Default button Options Button
- 33. Sizes
- 34. Responsive Images Image shapes