Ergebnis 1 bis 6 von 6

Thema: kleine Fragen zu bootstrap4

  1. #1

    kleine Fragen zu bootstrap4

    Ich habe mein Problem selbst lösen können, würde allerdings Ressourcen sparen und den Thread gerne für kleine Bootstrap fragen kapern

    Eigeninitiative ist mir wichtig, ich will hier niemanden zwingen mir sämtliche codes vorzukauen.... so findet kein Lernprozess statt... Ich versuche immer möglichst alles selbst herauszufinden und frage im grunde nur wenn ich wirklich nicht weiter weis oder keine informationen finde


    Ursprünglicher Post

    Spoiler: 

    Hi,

    ich versuche mich gerade mit bootstrap4 einzuarbeiten und will meine testseite sowohl aufn smartphone als auch vernünftig bedienen können. dazu stoße ich aktuell auf ein Problem mit dem Content. Es war von mir dann eigentlich gedacht, das neu gelernte anschließend in ein kleines projekt einzubauen. nun komme ich aber leider nicht weiter...

    ich habe das template bereits gesplittet in head.php, footer.php und nav.php

    in der index.php werden die dementsprechenden template files reingeladen. funktioniert auch alles soweit so gut.

    Index.php
    Code (HTML5):
    1.  
    2. <!doctype html>
    3. <html lang="en">
    4.     <?php include_once('head.php'); ?>
    5.     <body class="bg-dark">
    6.         <?php include_once('nav.php'); ?>
    7. <?php    
    8.    $site = array();
    9.    $site['dashboard']    = './cts/dashboard.php';
    10.    $site['addsw']        = './cts/addsw.php';
    11.    $site['addhw']        = './cts/addhw.php';
    12.    $site['listsw']       = './cts/listsw.php';
    13.    $site['listhw']       = './cts/listhw.php';
    14.  
    15.    // Inhalt Start
    16.  
    17.    if (isset($_GET['site'], $site[$_GET['site']]))
    18.    {
    19.       include $site[$_GET['site']];
    20.       //$_SESSION['sitetitel'] = $_GET['acp'];
    21.    } else {
    22.       echo '<META   HTTP-EQUIV = "Refresh"; CONTENT = "0; URL=index.php?lang=de&site=dashboard">';
    23.     }
    24. ?>
    25.  
    26.         <?php include_once('footer.php'); ?>
    27.        
    28.     </body>
    29. </html>
    30.  
    head.php
    Code (HTML5):
    1.  
    2.     <meta charset="utf-8">
    3.     <meta name="viewport" content="width=device, initial-scale=1, shrink-to-fit=no">
    4.     <link rel="icon" href="./img/icon95.png">
    5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    6.     <link rel="stylesheet" href="./css/custom.css">
    7.     <!--<link rel="stylesheet" href="./css/base.css">-->
    8.     <title>AMIGO! The Retro Collector</title>
    9.    
    10.     <?php require_once('./support/de.php'); ?>
    11.     <!-- jQuery first, then Tether, then Bootstrap JS. -->
    12.         <script src="js/jquery-3.3.1.slim.min.js"></script>
    13.         <script src="js/popper.min.js"></script>
    14.         <script src="js/bootstrap.min.js"></script>
    15. </head>
    16.  
    nav.php
    Code (HTML5):
    1.  
    2. <nav class="navbar navbar-expand-md navbar-dark bg-dark border-bottom border-warning">
    3.     <a class="navbar-brand align-middle" href="#">
    4.             <img src="./img/logo_square.png" height="70" class="d-inline-block align-top" alt="">
    5.     </a><div class=" text-center text-success font-weight-bolder font-italic"><h3>SEITENNAME!</h3>Kleiner SLOGAN</div>
    6.    
    7.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
    8.         <span class="navbar-toggler-icon"></span>
    9.     </button>
    10.        
    11.     <div class="collapse navbar-collapse" id="navbarSupportedContent">
    12.         <ul class="navbar-nav mr-auto">
    13.             <li class="nav-item active"><a href="index.php?lang=de&site=dashboard" class="nav-link text-warning"><?php echo str_start ?></a></li>
    14.             <li class="nav-item"><a href="index.php?lang=de&site=dashboard" class="nav-link text-warning"><?php echo str_cats ?></a></li>
    15.             <li class="nav-item dropdown">
    16.                 <a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"><?php echo str_collect ?></a>
    17.                 <div class="dropdown-menu bg-dark border-warning" aria-labelledby="navbarDropdown">
    18.                     <a class="dropdown-item text-warning" href="index.php?lang=de&site=listhw"><?php echo str_listhw ?></a>
    19.                     <a class="dropdown-item text-warning" href="index.php?lang=de&site=listsw"><?php echo str_listsw ?></a>
    20.                     <div class="dropdown-divider"></div>
    21.                     <a class="dropdown-item text-warning" href="#"><?php echo str_srchhw ?></a>
    22.                     <a class="dropdown-item text-warning" href="#"><?php echo str_srchsw ?></a>
    23.                 </div>
    24.             </li>
    25.         </ul>
    26.     </div>
    27. </nav>
    28.  
    footer.php
    Code (HTML5):
    1. <footer class="fixed-bottom bg-dark text-white mt-4 text-center border-top border-warning">
    2.     <div class="container-fluid py-3">
    3.     Amigo! The Retro Collector &copy; 2019 Neocrypton
    4.     </div>
    dashboard.php
    Code (HTML5):
    1. <div  class="container-fluid text-light ">
    2.           <div class="row">
    3.             <div class="col rounded-lg bg-secondary ml-1 mr-1 mb-1 mt-2 text-center">
    4.                 <img src="./img/128/addsw128.png" class="d-inline-block align-top m-2" alt="">  
    5.                 <img src="./img/128/addhw128.png" class="d-inline-block align-top m-2" alt="">  
    6.             </div>
    7.             <div class="col rounded-lg bg-secondary mr-1 ml-0 mb-1 mt-2 text-center">
    8.                 <img src="./img/128/srchsw128.png" class="d-inline-block align-top m-2" alt="">  
    9.                 <img src="./img/128/srchhw128.png" class="d-inline-block align-top m-2" alt="">
    10.                 <img src="./img/128/cllctvw128.png" class="d-inline-block align-top m-2" alt="">  
    11.             </div>
    12.             <div class="w-100"></div>
    13.             <div class="col rounded-lg bg-secondary ml-1 mr-1 mb-1 mt-0 text-center"></div>
    14.             <div class="col rounded-lg bg-secondary ml-0 mr-1 mb-1 mt-0 text-center">Column</div>
    15.             <div class="w-100"></div>
    16.             <div class="col rounded-lg bg-secondary mr-1 ml-1 mt-2">Column</div>
    17.           </div>
    18.         </div>
    Ich habe den footer fixiert, da ich gerne immer unten in voller breite haben möchte. das klappte von der optik her super.

    den contentinhalt hingegen der sich in der dashboard.php befindet, hätte cih gern scrollbar. das ist aktuell auf der desktop ansicht nicht notwendig, aber am smartphone müsste ich etwas scrollen damit ich den unteren rest dargestellt bekäme... leider krieg ich das grade absolut nicht hin.. ich habe es bereits mit der eigenschaft overflow-auto im DIV-Container der dashboard.php probiert. dies macht mir jedoch leider nicht den content scrollbar wie ursprünglich von mir erwartet :/

    ich hoffe es wird in etwa verstanden was ich meine und jemand von euch kann mir helfen. schonmal danke im vorraus
    Geändert von venom2k6 (16.09.19 um 09:59 Uhr)

  2. #2
    Mitglied

    (Threadstarter)

    Avatar von venom2k6
    Registriert seit
    Jul 2013
    Beiträge
    85

    Re: Frage bootstrap4 und Content Container

    Ich habe nun den Footer entfernt. Anschließend war die Seite scrollbar

    habe dennoch eine weitere Frage: im css Ordner von Bootstrap befinden sich neben den *.css Dateien auch *.css.map Dateien. werden die *.map dateien benötigt oder kann ich die bei einem Upload vernachlässigen/löschen?

  3. #3
    Suchtspielmacher (ehm.) Avatar von werner
    Registriert seit
    Jul 2014
    Ort
    Mannheim
    Beiträge
    668

    Re: kleine Fragen zu bootstrap4

    Soweit ich weiß, dient das dem Debugging. Besonders bei verkleinerten CSS Files oder CSS-Präprozessoren ist es hilfreich.


    Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.
    Quelle

    Du kannst die Daten also ruhig nicht hochladen, außer du testest direkt in deiner Produktionsumgebung
    Für diesen Beitrag bedankt sich venom2k6

  4. #4
    Mitglied

    (Threadstarter)

    Avatar von venom2k6
    Registriert seit
    Jul 2013
    Beiträge
    85

    Re: kleine Fragen zu bootstrap4

    Aktuell teste ich überwiegend in meiner Entwicklungsumgebung. Anfangs mit Xampp... das wurde mir aber etwas viel ständig Datenbanken und Dateien hin und her zu schieben. nun bin ich auf UwAmp gestoßen. Dieser portable Webserver macht genau das ich brauche. einfach die exe starten und der Server läuft einfach..

    Ich hatte davor xampp und mamp probiert, die wollten aber nicht so wie sie sollten und ich wollte

    selbiges gilt wohl auch für die js.map Dateien nehme ich an

  5. #5
    Suchtspielmacher (ehm.) Avatar von werner
    Registriert seit
    Jul 2014
    Ort
    Mannheim
    Beiträge
    668

    Re: kleine Fragen zu bootstrap4

    Zitat Zitat von venom2k6 Beitrag anzeigen

    selbiges gilt wohl auch für die js.map Dateien nehme ich an
    Ja, genau, Lässt du einfach drin und auf dem Live-System kannst du sie rausnehmen. Macht aber auch nichts, wenn die mal online ist, immerhin ist bootstrap ja unminified im Netz zu finden.
    Für diesen Beitrag bedankt sich venom2k6

  6. #6

    Re: kleine Fragen zu bootstrap4

    *.map files sind Sourcemaps, die muss man nicht in Production Umgebungen mitnehmen, schadet aber auch nicht wenns man es tut.
    Beispiel bei css:
    Bootstrap ist in SASS/SCSS geschrieben, das CSS wird nur daraus transpiliert. Normalerweise wird am ende eine finale CSS erzeugt. Du willst aber während des Entwickelns gerne wissen in welcher Datei die entsprechende CSS Anweisung gerade steht, deshalb gibt es sourcemaps.
    Siehe mein Screenshot im Anhang, dort sind es eben LESS und nicht SASS/SCSS Dateien, die zu CSS transpiliert werden. In meinen Dev-Tools (Chromium bei mir) sehe ich aber den wirklichen Ursprung.

    Genauso ist es bei javascript Dateien. JS wird heute gebundled, minified etc. das du aber effektiv Fehler suchen kannst, gibt es Sourcemaps die die reele Fehlerquelle anzeigen.
    Klicke auf die Grafik für eine größere Ansicht 

Name:	sourcemap.png 
Hits:	18 
Größe:	56,4 KB 
ID:	55181
    Für diesen Beitrag bedankt sich venom2k6

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •