Bilder

Responsive Bilder Bootstrap

Bilder in Bootstrap 3 können sich automatisch dem Bildschirm anpassen, wenn die Klasse .img-responsive hinzugefügt wird. Diese wendet max-width: 100%; und height: auto; auf das Bild an, so dass es sich wunderbar dem übergeordneten Element anpasst.

<img src="..." class="img-responsive" alt="Responsives Bild">

Automatisierte Bildgrößenwahl Corporate Media

Es besteht die Möglichkeit dem System eine Auswahl an Bildgrößen zur Verfügung zu stellen, so dass das System die optimale Bildgröße je nach Größe des umgebenden Containers selbst auswählt.

Will man das nicht nutzen, so fügt man wie gewohnt die Bilder ein und es wird nur mit dem im src angegebenen Bildpfad gearbeitet.

Server Redirect einrichten

Aber auch dann muss umbedingt noch der Server konfiguriert werden, so dass nicht gefundene @2x Bilder auf die normalen Bilder weitergeleitet werden. (Siehe Retina Unterstützung)

Anwendung

Möchte man die Vorteile der optimierten Bildgrößenauswahl nutzen, so müssen für jedes Bild zusätzlich folgende Größen angelegt werden:

1. Thumbnail:

  • Dies ist das Bild was als Platzhalter zuerst beim Aufrufen der Seite geladen wird.
  • Von daher muss es in dem src Attribute des <img> gespeichert werden.
  • Es wird per javascript dann sofort durch das optimalste Bild ersetzt, sollte von daher also eine möglichst kleine Dateigröße haben.

2. Small 480px:

  • Dies ist das kleinste Bild und es ist 480px breit.
  • Im <img> erhält es ein eigenes Attribute src-small

3. Medium 768px:

  • Dies ist die mittlere Bildgöße mit 768px Breite.
  • Im <img> erhält es ein eigenes Attribute src-medium

3. Large 1024px:

  • Dies ist die große Bildgöße mit 1024px Breite.
  • Im <img> erhält es ein eigenes Attribute src-large

4. Full:

  • Dies ist das Originalbild.
  • Es kann größer als das Large-Bild sein, sollte aber immer noch eine zumutbare bzw. ladbare Größe haben.
  • Ist es nicht möglich oder notwendig, das Bild in einen der größeren Größen zur Verfügung zu stellen, so kann das Originalbild auch jede andere kleinere Größe haben.
  • Im <img> erhält es ein eigenes Attribute src-full

Retina Unterstützung

Optimalerweise sollten alle Bilder auch in doppelter Auflösung und mit dem Zusatz @2x angelegt werden. Sie müssen nicht im <img> erwähnt werden. Näheres hierzu siehe Retina Unterstützung

<img 
    src="uploads/example-150x92.jpg"

    src-thumbnail="uploads/example-150x92.jpg"
    src-small="uploads/example-480x294.jpg"
    src-medium="uploads/example-768x471.jpg"
    src-large="uploads/example-1024x628.jpg"
    src-full="uploads/example.jpg"
 
    title="example"
    alt="example" 
    class="img-responsive"
/>

Wenn alle Dateien angelegt sind, ergeben sich folgende Bilddateien:

  • example.jpg
  • example-150.jpg
  • example-150@2x.jpg
  • example-480.jpg
  • example-480@2x.jpg
  • example-768.jpg
  • example-768@2x.jpg
  • example-1024.jpg
  • example-1024@2x.jpg

Es ist nicht notwendig, dass alle Größen angelegt sind

Je nach Bildmaterial ist es manchmal entweder nicht möglich oder auch nicht notwendig, dass das Bild in allen Größen angelegt wird.

Wichtig ist nur, dass die existierenden Bildgrößen in den jeweiligen <img> Attributen gespeichert sind und alle anderen Attribute ohne entsprechendes Bild gelöscht werden.

Beispielsweise:


<img 
    src="uploads/example-150x92.jpg"

    src-thumbnail="uploads/example-150x92.jpg"
    src-small="uploads/example-480x294.jpg"
    src-full="uploads/example.jpg"
 
    title="example"
    alt="example" 
    class="img-responsive"
/>

Hierbei würden es zum Beispiel nur folgende Dateien geben, wobei die Originaldatei beispielsweise 600px breit ist.

  • example.jpg
  • example-150.jpg
  • example-150@2x.jpg
  • example-480.jpg

Bei Gif Bildern wird immer das Originalbild verwendet

Es wird davon ausgegangen, dass ein Gif-Bild nur als animiertes Gif verwendet wird. Hierfür müssen nicht mehrere Versionen erstellt werden, da immer auf die Originalgröße zurückgegriffen wird.

Retina Unterstützung

Wird ein Retina Display erkannt, dann wird automatisch dem Bildnamen das @2x hinzugefügt und dieses Bild wird verwendet. Sollte es das Bild nicht geben, regelt der Server die Weiterleitung auf das normale Bild ohne den @2x Zusatz.

Server Redirect einrichten

Dieses Serververhalten muss auf jedem Server eingerichtet sein oder werden. Hierfür einfach folgendes in die .htaccess Datei im Hauptverzeichnis kopieren:

# if no @2x redirect to normal image

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} ^(.*)(@2x)(.jpg|.png)$ [NC]
RewriteRule ^(.*)@2x(.jpg|.png) $1$2 [L]

Bild-Slider ganz oben im Inhaltsbereich

Der Bild-Slider kombiniert Text mit einem Bild und integriert die thematisch passende Bereichsfarbe.

Es gibt eine Variante bei der der Text auf der farbigen Fläche neben dem Bild steht (Standard) und eine weitere bei der der Text auf dem Bild steht, wobei das Bild die gesamte Breite einnimmt.

Beispiel-Bilder auf der Startseite.

Keine Varianten in Smartphone-Ansicht

In der Smartphone-Ansicht gibt es diese Unterscheidung dann nicht mehr. Hier erscheint oben das Bild, darunter ein schmaler Dekorationsbalken und darunter der Text auf der gewählten Bereichsfarbe.

Der Bild-Slider basiert auf Bootstrap Karussell Komponente.

Verwendung

Der Bild-Slider wird direkt als erstes Element in den Content-Bereich eingebaut.

Für die Smartphone-Ansicht muss ein eigener Bild-Slider angelegt werden.

Die beiden Bild-Slider liegen untereinander und werden über die Klassen .hidden-xs und .visible-xs ein- bzw. ausgeblendet (Zeile 2).  Der Smartphone-Slider muss id="carousel-header-xs" und der Standard-Slider id="carousel-header" erhalten (Zeile 2).

Elemente

Jedes Slide-Item enthält die folgenden 3 Elemente:

  1. Slide Text .slider-text (beide Varianten)
  2. Slide Dekoration .slider-deco (Standard)
  3. Slide Bild .slider-image (Standard)

Für die Vollbild Variante ergeben sich folgende Klassen:

  1. Slide Text .slider-text (beide Varianten)
  2. Slide Dekoration .slider-deco-text-on-top (Vollbild)
  3. Slide Bild .slider-image-text-on-top (Vollbild)

Farben

Der Dekorationsbalken im Standard Bild-Slider ist 75% der als Hintergrund verwendeten Farbe.

Die Farbe des Dekorationsbalkens im Vollbild Bild-Slider ist 100%.

Die Klassennamen der verfügbaren Fraben sind hier aufgelistet.

Standard-Slider

<!-- content header element -->
<div id="carousel-header" class="carousel slide carousel-fade hidden-xs clearfix" data-ride="carousel" data-interval="8000">
    
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-header" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-header" data-slide-to="1" ></li>
    </ol>

    <div class="carousel-inner"><!-- Wrapper for slides -->                    

        <div class="item active color-hwk-green-dark item-0"><!-- slide -->
            <div class="container">
                <div class="col-md-4 col-sm-5 color-hwk-green-dark slider-text">
                    <h1>Beispiel Variante 1</h1>
                    <p class="lead">...</p>
                </div>
                <div class="col-sm-1 color-hwk-green-dark-75 slider-deco"></div>
                <div class="slider-image">
                    <p class="note inside">© Copyright Bild</p>
                    <img src="uploads/titel_standard-150x84.jpg" src-thumbnail='uploads/titel_standard-150x84.jpg' src-small='uploads/titel_standard-480x270.jpg' src-full='uploads/titel_beratung.jpg' title="Standard" class="img-responsive" />
                </div>
            </div>
        </div><!-- / slide -->
        
        <div class="item text-on-top item-2"><!-- slide -->
            <div class="container">
                <div class="col-sm-1 color-hwk-orange slider-deco-text-on-top"></div>
                <div class="col-md-6 col-sm-7 slider-text">
                    <h1>Beispiel Variante 2</h1>
                    <p class="lead padding-bottom-m">...</p>
                </div>
                <p class="note inside">© Copyright Bild</p>
                <div class="slider-image-text-on-top">
                    <img src="uploads/titel_textontop-150x84.jpg" src-thumbnail="uploads/titel_textontop-150x84.jpg" src-small="uploads/titel_textontop-480x270.jpg" src-medium="uploads/titel_textontop-768x432.jpg" src-large="uploads/titel_textontop-1024x577.jpg" src-full="uploads/titel_textontop.jpg" title="Text on Top" class="img-responsive" />                            
                </div>
            </div>                        
        </div><!-- / slide -->
    </div><!-- / Wrapper for slides -->    

    <!-- Controls  -->
    <a class="left carousel-control" href="#carousel-header" data-slide="prev"> <span class="glyphicon glyphicon-einfacher-pfeil-links"></span> </a>
    <a class="right carousel-control" href="#carousel-header" data-slide="next"> <span class="glyphicon glyphicon-einfacher-pfeil-rechts"></span> </a>
</div><!-- content header element -->

Smartphone-Slider

<!-- copy of content header element for mobile -->
<div id="carousel-header-xs" class="carousel slide carousel carousel-fade visible-xs" data-ride="carousel" data-interval="8000">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-header-xs" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-header-xs" data-slide-to="1" ></li>
    </ol>

    <div class="carousel-inner"><!-- Wrapper for slides -->
        
        <div class="item active color-hwk-green-dark">
            <div class="image-item">
                <img src="uploads/titel_standard-150x84.jpg" src-thumbnail='uploads/titel_standard-150x84.jpg' src-small='uploads/titel_standard-480x270.jpg' src-full='uploads/titel_beratung.jpg' title="Standard" class="img-responsive" />
                <p class="note inside right">© Copyright Bild</p>
            </div>
            <div class="color-hwk-green-dark-75 slider-deco"></div>
            <div class="color-hwk-green-dark slider-text">
                <h1>Beispiel Variante 1</h1>
                <!-- <p> not displayed on mobile -->
            </div>
        </div>

        <div class="item text-on-top color-hwk-orange">
            <div class="image-item">
                <img src="uploads/titel_textontop-150x84.jpg" src-thumbnail="uploads/titel_textontop-150x84.jpg" src-small="uploads/titel_textontop-480x270.jpg" src-medium="uploads/titel_textontop-768x432.jpg" src-large="uploads/titel_textontop-1024x577.jpg" src-full="uploads/titel_textontop.jpg" title="Text on Top" class="img-responsive" />
                <p class="note inside">© Copyright Bild</p>
            </div>
            <div class="color-hwk-orange-75 slider-deco"></div>
            <div class="color-hwk-orange slider-text">
                <h1>Beispiel Variante 2</h1>
                <!-- <p> not displayed on mobile -->
            </div>
        </div>
    </div><!-- / Wrapper for slides -->
            
    <!-- Controls  -->
    <a class="left carousel-control" href="#carousel-header-xs" data-slide="prev"> <span class="glyphicon glyphicon-einfacher-pfeil-links"></span> </a>
    <a class="right carousel-control" href="#carousel-header-xs" data-slide="next"> <span class="glyphicon glyphicon-einfacher-pfeil-rechts"></span> </a>
</div><!-- / copy of content header element for mobile -->

Besonderheiten

  • Es gibt keine Vollbild-Variante
  • Die Reihenfolge der Elemente ändert sich
  • Das Bild <img> benötigt keinen umschliessenden Container <div> und auch nicht die Klasse .slider-image

Bilder gleiche Dimensionen

Damit es zu keinen Problemen kommt, sollten die Bilder des Slides alle die gleiche Dimension haben. Ein Bild für die Vollbild-Variante kann durchaus größer sein, als das der Standard-Variante, solange die Dimensionen gleich bleiben, da in der Smartphone-Ansicht alle Bilder wieder gleich behandelt werden und es keine Vollbild-Variante gibt.

Slides haben gleiche Höhe

Per Javascript wird das Slide mit der größten Höhe ermittelt und diese maximale Höhe für alle Slides gleich gesetzt. Somit springt der darunterliegende Inhalt nicht beim Slide-Wechsel. Es sollte von daher darauf geachtet werden, dass der textliche Inhalt einigermaßen gleich gehalten wird.

Eine Diashow-Komponente zum animierten Vorführen einer Reihe von Elementen, wie in einem Karussell. Mehrere Karussells ineinander verschachtelt werden nicht unterstützt.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Positionsanzeiger -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Verpackung für die Elemente -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Schalter -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Zurück</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Weiter</span>
  </a>
</div>

Barrierefreiheit

Die Karussell-Komponente erfüllt generell keine Standards für Barrierefreiheit. Falls du diese einhalten musst, solltest du andere Optionen für die Präsentation dieser Inhalte in Betracht ziehen.

Damit die Steuerung von Karussells richtig funktioniert, muss eine einzigartige id zum äußersten Container (dem .carousel) hinzugefügt werden. Wenn die id eines Karussells verändert wird, denken Sie daran, auch die Steuerungselemente anzupassen.

Über Data-Attribute

Verwenden Sie Data-Attribute, um die Position des Karussells auf einfache Weise zu kontrollieren. data-slide akzeptiert die Schlüsselwörter prev or next, die die Position der Folien abhängig von der aktuellen Position verändern. Alternativ können data-slide-to verwendet werden, um die Folie mit einer bestimmten Nummer aufzurufen. data-slide-to="2" ruft die dritte Folie im Karussell auf, da die automatische Nummerierung mit 0 beginnt.

Das Attribut data-ride="carousel" wird verwendet, um ein Karussell automatisch zu animieren, sobald die Seite fertig geladen ist. Es kann nicht in Verbindung mit (redundanter und unnötiger) expliziter Initialisierung des selben Karussells über JavaScript verwendet werden.

Optionen

Optionen können über Data-Attribute oder JavaScript angegeben werden. Für Data-Attribute hängen Sie den Namen der Option einfach an data-, z.B. data-interval="".

Name Typ Standard Beschreibung
interval Nummer |false 5000 Die Zeit in ms, die vergehen soll, bevor das nächste Objekt aufgerufen wird. Falls false angegeben wird, bewegt sich das Karussell nicht automatisch.
pause String „hover“ Pausiert die Drehung des Karussells bei mouseenter und setzt sie bei mouseleave fort.
wrap Boolean true Bestimmt, ob das Karussell sich immer weiterdrehen oder feste Stopps machen soll.
keyboard boolean true Bestimmt, ob das Karussell auf Tastatureingaben reagieren soll.

Breadcrumbs Bootstrap

Zeigt an, wo sich die aktuelle Seite in einer Navigationshierarchie befindet.

Unterteiler werden in CSS automatisch über :before und content hinzugefügt.

<ol class="breadcrumb">
    <li><a href="/">HWK</a></li>
    <li class="disabled"><a href="#">Erste Menüstufe</a></li> 
    <li><a href="#">Zweite Menüstufe</a></li> 
    <li class="active">Dritte Menüstufe</li> 
</ol>

Menüpunkt ohne zugehörige Seite

Einem Menüpunkt, dem auf oberster Ebene ein Untermenü zugeordnet ist, ist keine Seite zugeordnet. Dies ist besonders hier beim Breadcrumb zu beachten, da der Menüpunkt mit aufgenommen wird, aber nicht klickbar sein darf.

Email

E-Mail Adressen maskieren, um Spam zu vermeiden.

Bei Email-Adressen muss das @-Zeichen immer als --at-- angegeben und dem Element die Klasse mail gegeben werden. Per Javascript wird dann wieder das @ eingefügt und bei einem <a> Link noch das mailto: hinzugefügt.

<a class="mail" href="example--at--test.de">example--at--test.de</a>

HWK Farben Die Klassennamen

Die Klassennamen beziehen sich auf die Farbpalette der Handwerkskammern.

.color-hwk-blue-light 
.color-hwk-blue-light-75     
.color-hwk-blue-light-50 
.color-hwk-blue-light-25
    
.color-hwk-blue-dark 
.color-hwk-blue-dark-75
.color-hwk-blue-dark-50
.color-hwk-blue-dark-25
    
.color-hwk-red-dark
.color-hwk-red-dark-75
    
.color-hwk-red-light
.color-hwk-red-light-75
    
.color-hwk-yellow
.color-hwk-yellow-75
    
.color-hwk-orange
.color-hwk-orange-75
    
.color-hwk-green-dark    
.color-hwk-green-dark-75
    
.color-hwk-green-light
.color-hwk-green-light-75

Glyphicons

Verfügbare Glyphen

Es wurden eigens für die Handwerkskammer Glyphen erstellt, die in Form der Schriftart „HWK IconFont“ in die Seite eingebunden werden können.

  • glyphicon glyphicon-ansprechpartner
  • glyphicon glyphicon-kontakt
  • glyphicon glyphicon-web
  • glyphicon glyphicon-information
  • glyphicon glyphicon-social-media
  • glyphicon glyphicon-apps
  • glyphicon glyphicon-mail
  • glyphicon glyphicon-kalender
  • glyphicon glyphicon-drucker
  • glyphicon glyphicon-login
  • glyphicon glyphicon-logout
  • glyphicon glyphicon-suche
  • glyphicon glyphicon-handwerkersuche
  • glyphicon glyphicon-prakti-suche
  • glyphicon glyphicon-lehrstellensuche
  • glyphicon glyphicon-verbundsstudium
  • glyphicon glyphicon-zoomin
  • glyphicon glyphicon-zoomout
  • glyphicon glyphicon-einstellung
  • glyphicon glyphicon-uhr
  • glyphicon glyphicon-facebook
  • glyphicon glyphicon-googleplus
  • glyphicon glyphicon-twitter
  • glyphicon glyphicon-youtube
  • glyphicon glyphicon-vimeo/span>
  • glyphicon glyphicon-flickr
  • glyphicon glyphicon-pinterest
  • glyphicon glyphicon-wordpress
  • glyphicon glyphicon-xing
  • glyphicon glyphicon-linked-in
  • glyphicon glyphicon-zurueck
  • glyphicon glyphicon-weiter
  • glyphicon glyphicon-link
  • glyphicon glyphicon-speichern
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-dokument
  • glyphicon glyphicon-dokument-download
  • glyphicon glyphicon-pdf-dokument-1
  • glyphicon glyphicon-pdf-download-1
  • glyphicon glyphicon-pdf-dokument-2
  • glyphicon glyphicon-pdf-download-2
  • glyphicon glyphicon-word-dokument
  • glyphicon glyphicon-word-download
  • glyphicon glyphicon-excel-dokument
  • glyphicon glyphicon-excel-download
  • glyphicon glyphicon-powerpoint-dokument
  • glyphicon glyphicon-powerpoint-download
  • glyphicon glyphicon-zip-dokument
  • glyphicon glyphicon-zip-download
  • glyphicon glyphicon-video-dokument
  • glyphicon glyphicon-video-download
  • glyphicon glyphicon-bild-dokument
  • glyphicon glyphicon-bild-download
  • glyphicon glyphicon-musik-dokument
  • glyphicon glyphicon-musik-download
  • glyphicon glyphicon-pfeil-links-oben
  • glyphicon glyphicon-pfeil-rechts-oben
  • glyphicon glyphicon-pfeil-links-unten
  • glyphicon glyphicon-pfeil-rechts-unten
  • glyphicon glyphicon-pfeil-links
  • glyphicon glyphicon-pfeil-rechts
  • glyphicon glyphicon-pfeil-hoch
  • glyphicon glyphicon-pfeil-runter
  • glyphicon glyphicon-doppelpfeil-nach-aussen
  • glyphicon glyphicon-doppelpfeil-nach-innen
  • glyphicon glyphicon-warnung-1
  • glyphicon glyphicon-warnung-2
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-screen-verkleinern
  • glyphicon glyphicon-alarm-1
  • glyphicon glyphicon-alarm-2
  • glyphicon glyphicon-einfacher-pfeil-hoch
  • glyphicon glyphicon-einfacher-pfeil-runter
  • glyphicon glyphicon-einfacher-pfeil-links
  • glyphicon glyphicon-einfacher-pfeil-rechts

Verwendung Bootstrap

Aus Gründen der Performance benötigen alle Icons eine Grundklasse und eine weitere Klasse für das jeweilige Icon. Um ein Icon zu werwenden, platzieren Sie einfach den folgenden Code, fast überall wo Sie wollen. Denken Sie daran, ein Leerzeichen zwischen Icon und eventuellem Text zu lassen, damit die Icons einen angemessenen Abstand haben.

Nicht mit anderen Komponenten vermischen.

Icon-Klassen können nicht direkt mit anderen Komponenten kombiniert werden. Sie sollten niemals mit anderen Klassen auf dasselbe Element angewendet werden. Fügen Sie stattdessen ein untergeordnetes <span> ein und wenden Sie die Icon-Klassen auf dieses <span> an.

Nur mit leeren Elementen verwenden

Icon-Klassen sollten nur auf Elemente angewendet werden, die weder Text noch untergeordnete Elemente enthalten.

<span class="glyphicon glyphicon-search"></span>

Barrierefreie Icons

Moderne Versionen von assistiven Technologien geben CSS-generierten Inhalt und spezifische Unicode-Zeichen wieder. Um ungewollte und verwirrende Ausgaben in Screenreadern zu vermeiden (insbesondere wenn Icons nur zur Dekoration verwendet werden), wird diese mit dem Attribut aria-hidden="true" versteckt. Falls ein Icon verwendet wird, um etwas zu vermitteln (im Kontrast zu einer rein dekorativen Verwendung), achten Sie darauf, dass die Bedeutung auch über assistive Technologien vermittelt wird, z.B. sollten Sie zusätzlichen Inhalt hinzufügen, den Sie mit der Klasse .sr-only unsichtbar machen können. Falls Schaltflächen ohne anderen Text (z.B. einen <button>, der nur ein Icon enthält) erstellt wird, sollten Sie immer alternativen Inhalt bereitstellen, um den Zweck der Schaltfläche zu identifizieren, so dass diese für Nutzer von assistiven Technologien Sinn macht. In diesem Fall könnten Sie ein aria-label-Attribut zur Schaltfläche selbst hinzufügen.

<button type="button" class="btn btn-default" aria-label="Suchen">
  <span class="glyphicon glyphicon-suche" aria-hidden="true"></span>
</button>

Google Map in den Suchergebnissen

Wird in der Suche eine Ausgabe der Ergebnisse in Google Maps benötigt, ist folgendes zu beachten:

1. Container für die Karte anlegen

<div id="map-1" class="col-md-7 map-container"></div><!-- /map -->

Die id kann frei bestimmt werden.
Die Klasse .map-container legt die Höhe fest.

2. Skript Dateien hinzufügen

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/markerwithlabel.min.js"></script>

Marker mit Label

markerwithlabel.js ermöglicht es, den Markern die Nummern der Suchergebnisse hinzuzufügen und kann hier heruntergeladen werden.

3. Skript hinzufügen und Ergebnisse anpassen

<script>    
function init_map() {   
    var bounds = new google.maps.LatLngBounds();   
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById("map-1"), mapOptions);
    
    /***************************************************
     * adjust this code according to search results
     */   
    var markers = [
        ['Altomünster', 48.397562, 11.253575],
        ['Freising',    48.402584, 11.741717]
    ];
                        
    var infoWindowContent = [
        ['<div class="map-info">' +
        '<h4>Tischlerei Mustermann 1</h4>' +
        '<p>Tischlerei Mustermann in der Musterstraße 123 in Musterstadt </p>' + '</div>'],
        ['<div class="map-info">' +
        '<h4>Tischlerei Mustermann 2</h4>' +
        '<p>Tischlerei Mustermann in der Musterstraße 123 in Musterstadt </p>' + '</div>']
    ];
    /****************************************************/
    
    var infoWindow = new google.maps.InfoWindow();
    // Loop through array of markers & place 
    for( i = 0; i < markers.length; i++ ) {       
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);                
        bounds.extend(position);                
           marker = new MarkerWithLabel({
               position: position,
               map: map,
               icon: 'img/icon-map-marker.png',
               labelText: i + 1,
               labelClass: "map-label",
               title: markers[i][0]
             });       
        // create info window for each marker  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    // Override map zoom level once the fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(10); // zoomlevel differs detail/result page
        google.maps.event.removeListener(boundsListener);
    });  
    // call function on search detail page here           
}
</script>

4. init_map Funktion aufrufen

Je nachdem ob sich die Karte auf der Seite mit allen Suchergebnissen oder der Detailseite befindet, muss die Funktion unterschiedlich aufgerufen werden.

Ergebnissseite

Hier wird die Funktion aufgerufen, wenn das Tab angeklickt wird, welches die Karte beinhaltet.

<li>
    <a href="#handwerker" onclick="init_map();" role="tab" data-toggle="tab">Handwerker</a>
</li>

Detailsseite

Hier wird die Funktion noch innerhalb des Skipts (s. oben) aufgerufen.

google.maps.event.addDomListener(window, 'load', init_map);

Unterschiedlicher Zoomfaktor

Auf der Detailseite sollte mehr in die Karte hineingezoomt werden.

Navbar Bootstrap

Navbars sind anpassungsfähige Meta-Komponenten, die zur übergeordneten Navigation für die Anwendung oder Site dienen. Sie beginnen auf mobilen Geräten minimiert (und können ein-/ausgeklappt werden) und werden dann horizontal, wenn die Breite des Bildschirms größer wird.

Gleichmäßig verteilte Nav-Links werden zurzeit in der Navbar nicht unterstützt.

Benötigt JavaScript-Plugin

Falls JavaScript deaktiviert ist und die Anzeige nicht breit genug für den horizontalen Modus der Navbar ist, wird es unmöglich sein, die Navbar auszuklappen und die Inhalte in .navbar-collapse anzusehen.

Für die responsive Navbar muss das Collapse-Plugin in der Version von Bootstrap enthalten sein.

Die Menübereiche der HWK Seite

Insgesamt gibt es 3 Menübereiche auf der Seite. Das Hauptmenü, das Sekundärmenü oder Header-Menü ganz oben rechts und das Footer-Menü.

Auf den Inhaltsseiten kann es noch weitere Navigationselemente geben, wie die Seitennavigation – auch fliegendes Menü genannt, das horizontal scrollbare Tab-Menü oder die Link-Listen.

Allgemein

Jede Navigation ist eine unsortierte Liste <ul>

Icons

Dem Menüpunkt kann ein Icon hinzugefügt werden.
Der Text kann mittels der Klasse text-hidden wahlweise ausgeblendet werden:

<li class="text-hidden">
    <a title="Twitter" href="http://twitter.de">
        <span class="glyphicon glyphicon-twitter"></span>&nbsp;Twitter
    </a>
</li> 

Trennstriche

Trennstriche werden folgendermaßen hinzugefügt.

<li role="presentation" class="divider"></li>

Vorgesehen sind sie in einem Dropdownmenü als horizontale Trennung oder im Sekundärmenü (Header-Menü ) als vertikale Trennlinien.

Untermenü

Hat ein Menüpunkt ein Untermenü, wird an dieser Stelle eine weitere unsortierte Liste <ul> verschachtelt, die dann als Dropdown gekennzeichnet wird.

Ein Klick auf den Menüpunkt öffnet das Untermenü, keine Seite.

Menüpunkt ohne zugehörige Seite

Einem Menüpunkt, dem auf oberster Ebene ein Untermenü zugeordnet ist, ist keine Seite zugeordnet. Dies ist besonders beim Breadcrumb zu beachten, da der Menüpunkt mit aufgenommen wird, aber nicht klickbar sein darf.

Dropdown-Menüs

Ein- und ausblendbare Kontext-Menüs, mit denen Listen von Links angezeigt werden können. Benötigt das Bootstrap Dropdown-JavaScript-Plugin.

Der Auslöser eines Dropdowns und das eigentliche Menü wird in .dropdown oder ein anderes Element gepackt, das position: relative; deklariert. Dann können die eigentlichen Menü-Einträge hinzufügen werden.

<li class="dropdown active">
  <a class="dropdown-toggle" data-toggle="dropdown">
    Dropdown-Menü
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Untermenü 1</a></li>
    <li class="active"><a href="#">Untermenü aktiv</a></li>
  </ul>
</li>
  • Aktive Menüpunkte werden durch die Klasse active gekennzeichnet.
  • Das Beispiel oben zeigt, dass bei einem verschachtelten Menüpunkt auch die Eltern mit active gekennzeichnet werden müssen.

Das Hauptmenü

Das Hauptmenü befindet sich in dem <div>, das sich in der Mobile-Ansicht zusammenklappt.

<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden 
hier zusammengefasst und können dann ein- und ausgeblendet werden -->
    <div class="collapse navbar-collapse">

Dritte Hierarchie-Ebene Zweites Untermenü

Das Hauptmenü ist das einzigste Menü, bei dem eine dritte Hierarchie-Ebene vorgesehen ist.

Das Menü selbst wird wie auch das erste Untermenü weiter in die <ul> Liste verschachtelt.

Ein Javascript sorgt dann dafür, dass wenn eine Seite mit einer dritten Hierarchie-Ebene aktiv ist, dieses Untermenü aus dem Navigationsbaum ausgelesen und in der Seite platziert wird.

Dafür muss folgendes erfüllt sein:

1) Die Seite muss folgenden Code enthalten, wo das Menü eingetragen wird (display: none Es wird erst eingeblendet, wenn benötigt):

<div id="header-nav-3" class="container"><!-- nav 3rd level -->
    <div class="row"> 
        <div class="col-md-12">
            <div id="div-head-nav-3">
                <h1 id="head-nav-3" class="color-hwk-orange"></h1>
            </div>
            <div id="nav-level-3"></div>
            <div class="clearfix"></div>
            <hr />
        </div>
    </div>
</div><!-- /nav 3rd level -->

2) Auch die Eltern des aktiven Menüpunktes müssen die Klasse active haben.

Das Sekundärmenü oder Header-Menü

Header Menü muss geklont werden

Da auch das Sekundärmenü in der Smartphone-Ansicht beim Aufklappen des Hauptmenüs erscheinen soll, muss es zweimal angelegt werden.

Einmal im <header> für alle anderen Geräte sichtbar mit der Klasse hidden-xs und ein zweites Mal in dem div collapse navbar-collapse im Anschluss an das Hauptmenü nur sichtbar in der Smartphone-Ansicht mit der Klasse visible-xs

<div class="col-md-9 col-sm-8 hidden-xs"><!-- header blue 50 -->
<div class="header-menu visible-xs"><!-- header nav mobile -->

Das Footer-Menü

Das Footer-Menü ist auf allen Geräten im <footer>

Mobile Collapse Inhalte in Smartphone-Ansicht einklappen

Ein Element, dass ein- und ausgeklappt werden kann. Standardmäßig ist es in der Smartphone-Ansicht zunächst eingeklappt, ansonsten ausgeklappt.

Die Elemente, die das Ein- und Ausklappen steuern, werden mit der Collapse-Funktionalität erstellt.


<button class="btn btn-link" data-toggle="collapse" data-target=".mobile-collapse" aria-expanded="true" >
    <h5>Erweiterte Suche</h5> <span class="glyphicon glyphicon-einfacher-pfeil-runter visible-xs"></span> 
</button> 
<div class="collapse mobile-collapse in">
    <label class="control-label">Zeitraum</label>
    <select class="form-control">
        <option>keine Beschränkung</option>
        <option>nicht älter als 1 Monat</option>
        <option>nicht älter als 3 Monate</option>
        <option>nicht älter als 6 Monate</option>
        <option>nicht älter als 1 Jahr</option>
    </select>
</div>

Wenn man dem kontrollierenden Elementen noch data-target=".mobile-collapse" hinzufügt und dem kontrollierten Element die Klasse .mobile-collapse, ist das Element in der Mobile Ansicht eingeklappt.

Collapse Bootstrap collapse.js

Erklärung

Mit grundlegenden Stilen und flexibler Unterstützung können Sie Komponenten wie Accordions und Navigation erstellen, die man ein- und ausklappen kann.

Plugin-Abhängigkeit

Collapse benötigt das Übergänge-Plugin in Ihrer Version von Bootstrap.

Sie können das Plugin auch ohne das Accordion-Markup verwenden. Veranlassen Sie einen Button dazu, ein anderes Element ein- und auszuklappen.

Auszuklappender Text
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo" aria-expanded="true">
  Klapp-Element
</button>

<div id="demo" class="collapse in">...</div>

Mach Collapse barrierefrei

Fügen Sie unbedingt aria-expanded zum kontrollierenden Element hinzu. Dieses Attribut definiert explizit den aktuellen Status des ein-/ausklappbaren Elements für Screenreader und ähnliche assistive Technologien. Falls das ein-/ausklappbare Element standardmäßig geschlossen ist, sollte es den Wert aria-expanded="false" haben. Falls Sie das ein-/ausklappbare Element über die Klasse in standardmäßig geöffnet haben, fügen Sie stattdessen aria-expanded="true" zum kontrollierenden Element hinzu. Das Plugin wird das Attribut automatisch umschalten, wenn das ein-/ausklappbare Element geöffnet oder geschlossen wird.

Zusätzlich können Sie, wenn das kontrollierende Element mit einem einzelnen ein-/ausklappbaren Element verknüpft ist (also wenn das Attribut data-target auf einen id-Selektor zeigt), ein zusätzliches aria-controls-Attribut, das die id des ein-/ausklappbaren Elements enthält, zum kontrollierenden Element hinzufügen. Moderne Screenreader und ähnliche assistive Technologien verwenden dieses Attribut, um Nutzern zusätzliche Kürzel zur Verfügung zu stellen, mit denen sie direkt zum ein-/ausklappbaren Element selbst navigieren können.

Verwendung

Das Collapse-Plugin verwendet einige Klassen, um die Schwerstarbeit zu machen:

  • .collapse verbirgt den Inhalt
  • .collapse.in zeigt den Inhalt
  • .collapsing wird hinzugefügt, wenn der Übergang startet und wieder entfernt, wenn dieser vorbei ist

Diese Klassen finden Sie in component-animations.less.

Über Data-Attribute

Fügen Sie einfach data-toggle="collapse" und data-target zu einem Element hinzu, um automatisch die Kontrolle über ein klappbares Element zuzuweisen. Das Attribut data-target akzeptiert CSS-Selektor, auf die die Klappfunktion angewendet werden woll. Denken Sie daran, die Klasse collapse zum klappbaren Element hinzuzufügen. Wenn es ausgeklappt starten soll, muss außerdem die zusätzliche Klasse in hinzugefügt werden.

Section Collapse Kapitel in Smartphone-Ansicht einklappen

Bei Seiten mit einer Seitennavigation bzw. einem fliegenden Menü, werden die einzelnen Kapitel – mit Ausnahme des ersten Kapitels – in der Smartphone-Ansicht eingeklappt.

Es wird davon ausgegangen, dass eine Seite mit einer Seitennavigation, mehrere Kapitel und relativ viel Inhalt enthält. Um das Navigieren auf dem Smartphone zu erleichtern, werden die Kapitel standardmäßig zunächst eingeklappt.

Das erste Kapitel bleibt als Einleitung aufgeklappt.

Javascript regelt es automatisch

Dies regelt ein Javascript automatisch, wenn die Seite nach den Vorgaben aufgebaut wurde.

Näheres zum Aufbau unter Seiten mit Seitennavitation.

Seiten mit Seitennavigation Fliegendes Menü

Die Seitennavigation ist das Scrollspy Element von Bootstrap.

Die Navigation des Scrollspy Elements verlinkt zu den <section>’s im Inhaltsbereich.

Sections nur als Kapitel verwenden

Es ist wichtig, dass <section> nur für neue Kapitel verwendet werden und immer eine id haben, zu der in der Navigation verlinkt wird.

<body data-spy="scroll" data-target="#myScrollspy">
    ...

    <div class="container">
        <div class="row">
            <div class="col-md-10 content"><!-- start content of page -->
                
                <section id="section-0">
                    ...
                </section>
                
                <section id="section-1">
                    ...
                </section>
    
            </div><!-- end content of page -->
            
            <div class="col-md-2 visible-md visible-lg" id="myScrollspy"><!-- start side navigation -->
        
                    <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="100">
                        <li class="static">Inhalt</li>
                        <li class="active"><a href="#section-0">Section 0</a></li>
                        <li><a href="#section-1">Section 1</a></li>        
                    </ul>
                
            </div><!-- end side navigation -->
        </div>
    </div><!-- /.container -->        
...

ScrollSpy Bootstrap scrollspy.js

Beispiel in einer Navbar

Dass ScrollSpy-Plugin ist dazu da, in Navigationselementen automatisch anzuzeigen, wo sich die aktuelle Scroll-Position befindet.

Scrollt man durch die Seite sieht man, wie die .active-Klasse nach und nach anderen Einträgen zugeordnet wird und diese hervorgehoben werden.

Verwendung

Bootstrap-Nav erforderlich

ScrollSpy erfordert zurzeit die Verwendung einer Bootstrap-Nav-Komponente für die richtige Hervorhebung von aktiven Links.

ID-Ziele müssen zuzuordnen sein

Die Links in der navbar müssen einer ID zuzuordnen sein. Zum Beispiel muss <a href="#start">Start</a> mit einem Element im DOM wie <div id="start"></div> korrespondieren.

Zielelemente, die nicht :visible sind, werden ignoriert

Zielelemente, die laut jQuery nicht :visible (sichtbar) sind, werden ignoriert und die zugehörigen Nav-Einträge werden niemals hervorgehoben.

Relative Positionierung notwendig

Unabhängig von der Umsetzung, erfordert ScrollSpy position: relative; beim Element, das beobachtet wird. In den meisten Fällen ist das der <body>.

Über Data-Attribute

Um zu deiner Hauptnavigation ganz leicht ScrollSpy-Funktionen hinzuzufügen, füge data-spy="scroll" zu dem Element hinzu, bei dem Sie die Scroll-Position beobachten wollen (üblicherweise der <body>). Dann fügen Sie das Attribut data-target mit einer ID oder Klasse des übergeordneten Elements einer Bootstrap-.nav-Komponente hinzu.

<body data-spy="scroll" data-target="#myScrollspy">
  ...
  <div id="myScrollspy">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Das Tab-Menü Navigation horizontal scrollen

Im Content-Bereich der Seite können noch weitere Navigationselemente eingesetzt werden, die das Finden der richtigen Inhalte vereinfachen. Wie zum Beispiel die horizontal scrollbare Navigation.

Für die Darstellung werden interaktive Tabs benutzt.

Kontakte

<div class="row" data-swipe="horizontal"><!-- swipe horizontal -->
    <div class="col-md-12">
        <h1>Kontakte</h1>
    </div>    
    <div class="col-md-12 padding-bottom-s">
         <div class="swipe-horizontal-container">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs swipe-horizontal" role="tablist">
                <li class="active"><a href="#alle" role="tab" data-toggle="tab">Alle</a></li>
                <li><a href="#a" role="tab" data-toggle="tab">A</a></li>
                <li><a href="#b" role="tab" data-toggle="tab">B</a></li>
                <li><a href="#c" role="tab" data-toggle="tab">C</a></li>
                <li><a href="#d" role="tab" data-toggle="tab">D</a></li>
                <li><a href="#e" role="tab" data-toggle="tab">E</a></li>
                <li><a href="#f" role="tab" data-toggle="tab">F</a></li>
                <li><a href="#g" role="tab" data-toggle="tab">G</a></li>
                <li><a href="#h" role="tab" data-toggle="tab">H</a></li>
                <li><a href="#i" role="tab" data-toggle="tab">I</a></li>
                <li class="disabled"><a href="#j" role="tab" data-toggle="tab">J</a></li>
                <li><a href="#k" role="tab" data-toggle="tab">K</a></li>
                ...         
            </ul>
        </div>
    </div>    
</div> 

Den sensiblen Bereich kennzeichnen

Mit data-swipe="horizontal" wird der Bereich gekennzeichnet, der die horizontale Bewegung registriert.

Dieser Bereich sollte nach oben und unten über die eigentliche Naviagtion hinausgehen, um etwas Spielraum zu gewährleisten.

Die sichtbare Breite festlegen

Über die Klasse .swipe-horizontal-container wird die Breite der sichtbaren Navigation ermittelt.

Die wirkliche Breite ermitteln

Über die Klasse .swipe-horizontal wird die <ul> Liste gekennzeichnet, deren Elemente dann zu der eigentlichen Breite addiert werden.

Interaktive Tabs Bootstarp tab.js

Beispiel-Tabs

Fügen Sie schnelle, dynamische Tab-Funktionalität hinzu, um zwischen verschiedenen Blöcken von Inhalt zu wechseln.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney’s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven’t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Erweitert die Tab-Navs

Dieses Plugin erweitert die Komponente Tab-Navs, um tatsächliches Tabverhalten hinzuzufügen.

Beachten Sie, dass die .nav-tabs-Klasse nur zusammen mit der .nav-Grund-Klasse funktioniert.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Alle</a></li>
  <li role="presentation"><a href="#">Seiten</a></li>
  <li role="presentation"><a href="#">Dokumente</a></li>
</ul>

Verwendung

Markup

Sie können Tab-Navs aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="tab" oder data-toggle="pill" bei einem Element hinzufügen. Durch Hinzufügen der Klassen nav und nav-tabs zur Tab-ul werden Bootstrap Tab-Stile angewendet.

<div role="tabpanel">
  <!-- Tabs-Navs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#start" role="tab" data-toggle="tab">Alle</a></li>
    <li role="presentation"><a href="#page" role="tab" data-toggle="tab">Seiten</a></li>
    <li role="presentation"><a href="#document" role="tab" data-toggle="tab">Dokumente</a></li>
  </ul>

  <!-- Tab-Inhalte -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="start">...</div>
    <div role="tabpanel" class="tab-pane" id="page">...</div>
    <div role="tabpanel" class="tab-pane" id="document">...</div>
  </div>
</div>

Einblendeffekte

Um Tabs mit einem Effekt beim Einblenden zu versehen, fügen Sie .fade zu jedem .tab-pane hinzu. Die erste Tab-Inhaltsfläche muss auch mit der Klasse .in versehen werden, damit der erste Inhalt vernünftig eingeblendet wird.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="start">...</div>
  <div role="tabpanel" class="tab-pane fade" id="page">...</div>
  <div role="tabpanel" class="tab-pane fade" id="document">...</div>
</div>

Top Scroll zurück zum Seitenanfang

Beim Scrollen der Seite wird nach einer Weile rechts unten ein Linkelement eingeblendet, welches zum Seitenanfang zurück animiert.

Dieses <a> Linkelement benötigt nur eine id="top" für das Styling und die Ausführung des Javascripts.

<a id="top" href="#"><span class="glyphicon glyphicon-einfacher-pfeil-hoch"></span></a>