Arbeiten mit Stil im WYSIWYG Editor
Bilder
Wenn man ein Bild im WYSIWYG Editor platziert hat, kann man die Ausrichtung des Bildes per CSS-Styles verändern. Bild wird nicht verkleinert.
- text-left: Bild links
- text-center: Bild zentriert
- text-right: Bild rechts
Will man ein Bild responsive machen, d.h. Bild passt sich an das vorhandene Grid an, wird aber maximal 100 % breit, kann man auch diese Bilder ausrichten. Text umfließt das Bild.
- img-responsive-links
- img-responsive-rechts
Will man die Bilder prozentual verkleinern und ausrichten, dann ist man hier richtig. img-25-links heißt dann, dass das Bild 25 % Breite des vorhanden Grids einnimmt, linksbündig ist und der Text, so vorhanden, rechts umfließt.
- img-50-links
- img-50-rechts
- img-33-links
- img-33-rechts
- img-25-links
- img-25-rechts
Links und Buttons
Setzt man einen Textlink, kann man aus diesem bequem einen Button machen. Die Buttons unterscheiden sich dann nur noch durch ihre Farbe. Normalerweise wählt man den ersten Button...
- btn btn-bd btn-sm
- btn btn-default btn-sm
- btn btn-primary btn-sm
- btn btn-danger btn-sm
Tabellen
Sollte man im WYSIWYG-Editor eine Tabelle anlegen, kann man diese mit dem CSS-Style "table" versehen. Damit passt sich auch die Tabelle an dem vorgegebenen Grid an. Will man, dass die Tabellenzeilen abwechselnd Hintergrundfarbe bekommen, wählt man "table table-striped"
- table
- table table-striped