Skip to content

Fixed Layout für Bootstrap 5

Jump to bottom
blackcoder87 edited this page Jun 17, 2024 · 2 revisions

Das System wurde von Bootstrap 3 auf Bootstrap 5 umgestellt. Bootstrap5 unterstützt einige Klassen von Bootstrap 3 nicht mehr oder diese wurden im Namen geändert. Daher mussten alle Module und das Standard Layout angepasst werden.

Diese Dokumentation ist wichtig für Nutzer die das Standard Layout auf ihren Bedürfnisse angepasst haben. Alle hier stehenden Codes sind für Bootstrap 5. Ihr könnt diese mit "strg + c" oder rechte Maustaste - Kopieren und in die index.php/index_full.php mit "strg + v" oder rechte Maustaste - einfügen. Damit ersichtlich ist ab welche Zeile welcher Code ersetzt werden soll, werden euch die Zeile von/bis angegeben.

Vorab wichtige Information: Wenn das Layout nach euren Wünschen von euch bearbeitet, der Ordnername jedoch nicht geändert wurde, ist es wichtig euer Layout vor dem Update zu sichern und die Änderungen in eurem gesicherten Layout durchzuführen. Beim Update wird auch das application/layouts/clan3columns Layout überschrieben und bei nicht sichern eures bearbeiteten Layout würden die Arbeiten nicht mehr vorhanden sein.

Folgendes wurde am Standard Layout application/layouts/clan3colmns geändert:

  • Inhalt des Headers
  • Grid System
  • Content style Klasse .panel zu .card
  • style.css

Inhalt des Headers

Öffnet die Datei application/layouts/clan3columns/index.php , ersetzt alles von einschließlich Zeile 13 bis einschließlich Zeile 76 mit dem unten stehenden Code. Das gleiche Vorhaben bitte auch in der application/layouts/clan3columns/index_full.php durchführen.

      <nav class="navbar navbar-expand-lg navbar-light navbar-gaming bg-light fixed-top d-sm-block d-md-none">
        <div class="container-fluid">
          <a class="navbar-brand" href="<?=$this->getUrl() ?>"><?=$this->getTrans('navigation') ?></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="<?=$this->getTrans('togglenavigation') ?>">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <?php
            echo $this->getMenu(
                1,
                '<div class="card card-gaming">
                     <div class="card-header">%s</div>
                        <div class="card-body">
                            %c
                        </div>
                 </div>'
            );
            ?>
          </div>
        </div>
      </nav>

      <div class="container">
          <div class="gaming">
              <div id="carousel-generic" class="carousel slide" data-bs-ride="carousel">
                  <div class="carousel-indicators">
                      <button type="button" data-bs-target="#carousel-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="<?=$this->getTrans('slide1') ?>"></button>
                      <button type="button" data-bs-target="#carousel-generic" data-bs-slide-to="1" aria-label="<?=$this->getTrans('slide2') ?>"></button>
                      <button type="button" data-bs-target="#carousel-generic" data-bs-slide-to="2" aria-label="<?=$this->getTrans('slide3') ?>"></button>
                  </div>
                  <div class="carousel-inner">
                      <div class="carousel-item active">
                          <img src="<?=$this->getBaseUrl($this->getLayoutSetting('slider1')) ?>" alt="<?=$this->getTrans('slider1') ?>">
                      </div>
                      <div class="carousel-item">
                          <img src="<?=$this->getBaseUrl($this->getLayoutSetting('slider2')) ?>" alt="<?=$this->getTrans('slider2') ?>">
                      </div>
                      <div class="carousel-item">
                          <img src="<?=$this->getBaseUrl($this->getLayoutSetting('slider3')) ?>" alt="<?=$this->getTrans('slider3') ?>">
                      </div>
                  </div>
                  <button class="carousel-control-prev carousel-control left" type="button" data-bs-target="#carousel-generic" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden"><?=$this->getTrans('previous') ?></span>
                  </button>
                  <button class="carousel-control-next carousel-control right" type="button" data-bs-target="#carousel-generic" data-bs-slide="next">
                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
                     <span class="visually-hidden"><?=$this->getTrans('next') ?></span>
                 </button>
              </div>

              <div class="gaming-name">
                  <?=$this->getLayoutSetting('header')?>
              </div>
          </div>
      </div>

Grid System

Auch das Grid-System hat sich bei Bootstrap 5 geändert. Auch hier bitte wie folgt vor gehen:

Öffnet application/layouts/clan3coumns/index.php und ersetzt folgende Codes:

Zeile 82 oder nach Bearbeitung des Header Zeile 74

alter Code: <div class="hidden-xs col-sm-2 col-md-3 col-lg-2">

neuer Code: <div class="d-none d-md-block col-lg-3 col-xl-2">

Zeile 95 oder nach Bearbeitung des Header Zeile 87

alter Code: <div class="col-xs-12 col-sm-8 col-md-7 col-lg-8">

Neuer Code: <div class="col-12 col-lg-7 col-xl-8">

Zeile 103 oder nach Bearbeitung des Header Zeile 95

alter code: <div class="col-xs-12 col-md-2">

neuer code: <div class="col-12 col-lg-2">

Zeile 124 oder nach Bearbeitung des Header Zeile 116

alter code: <div class="col-xs-12 col-sm-6">

neuer code: <div class="col-12 col-lg-6">

Zeile 127 oder nach Bearbeitung des Header Zeile 119

alter code: <div class="col-xs-12 col-md-6 nav">

neuer code: <div class="col-12 col-md-6 nav">

Öffnet application/layouts/clan3coumns/index_full.php und ersetzt folgende Codes:

Zeile82 oder nach Bearbeitung des Header Zeile 74

alter code: <div class="hidden-xs col-sm-3 col-md-2">

Neuer code: <div class="d-none d-md-block col-lg-3 col-xl-2">

Zeile 95 oder nach Bearbeitung des Header Zile 87

alter code: <div class="col-12 col-md-9 col-lg-10">

neuer code: <div class="col-xs-12 col-lg-9 col-xl-10">

Zeile 111 oder nach Bearbeitung des Header Zeile 103

alter code: <div class="col-xs-12 col-sm-6">

neuer code: <div class="col-12 col-md-6">

Zeile 114 oder nach Bearbeitung des Header Zeile 106

alter code: <div class="col-xs-12 col-sm-6 nav">

neuer code: <div class="col-12 col-md-6 nav">

Content style Klasse .panel zu .card

Unter Bootstrap 5 wurde die Klasse .panel in .card geändert, daher ersetzt alle .panel in der application/layouts/clan3columns/index.php und index_full.php

alte style Klassen: .panel .panel-gaming .panel-heading .panel-body .panel-default

neue style Klassen: .card .card-gaming .card-header .card-body .card-default

style.css

Durch diverse Änderungen in der index.php und index_full.php, sowie auch Darstellungsänderung von Bootstrap 3 zu Bootstrap 5, muss auch die style.css bearbeitet werden. Hier bitte folgende Codes in eure application/layouts/clan3columns/style.css einfügen

@media (min-width: 768px) {
    .footer .container .gaming .nav {
        display:block;
    }
}

.btn-primary,
.bg-primary{
    background-color:#337ab7 !important;
    color:#ffffff !important;
}

.btn-primary {
    border-color:#2e6da4;
}

.border-primary {
    border-color:#337ab7 !important;
}

/*-- begin carusel -- */

header .carousel-control.left{
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}

header .carousel-control.right{
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}

/*-- ende carusel -- */
.navbar-gaming >.container-fluid>#navbarNav {
    margin-top:8px;
    max-height:550px;
    overflow: scroll;
}

Jetzt müssen wir noch noch die style Klasse .panel in der style.css ändern auf .card

alte style Klassen: .panel .panel-gaming .panel-heading .panel-body .panel-default

neue style Klassen: .card .card-gaming .card.header .card-body .card-default

Nach diesen Änderungen ist euer Layout bereit für Bootstrap 5.

Dokumentation für ilch 2 | Content-Management-System | Copyright © 2004-2024 by ilch.de

Wiki für ilch-2

Benutzer

  • Inhaltsverzeichnis
    Hier findet man u.a. die Installationsanleitung, sowie Fehler- und Problem-behebungen

Entwickler

  • Inhaltsverzeichnis
    Hier findet man Informationen zum Script, Konzept und dem Programmierstil

Designer

  • Inhaltsverzeichnis
    Hier findet man Informationen über den Aufbau und Anpassung von Layouts und Modulen

Video-Tutorials


Clone this wiki locally