Twitter Bootstrap

Hier landen ältere Beiträge aus dem Forum "Module & Templates" sowie den dazugehörigen Unterforen. Ruhig auch mal reinschauen.
Antworten
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Twitter Bootstrap

Beitrag von shadowcat »

Für diejenigen, die mal mit Twitter Bootstrap experimentieren möchten, hier die notwendigen Basis-Komponenten als Template.

Das Template beinhaltet die aktuelle Version als *min* sowie die Beispiele Jumbotron ("default") und Fixed Top ("fixedtop") als Varianten. Bei Fixed Top habe ich eine Kombination mit Jumbotron gebaut, das heißt die Variante basiert auf "default". Ihr könnt das als Vorlage nehmen oder eine komplett eigene Variante bauen. Beide Varianten haben zwei Inhaltsblöcke.

Zum Erstellen einer eigenen Variante legt man unterhalb von ./templates/bootstrap/templates ein neues Unterverzeichnis an, das die Template-Dateien beinhaltet. Dann die Variante in der info.php unter $template_variants eintragen und schon kann man sie im Backend auswählen.

Alternativ kann man auch das komplette Template als Vorlage nehmen und ein ganz eigenes, neues Template erstellen.

Edit 2016-06-08: Es gibt Bootstrap auch als Bibliotheks-Modul im Addons-Bereich. http://blackcat-cms.org/page/add-ons/or ... em&item=96

Aus dem Template heraus einfach referenzieren mit:

Code: Alles auswählen

<link rel="stylesheet" href="{$CAT_URL}/modules/lib_boostrap/vendor/css/bootstrap.min.css" type="text/css" media="all" />
Alternativ eine headers.inc.php verwenden. http://wiki.blackcat-cms.org/doku.php?i ... pl:headers
Dateianhänge
bootstrap.zip
Bootstrap Template für BC
(35.65 KiB) 196-mal heruntergeladen
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von shadowcat »

2014-04-02_120747.png
2014-04-02_120747.png (34.66 KiB) 5474 mal betrachtet
Variante "Fixed Top" mit Dropdown-Menü und zweitem Content Block. Der "graue Balken" oben (Text "DUMDUDUM") verschwindet komplett, wenn der zweite Content Block leer ist.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
ralf
Beiträge: 178
Registriert: Mi 6. Feb 2013, 10:03
Wohnort: Berlin
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von ralf »

Das kitFramework liefert zu Bootstrap ein wenig Unterstützung, in:

Code: Alles auswählen

/kit2/extension/phpmanufaktur/phpManufaktur/Library/Helper/bootstrap/navbarlinks/1.0.0/
findet ihr die Datei

Code: Alles auswählen

navbarlinks.php
Diese ermöglicht die Umsetzung von responsive Navbar Links:

Code: Alles auswählen

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
   <?php 
      require_once WB_PATH.'/kit2/extension/phpmanufaktur/phpManufaktur/Library/Helper/bootstrap/navbarlinks/1.0.0/navbarlinks.php';
      navbarlinks(2, 0, true); 
   ?>
</div><!-- /.navbar-collapse -->
entsprechend diesem Bootstrap Beispiel (mit show_menu2() lässt sich das nicht umsetzen).

Wer sich für dieses Thema interessiert sei auch ganz herzlich in die Internet Usergroup am 03.04.2014 eingeladen, das Thema ist:

Mit Bootstrap Templates für WebsiteBaker, LEPTON CMS und BlackCat CMS erstellen

Gruß
Ralf
phpManufaktur - Kreativ. Innovativ. Konstruktiv.
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von shadowcat »

Cool, dann kannst Du das Ergebnis ja auch noch hier posten. :)
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
ralf
Beiträge: 178
Registriert: Mi 6. Feb 2013, 10:03
Wohnort: Berlin
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von ralf »

Hier wie versprochen das Template, das gestern in der Internet Usergroup entstanden ist.

Das Template kann natürlich nicht den Abend wiedergeben, wir haben uns intensiv mit dem Grid System beschäftigt und uns die vielen Möglichkeiten angesehen, die Bootstrap bietet.

EDIT: Anhang entfernt - siehe aktuelleren Beitrag

Gruß
Ralf
phpManufaktur - Kreativ. Innovativ. Konstruktiv.
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von shadowcat »

Das sollte vielleicht in den Anforderungen stehen...
Unknown error type:
[2] require_once(/abs/path/to/kit2/framework/symfony/translation/Symfony/Component/Translation/TranslatorInterface.php): failed to open stream: No such file or directory
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
ralf
Beiträge: 178
Registriert: Mi 6. Feb 2013, 10:03
Wohnort: Berlin
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von ralf »

shadowcat hat geschrieben:Das sollte vielleicht in den Anforderungen stehen...
Unknown error type:
[2] require_once(/abs/path/to/kit2/framework/symfony/translation/Symfony/Component/Translation/TranslatorInterface.php): failed to open stream: No such file or directory
Mein Fehler! Das fiel mir leider erst hinter her auf, dass das kitFramework ja zwingend erforderlich ist ... ich bin gerade dabei die nächste Version der NavbarLinks fertig zu stellen und schreibe an der Dokumentation dazu, Sorry!!!

Gruß
Ralf
phpManufaktur - Kreativ. Innovativ. Konstruktiv.
Benutzeravatar
ralf
Beiträge: 178
Registriert: Mi 6. Feb 2013, 10:03
Wohnort: Berlin
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von ralf »

Ich habe mich noch mal mit den NavbarLinks() für Bootstrap beschäftigt und eine neue Release freigegeben.
  • Diese neue Release trennt Code und Ausgabe sauber, d.h. die gesamte HTML Ausgabe kann bei Bedarf angepasst werden,
  • NavbarLinks() setzt Klassen für den ersten und letzten Menueintrag der jeweiligen Ebene
  • Ein Schmankerl: Es können Icons (Glyphicons aus Bootstrap oder Icons aus Font Awesome) oder auch Grafiken für die Menueinträge zugewiesen werden
In diesem Zusammenhang habe ich dann auch ein Beispiel Template erstellt und mir ein wenig Mühe mit der Dokumentation gegeben:

Artikel zu NavbarLinks
Beispiel Template, installierbar
README mit allen wichtigen Erläuterungen und Angabe der Parameter

Gruß
Ralf
phpManufaktur - Kreativ. Innovativ. Konstruktiv.
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Twitter Bootstrap

Beitrag von shadowcat »

Super Sache! Damit dürfte Bootstrap in BC nichts mehr im Wege stehen. 8-)
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Antworten