1 / 14

Know the reason behind choosing Bootstrap as CSS framework

Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization

omkarsoft
Download Presentation

Know the reason behind choosing Bootstrap as CSS framework

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Bootstrap Source Code: 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.

  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

More Related