Ich schreibe gerade ein Tutorial über Themes mit Bootstrap in Contao. Frage an euch: Ist es für euch bis hierhin so verständlich ?
https://community.contao.org/de/show...ontao&p=286796
Druckbare Version
Ich schreibe gerade ein Tutorial über Themes mit Bootstrap in Contao. Frage an euch: Ist es für euch bis hierhin so verständlich ?
https://community.contao.org/de/show...ontao&p=286796
Der Template-Ordner des Themes liegt nicht im Files-Verzeichnis, sondern unterhalb des Contao Templates-Ordner:
[TL_ROOT]/templates/bootstrap
Für die Themes-Struktur im Files-Verzeichnis soll gemäß Anleitung ein Ordner "Bootstrap" erstellt werden; auf den Screenshots sieht man aber einen Themes-Ordner "bootstrap". Hier würde ich also darauf achten, dass Groß- und Kleinschreibung der Ordnernamen übereinstimmen.
Stimmt danke für die zwei Fehler. Ansonsten ist es alles nachvollziehbar ?
Also für mich ist es soweit nachvollziehbar. Für die anderen "1.596.843 Personen", denen das gefällt wahrscheinlich auch. :D
Super, dann kann ich ja bedenkenlos weiter schreiben :D
Jupp, soweit verständlich!
Btw hier gibt's noch ein anderes Team dass sich mit diesem Thema beschäftigt.
Super, ich hab's mir durchgelesen und bin begeistert. Dranbleiben bitte...Zitat:
Frage an euch: Ist es für euch bis hierhin so verständlich ?
Die Seite lädt aktuell bei mir gar nicht... Was ist da los?
//edit: Gruß aus Düsseldorf :)
Die Seite sollte eigentlich ohne Probleme laden.
Die Webseite an sich ist allerdings selber noch im Aufbau.
Zu den Artikeln und Tutorials werden darüber hinaus auch noch Tutorial Videos kommen :)
Auch wenn ich nachvollziehen kann dass es 'Dein' Tutorial auf Deiner Seite liegen soll: Denkst Du auch darüber nach, dießeAnleitung ins Wiki zu stellen?
Hallo kayyy
Ist die Anleitung schon fertig? Ich hab mal alles durchgespielt: Einziger Punk, der mir nicht ganz klar ist:
In meiner Contao3.1.1-Installation gibt es einen templates-Ordner im Root-Verzeichnis. Ich habe darin den Unterordner bootstrap erstellt und fe_page.html5 darin gespeichert.Zitat:
Template Struktur
Damit Contao unsere neu erstellten Templates erkennt, benötigen wir auch hierfür eine Ordner Struktur. Dazu legen wir einfach einen Ordner mit dem Namen "bootstrap" in /templates/ an. Die Struktur sieht nun folgendermaßen aus.
files
templates
bootstrap
Das war es auch schon. Nun haben wir auch unsere Template Struktur.
Wenn man der Auflistung oben folgt, könnte man aber meinen dass man im Ornder files einen Unterordner templates und darin nochmals einen Unterordner bootstrap erstellen soll.
Was stimmt nun?
Das Tutorial ist noch nicht komplett fertig :)
Zu deiner Frage:
Der Ordner "bootstrap" innerhalb des /files/ Verzeichnisses ist zuständig für die CSS und Image Dateien.
Der Ordner "bootstrap" im /templates/ Verzeichnis ist für alle Templates ( wie bspw. fe_page ) vorgesehen.
Die Ordner Struktur wäre dann:
files/bootstrap
files/bootstrap/css
files/bootstrap/img
templates/bootstrap
PS: Habe den Artikel nochmal aktualisiert, er ist aber wie gesagt auch noch nicht fertig :)
Aha, ich bin davon ausgegangen, dass die Änderung schon vorgenommen wurde... Merci!
Cool wäre natürlich, wenn die Anleitung noch einen Schritt weitergeht und kurz aufzeigt, wie man
Bootstrap nutzt, z.B. zur Gestaltung der Navigation, oder von Inhalten...
bleibt das tutorial bei bootstrap 2.3 oder wird es (noch) auf bootstrap 3 umgeschrieben ?
Wulf, ich habe einfach
ins template fe_page.html5 eingesetzt... :cool:Code:<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js" rel="stylesheet">
Hallo kayyy
Vielleicht greife ich etwas vorweg, das später in deiner Anleitung erklärt wird... Aber müsste in Zeile 33
vom kompletten fe_page Template der Ausdruck "<?php echo $this->head; ?>" korrekterweise so
lauten: "<?php echo $this->header; ?>" ?
fehler gefunden, hatte für bootstrap 3 folgenden code genommen:
richtig war natürlich dein code.Code:<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
Ich werde dieses Tutorial auf 3 umschreiben, da es aktuell noch nicht sonderlich tief in den Code geht.
Da die 3er Version schon stark von der 2er abweicht, wäre das denke ich ganz sinvoll :)
@tinoo: Ja das hast du recht, mein Fehler :)
PS: Ich habe die einzigen paar Zeilen Code schonmal auf Bootstrap 3 umgeschrieben.
Was mir aufgefallen ist, eigentlich müsstest du jedes Template soweit an bootstrap anpassen (u.a. nav …) oder das CSS von Bootstrap an Contao anpassen :eek:
Hi Kayyy
Ich verfolge gespannt die ergänzte Anleitung und hätte da einen kleinen Einwand: Das neue Navigationstemplate funktioniert super, solang die Seitenstruktur flach ist, wie in deinem Beispiel. Sobald die Struktur aber Level_2 enthält, funzt das Template nicht mehr richtig und man muss mittels Start- und Stoplevel die Anzeigen begrenzen. Universeller einsetzbar wäre das Template jedoch, wen dort wo Level_2 Strukturen vorhanden sind, gleich Dropdowns eingesetzt würden. Ich weiss dass das die Sache verkompliziert - aber ich denke eine solche Navigation würde eher der Realität entsprechen... Ansonsten: Go on! Die Anleitung ist bislang ausgezeichnet! ;)
Wie siehst du eigentlich dann vor das Grid System zu handhaben? Also soll es dann möglich sein Artikeln einfach die Klasse "span6" (etc.) zuweisen zu können, für die Positionierung der Inhalte?
Weil das würde ja auch bedeuten, dass du auch irgendwo ein Wrapper Element mit class="row" oder "row-fluid" benötigst etc.
Spooky, du kannst schon jetzt ein Content-Element "HTML" über dem ersten Text einfügen, welches ein einfaches
<div class="row"> enthält. Danach kannst du z.B. zwei Text-Elemente erstellen und denen unter Experten-Einstellungen
die Klasse "col-12 col-sm-8 col-lg-8" respektive "col-6 col-sm-4 col-lg-4" mitgeben. Zum Schluss des Artikels machst
dann nochmals ein HTML-Element mit dem abschliessenden </div>
So hast du bereits zwei Textelemente zweispaltig dargestellt. Wenn ich kayyy aber richtig verstanden habe, nutzt
er die Erweiterung Spaltenset und "biegt" sie entsprechend um. Das wäre natürlich wesentlich einfacher für den
Endnutzer, als sich da die kryptischen Klassen zu merken...
Spalten innerhalb eines Artikels wird mit der subclumn Extension gelöst.
Hierfür schreibe ich noch das entsprechende Addon für die Extension.
Spätere Spalten für left/right wird mit den Klassen gelöst, die man der jeweiligen Spalte zuweisen kann.
Gesendet von meinem GT-I9300 mit Tapatalk 2
Ich habe die Erweiterung subcolumns_bootstrap schon einmal auf die Bootstrap3 Version geupdated: https://github.com/pixelianer/subcolumns_bootstrap3
Die Erweiterung subcolumns funktioniert auch ohne Probleme unter Contao 3.1.1, müsste im ER nurnoch aktualisiert werden.
Daher kann man diese derzeit nur direkt über die Erweiterungsverwaltung installieren.
Ja, das meinte ich eigentlich ;) (Also 'Wrapper Extension oder einfach Custom HTML')
Für DAU's wie mich sollte vielleicht noch erwähnt werden:
- subcolumns_bootstrap3 kann man direkt über den Erweiterungskatalog im Backend installieren, dann werden auch gleich alle Abhängigkeiten mitinstalliert
- nach der Installation muss unter Einstellungen / Spaltenset-Einstellungen / Spaltenset noch "Bootstrap" anstelle YAML ausgewählt werden...
Dann kann man die Erweiterung wie gewohnt nutzen.
kayyy, eine Frage: Wenn ich das Browserfenster verkleinere, wird die Navigation durch den
Menübutton ersetzt. Wenn ich aber darauf klicke, passiert nichts... Da müssten doch aber
die ganzen Menüpunkte untereinander erscheinen, oder?
komisch, bei mir geht es ohne probleme, vielleicht hat sich bei dir irgendwo ein fehler eingeschlichen.
Wulf, kann schon sein... Aber wo? Vielleicht liegt es auch daran, dass ich mehrere Seitenebenen habe, sprich die
Seitenstruktur tiefer verschachtelt ist als im Beispiel... Das funktioniert in der Navigation auch noch nicht sauber.
stimmt, für untermenus ist die navigation nicht geeignet. ich habe das folgendermaßen gelöst:
das navigationstemplate sieht bei mir so aus
anschliessend habe ich ein eigenes html-modul erstellt und folgendes eingetragen:Code:<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav navbar-nav'; else if($this->level == level_2) echo ' dropdown-menu'; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>">
<?php if(strpos($item['class'], 'submenu') !== false): ?>
<a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown">
<?php echo $item['link']; ?>
<b class="caret"></b>
<?php else: ?>
<a class="<?php echo $item['class']; ?>">
<?php echo $item['link']; ?>
</a>
<?php endif; ?>
</a>
<?php echo $item['subitems']; ?>
</li>
<?php else: ?>
<li<?php if ($item['class']): ?>
class="<?php echo $item['class'];
if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"
<?php endif; ?>>
<a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?>
class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"
<?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?>
<?php endif; ?><?php if ($item['accesskey'] != ''): ?>
accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?>
<?php if(strpos($item['class'], 'submenu') !== false): ?>
<b class="caret"></b>
<?php endif; ?>
</a><?php echo $item['subitems']; ?>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
zu guter letzt wird das html-modul im seitenlayout eingebunden und schon hat bei mir das dropdown menu funktioniert. geht bestimmt auch eleganter, aber meine versuche, den code vom eigenen modul mit im navigationstemplate unterzubringen, sind immer gescheiter.Code:<div class="navbar navbar-inverse">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="#">Title</a>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse ">
{{insert_module::8}} // hier wird das navigationstemplate per insert eingefügt
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
Anhang 11481
Anhang 11482
Gibt es einen Vorteil dafür das man Bootstrap.min.css oder Bootstrap.css von der externen Adresse (CDN) einbindet ? Sollte man hierzu nicht einen Fallback hinzufügen ??
Wulf, Danke für den Code. Ist im Prinzip das, was ich suche. Wundere mich aber auch, warum es nicht funktioniert wenn man alles ins Template packt... ABER auch hier: keine Reaktion bei den Dropdowns oder wenn das Menü colapsed wird... Die Javascript-Datei wird gemäss Seitenquelltext korrekt eingebunden... Muss man noch irgendwas Mootools oder jQuery aktivieren?
ah, alles klar, jquery muß geladen sein, die ganzen komponenten von bootstrap (dropdown, collapsed usw) basieren darauf.
So ist es! JQuery im Seitenlayout aktiviert - Dropdown funktioniert.
@Kayyy, solltest du vielleicht in der Anleitung noch ergänzen... ;)
Wulf, darf ich kurz fragen: Ist es möglich, dass Bootstrap die Navigations-Stylings auf maximal 2 Level beschränkt? Jedenfalls
sehe ich auf der getbootstrap-Seite keine tiefer verschachtelten Navigationen... Das müsste dann Template auch irgendwie
abgefangen werden, weil sonst eine "unsinnige" Navi-Darstellung resultiert...
multi-level navigation wäre in bootstrap auch möglich, siehe http://jsfiddle.net/2Smgv/934/, aber dafür müsste das template wieder verändert werden. evtl. findet sich ja einer, der das schon gemacht hat, vielleicht hat kayyy ja auch schon eine lösung, er wollte das tutorial ja noch weiter ausbauen.
... vermutlich ist es bald einfacher, wenn ich die Seitenstruktur direkt in einem
HTML-Modul abbilde, statt dies über Templates zu lösen... Was vermutlich ganz
einfach geht: Sitemap-Modul erstellen, anzeigen lassen und Quellcode kopieren,
dann noch die Bootstrap-spezifischen Klassen eintragen...
Nachtrag: Mit dem Schönheitsfehler dann, dass ich keine .active-Klasse habe..
ich habe nochmal etwas mit dem navigations-template experimentiert und eine multi-level navigation zusammengeschustert (anders kann man es wirklich nicht bezeichnen).
allerdings müsste dafür auch nochmal das fe_template angepasst werden, da meine version nicht mit bootstrap 3RC1 läuft (in dieser version fehlt anscheinend noch .dropdown-submenu).
im fe_page template
durchCode:<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
ersetzen und folgendes nav_template (auf eigene Gefahr) nutzenCode:<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
.
.
.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Code:<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav navbar-nav'; else echo ' dropdown-menu'; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown';
if((strpos($item['class'], 'submenu') !== false) && ($this->level !== level_1)) echo ' dropdown-submenu';?>
">
<?php if(strpos($item['class'], 'submenu') !== false): ?>
<a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown">
<?php echo $item['link']; ?>
<b class="caret"></b>
<?php else: ?>
<a class="<?php echo $item['class']; ?>">
<?php echo $item['link']; ?>
</a>
<?php endif; ?>
</a>
<?php echo $item['subitems']; ?>
</li>
<?php else: ?>
<li<?php if ($item['class']): ?>
class="<?php echo $item['class'];
if(strpos($item['class'], 'submenu') !== false) echo ' dropdown';
if((strpos($item['class'], 'submenu') !== false) && ($this->level !== level_1)) echo ' dropdown-submenu';?>"
<?php endif; ?> >
<a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?>
class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"
<?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?>
<?php endif; ?><?php if ($item['accesskey'] != ''): ?>
accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?>
<?php if((strpos($item['class'], 'submenu') !== false)&&($this->level == level_1)): ?>
<b class="caret"></b>
<?php endif; ?>
</a><?php echo $item['subitems']; ?>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
Danke Wulf! Ich glaub die schrauben eh noch mächtig am Code... Seit kurzem funktioniert das
Dropdown-Menü nicht mehr, hab ich hier bei meiner lokalen Installation festgestellt. Heute vor
dem Mittag tat's noch wunderbar... ???
Ich war bis heute im Urlaub, daher auch keine Antwort von mir.
Bzgl. Des mobilen Menüs, hier muss jquery zwingend eingebunde werden.
Das Menü ist noch nicht für mehrere Ebenen / Dropdown geeignet. Das Tutorial schreibe ich dafür so schnell es geht noch einmal um.
Gesendet von meinem GT-I9300 mit Tapatalk 2
Hi kayyy
Hoffe du hattest erholsame Ferien ;)
Die Templates / Anleitung von wulf etwas weiter oben funktioniert soweit ganz gut, auch wenn es etwas umständlich ist zwei Module und ein Template dafür zu erstellen... Ich würde da aber noch reinnehmen, dass man im Modul den Startlevel auf 0, den Stoplevel auf 2 setzt und Hardlimit aktiviert. Dann funktioniert die Dropdown-Navi zumindest für zwei Ebenen tiptop mit der neusten Version von Bootstrap 3 RC1.
Ideal wärs natürlich, wenn mit der "finalen" Version dann mal 3 Level abgebildet werden können. Mehr, denke ich, würde unübersichtlich.
Hallo zusammen,
mit dem aktuellen RC2 verhält es sich so, das nur noch Wulfs Template-Version mit dem Submenü funktioniert, aber die ursprüngliche nicht mehr. :-)
Ist das bei euch auch der Fall?
Liebe Grüße,
Daniel
Jep, das Menü mit den Dropdowns funktioniert noch... Allerdings frage ich mich, warum das Menü jetzt plötzlich eine Höhe von 100px einnimmt. Mit RC1 waren es noch 50px...
Nachtrag: Komischkomisch... Die Navigation selbst ist 50px hoch, aber die navbar nimmt bei mir eine Höhe von 100px ein, obwohl das nirgends so definiert ist... Sobald ich von "Grossbild" auf kleinen Bildschirm wechsle (also z.B. das Browserfenster verkleiner) und das Toggle-Menü aktiv wird, habe ich wieder eine 50px hohe Navbar... Nur ist dann dumm, dass der Rest vom Content bei einem Margin von 100px von oben einen Spalt von 50px bildet... :-(
Nachtrag2: Nach einer Cache-Leerung ist die Navbar zwar wieder 50px hoch, aber die Menüs werden nicht mehr angezeigt. Allgemein haben die Boxen (Panel, Wells usw) keine Innenabstände mehr... :( Eine echte Verschlimmbesserung...
Ich werde es mir morgen einmal anschauen
Gesendet von meinem GT-I9300 mit Tapatalk 2
hab auch mal rc2 eingebunden und getestet. damit eine multi-level navigation funktioniert, muss man folgende css anweisungen aus der 2.3 einbinden. ich hab die anweisungen einfach in die theme.css von dem tutorial kopiert, danach funktionierten auch wieder das multi-level menu.
edith: script kurz angepasst, einige einträge waren überflüssigHTML-Code:body { padding-top:80px; }
.center { text-align:center; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0;
}
.dropdown-submenu > a:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -10px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
Sorry,
ich habe mich verlesen.
Irgendwas stimmte mit den Klassen nicht ganz.
Liebe Grüße
Ein Mann der Taten ;)
Hab grad vorhin das da gefunden:
http://getbootstrap.com/getting-star...ration-dropped
Gemäss dieser Liste gibt es in Bootstrap3.0 gar keine dropdown-submenu's mehr... Dh. es
können nur noch max. zwei Seiten-Ebenen in der Navi abgebildet werden... :(
Sind mehr als zwei Ebenen denn notwendig? Die responsiven Seiten sollen ja ein Minimum an verschachtelter Navigation unterstützen.
Wahrscheinlich ist es deshalb rausgeflogen.
Ich habe noch mal den Code von Kayyy etwas verändert (nur 1 Ebene), so wie es mit RC2 bei mir ganz gut funktioniert.
nav_navbar-fixed-top.html5
HTML-Code:<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">Deine Seite</a>
</div>
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a>
<?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</nav>
</div>
</header>
Hi Kayyy
An anderer Stelle im Forum bin ich auf diese Erweiterung gestossen:
https://contao.org/de/extension-list...customize.html
Vielleicht lässt sich deine subcolumns-Erweiterung mit der anderen kombinieren oder
ergänzen? Einfach so als Idee, damit die "Kräfte" gebündelt werden können... ;)
Ich setze gerade Bootstrap bei mehreren Projekten intensiv ein und habe daher angefangen Anpassungen in einer Erweiterung zusammenzufassen. Daraus ist auch die hier bereits genannte Erweiterung subcolumns_bootstrap_customize entstanden.
Momentan habe ich folgendes auf Bootstrap 3 Basis umgesetzt:
Navigation
- Modul für Navbar
- angepasste Navigationstemplates
- Dropdown-Navigation
Formulare
- angepasste Formulartemplates
- tableless: Basic Form
- table: Horizontal Form
- Iconauswahl für Schaltflächen + Textfelder (Input Groups)
Inhaltselemente
- Schaltfläche für Bootstrap Buttons inkl. Icon
Wenn jemand in die gleiche Richtung arbeitet, kann man daraus gern eine allgemeine Erweiterung machen. Zur Zeit füge ich bei Bedarf neue Komponenten hinzu, die Bootstrap bietet.
Hi Webstar
Hast du schon Projekte online, die man sich anschauen kann? Und nachher natürlich doof fragen darf? :D
Ok, danke für die Info.
Mich interessiert unter anderem:
- Arbeitest du mit den Template-Vorlagen von Kayyy's Tutorial oder hast du für die fe_page etwas eigenes auf die Beine gestellt?
- wie hast du das "Problem" mit dem Navigationsmodul gelöst (eigener Lösungsansatz oder auch wieder das/die Templates aus dem Tutorial hier)?
Falls du mit eigenen Templates arbeitest wäre es natürlich interessant, wenn du uns deine Lösungen zeigen könntest...
Am Wochenende werde ich endlich Zeit finden. Dann kommt auch der Navigations Fix, sowie ein weiterer Artikel, wie die neue Bootstrap Version funktioniert mit den neuen Columns Klassen usw.
Gesendet von meinem GT-I9300 mit Tapatalk 2
Ich hatte meine bereits vor dem Tutorial mit Bootstrap gearbeitet, daher habe ich mich nicht an den hier präsentierten Lösungsansätzen orientiert. Meine Anpassungen der fe_page beschränken sich oft darin, dass ich die Container Klasse einem oder mehrere Elemente zuweise. Meistens dem #wrapper div. Sonst behalte ich die Contao Struktur.
Für die Navigation habe ich zwei verschiedene Ansätze entwickelt, die der hier präsentierten Lösung ähnlich sind. Bei beidem werden Elemente ab dem 2. Level als Dropdown-Menü eingeblendet. Bei der einen Template Anpassung wird der ursprüngliche Menü Punkt als Toggler. Hat aber den Nachteil, dass die Eltern-Seite nicht anklickbar ist. Bei dem Projekt egal, da ich dort die Erweiterung m17PageFolders einsetze, falls es eine Unterebene gibt.
Bei der anderen Lösung erzeuge ich einen 2. Link für den Toggler.
Für die ganze Navbar habe ich ein Modul entwickelt, indem ich beliebig viele andere Module oder Templates einbinden kann. Daher muss ich die mod_navigation nicht anpassen. Die Klassen, damit es responsive ist, können im Modul definiert werden. Außerdem bin ich dann völlig flexibel, wie ich den Brand-Teil gestaltet. Standardmäßig steht ein Template mit verlinkten Websitetitel zur Verfügung. Ich kann aber einfach auch ein eigenes HTML-Modul erstellen. Ich hänge mal ein Screenshot an. Das basiert gerade noch auf der Bootstrap 3 RC1, wo es .navbar-header noch nicht gab, wird daher vermutlich noch umgebaut.
Achso, eine Seite mit Bootstrap von mir ist online. Ist allerdings eine private, wo der Umfang der Anpassungen nicht so groß war: www.seinschein.de
Schaut gut aus! Allerdings funktioniert auf meinem iPad / iPhone das Togglermenü nicht. Wird hier allenfalls jQuery nicht (richtig) geladen?
Das Modul für die Navbar tönt sehr interessant. Planst du, das Modul als Erweiterung freizugeben oder behälst du es in deiner Schatzkiste?:)