• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

kleine Fragen zu bootstrap4

venom2k6

NGBler

Registriert
15 Juli 2013
Beiträge
107
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
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
[src=html5]
<!doctype html>
<html lang="en">
<?php include_once('head.php'); ?>
<body class="bg-dark">
<?php include_once('nav.php'); ?>
<?php
$site = array();
$site['dashboard'] = './cts/dashboard.php';
$site['addsw'] = './cts/addsw.php';
$site['addhw'] = './cts/addhw.php';
$site['listsw'] = './cts/listsw.php';
$site['listhw'] = './cts/listhw.php';

// Inhalt Start

if (isset($_GET['site'], $site[$_GET['site']]))
{
include $site[$_GET['site']];
//$_SESSION['sitetitel'] = $_GET['acp'];
} else {
echo '<META HTTP-EQUIV = "Refresh"; CONTENT = "0; URL=index.php?lang=de&site=dashboard">';
}
?>

<?php include_once('footer.php'); ?>

</body>
</html>
[/src]
head.php
[src=html5]
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="./img/icon95.png">
<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">
<link rel="stylesheet" href="./css/custom.css">
<!--<link rel="stylesheet" href="./css/base.css">-->
<title>AMIGO! The Retro Collector</title>

<?php require_once('./support/de.php'); ?>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
[/src]
nav.php
[src=html5]
<nav class="navbar navbar-expand-md navbar-dark bg-dark border-bottom border-warning">
<a class="navbar-brand align-middle" href="#">
<img src="./img/logo_square.png" height="70" class="d-inline-block align-top" alt="">
</a><div class=" text-center text-success font-weight-bolder font-italic"><h3>SEITENNAME!</h3>Kleiner SLOGAN</div>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="index.php?lang=de&site=dashboard" class="nav-link text-warning"><?php echo str_start ?></a></li>
<li class="nav-item"><a href="index.php?lang=de&site=dashboard" class="nav-link text-warning"><?php echo str_cats ?></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"><?php echo str_collect ?></a>
<div class="dropdown-menu bg-dark border-warning" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-warning" href="index.php?lang=de&site=listhw"><?php echo str_listhw ?></a>
<a class="dropdown-item text-warning" href="index.php?lang=de&site=listsw"><?php echo str_listsw ?></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-warning" href="#"><?php echo str_srchhw ?></a>
<a class="dropdown-item text-warning" href="#"><?php echo str_srchsw ?></a>
</div>
</li>
</ul>
</div>
</nav>
[/src]
footer.php
[src=html5]<footer class="fixed-bottom bg-dark text-white mt-4 text-center border-top border-warning">
<div class="container-fluid py-3">
Amigo! The Retro Collector © 2019 Neocrypton
</div>
</footer>[/src]
dashboard.php
[src=html5]<div class="container-fluid text-light ">
<div class="row">
<div class="col rounded-lg bg-secondary ml-1 mr-1 mb-1 mt-2 text-center">
<img src="./img/128/addsw128.png" class="d-inline-block align-top m-2" alt="">
<img src="./img/128/addhw128.png" class="d-inline-block align-top m-2" alt="">
</div>
<div class="col rounded-lg bg-secondary mr-1 ml-0 mb-1 mt-2 text-center">
<img src="./img/128/srchsw128.png" class="d-inline-block align-top m-2" alt="">
<img src="./img/128/srchhw128.png" class="d-inline-block align-top m-2" alt="">
<img src="./img/128/cllctvw128.png" class="d-inline-block align-top m-2" alt="">
</div>
<div class="w-100"></div>
<div class="col rounded-lg bg-secondary ml-1 mr-1 mb-1 mt-0 text-center"></div>
<div class="col rounded-lg bg-secondary ml-0 mr-1 mb-1 mt-0 text-center">Column</div>
<div class="w-100"></div>
<div class="col rounded-lg bg-secondary mr-1 ml-1 mt-2">Column</div>
</div>
</div>[/src]

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 :)
 
Zuletzt bearbeitet:

venom2k6

NGBler

Registriert
15 Juli 2013
Beiträge
107
  • Thread Starter Thread Starter
  • #2
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?
 

werner

Suchtspielmacher (ehm.)

Registriert
20 Juli 2014
Beiträge
743
Ort
Mannheim
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 :D
 

venom2k6

NGBler

Registriert
15 Juli 2013
Beiträge
107
  • Thread Starter Thread Starter
  • #4
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 :D

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

KingJamez

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
500
*.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.
sourcemap.png
 
Oben