responsive webdesign mit bootstrap

Download Responsive Webdesign mit Bootstrap

Post on 12-Jun-2015

706 views

Category:

Software

8 download

Embed Size (px)

DESCRIPTION

Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.

TRANSCRIPT

  • 1. Responsive Webdesign mit Bootstrap Gregor Biswanger | Freier Trainer, Consultant und Autor about.me/gregor.biswanger

2. ber mich Grnder von CleverSocial.de Freier Consultant und Trainer Schwerpunkte .NET-Architektur, Agile Prozesse, XAML, Web und Cloud Technologieberater fr die Intel Developer Zone Sprecher auf Konferenzen und User Groups Freier Autor fr heise.de, dotnetpro, WindowsDeveloper und viele weitere Fachmagazine Video-Trainer bei video2brain und Microsoft Gregor Biswanger Microsoft MVP fr Client App Dev Intel Black Belt dotnet-blog.net about.me/gregor.biswanger 3. Unser Reiseplan Responsive Design Was ist das? Geschichte Was luft schlecht? Bootstrap Geschichte Einfhrung Best Practices 4. Responsive Design 5. Das ist Responsive Design http://daserste.de http://howtowat.ch 6. Das ist KEIN Responsive Design http://www.rtl2.de oder http://Lingscars.com 7. Responsive Design Regeln Oberflche passt sich der Device-Gre an Oberflche muss nicht zustzlich gezoomt werden Oberflche lsst sich passend zum Device mit Maus/Tastatur oder Touch bedienen 8. Eine kleine Geschichte zum Thema Responsive 9. Das Web war schon immer Responsive! 10. Der Aufbau vom Layout Frameset -> Tabellen -> Div -> Tabellen -> Div Standard Auflsung von 800 x 600 1024 x 768 11. Mobile First Responsive Design So klein wie mglich anfangen Idee von Luke Wroblewski (lukew.com) 12. Media Queries @media all { #banner, #content { text-align:center; } #img_banner { max-width:95%; } } @media screen and (max-width: 480px) { #img_banner { border:double 10px #0000FF; } #content { font-size:80%; color:#0000FF; } } http://cssmediaqueries.com 13. Simulatoren http://xdk.intel.com 14. Der Fluch von Responsive Design 15. Der Fluch von Responsive Design Das aktuelle Design passt nicht dazu Wir sind gar keine Designer Stndige Seiteneffekte Cross-Browser Probleme Zu aufwndig Fazit: Ist es wirklich ntig? 16. Twitter ging es genauso 17. August 2011 war die Geburtsstunde von Bootstrap! 18. Die Eltern von Bootstrap Jacob Thornton 19. Bootstrap 3.0 UI Framework frs Web Open-Source auf GitHub Basiert auf CSS3 und JavaScript Baut auf HTML5 auf Untersttzt alle gngigen Browser (Sogar IE7, Safari und Opera kompatibel) 20. Die ersten Schritte Download unter getbootstrap.com Oder ber NuGet Ab ASP.NET MVC 5 sogar inklusive 21. Bootstrap im Einsatz! (DEMO) 22. Mit Bootstrap Responsive Zurck zu Tabellen aber mit Div durch das Bootstrap Grid-System Besteht aus 12 Spalten 23. Das Bootstrap Grid 24. Das Bootstrap Grid col-xx-6 col-xx-6 col-xx-4 col-xx-4 col-xx-4 col-xx-3 col-xx-3 col-xx-3 col-xx-3 col-xx-9 col-xx-3 col-xx-9 col-xx-offset-2 25. Multiple Grids col-lg-xx >= 1200px col-md-xx >= 992px col-sm-xx >=768px col-xs-xx < 768px 26. Bootstrap Steuerelemente 27. Bootstrap Customizing 28. Bootstrap Themes http://bootswatch.com 29. FRAGEN? 30. Vielen Dank! http://about.me/Gregor.Biswanger Ich freue mich auf Ihr Feedback!