WYSIWYG CSS

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

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

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

Alle Rechte vorbehalten