Breakpoints v6
Das neue Xobor v6 Template basiert auf dem Grid System von Bootstrap.
Will man z.B. per SCSS für verschiedene Endgeräte unterschiedliche Bildschirmausgaben erzeugen kann man dabei auf die so genannten Breakpoints zurückgreifen.
Breakpoints sind vorgegebene Bildschirmgrößen, an denen bestimmte CSS-Codes je nach Definition ausgeführt werden oder eben nicht.
Die Standard-Breakpoints im neuen Template sind:
$grid-breakpoints: (
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1600px,
xxxl: 1920px
);
Praxisbeispiel:
In der Foren-Übersicht gibt es 2 Spalten.
Spalte 1 hat die Klasse .forum_info und enthält Foreninfos und die Liste der Unterforen.
Spalte 2 hat die Klasse .forum_lastreply und enthält die Infos zum letzten Beitrag.
In der kleinsten Ansicht werden die Spalten untereinander angezeigt - beide Spalten haben also eine Breite von 100%.
Ab einer Auflösung von 668px werden die Spalten dann nebeneinander angezeigt. Die eine Spalte erhält dabei 8/12 der gesamten verfügbaren Breite, die andere 4/12 der gesamten Breite. Im SCSS schreibt man das dann so:
.forumlist .forum_lastreply{
@include media-breakpoint-up(sm) { //Wenn Bildschrimgroesse groesser als "sm"
@include make-col(4); // Gib dieser Spalte 4/12 des verfuegbaren Platzes
}
}
.forumlist .forum_info{
@include media-breakpoint-up(sm) {
@include make-col(8);
}
}
Um jetzt z.B. bei einer noch größeren Auflösung beide Spalten in gleicher Breite anzuzeigen könnte man folgendes im SCSS-Addon speichern:
.forumlist .forum_lastreply{
@include media-breakpoint-up(sm) { //Wenn Bildschrimgroesse groesser als "sm"
@include make-col(6); //Gib dieser Spalte 6/12 des verfuegbaren Platzes
}
}
.forumlist .forum_info{
@include media-breakpoint-up(sm) {
@include make-col(6);
}
}
Das gleiche geht natürlich auch in umgekehrter Richtung. Um z.B. auf allen Bildschirmen kleiner 668px Breite die Liste der Unterforen auszublenden könnte man Folgendes eintragen:
@include media-breakpoint-down(sm) {
.subforumlist{display:none;}
}
Weitere Infos dazu gibt es hier: https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
Login
Activity Feed
Gestern 19:56
Rika1 hat das Thema ...nicht erreichbar Die Antwort von www.seniorenforum50plus.de hat zu lange gedauert. erstellt
Seit ein paar Tagen kommt immer wieder (täglich) langes Georgel und dann obige Nachricht.Eine Verbindungs-Diagnose meines Chromebooks sagt:Woran kann das liegen?
möchte hier eine erste Version eines neuen Plugins vorstellen.Aufgabe des Pluginsbeim Aufruf der Themenansicht, werden ein paar wichtige Daten der Beiträge eingelesen• nr des Posts• msgid des Posts• Autor des Posts• user_id des Autors• Titel des Posts• Datum des Postsdiese Daten werden kompakt am En...
Wenn ich den Foren-Chat öffne, ist er ´jungfräulich´- nämlich leer.Hilfreich wäre, wenn er die Konversationen der letzte 1 - 2 Minuten zeigen würde.Geht das irgendwie?LGsikookis Board 779879
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Wer ist Online?
0 Mitglieder und 74 Gäste sind OnlineBesucher Statistiken
Statistiken
Themen | 41377 |
Beiträge | 302028 |
Mitglieder | 12.381 |
Forum empfehlen