NAV_LIST_UL in Kombination mit Bootstrap 4

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Old Boy » Mon 9. Jan 2017, 14:33

Ich bin kein echter Freund von Bootstrap, aber man kommt anscheinend nicht mehr drum herum.

Die BS 3.6 ff ... läuft bei mir auch ohne Probleme und das Navigationsmenü per {NAV_LIST_UL:PB ... } läuft rund.

Aber die Entwicklung geht ja weiter und die Version 4.0.0-alpha6 von Bootstrap läd zum Testen ein.
Habe deshalb noch einmal meinen localhost bemüht und eine phpwcms dev1.9 als Kombipack installiert.

Nun hat sich aber das Menü bei der Version 4 von BS anscheinend geändert...

Meine neugierige Frage deshalb:
Kann ich eine funktionierende Bootstrap 4 Navi out of the Box erzeugen mittels der Möglichkeiten der NAV_LIST_UL von phpwcms ...
meine Versuche waren bisher leider nicht erfolgreich, denn die WIKI Einträge bezüglich der Parameter sind kaum noch lesbar!

Der Menüaufbau sollte so aussehen bei der BS 4.0:
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">

<!-- Ab hier kommt ja eigentlich erst die NAV_LIST_UL ins Spiel -->
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

</div>
</nav>
Wie bekommt man die Klassen nav-item und nav-link sowie disabled an die richtige Stelle?
Hat da ggf. von euch schon jemand Erfolg in der Sache?

User avatar
Oliver Georgi
Site Admin
Posts: 9576
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Oliver Georgi » Mon 9. Jan 2017, 16:31

Bootstrap 4 ist aktuell kein Thema und phpwcms wird frühestens mit Vorliegen eines Release Candidates von Bootstrap 4 darauf vorbereitet.

Wie man an Alpha 6 sieht, gab es bis heute keinen Feature Freeze – erneut zahlreiche Änderungen.

Wer Bootstrap 4 bereits jetzt unterstützen möchte, kann sich jederzeit eigene Menüroutinen schreiben.

Das von Dir beschriebene Menü in Ebene 1 dürfte aber schon jetzt machbar sein. Der Disabled Menüstatus macht keinen Sinn auf einer klassischen Webseite.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Old Boy » Mon 9. Jan 2017, 16:41

Oliver Georgi wrote:Bootstrap 4 ist aktuell kein Thema und phpwcms wird frühestens mit Vorliegen eines Release Candidates von Bootstrap 4 darauf vorbereitet.
...
OK, das ist doch schon mal eine zukunftsträchtige Aussage, danke!

Dieter:Bahr
Posts: 45
Joined: Tue 28. Feb 2017, 11:18

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Dieter:Bahr » Wed 6. Nov 2019, 14:31

Es ist ja nun seit dem letzten Post einiges an Zeit vergangen ...
Mittlerweile gibt es Bootstrap in der Version 4.2.1
Wollte mal fragen, ob das mittlerweile eine Möglichkeit gibt die neue Strucktur des Menüs in Phpwcms zu integrieren?
bzw. wo wird die aktuelle Struktur des Menüs erstellt?

Thx

Code: Select all

<ul>
      <li>
           <a> link </a>
    </li>
      <li>
           <a> link </a>
    </li>
</ul>

User avatar
Oliver Georgi
Site Admin
Posts: 9576
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Oliver Georgi » Wed 6. Nov 2019, 14:45

Die Struktur ist doch die selbe. Lediglich die Klassen werden angepasst, siehe conf.template_default.inc.php
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Old Boy » Wed 6. Nov 2019, 15:01

Genau da wäre ein funktionierendes Beispiel eine unschlagbare Hilfe ...
denn ohne saubere Navigationsdarstellung ist das beste CMS nix wert ;)

Solltest du da also mal etwas Zeit opfern können ... ich glaube da wäre der verbleibende Rest der phpwcms-Getreuen sehr dankbar.

Mein Gott, was habe ich da in den vergangenen Monaten schon (ziemlich blind) rumgefummelt ...

kmstario
Posts: 387
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by kmstario » Wed 6. Nov 2019, 16:35

Holla,

also im Prnzip nutze ich Bootstrap für alle aktuellen Projekte. Hier mal der Ausschnitt, den ich oft so verwende:

Code: Select all

<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar nav-bg">
        <div class="container">
          <div class="theme-header clearfix">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button class="navbar-toggler" type="button" data-toggle="collapse"  aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                <span class="fa fa-menu"></span>
                <span class="fa fa-menu"></span>
                <span class="fa fa-menu"></span>
              </button>
              <a href="index.html" class="navbar-brand"></a>
            </div>
            <div class="collapse navbar-collapse" id="main-menu">

{NAV_LIST_UL:B,0,2,active|navbar-nav mr-auto w-100 justify-content-end,|active}

            </div>
          </div>
        </div>
        <div class="mobile-menu" data-logo="picture/logo.svg"></div>
      </nav>
Natürlich mit CSS etwas aufhübschen und in der conf.template_default.inc.php passe ich nur diese Zeilen an:
Die anderen vorhandenen Klassen muss man ja nicht ansprechen

Code: Select all

    
    'navlist-sub_ul'                => 'nav-item',
    'navlist-sub_no'                => 'nav-item',

Und in der Ausgabe sieht es dann so aus:

Code: Select all

<ul class="navbar-nav mr-auto w-100 justify-content-end">
   <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
   <li class="dropdown nav-item"><a href="xxx.html" class="dropdown-toggle nav-link" title="xxx" data-toggle="dropdown">xxx <b class="caret"></b></a>
  <ul class="dropdown-menu dropdown-menu-left">
     <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
     <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
  </ul>
  </li>
   <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
   <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
   <li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
</ul>
Vg Andreas

P.S. Achja, dazu binde ich Font Awesome ein (fa fa-menu)
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

Dieter:Bahr
Posts: 45
Joined: Tue 28. Feb 2017, 11:18

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Dieter:Bahr » Wed 6. Nov 2019, 17:38

Hi Andreas,
also, bei dem von Dir beschriebenen Codes kommt bei mir völliger Unsinn raus.
Dropdown geht auch nicht. Danke trotzdem

Gruss Dieter

kmstario
Posts: 387
Joined: Thu 27. Jul 2006, 11:34
Location: Berlin
Contact:

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by kmstario » Wed 6. Nov 2019, 18:22

Was bedeutet völliger unsinn??

Schau einfach mal hier rein, da gibt es X verschiedene.

Und hier gern auch mal eine Copy and Paste Variante(bereinigt):
Dazu auch Jquery 3.3.1 immer aktiviert und keine CSS Datei, also frontend.css abwählen.


HTML Kopf:

Code: Select all

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
Haupt:

Code: Select all

<!-- JS: assets/js/popper.min.js -->
    <!-- JS: assets/js/bootstrap.min.js -->

  <header class="header_area">

    <div class="main_menu">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
        <div class="container">
          <div class="theme-header clearfix">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
              <a href="index.html" class="navbar-brand"></a>
            </div>
            <div class="collapse navbar-collapse" id="main-menu">

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

            </div>
          </div>
        </div>
        <div class="mobile-menu" data-logo="picture/logo.svg"></div>
      </nav>
    </div>
  </header>
        <!-- Start Slider -->
                {HEADER}
        <!-- End Slider -->

        <!-- Start Content -->
        <main class="section">
                            {CONTENT}
        </main>
        <!-- End Content  -->

         <!-- Start Footer -->
    <footer class="footer">
      <div class="container">
        <p class="mb-0">{DATE_SHORT} &copy; </p>
      </div>
    </footer>
        <!-- End Footer -->
Skript- und CSS Pfade müssen natürlich eurer Struktur angepasst sein. Ich hosten immer lokal und nutze keinerlei externe Verbindungen(CDN's).

Das ergibt eine Bootstrap 4 Standart Navigation.

Der Rest ist natürlich Gestaltung via CSS.
Ich nutze Bootstrap 4.3.1

Für Parent Link Klick gibts auch ein kleines JS Snipp:

Code: Select all

jQuery(function($) {
  if ($(window).width() > 769) {
    $('.navbar-nav .dropdown > a').click(function() {
      location.href = this.href;
    });

  }
});
Vg Andreas
--------------------------------------------

Alles Gelingen hat sein Geheimnis, alles Mißlingen seine Gründe.
PHPWCMS ist einfach nur großartig!

Dieter:Bahr
Posts: 45
Joined: Tue 28. Feb 2017, 11:18

Re: NAV_LIST_UL in Kombination mit Bootstrap 4

Post by Dieter:Bahr » Thu 7. Nov 2019, 11:29

Moin Andreas,
danke nochmal für den Hinweis mit BS 4.3.1. Mit etwas hin und her, läuft es nun so wie ich mir das vorstelle :-)

Mit Bootstrap 4.2.1 läuft es bei mir garnicht. Dropdown geht nicht usw.
Nach dieser Erfahrung muß ich gestehen, das ich Oliver bezüglich Bootstrap 4+ langsam verstehen kann.
(ich hätte nicht gedacht, das ich das mal sage :-)
Es mag sein, das das ein oder andere unter Umständen mit BS 4+ etwas komfortabler ist, aber solange man sich dort nicht auf eine verläßliche Methode geeinigt hat, macht es nicht wirklich Sinn das zu integrieren, da man ja nicht weiß ob es vielleicht mit 4.4.1 wieder alles anders ist.


Gruss Dieter

Post Reply