phpwcms und Bootstrap

[santscho]

Ich möchte vom YAML-Framework (www.yaml.de) zu Bootstrap wechseln. Habe vorgängig ein paar Fragen...

1. Welche Bootstrap-Komponenten sind bereits im Core von phpwcms enthalten?
2. Lässt sich eine Multilevel-Navbar (horizontales Menü mit Dropdowns) realisieren? [EDIT: Habe diesbezüglich bereits etwas im Forum gefunden]
3. Lässt sich eine Multilevel-Menü für mobile Geräte realisieren?
4. Wer hat bereits Erfahrung mit Bootstrap in phpwcms gemacht? Wer verrät seine Geheimnisse und Tricks?

[Uwe367]

Ist eigentlich keine große Sache.
Ich für meinen Teil lege im Verzeichnis Template ein neues Verzeichnis, z.B. Bootstrap, an wo ich alles ablege was mit Bootstrap zu tun hat.
Die CSS und JS File rufe ich dann im Haupttemplate auf:

Code: Select all

<!-- CSS:{TEMPLATE}bootstrap/vendor/bootstrap/css/bootstrap.min.css -->
<!-- CSS:{TEMPLATE}bootstrap/vendor/fontawesome-free/css/all.min.css -->
<!-- CSS:{TEMPLATE}bootstrap/vendor/simple-line-icons/css/simple-line-icons.css -->
<!-- CSS:{TEMPLATE}bootstrap/css/my_styles.css -->

Wie du siehst lade ich die my_styles.css als letztes. Hat den Vorteil daß ich Bootstrap Klassen erweitern oder ändern kann ohne diese, z.B. in der bootstrap.min.css zu verändern.


Ja, und dann hat Oliver NAV_LIST_UL vor einiger Zeit mit Bootstrap erweitert. Hierbei steht "B" für Bootstrap
Willst du nun mit den Bootstrap Klassen arbeiten, so könnte ein RT für die Navigation z.B. so aussehen:

Code: Select all

<nav id="sidebar-wrapper">
{NAV_LIST_UL:PB,0,2,|sidebar-nav}
</nav>

Diesen habe ich gerade auf dem Localhost in Verwendung.


Oder diesen hier. Ist eher auf Standart ausgerichtet. Geht über 4 Ebenentiefen. Soviel zur Multilevelnavbar

Code: Select all

{NAV_LIST_UL:PB,0,4,active|nav navbar-nav,active}

Dann solltest du auch mal einen Blick in die conf.template_default.inc.php werfen. Zeile 334 bis 337 sind ebenfalls auf Bootstrap ausgerichtet

Code: Select all

'navlist-bs-link'               => 'nav-link',
'navlist-bs-dropdown'           => 'dropdown',
'navlist-bs-dropdown-toggle'    => 'dropdown-toggle',

Ein Multilevelmenü für mobile Endgeräte habe ich bisher noch nicht erstellt, aber das sollte kein Problem sein. Google gibt da mit Sicherheit einiges an Ergebnissen aus wenn man danach sucht.

Ds waren jetzt mal im groben meine Erfahrungen zum Einstieg mit Bootstrap und phpwcms. Alles andere ist ausprobieren und sehen wie es läuft.
Hoffe das hilft dir ein wenig.

Aber eines muß ich dieser Stelle noch los werden.
Ich habe bisher noch kein anderes CMS gefunden bei dem es so einfach ist ein Framework wie Bootstrap einzubinden

[santscho]

Danke Uwe, für die Zusammenfassung! Du bist mein Held des Tages!

[santscho]

Oder diesen hier. Ist eher auf Standart ausgerichtet. Geht über 4 Ebenentiefen. Soviel zur Multilevelnavbar

Code: Select all

{NAV_LIST_UL:PB,0,4,active|nav navbar-nav,active}

Das funktioniert soweit schon mal nicht schlecht. Nur zwei Sachen sind mir aufgefallen:
- Die oberste Ebene "Home" wird auch ausgegeben. Sollte es aber nicht
- Es wird nur 1 Dropdown-Ebene unterstützt. Das Dropdown, welches ich umrandet habe enthält noch Unterebenen, das Dropdown funktioniert aber nicht.



Die von phpwcms generierte Navi enthält im Vergleich zur originalen Bootstrap-Navi zum Teil andere Klassen:

phpwcms:

Code: Select all

<ul class="navbar-nav mr-auto">

   <li class="sub_parent"><a href="home.html" title="Home">Home</a></li>
   <li class="sub_no sub_first"><a href="home.html" class="nav-link nav-link" title="Главная">Главная</a></li>
   <li class="dropdown sub_ul active"><a href="history.html" class="dropdown-toggle nav-link nav-link" title="О храме" data-toggle="dropdown">О храме <b class="caret"></b></a>
  <ul class="dropdown-menu  active">
     <li class="sub_no active active sub_first"><a href="history.html" class="nav-link nav-link" title="История храма">История храма</a></li>
     <li class="sub_no"><a href="andrey.html" class="nav-link nav-link" title="Священномученик Андрей">Священномученик Андрей</a></li>
     <li class="sub_no"><a href="clergy.html" class="nav-link nav-link" title="Клир">Клир</a></li>
     <li class="sub_no"><a href="donations.html" class="nav-link nav-link" title="Пожертвование на храм">Пожертвование на храм</a></li>
     <li class="sub_no sub_last"><a href="contact.html" class="nav-link nav-link" title="Контакты">Контакты</a></li>
  </ul>
  </li>
   <li class="dropdown sub_ul"><a href="kreshenie.html" class="dropdown-toggle nav-link nav-link" title="Таинства" data-toggle="dropdown">Таинства <b class="caret"></b></a>
  <ul class="dropdown-menu">
     <li class="sub_no sub_first sub_last"><a href="kreshenie.html" class="nav-link nav-link" title="Крещение">Крещение</a></li>
  </ul>
  </li>
   <li class="sub_no"><a href="schedule.html" class="nav-link nav-link" title="Расписание">Расписание</a></li>
   <li class="dropdown sub_ul"><a href="events.html" class="dropdown-toggle nav-link nav-link" title="Будни и праздники" data-toggle="dropdown">Будни и праздники <b class="caret"></b></a>
  <ul class="dropdown-menu">
     <li class="sub_no sub_first"><a href="events.html" class="nav-link nav-link" title="События">События</a></li>
     <li class="dropdown sub_ul"><a href="sunday-school.html" class="dropdown-toggle nav-link nav-link" title="Воскресная школа" data-toggle="dropdown">Воскресная школа <b class="caret"></b></a>
    <ul class="dropdown-menu">
       <li class="sub_no sub_first"><a href="bible-stories.html" class="nav-link nav-link" title="Библейская история">Библейская история</a></li>
       <li class="sub_no sub_last"><a href="events-sunday-school.html" class="nav-link nav-link" title="События">События</a></li>
    </ul>
    </li>
     <li class="sub_no"><a href="library.html" class="nav-link nav-link" title="Библиотека">Библиотека</a></li>
     <li class="sub_no sub_last"><a href="social-wellfare.html" class="nav-link nav-link" title="Социальная работа">Социальная работа</a></li>
  </ul>
  </li>
   <li class="sub_no"><a href="photo-gallery.html" class="nav-link nav-link" title="Фотогалерея">Фотогалерея</a></li>
   <li class="dropdown sub_ul sub_last"><a href="online-molebn.html" class="dropdown-toggle nav-link nav-link" title="Записки и молебны" data-toggle="dropdown">Записки и молебны <b class="caret"></b></a>
  <ul class="dropdown-menu">
     <li class="sub_no sub_first"><a href="online-molebn.html" class="nav-link nav-link" title="Подать требу">Подать требу</a></li>
     <li class="sub_no sub_last"><a href="rules-molebn.html" class="nav-link nav-link" title="О ззаписках и молебнах">О ззаписках и молебнах</a></li>
  </ul>
  </li>
</ul>

Bootstrap:

Code: Select all

<ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

[Uwe367]

Wenn die oberste Ebene nicht gezeigt werden soll ändere mal den RT folgender Maßen ab von:

Code: Select all

{NAV_LIST_UL:PB,0,4,active|nav navbar-nav,active}

nach

Code: Select all

{NAV_LIST_UL:B,0,4,active|nav navbar-nav,active}

P steht für Parent. Somit sollte die oberste Ebene Home nicht mehr angezeigt werden.

Die Klassen, die von phpwcms generiert werden kannst du in der conf_template.default_inc ändern, z.B.
Original:

Code: Select all

'navlist-sub_first'             => 'sub_first',
'navlist-sub_last'              => 'sub_last',

Geändert:

Code: Select all

'navlist-sub_first'             => 'my_class_one',
'navlist-sub_last'              => 'my_class_two',

Damit kannst du deine benötigen Klassen genau an den Stellen einbauen wo du sie benötigst. Einfach mal ausprobieren und den gerenderten Quellcode anschauen. Statt sub_first wird nun my_class_one gerendert.
Im BE in der jeweligen Seitenebene kannst du auch CSS Klassen definieren. Dafür gibt es dort eine Spalte CSS Klasse, direkt unter der Spalte Seitentitel. Einfach ausprobieren und den Quellcode ansehen.

Mit dem Dropdown schau ich mir heute Abend mal an. Muß gleich los zur Arbeit. Ist eine reine CSS Geschichte. Ich vermute dein CSS ist nur auf einen Sublevel ausgelegt.
Suche mal nach Bootstrap Multilevel Menü bzw. Bootstrap Multilevel Navbar. Da solltest du fündig werden.
Stackoverflow bietet dafür sicher jede Menge Ergebnisse und Lösungen.

[Oliver Georgi]

Bootstrap hat seine Eigenheiten. Dazu gehört, dass die oberste Menüebene z.B. nicht klickbar ist und nur 1 Untermenü-Ebene erlaubt (kein Flyout wie es Dir vorschwebt). Da musst Du entsprechend mit im Netz zu findenden Lösungen arbeiten.

Ich nutze nie die reine Bootstrap-Implementierung. Das ist oft zu viel des Guten. Ich arbeite mir projektbezogen Lösungen, die dann automatisch zu einer einzigen CSS zusammengefasst und gerendert werden. Bootstrap ist ja erst mal nur ein Framework mit einem Basissatz an Lösungen.

[santscho]

@Uwe
stimmt P=Parent. Ach Gott... Alles schon wieder vergessen.

@Oliver
Dann werde ich am besten meine alte responsive Navigation wiederverwerte.

[Old Boy]

Hi @santscho ... ewig lange nix von dir gelesen

Das ist auch eine sehr schnell zu realisierende Möglichkeit ... mit beliebig vielen Ebenen: https://www.berriart.com/sidr/

[santscho]

Danke, alter Junge! Ja, war lange nicht aktiv. Aber bin wieder da.

Ich habe mich etwas schlauer gemacht. Hat recht viele Lösungen im Netz. Habe für 1$ ein Multilevel-Paket gekauft. Bin gerade am Testen...

[santscho]

Habe ein Multilevel-Navi für Bootstrap gefunden, das vielleicht gehen würde. Habe mal ein Menü generieren lassen.

Code: Select all

{NAV_LIST_UL:B,0,4,active|navbar-nav|CCC|DDD|EEE}

wobei CCC, DDD, EEE einfach mal so Pseudo-Klassen sind, um zu sehen, wo sie in meiner Navigation gerendert werden.

Jetzt muss ich nur noch irgendwie hinkriegen, dass aus dieser phpwcms-Struktur:

Code: Select all

<ul class="navbar-nav">
   <li class="sub_no AAA sub_first"><a href="home-1.html" class="nav-link nav-link" title="Home">Home</a></li>
   <li class="sub_no"><a href="menu-item.html" class="nav-link nav-link" title="Menu Item">Menu Item</a></li>
   <li class="dropdown sub_ul sub_last"><a href="treeview-menu.html" class="dropdown-toggle nav-link nav-link" title="Treeview Menu" data-toggle="dropdown">Treeview Menu <b class="caret"></b></a>
  <ul class="dropdown-menu CCC">
     <li class="sub_no sub_first"><a href="dropdown-item-1.html" class="nav-link nav-link" title="Dropdown item 1">Dropdown item 1</a></li>
     <li class="dropdown sub_ul sub_last"><a href="dropdown-item-2.html" class="dropdown-toggle nav-link nav-link" title="Dropdown item 2" data-toggle="dropdown">Dropdown item 2 <b class="caret"></b></a>
    <ul class="dropdown-menu DDD">
       <li class="sub_no sub_first"><a href="submenu-item-1.html" class="nav-link nav-link" title="Submenu item 1">Submenu item 1</a></li>
       <li class="sub_no"><a href="submenu-item-2.html" class="nav-link nav-link" title="Submenu item 2">Submenu item 2</a></li>
       <li class="dropdown sub_ul sub_last"><a href="submenu-item-3.html" class="dropdown-toggle nav-link nav-link" title="Submenu item 3" data-toggle="dropdown">Submenu item 3 <b class="caret"></b></a>
      <ul class="dropdown-menu EEE">
         <li class="sub_no sub_first"><a href="multi-level-1.html" class="nav-link nav-link" title="Multi level 1">Multi level 1</a></li>
         <li class="sub_no sub_last"><a href="multi-level-2.html" class="nav-link nav-link" title="Multi level 2">Multi level 2</a></li>
      </ul>
      </li>
    </ul>
    </li>
  </ul>
  </li>
</ul>

diese Bootstrap-Navi-Struktur wird:

Code: Select all

<ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home </a></li>
      <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Treeview menu </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
          <li><a class="dropdown-item icon-arrow" href="#"> Dropdown item 2 </a>
            <ul class="submenu dropdown-menu">
              <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
              <li><a class="dropdown-item icon-arrow" href="#">Submenu item 3  </a>
                <ul class="submenu dropdown-menu">
                  <li><a class="dropdown-item" href="#">Multi level 1</a></li>
                  <li><a class="dropdown-item" href="#">Multi level 2</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

[Oliver Georgi]

Schau mal ab hier: https://github.com/slackero/phpwcms/blo ... c.php#L323

Das Übergeben zusätzlicher Klassen bei der Menügenerierung sollte nicht nötig sein.

[Old Boy]

Habe ein Multilevel-Navi für Bootstrap gefunden, das vielleicht gehen würde.
...

Welches AddOn hast du denn verwendet? Hast du mal einen Link?

[Uwe367]

Gerade mal ein bischen gesucht und das hier finde ich ganz interssant.
Bootstrap 4 Responsive Navbar with Multi level Dropdowns
Habs jetzt noch nicht ausprobiert, sollte sich aber relativ leicht in phpwcms einbauen lassen und, so wie ich das sehe, sollte das auch in der mobilen Version klappen. Die Klassen sollten sich leicht in der conf_template.default_inc.php anpassen lassen.
Auch mal die Demo ansehen.

Sehe gerade daß Das Menü mit Bootstrap 4.1.3 läuft. Müßte man mal mit 4.4.x testen.

[EDIT]
Gerade getestet. Klappt auch mit Bootstrap 4.4.
[/EDIT]

[santscho]

Welches AddOn hast du denn verwendet? Hast du mal einen Link?

Ich bastle immer noch rum. Sobald ich was konkretes habe, werde ich mich wieder melden.

Sehe gerade daß Das Menü mit Bootstrap 4.1.3 läuft. Müßte man mal mit 4.4.x testen.

Werde mir das gerne mal anschauen

[santscho]

Ich vermute...

{NAV_LIST_UL:PB,0,2,|sidebar-nav} rendert die alte Bootstrap 3 Navigation.