Bootstrap/Less - Schriftgrößen an Viewports anpassen

  • Hallo zusammen,


    ich bin noch relativ neu in Bootstrap/Less, will das aber für meine Website nutzen. Ich möchte die Überschriften an unterschiedliche Viewports anpassen. Bisher habe ich das so gemacht:

    usw. In Bootstrap finde ich in der variable.less solche Einträge:

    Dann gibt es die Media-Queries in Bootstrap wie folgt

    Code
    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

    wo ich die typografischen Definitionen für unterschiedliche Schriftgrößen und Abstände definieren könnte.


    Wie könnte das aussehen? Werden diese Queries exakt so am Ende der variables.less angehängt? Und wie sieht das in der index.html aus? Zum Beispiel an dieser Stelle, wo die Überschrift kleiner werden sollte:

    Code
    <div class="col-md-8">
                <h1 class="header">Gemeinschaftspraxis Dr. Bauer</h1><br>
                <h2 class="header">Allgemeinmedizin und Innere Medizin</h2>
    </div>

    Ich bin gespannt auf euere aussagekräftige Unterstützung.


    Vielen Dank


    Diani

  • bei less muss ich passen aber mit sass geht das auch sehr gut.

    Änderungen müssen in der "_variables.scss" gemacht werden

    Breakpoints kann man über so ganannte mixins definieren:


    In dem Beispiel wird ab Brekpoint xs ( 576px ) die H1 Überschrift mit 20px dargestellt.


    Danach muss das noch mit z. B. Koala kompeliert werden um die Bootstrap.css zu erzeugen.

  • Besten Dank für den Hinweis.


    Eine Frage noch. Worin unterscheiden sich Less und Sass? Ich fange jetzt an Less zu verstehen, an Sass mitten einem Projekt wage ich mich doch nicht heran.

  • Hallo


    Die Unterscheiden sich nur in Kleinigkeiten.


    Ähnlich wie ein Modell eines PKW-Herstellers vom dem Konkurrenzmodell eines anderen. Das hat aber überhaupt nichts mit besser oder schlechter zu tun.


    Trotzdem passen die Teile eines Modells nicht zu dem anderen.


    Wer viel und langfristige Unterstützung sucht sollte sich deshalb an den Marktführer halten.


    Das ist bei LESS und SASS aktuell SASS.


    Hintergrund: LESS wurde bislang hauptsächlich von Bootstrap, dem "Marktführer" bei Frameworks, unterstützt. Die haben sich aber bereits jetzt darauf festgelegt mit der nächsten Version nur noch SASS zu unterstützen. Von daher fällt zukünftig bei der LESS-Unterstützung die stärkste Säule weg.


    Unter anderem wohl weil SASS bei der Komplierung deutliche Vorteile bietet. Und bei der Entwicklung neuer Websites ist man ständig beim Kompilieren.


    Von daher ist zu erwarten dass LESS stark an Bedeutung verlieren wird.


    Ansonsten sollte es auch kein Problem sein in die Suchmaschine deiner Wahl


    vergleich less sass


    einzugeben.



    Gruss


    MrMurphy

  • Ich habe jetzt zwar seit Beginn Bootstrap 3.3.5 http://holdirbootstrap.de/los-gehts/ und damit eine entsprechende Seite designed, so wie sie aussehen soll.
    Das mit dem Einbauen der Schriftskalierungen bei unterschiedlichen Viewports habe ich unter dieser Version noch nicht hinbekommen. Jetzt wollte ich gerne die bestehende Website auf Bootstrap 4 mit Sass upgraden.

    In der index.html habe ich somit das Link-Tag

    rel="stylesheet/sass" type="text/css" href="scss/bootstrap.scss"

    gesetzt. Damit werden aber die gesamten Grids (rows und columns) zerschossen. Leider finde ich jetzt weder ein gutes Einsteiger-Howto für Sass, noch Anleitungen, wie man eine Less-Seite nach Sass migrieren kann.

  • Die Schrift-Breakpoints lassen in LESS innerhalb der type.less wie folgt setzen:


    Code
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      h1.header {
        font-size: 24px;
      }
    }

    Damit hier eine Lösung zu meiner Ausgangsfrage angeboten ist.

  • Du kannst deine Sass-Datei nicht direkt im HTML einbinden. SASS muss erst zu CSS compiled werden.


    Im Idealfall nutzt du dafür ein Build-Tool bzw. Task-Runner wie Gulp.

    Ansonsten gehen auch Programme wie Koala. Einfach mal googeln.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!