• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bootstrap Utility Klassen für Abstände

NetAktiv

NetAktiv

Senior HTML'ler
Scheinbar gibt es bei Bootstrap Version 4 die Option, den Elementen Abstände (Margin, Padding) über Utility Klassen zuzuordnen, siehe http://v4-alpha.getbootstrap.com/components/utilities/#spacing.

Irgendwie bin ich zu dämlich, das dort beschriebene in die Tat umzusetzen, mir fehlt schlicht und ergreifend ein Beispiel für die Syntax, wie man diesen Parameter $spacer in der Class-Definition des Elements an die Utility-Klasse übergibt :(

Kann auch sein, dass ich das ganz völlig falsch verstanden habe und hier nur der Wunsch Vater des Gedankens war.

Grüße, Rainer
 
Werbung:
Tronjer schrieb:
$spacer wird eine Sass Variable sein.
Zum Vergrößern anklicken....
Hallo Trojaner,

du meinst also, das ist nur eine Hilfe, um neue CSS-Klassen zu definieren. Ich habe auch nirgendwo etwas gefunden, dass es so etwas wie CSS-Funktionen gibt, denen man Parameter übergeben kann. Dann geben die damit nur einen Standard vor, wie man solche Klassen nennen sollte.
Grüße, Rainer
 
Werbung:
NetAktiv schrieb:
Ich habe auch nirgendwo etwas gefunden, dass es so etwas wie CSS-Funktionen gibt, denen man Parameter übergeben kann
Zum Vergrößern anklicken....

Doch, das gibt es. SASS ist eine Library, die CSS um Funktionen einer Scriptsprache erweitert. Die Stylesheets werden im Format .scss geschrieben und beim speichern zu .css kompiliert.
 
Aber das heißt doch, SASS ist eine Entwicklungsumgebung, die mir hilft, Styles zu definieren und mittels Kompilierung CSS Dateien zu erstellen. In meinen Style Definitionen für den Endanwender kann ich nur Klassen verwenden, die ich vorher definiert habe und dafür eventuell als Hilfsmittel SASS benutzte.
 
SASS wird nicht parallel oder als Aufsatz von CSS eingesetzt, sondern es handelt sich quasi um einen Nachfolger zur Erstellung von Stylesheets. Syntaktisch ist es identisch mit CSS und erweitert dessen Funktionsumfang. Da aktuelle Browser .scss Files (noch) nicht interpretieren können, müssen diese zu .css kompiliert werden. Diesen Vorgang nehmen einem ein im Hintergrund agierende Frameworks ab. Derlei Frameworks sind bsw. Compass oder Grunt.
 
Werbung:
Hallo Tronjer,

danke für die Erklärung. So lange die Browser das Format aber nicht nicht können, bleibt es für mich ein Tool für Entwickler. Und selbst später wird es sicher noch Jahre dauern, bis man es wirklich einsetzen kann, da man immer auf Benutzer Rücksicht nehmen muss, die nicht die neusten Updates fahren.

Grüße, Rainer
 
Nee, du hast es nicht verstanden. Präprozessoren wie SASS (oder vormals LESS) sind bereits längere Zeit Standard in der Webentwicklung und produzieren ganz normales CSS, das selbst im IE6 noch lesbar wäre. Ich schreibe meine Stylesheets seit Jahren damit.

Wenn du effektiv mit Boostrap arbeiten willst, solltest du ebenso SASS einsetzen; zumal das auch die Frage aus deinem anderen Thread nach der Anpassung des Grid-Layouts beantwortet.
 
Eben, sagte ich doch auch, es ist ein Entwicklungswerkzeug, man muss CSS erzeugen, ein zusätzlicher Schritt, weil die Browser kein native SASS können. Diesen Kritikpunkt findet man auch bei Wikipedia https://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)#Kritik. Dass diese Kompiler in der Lage sind, CSS auch für alte Browser erstellen zu können, das erwarte ich :)

Ich will Bootstrap verwenden, um eventuell meine Homepage umzustellen. Dazu reicht es völlig aus, die paar CSS Definitionen, die ich abweichend von den gelieferten Standarddateien brauche, manuell zu erstellen. Reicht schon, wenn ich Bootstrap und Responsive Design in Grundzügen lernen muss, da muss ich mir nicht auch noch SASS aufhalsen. Schließlich will ich ja nicht mein Geld damit verdienen. Die paar Farbcodes, die ich nutze, kann ich auch mit einem globalen Replace im Notepad++ ändern und konsistent halten.
 
Werbung:
Die Kritik an SASS stammt aus dem Jahre 2010 und ist nach heutigen Maßstäben Humbug. Was auch damit zusammenhängen mag, dass sich die Webentwicklung seit dem um eine volle Generation weiterbewegt hat und wir bereits an der nächsten Generationsschwelle stehen, welche das Prinzip objektorientierter Programmierung auf HTML und CSS überträgt.

Natürlich musst du SASS nicht verwenden, aber es existiert kein Grund, das nicht zu tun, zumal sich der Einstieg über Compass sehr simpel gestaltet und spätere Änderungen an deiner Site vereinfachen.

http://thesassway.com/beginner
 
Die Kritik an SASS kann ich nicht natürlich beurteilen, aber ich habe einige Diskussionen im Netz gefunden, die native SASS Support im Browser fordern.
Tronjer schrieb:
zumal sich der Einstieg über Compass sehr simpel gestaltet
Zum Vergrößern anklicken....
Mit fast den selben Worten wurde ich auf Bootstrap Aufmerksam gemacht und es ist alles andere als einfach. Man setzt sich nicht mal schnell eine Stunde hin und schreibt seine Seite völlig von XHTML auf Bootstrap um. Vor ein paar Jahren habe ich von altem HTML (mit <font> und <frames> so) auf XHTML mit Styles umgestellt und nun auf eventuell auf Bootstrap. Die CSS waren immer das kleinste Problem. Die CSS für meine Mühlespieler Seite hat mal gerade 310 Zeilen mit Kommentaren, da ist ein Tool wirklich überflüssig. Keine Frage, für professionelle Entwickler ist so ein Tool fast unerlässlich. Und man muss vorsichtig sein, wenn Leute, die sich Jahre mit etwas beschäftigen, von einfach reden. Meist haben Sie die Zeit und Schwierigkeiten vergessen, vor denen sie anfangs standen.
 
Wobei du mit Bootstrap 4 eine frühe Alpha hast, die kaum dokumentiert, längst nicht feature-complete ist und bei der die Gefahr besteht, dass die Release Version aufgrund umfangreicher Änderungen deine Seite zerschießt. Warum nicht Bootstrap 3 oder ein anderes ausgereiftes UI Framework?
 
Werbung:
Ich möchte am Framework so wenig Änderungen wie möglich machen und habe mir beide Versionen angesehen. Bisher gefällt mir in der Tat die Version 3.3 aus verschiedenen Gründen besser:
  1. Sie ist offenbar stabil und bietet bisher so gut wie alles, was ich mir prinzipiell wünschen würde.
  2. Die Farben erscheinen mir besser.
  3. Die Größen der Elemente finde ich attraktiver (Schrift, Schaltflächen, Input-Elemente, ...)
Unter http://bootstrap.netaktiv.de/ habe ich diverse Beispiele kopiert und unter dem Menüpunkt Style kann man zwischen Version 3 und 4 umschalten.

Ich habe mal meine alte Firmenhomepage zum Test umgeschrieben (hat nur noch 4 Seiten, bin nun Rentner :)) und dazu Bootstrap 3 verwendet. Auf dem Handy sind die Unterschiede echt erheblich.

Vorher: http://NetAktiv.de
Geplant: http://neu.NetAktiv.de

Allerdings habe ich die paar Seiten noch nicht durch den HTML Validator geschickt.
 
Du solltest die .col Elemente in .container, bzw. .container-fluid und .row verschachteln, wenn das Grid richtig funktionieren soll
 
Tronjer schrieb:
Du solltest die .col Elemente in .container, bzw. .container-fluid und .row verschachteln, wenn das Grid richtig funktionieren soll
Zum Vergrößern anklicken....
Also mein äußertes Element #used ist ja class=container und ich meine gelesen zu haben, man dürfe container nicht verschachteln. Ich bin davon ausgegangen, dass die row der container für die col ist. Aber du schlägst, wenn ich dich richtig verstehe, folgenden Aufbau vor

<container>
<row> <col /> <col /> <col /> <col /> </row>
<row> <col /> <col /> <col /> <col /> </row>
</container>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben