Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

  max-width Layout-Breite
Geschrieben von: FurtFan86 - 12.11.2019, 13:03 - Forum: Bootstrap 4 - Antworten (1)

Moin zusammen,

ich bin gerade dabei für eine TYPO3 Website das Layout zu modifizieren. Als Basis dient das Introduction Package zusammen mit dem Bootstrap-Package.

https://www.bootstrap-package.com/de/

Ich möchte gerne, dass das gesamte Layout eine max-width von 1280PX hat und immer mittig positioniert ist.. Der Header und Footer soll also nicht die maximale Breite wie in den Default-Einstellungen des Themes haben. 

Ich finde leider nicht die Stelle im CSS, die das global regelt. hat wer eine Idee?

Herzliche Grüße
Lennart

Drucke diesen Beitrag

  Multi-Language in 10.0.8
Geschrieben von: bootshock - 01.11.2019, 23:19 - Forum: Bootstrap 4 - Keine Antworten

Hallo
Nach Installation als User von Typo3 9.5.10 habe ich das Bootstrap-Package 10.0.8 über das Backend installiert. Alles funktioniert.
Nun habe ich im Backend über List > Typo3 Container ganz oben im Seitenbaum > Website Language: die weiteren Sprachen aufgenommen.
Dann über Page > Congratulations (erste Seite mit Weltkugel) die entsprechenden Übersetzungen gemacht. Leider werden diese im Frontend nicht dargestellt. Klicke ich z.B. ganz unten auf der Webseite auf "Deutsch", so wird das nicht auf Deutsch dargestellt.
Ich vermute, dass im Backend noch etwas gesetzt werden muss, damit dann die verschiedenen Sprachen im Frontend auch abrufbar sind. Hat jeman einen Tip dazu?

Hier funktioniert es ja auch: https://www.bootstrap-package.com/
Grüße

Drucke diesen Beitrag

Wink Webspace-Angebote
Geschrieben von: Harald.Lichowski - 29.10.2019, 11:51 - Forum: Webhosting - Keine Antworten

Hallo,

ich wollte euch mal unsere Webspace-Angebote vorstellen.


Webspace S:
Speicherplatz: 5 GB
MySQL Datenbanken: 5
E-Mail Adressen: 15 Stück
Subdomains unlimitiert
SSL Zertifikat
Webinterface: Plesk

um 21,60€


Webspace M:
Speicherplatz: 20 GB
MySQL Datenbanken: 20
E-Mail Adressen: 25 Stück
Subdomains unlimitiert
SSL Zertifikat
Webinterface: Plesk

um 34,80€


Webspace L:
Speicherplatz: 30 GB
MySQL Datenbanken: 30
E-Mail Adressen: 35 Stück
Subdomains unlimitiert
SSL Zertifikat
Webinterface: Plesk

um 45,00€


Webspace XL:
Speicherplatz: 40 GB
MySQL Datenbanken: 40
E-Mail Adressen: 45 Stück
Subdomains unlimitiert
SSL Zertifikat
Webinterface: Plesk

um 55,00€



Die Angebote findet Ihr unter folgendem Link:

->https://die-website-spezialisten.at/webspace.html

Drucke diesen Beitrag

  Multi-Step Bestellformular
Geschrieben von: Harald.Lichowski - 26.10.2019, 11:36 - Forum: Bootstrap 4 - Keine Antworten

Hallo liebe Community,


hat jemand vielleicht ein Multi-Step Bestellformular inklusive PHP Code?

LG

Drucke diesen Beitrag

  Problem bei Darstellung auf iPhone/iPad
Geschrieben von: Andràs - 25.10.2019, 15:08 - Forum: Bootstrap 4 - Antworten (4)

Hallo Zusammen,

gleich vorneweg, dies ist mein erstes Projekt mit Bootstrap überhaupt.

Ich habe eine Seite gestaltet die responsiv sein soll. Wenn ich in Chrome im Inspector die verschiedenen Bildschirmgrößen teste funktioniert auch alles tadellos. Im Real-Versuch mit einem iPhone 5s und einem iPad gibt es allerdings Probleme bei der Anzeige der Bilder. Diese werden zwar in der Breite korrekt angepasst, jedoch nicht in der Höhe. Mir scheint es wird immer die volle Höhe verwendet. Das schaut natürlich bescheuert aus. Ausser der Bootstrap .css habe ich zwar noch eine separate .css Datei, in der aber Bilder nicht angesprochen werden.
Ich bin ratlos.
Da das Beispiel recht kurz ist, füge ich mal den .html code hier bei:

Code:
<!doctype html>
<html lang="de">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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/screen.css">

    <title>MARKEMARGHESCU-HALLO</title>
  </head>
  <body>
    <div class="container">
      <header>
        <div class="row">
          <div class="col-sm-4 logo"><img src="images/Logo_MM.PNG" class="img-fluid float-right"></div>
        </div>
      </header>
      <div class="row">
        <div class="col-sm-4">
          <ul class="nav flex-column site-nav float-right">
            <li class="nav-item text-right">
              <a class="nav-link active" href="#">HALLO</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">MARKEMARGHESCU</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">FREIE&nbspARBEITEN</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">AUFTRAGSARBEITEN</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link text-right" href="#">ICH</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">HIER</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">JETZT</a>
            </li>
          </ul>
        </div>
        <div class="col-sm-8">
          <div class="row">
            <h1>MARKEMARGHESCU IST EIN KÜNSTLERISCHES EXPERIMENT</h1>
          </div>
          <div class="row">
            <p class="slide-in-top">MARKEMARGHESCU ist der Versuch, sich nicht auf eine „bestimmte“ Identität fest zu legen oder festlegen zu lassen. Weder durch sich noch durch andere. MARKEMARGHESCU ist mit nichts und niemandem identisch außer mit sich selbst. MARKEMARGHESCU ist kein „Produkt“ und insofern auch nicht käuflich. MARKEMARGHESCU ist „produktiv“. Sie „produziert“ Einfälle, Gedanken, Bilder, Texte, Gespräche, Begegnungen, Lösungen  u.v.m., die sich zu „Produkten“ verdichten können. Typische Produkte von MARKEMARGHESCU sind Konzepte und Lösungen zur Kommunikation. Urheberin, Mentorin, Mäzenin und Sprecherin von MARKEMARGHESCU bin ich: Katalin Marghescu.</p>
          </div>
          <div class="row">
            <img src="images/Musterbild_72.jpg" class="img-fluid slide-in-top" alt="BEISPIELBILD">
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="col">
        <p class="text-center">&copy MARKEMARGHESCU 2019</p>
      </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Vielleicht kann mir hier jemand sagen wo der Wurm ist. Nach etlichen Stunden sehe ich irgendwie gar nichts mehr..

Drucke diesen Beitrag

  Bootstrap Accordion - Header zuerst einblenden
Geschrieben von: Kurt - 22.10.2019, 16:32 - Forum: Bootstrap 4 - Antworten (2)

Hallo Forum
 
Ich bin eigentlich kein Webentwickler und arbeite erst seit kurzer Zeit mit Javascript und Co. Beim folgenden Hamburger-Accordion funktioniert schonmal einiges - aber leider nicht alles. 
 
Der Head mit Background blendet erst verspätet ein, wenn das Menü fertig ausgefahren ist. Ziel wäre es, dass der invertierende Header mit dem Background zuerst einblendet und erst dann der Content mit dem Menü langsam ausfährt.
 
Die Sache habe ich bis jetzt so aufgebaut:
- Das Logo-Bild toggelt mit show-ctrl / hide-ctrl und CSS
- Die Scroll-Funktion in Javascript schrumpft das Logo
- Der Button toggelt mit fa-plus / fa-minus und blendet den dunklen Background ein.
 
Weiss hier jemand weiter? Oder hab ihr einen anderen Ansatz für das gleiche Ergebnis?
Danke im Voraus!
 
Übrigens, ist es möglich hier eine Vorschau einzubetten?


HTML5
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.     <head>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5.         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  6.         <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  7.         <style>button.btn .show-ctrl {
  8.     display: none;
  9. }
  10.  
  11. button.btn .hide-ctrl {
  12.     display: block;
  13. }
  14.  
  15. button.btn.collapsed .show-ctrl {
  16.     display: block;
  17. }
  18.  
  19. button.btn.collapsed .hide-ctrl {
  20.     display: none;
  21. }
  22.  
  23. #logo {
  24.     transition: 0.4s;
  25. }
  26.  
  27. .background {
  28.     background-color: #65818b;
  29. }
  30.  
  31. .card-groups .card {
  32.     overflow: hidden;
  33.     position: fixed;
  34.     width: 100%;
  35.     max-width: 600px;
  36.     border-radius: 0;
  37.     margin-bottom: 5px;
  38. }
  39.  
  40. .card-groups .more-less {
  41.     float: right;
  42.     color: #65818b;
  43.     font-size: 20px;
  44.     padding: 12px;
  45. }
  46.  
  47. .navi-mobile {
  48.     display: flex;
  49.     justify-content: center;
  50.     padding-top: 5px;
  51.     padding-bottom: 5px;
  52.     font-family: Dosis;
  53.     font-size: 17px;
  54.     font-weight: 700;
  55.     text-transform: uppercase;
  56.     text-decoration: none;
  57.     color: white;
  58. }
  59.  
  60. .navi-mobile:hover {
  61.     color: #323232;
  62.     text-decoration: none;
  63. }
  64.  
  65. .navi-mobile:active {
  66.     color: #f7ac48;
  67. }</style>
  68.     </head>
  69.     <body style="display: grid; grid-template-columns: 1fr auto minmax(320px, 600px) 1fr; grid-template-rows: minmax(65px, 1fr) auto; grid-template-areas: '. . header-mobile .' '. navi content .';">
  70.         <header style="grid-area:1 / 3 / 2 / 4;">
  71.             <div id="panels1" role="tablist" class="card-groups">
  72.                 <div class="card border-0 rounded-0">
  73.                     <div role="tab" class="card-heading">
  74.                         <h5 class="mb-0"> <div class="span1">
  75. </div><a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1" class="card-title"> <i class="fa fa-plus more-less"></i></a> </h5>
  76.                         <button class="collapsed btn w-50" a data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
  77.                             <span class="show-ctrl"> <img src="https://s17.directupload.net/images/191022/ur6x7k43.png" id="logo" height="50px" class="float-left"></span>
  78.                             <span class="hide-ctrl"> <img src="https://s17.directupload.net/images/191022/aomekiig.png" id="logo2" height="50px" class="float-left"></span>
  79.                         </button>                       
  80.                     </div>                   
  81.                     <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#panels1">
  82.                         <div class="card-body background">
  83.                             <a href="#" class="navi-mobile pt-3">Angebot</a>
  84.                             <a href="#" class="navi-mobile">Studio</a>
  85.                             <a href="#" class="navi-mobile pb-4">Kontakt</a>
  86.                         </div>                       
  87.                     </div>                   
  88.                 </div>               
  89.             </div>
  90.         </header>
  91.         <main style="grid-area:content;">
  92.             <img src="http://pinegrow.com/placeholders/img10.jpg" class="w-100">
  93.             <img src="http://pinegrow.com/placeholders/img14.jpg" class="w-100">
  94.             <img src="http://pinegrow.com/placeholders/img18.jpg" class="w-100">
  95.         </main>
  96.         <script src="assets/js/jquery.min.js"></script>
  97.         <script src="assets/js/popper.js"></script>
  98.         <script src="bootstrap/js/bootstrap.min.js"></script>
  99.         <script>// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
  100. window.onscroll = function() {scrollFunction()};
  101.  
  102. function scrollFunction() {
  103.   if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
  104.     document.getElementById("logo").style.padding = "0px 0px";
  105.     document.getElementById("logo").style.height = "30px";
  106.   } else {
  107.     document.getElementById("logo").style.padding = "0px 0px";
  108.     document.getElementById("logo").style.height = "50px";
  109.   }
  110. }</script>
  111.         <script>function toggleIcon(e) {
  112.  
  113.   let myhead = $(e.target)
  114.     .prev('.card-heading');
  115.   myhead
  116.     .find(".more-less")
  117.     .toggleClass('fa-plus fa-minus text-light');
  118.  
  119.   myhead.toggleClass('background').find('.card-title')
  120.     .find('a').toggleClass('text-white');
  121.  
  122. }
  123. $('.card-groups').on('hidden.bs.collapse shown.bs.collapse', toggleIcon);</script>
  124.     </body>
  125. </html>


Drucke diesen Beitrag

  Hamburger Menü komplett anders gestalten
Geschrieben von: thorralf - 18.10.2019, 12:10 - Forum: Bootstrap 4 - Antworten (1)

Hallo Leute,

Ich stehe vor folgendem Problem:
Wenn aufgrund grober Auflösung das Hamburger Menü genutzt wird, dann wird das Menü unbrauchbar, weil die senkrechte Anordnung wichtige Menüpunkte verschwinden lässt. Die einzelnen Menüpunkte der Menüleiste sind mit Buttons gestaltet und es gibt Untermenüs...

Kann ich mit einer "Weiche" wie XS, SM oder so dafür sorgen, dass entweder bei feinerer Auflösung das Navbar erscheint und bei grober Auflösung ein Hamburger Menü, das weniger Menüpunkte hat?

Über Hilfe wäre ich sehr dankbar. Wenn das Thema schon einmal gelöst wurde reicht ein Link zum Thread.

LG
Ralf Cool

Drucke diesen Beitrag

  Aus Modal-Form heraus Daten per $_POST senden
Geschrieben von: doofi - 16.10.2019, 23:16 - Forum: Bootstrap 3 - Keine Antworten

Hallo Forum, 
ich bin recht neu bei Bootstrap und finde das echt Klasse. Allerdings stoße ich gerade an meine Grenzen. Ich habe eine Tabelle mit dem footable-Plugin erstellt. Dort gibt es auch einen Edit-Button, der einen Datensatz in eine Modal-Form lädt und zum ändern bereitstellt. Die Daten kann ich auch ändern, aber leider nur innerhalb der Tabelle. Ich bräuchte die aber danach geändert in meiner mysql DB.
Wie bringe ich das jetzt zum laufen, dass ich aus der Modal Form heraus daten per Post an die Parent-Datei verschicke oder aber gleich im Modal in die DB eintrage? Ich habe schon viele versuche durch, bin aber immer gescheitert, da ich mich auch mit jquery nicht so gut auskenne.
Hier der Code den ich bisher habe:

PHP-Code:
<!DOCTYPE html>
<?
php
    session_start
();
    
$GLOBALS['SCRIPTNAME'] = basename(__FILE__);
    include(
"header.php");
    
$user check_user();
     if(!isset(
$_SESSION['userid']) OR $user['funktion']!="VORSTAND") {
        include_once(
"error.php");
        include(
"footer.php");
        exit;
    }
ScreenOut($_POST);
?>
    <script src="js/footable.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <link href="css/footable.bootstrap.min.css" rel="stylesheet">
    <div class="container">
    <h2>Spielstätten-Verwaltung</h2>
        <div class="example">
            <table id="editing-example" class="table" data-paging="true" data-filtering="true" data-sorting="true">
                <thead>
                <tr>
                    <th data-name="id" data-breakpoints="all" data-type="number">ID</th>
                    <th data-name="name">Spielstätten-Name</th>
                    <th data-name="plz" data-breakpoints="all">Postleitzahl</th>
                    <th data-name="ort" data-breakpoints="xs">Ort</th>
                    <th data-name="strasse" data-breakpoints="all">Strasse</th> 
                    <th data-name="telefon" data-breakpoints="xs">Telefon</th>
                    <th data-name="ruhetage" data-breakpoints="xs">Ruhetage</th>
                </tr>                         
                </thead>                          
                <tbody>                               
<?php
                $SQL 
"SELECT * FROM spielstaetten ORDER BY NAME ASC";
                if(!
$result $db->query($SQL))
                { die(
'Es ist ein Fehler aufgetreten!/n[' $db->error ' ]'); }
                else
                {
                    while(
$row $result->fetch_assoc())
                    {
?>
                <tr>
                    <td><?php echo $row['ID']; ?></td>
                    <td><?php echo $row['NAME']; ?></td>
                    <td><?php echo $row['PLZ']; ?></td>
                    <td><?php echo $row['ORT']; ?></td>
                    <td><?php echo $row['STRASSE']; ?></td>
                    <td><?php echo $row['TELEFON']; ?></td>
                    <td><?php echo $row['RUHETAGE']; ?></td>
                </tr>
<?php
                    
}
                }
                
mysqli_free_result($result);
?>
                </tbody>
            </table>
            <!-- Modal --->    
            <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
                <style scoped>
                    .form-group.required .control-label:after {
                        content:"*";
                        color:red;
                        margin-left: 4px;
                    }
                </style>
                <div class="modal-dialog" role="document">
                    <form class="modal-content form-horizontal" id="editor" action="spielstaettenverwaltung.php" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="editor-title">Neue Spielstätte</h4>
                        </div>
                        <div class="modal-body">
                            <input type="number" id="id" name="id" class="hidden" value="0" />
                            <div class="form-group required">
                                <label for="name" class="col-sm-4 control-label">Spielstätten-Name</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Spielstätten-Name" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="plz" class="col-sm-4 control-label">Postleitzahl</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="plz" name="plz" placeholder="Postleitzahl" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="ort" class="col-sm-4 control-label">Ort</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ort" name="ort" placeholder="Ort" required>
                                </div>
                            </div>
                            <div class="form-group required">
                                <label for="strasse" class="col-sm-4 control-label">Strasse</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="strasse" name="strasse" placeholder="Strasse" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="telefon" class="col-sm-4 control-label">Telefon</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ruhetage" class="col-sm-4 control-label">Ruhetage</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ruhetage" name="ruhetage" placeholder="Ruhetage">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                             <button type="submit" name="submit" id="submit" class="btn btn-success btn" value="Speichern">Speichern</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- /container -->

<!-- Placed at the end of the document so the pages load faster -->
<script>
    jQuery(function($){
        var $modal = $('#editor-modal'),
            $editor = $('#editor'),
            $editorTitle = $('#editor-title'),
            ft = FooTable.init('#editing-example', {
                editing: {
                    enabled: true,
                    addRow: function(){
                        $modal.removeData('row');
                        $editor[0].reset();
                        $editorTitle.text('Add a new row');
                        $modal.modal('show');
                    },
                    editRow: function(row){
                        var values = row.val();
                        $editor.find('#id').val(values.id);
                        $editor.find('#name').val(values.name);
                        $editor.find('#plz').val(values.plz);
                        $editor.find('#ort').val(values.ort);
                        $editor.find('#strasse').val(values.strasse);
                        $editor.find('#telefon').val(values.telefon);
                        $editor.find('#ruhetage').val(values.ruhetage);
                        $modal.data('row', row);
                        $editorTitle.text('Datensatz #' + values.name + ' bearbeiten...');
                        $modal.modal('show');
                    },
                    deleteRow: function(row){
                        if (confirm('Diese Spielstätte sicher löschen?')){
                            row.delete();
                        }
                    }
                }
            }),
            uid = 10;

        $editor.on('submit', function(e){
            if (this.checkValidity && !this.checkValidity()) return;
            e.preventDefault();
            var row = $modal.data('row'),
                values = {
                    id: $editor.find('#id').val(),
                    name: $editor.find('#name').val(),
                    plz: $editor.find('#plz').val(),
                    ort: $editor.find('#ort').val(),
                    strasse: $editor.find('#strasse').val(),
                    telefon: $editor.find('#telefon').val(),
                    ruhetage: $editor.find('#ruhetage').val(),
                };

            if (row instanceof FooTable.Row){
                row.val(values);
            } else {
                values.id = uid++;
                ft.rows.add(values);
            }
            $modal.modal('hide');
        });
    });
</script>

<?php
    
include("footer.php");
?>
</div> 
Die erforderlichen scripte werden alle in der header.php geladen.
Wäre super, wenn mir da jemand weiterhelfen könnte..

LG Micha

Drucke diesen Beitrag

  div Container bei col-sm nicht anzeigen.
Geschrieben von: Franziska1993 - 15.09.2019, 19:40 - Forum: Bootstrap 4 - Antworten (2)

Hallo Forum,

ich fange ganz frisch mit Bootstrap 4 an und habe mir so einiges angesehen bzw. angelesen.


Bevor ich mit meinen Webprojekt angefangen bin, habe ich mir andere responsive HP's angesehen.

Da ist mir aufgefallen, daß der Betreiber Zellen einer Tabelle nicht anzeigen läßt, wenn man die 
Mobile Ansicht bei Chrome aufruft.

Wie kann man sowas nach programmieren in Bootstrap 4?

Kann man eine einzelne Zelle bzw. Div Container ausblenden oder geht das nur über 


Code:
.d-{sm,md,lg,xl}-none -> Element ausblenden


Gruß Franziska1993

PS: Anbei zwei Screenshots (Desktop- und Mobileansicht)



Angehängte Dateien Thumbnail(s)
       
Drucke diesen Beitrag

  Wie verwende ich Bootstrap richtig in Angular 2++? (Anfängerfrage)
Geschrieben von: noop - 10.09.2019, 20:52 - Forum: Bootstrap 4 - Keine Antworten

Moin,

ich hab mir grad eine kleine test-app mit Angular 8 (ich glaube) erstellt und will eine Komponente für das Hauptmenü mit Bootstrap 4 responsiv stylen.

Ich bin hier nach folgender Anleitung vorgegangen, nachdem ich vorher schon versucht hatte, Bootstrap direkt in der Angular-CLI zu installieren (Bootstrap-Modul zwar soweit erfolgreich eingebunden, aber das Ergebnis war das gleiche wie nach folgendem Versuch:

https://medium.com/codingthesmartway-com...3c3cee3f4a

Statt dem Jumbotron habe ich den Beispielcode von getbootstrap.com für die navbar (gleich die erste) ausprobiert.

Ergebnis war, das die App beim kompilieren zwar keine Fehler gemeldet hat, aber trotzdem nur einen white-screen zeigt.

Die Zeilen für das css und das javascript habe ich wie in obiger Anleitung beschrieben eingebunden, allerdings die aktuellen Zeilen von getbootstrap.com.

Einfache Sachen wie die Buttons funktionieren allerdings.

Kann mir jemand helfen, ich hab grad keinen Plan wo das Problem ist.
In den <li>-Elementen hab ich die href-Attribute durch den routerLink ersetzt. Ohne diese Änderung würde der Beispielcode zwar laufen, aber bringt mir natürlich nichts.

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">      <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 class="nav-link" routerLink="/home">Home<span class="sr-only">(current)</span></a>        </li>        <li class="nav-item">          <a class="nav-link" routerLink="/beispiele">Beispiele</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/ueberuns">Über uns</a>        </li>        <li class="nav-item">            <a class="nav-link" routerLink="/kontakt">Kontakt</a>        </li>
Vielen Dank!

Drucke diesen Beitrag

[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort





[-]
Letzte Beiträge
max-width Layout-Breite
Last Post: The-Error
12.11.2019 17:12
» Replies: 1
» Views: 98
Multi-Language in 10.0.8
Last Post: bootshock
01.11.2019 23:19
» Replies: 0
» Views: 184
Webspace-Angebote
Last Post: Harald.Lichowski
29.10.2019 11:51
» Replies: 0
» Views: 197

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 319
» Latest member: RuGue
» Forum threads: 256
» Forum posts: 1.005

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>