FMI Workshop 2016 - Responsive Webdesign mit Bootstrap

Webseiten müssen heutzutage auf Bildschirmen mit allen erdenklichen Auflösungen eine gute Figur machen. Bootstrap ist ein open source HTML/CSS/Javascript Framework, das einem dabei hilft Webseiten zu gestalten, die von Smartphone bis PC Monitor durch Usability und Aussehen überzeugen. In diesem Workshop lernt ihr wie sich Bootstrap in der Praxis einsetzen lässt.

Referentin: Eva Schnider - eva.schnider (at) unibas.ch

Transcript

1. Responsive Webdesign mit Bootstrap
2. Responsive – was ist das? 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider “Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.”
3. Responsive – was ist das? Gegenbeispiele: • http://informatik.unibas.ch/willkommen/ • https://math.unibas.ch/home/ Beispiele: • https://www.unibas.ch/ 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
4. Responsive – wieso? 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
5. Bootstrap – was ist das? “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
6. Bootstrap - wieso? Vorteile: • Einfach: Basiskentnisse in HTML und CSS reichen, um Bootstrap zu benutzen • Responsive: Bootstraps CSS passt sich an Smartphones, Tablets, und Desktops an • Mobile-first: Ab Bootstrap 3 sind mobile-first Stile Teil des Kern-Frameworks. • Browser Kompatibilität: Bootstrap ist mit allen modernen Browsern kompatibel 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
7. Bootstrap – wieso nicht? Nachteile: • Fixe Anzahl Spalten im Grid • Abhängig von jQuery • Customizing ist eher aufwändig • Webseiten mit Bootstrap sind oft sehr schnell als solche erkennbar 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
8. Bootstrap – wer hat es erfunden? • Die Schweizer • Ab Mitte 2010 von Designern und Entwicklern von Twitter entwickelt. • Erster Release August 2011 • 780 Contributors bei Github • Opensource mit MIT Lizenz 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
9. Bootstrap - Basics • Einbinden • Gridsystem • Bilder • Navigation • Tutorials und Templates 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
10. Bootstrap - Einbinden CDN (Content Delivery Network): Vorteil: Wird oft verwendet, wird deshalb bei vielen Nutzern schon aus dem Cache geladen. Download : http://getbootstrap.com/ Vorteil: Custom builds möglich. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></sc ript> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></ script>
11. Bootstrap - Einbinden Demo 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
12. Bootstrap - Gridsystem 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider • Seite wird unterteilt in Reihen (rows) • Jede Reihe wird in 12 Spalten eingeteilt. Man kann mehrere Spalten zusammenfassen.
13. Bootstrap - Gridsystem Das Gridsystem hat 4 kominierbare Klassen: • xs (Smartphones) • sm (Tablets) • md (Desktops) • lg (grössere Desktops) Klassen skalieren hoch: Wenn z.B. die selben Proportionen für xs und sm gewünscht sind, braucht man nur xs einzurichten. Beispiel: bei xs,sm möchte man wenig Rand auf beiden Seiten, aber viel Platz für z.B eine Tabelle. Bei md, lg hat man mehr Platz und kann den Rand grösser halten. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
14. Bootstrap - Gridsystem • Stacked Bei Fenstern der Grösse xs (<768px breit) werden alle Spalten vertikal untereinander dargestellt. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider • Horizontal Bei grösseren Fenstern werden die Spalten ab dem (selbst definierten) Breakpoint in einer Reihe horizontal nebeneinander dargestellt.
15. Bootstrap – Gridsystem Demo 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
16. Bootstrap - Bilder • <img>: Grösse von Bildern wird automatisch angepasst bei Verwendung der .img- responsive Klasse 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider <img class="img-responsive" src="foo.jpg" alt="Chania">
17. Bootstrap - Videos • <iframe>, <embed>, <video>, and <object>: Verwenden der .embed-responsive-item Klasse. Das Video skaliert dann bezgl. des parent divs. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.foo.com/embed/bar"></iframe> </div>
18. Bootstrap - Bilder Demo 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
19. Bootstrap - Navigation • sm, md, lg: Navigationszeile wird in voller Länge angezeigt. • xs: Die einfachste Form der Bootstrap Navigationszeile stackt vertikal bei kleinen Bildschirmen. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
20. Bootstrap – Navigation • xs: Die weiterführende Version der Navigation kollabiert. Es bleibt bei xs Fenstern nur ein Button übrig, der via Klick das Menü wieder sichtbar macht. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
21. Bootstrap - Navigation • Default: Die Navbar verschwindet beim Scrollen. • Navbar-fixed-top: Die Navbar bleibt stets sichtbar am oberen Bildschirmrand. • Navbar-fixed-bottom: Die Navbar bleibt stets sichtbar am unteren Bildschirmrand. 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
22. Bootstrap - Navigation Die einfache Navigationszeile wird kreiert mittels: 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> </div> </nav>
23. Bootstrap - Navigation Demo 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider
24. Bootstrap – Tutorials und Templates • http://getbootstrap.com/getting-started/ • http://www.w3schools.com/bootstrap/ 27.10.2016 FMI Workshop - Responsive Webdesign mit Bootstrap - Eva Schnider