Know the reason behind choosing bootstrap as css framework
Download as PPT, PDF•1 like•553 views
The document discusses the advantages of using Bootstrap as a CSS framework for web design and development, highlighting its ease of use, time-saving capabilities, responsive grid system, and integration with existing styles. It emphasizes the availability of pre-styled components, bundled JavaScript plugins, and comprehensive documentation, making it accessible for both beginners and experienced developers. Additionally, it notes Bootstrap's future-proofing with technologies like HTML5 and CSS3, along with a brief overview of themes and templates available for download.
Know the reason behind choosing bootstrap as css framework
- 1. Omkarsoft website design and development Bangalore
- 2. Know the reason behind choosing Bootstrap as CSS framework
- 3. Why Developers designed CSS Framework? • Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization. • Thanks to hundreds of hours spent by some developers and companies, we now have dozens of CSS Frameworks to choose from. • Among all the available CSS frameworks out there, Bootstrap is the most widely used.
- 4. Why should we choose Bootstrap? The Following are the great reasons to choose Bootstrap 1.Easy to Start: Bootstrap offers LESS files for those of us who know how to use it, but it also provides the plain old CSS file for those don’t want to use CSS pre-processing. 2. Saves Time: The Bootstrap libraries offer ready-made pieces of code that can pump life into a website. Web developer doesn’t have to spend time laboriously working out and writing code. 3. Offers Best Grid System: Bootstrap is built on responsive 12-column grids, layouts and components. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
- 5. Very easy to handy when you want to hide some content based on screen size. Whether you need a fixed grid or a responsive, its only matter of a few changes. 4. Integration: If we want to style a table, all you need to do is take the styles you need and copy them to the CSS file you’re working with. Integration is simple, fast and easy to accomplish and once you’re done you can play with your design to your heart’s content.
- 6. 5. Provided Basic Styling: A website has many different elements such as Headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes. The HTML elements for which styles are provided are: Typography Code Tables Forms Buttons Images Icons
- 7. 6. Pre styled Components: Styling of every single element follows a consistent theme and if you know LESS, then customizing it takes just few minutes. Some of the pre styled components are listed below • Dropdowns • Button Groups • Navigation Bar • Breadcrumbs • Labels & Badges • Alerts • Progress Bar
- 8. 7.Responsiveness: Bootstrap is responsive. Bootstrap adapts to the change in platforms with super speed and efficiency. 8. Bundled JavaScript plugins: Numerous JavaScript plugins are bundled in the bootstrap package. If your project requires sliders, tabs, accordions, then you no longer have to try and test numerous different plugins across the web. Adding these functionalities is just a matter of adding few lines of code. 9. Good Documentation: It provides a great documentation with examples and demo that makes it more easier for even someone new. 10.Future Compatibility: For instance both HTML5 and CSS3 are things that are going to be big in the future. It has the potential to become a yardstick for web developers in the years to come.
- 9. Download Bootstrap Files: • Download the files from https://github.com/twbs/bootstrap and after unzipping, include the files in the head of your HTML document. • The example HTML document includes the bootstrap framework with its default styling and every single components and JavaScript plugins.
- 10. Documentation: • Bootstrap’s documentation is impressive. Become familiar with elements of bootstrap by using the documentation. • Bootstrap gives you a head start because you don’t have to play with everything to learn and instead can find information on just about anything through the documentation. • Demo: http://getbootstrap.com/getting-started/#examples • Download: http://getbootstrap.com • Documentation: http://getbootstrap.com/getting-started
- 11. Bootstrap themes: Few bootstrap themes and templates were mentioned below : • Unify – Responsive Website Template • REEN – Made for Designers – Portfolio • Kanzi – Multi-Purpose Template • Boomerang – Multipurpose Template • Ace – Responsive Admin Template
- 12. If you downloaded the Bootstrap source code then the file structure would be as follows: • The files under less/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and icon fonts (respectively). • The dist/ folder includes pre- compiled bootstrap section. • docs-assets/, examples/, and all *.html files are Bootstrap documentation. Bootstrap Source Code:
- 13. Conclusion: • Bootstrap is designed to work equally well on both desktop and mobile devices. • Don’t get the idea that Bootstrap forces you to use a limited number of layouts and special features. • It’s actually quite flexible.
- 14. Thank You OMKARSOFT website design and development Bangalore published by www.omkarsoft.com