1 / 27

Twitter Bootstrap and jQuery

Twitter Bootstrap and jQuery. Ashish Kulkarni. The Problem. Website Front-end development is a painful process. For better SEO, we use <div> tags and HTML only for content and CSS only for presentation and layout.

guinevere-madden
Download Presentation

Twitter Bootstrap and jQuery

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. Twitter Bootstrap and jQuery Ashish Kulkarni www.webdesignglasgow.eu

  2. The Problem • Website Front-end development is a painful process. • For better SEO, we use <div> tags and HTML only for content and CSS only for presentation and layout. • CSS based layouts are difficult to create and maintain and don’t render uniformly across different browsers. www.webdesignglasgow.eu

  3. The Solution – Twitter Bootstrap www.webdesignglasgow.eu

  4. Twitter Bootstrap • Sleek, intuitive, and powerful front-end framework for faster and easier web development. • Very easy to use and based on latest Web Development Standards for screen and form design. • Very lightweight – it can be as little as just one CSS and one JS file. www.webdesignglasgow.eu

  5. Customise and download www.webdesignglasgow.eu

  6. Why use Bootstrap? • Getting started page provides a good start • Easy to create a layout – content only, left menu + content, right menu + content, etc. • Beautiful and functional built-in components which are easy to customise • Built-in Javascript to support components • Very low learning curve • Works well with jQuery and other javascript libraries www.webdesignglasgow.eu

  7. Bootstrap Components www.webdesignglasgow.eu

  8. Bootstrap Javascript www.webdesignglasgow.eu

  9. Why use jQuery with Bootstrap? • jQuery is the defacto standard javascript library. • It works across most browser platforms. • It helps compliment Bootstrap’s built-in functionality really well. www.webdesignglasgow.eu

  10. Getting started – Home page www.webdesignglasgow.eu

  11. Landing page www.webdesignglasgow.eu

  12. Forms www.webdesignglasgow.eu

  13. Tables www.webdesignglasgow.eu

  14. Gallery www.webdesignglasgow.eu

  15. The Grid System www.webdesignglasgow.eu

  16. Code – Top Menu www.webdesignglasgow.eu

  17. Code – Left Menu www.webdesignglasgow.eu

  18. Code – Main Content (Form) www.webdesignglasgow.eu

  19. jQuery and BootStrap • Majority of jQuery plugins work well with BootStrap • Datatables – to display tabular data • jqPlot – to display graphs • jQuery Validation – to validate form input www.webdesignglasgow.eu

  20. What next? • Tutorial - http://www.w3resource.com/twitter-bootstrap/tutorial.php www.webdesignglasgow.eu

  21. What next? • Themes - https://wrapbootstrap.com/ www.webdesignglasgow.eu

  22. What next? • Resources - http://bootsnipp.com/resources www.webdesignglasgow.eu

  23. What next? • Web based editor - http://jetstrap.com/ www.webdesignglasgow.eu

  24. What next? • jQuery UI Bootstrap - http://addyosmani.github.com/jquery-ui-bootstrap/components.html www.webdesignglasgow.eu

  25. What next? • Yii - http://www.cniska.net/yii-bootstrap/setup.html www.webdesignglasgow.eu

  26. What next? • WordPress theme - http://320press.com/wpbs/ www.webdesignglasgow.eu

  27. Questions • ashish@webdesignglasgow.eu • 07748107492 www.webdesignglasgow.eu

More Related