Hallo, Gast
Sie müssen sich registrieren bevor Sie auf unserer Seite Beiträge schreiben können.

Benutzername/E-Mail:
  

Passwort
  





Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 26
» Neuestes Mitglied: KOS
» Foren-Themen: 33
» Foren-Beiträge: 84

Komplettstatistiken

Benutzer Online
Momentan sind 30 Benutzer online
» 0 Mitglieder
» 30 Gäste

Aktive Themen
Menü-Fehler: in mobiler A...
Forum: Bootstrap 3
Letzter Beitrag: KOS
Vor 1 Stunde
» Antworten: 0
» Ansichten: 1
Wann werden die Ressource...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
Gestern, 13:45
» Antworten: 1
» Ansichten: 20
row's Ausrichten aber wie...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:03
» Antworten: 4
» Ansichten: 99
Grafik ausrichten???
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:02
» Antworten: 1
» Ansichten: 53
Bootstrap modal crud tabl...
Forum: Bootstrap 3
Letzter Beitrag: odiug
09.02.2017, 20:28
» Antworten: 0
» Ansichten: 40
Div Block Mittig auf seit...
Forum: Bootstrap 3
Letzter Beitrag: Husker
07.02.2017, 13:29
» Antworten: 2
» Ansichten: 84
Alpha 6 veröffentlicht
Forum: Bootstrap 4
Letzter Beitrag: The-Error
05.02.2017, 16:57
» Antworten: 0
» Ansichten: 73
Formular mehrere Text-Fel...
Forum: Bootstrap 3
Letzter Beitrag: mpruss
03.02.2017, 14:28
» Antworten: 4
» Ansichten: 192
Seitenabschnitte immer vo...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
27.01.2017, 12:24
» Antworten: 1
» Ansichten: 105
Import Woocommerce
Forum: Wordpress
Letzter Beitrag: The-Error
14.01.2017, 15:13
» Antworten: 1
» Ansichten: 226

 
  Menü-Fehler: in mobiler Ansicht ist das Menü direkt ausgeklappt (statt zugeklappt)
Geschrieben von: KOS - Vor 1 Stunde - Forum: Bootstrap 3 - Keine Antworten

Liebe andere Bootstrap-Developer,

bei einem aktuellen Projekt habe ich ein Problem und komme nicht weiter.
Die mobile Version der Navigation ist beim Laden der Seite direkt ausgeklappt.
Eigentlich sollte die Navigation geschlossen sein und beim Klick oder Tap auf den Button geöffnet werden.

Weiß jemand, warum es nicht klappt?

Code:
<!-- Navigation -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid container-navigation">
            <div class="row">
                <div class="col-md-9">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#fws-navbar" aria-controls="fws-navbar" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- text logo on mobile view -->
                        <a class="navbar-brand visible-xs" href="index.htm">Fahrrad-Workshop Sprockhövel</a>
                    </div>
                    <div id="fws-navbar" class="collapse navbar-collapse">    
                        <ul class="nav navbar-nav">

                            <li class="nav-dropdown">
                                <a href="mountainbike-workshop.htm" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-fw"></i> Mountainbike <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="mountainbike-workshop.htm">Übersicht MTB-Workshop</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li><a href="schaltung-umwerfer-workshop.htm">Schaltung und Umwerfer</a></li>
                                    <li><a href="ketten-kassetten-workshop.htm">Kette und Kassette</a></li>
                                    <li><a href="scheibenbremsen-workshop-fahrraeder.htm">Felgen-/Scheibenbremsen</a></li>
                                    <li><a href="innenlager-workshop-fahrraeder.htm">Innenlager und Kurbel</a></li>
                                    <li><a href="fahrrad-naben-workshop.htm">Laufräder und Naben</a></li>
                                    <li><a href="steuerkopf-workshop.htm">Gabel und Steuerkopf</a></li>
                                    <li><a href="fahrwerk-abstimmen-workshop.htm">Federgabel und Dämpfer</a></li>
                                    <li><a href="innenzuege-aussenhuellen-workshop.htm">Züge und Außenhüllen</a></li>
                                    <li><a href="handgriffe.htm">Lenker und Griffe</a></li>
                                    <li><a href="klickpedal-workshop.htm">Klickpedale</a></li>
                                </ul>
                            </li>

                            <li class="nav-dropdown">
                                <a href="rennrad-workshop.htm" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-fw"></i> Rennrad <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="rennrad-workshop.htm">Übersicht Rennrad-Workshop</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li><a href="schaltung-umwerfer-workshop.htm">Schaltung und Umwerfer</a></li>

                                    <li><a href="ketten-kassetten-workshop.htm">Kette und Kassette</a></li>
                                    <li><a href="scheibenbremsen-workshop-fahrraeder.htm">Felgenbremsen</a></li>
                                    <li><a href="innenlager-workshop-fahrraeder.htm">Innenlager und Kurbel</a></li>
                                    <li><a href="fahrrad-naben-workshop.htm">Laufräder und Naben</a></li>
                                    <li><a href="steuerkopf-workshop.htm">Gabel und Steuerkopf</a></li>
                                    <li><a href="fahrwerk-abstimmen-workshop.htm">Federgabel und Dämpfer</a></li>
                                    <li><a href="innenzuege-aussenhuellen-workshop.htm">Züge und Außenhüllen</a></li>
                                    <li><a href="handgriffe.htm">Lenker und Griffe</a></li>
                                    <li><a href="klickpedal-workshop.htm">Klickpedale</a></li>
                                </ul>
                            </li>

                            <li class="nav-dropdown">
                                <a href="trekkingrad-workshop.htm" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-fw"></i> Trekkingrad <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="trekkingrad-workshop.htm">Übersicht Trekkingrad-Workshop</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li><a href="schaltung-umwerfer-workshop.htm">Schaltung und Umwerfer</a></li>
                                    <li><a href="ketten-kassetten-workshop.htm">Kette und Kassette</a></li>
                                    <li><a href="scheibenbremsen-workshop-fahrraeder.htm">Felgenbremsen</a></li>
                                    <li><a href="innenlager-workshop-fahrraeder.htm">Innenlager und Kurbel</a></li>
                                    <li><a href="fahrrad-naben-workshop.htm">Laufräder und Naben</a></li>
                                    <li><a href="steuerkopf-workshop.htm">Gabel und Steuerkopf</a></li>
                                    <li><a href="fahrwerk-abstimmen-workshop.htm">Federgabel und Dämpfer</a></li>
                                    <li><a href="innenzuege-aussenhuellen-workshop.htm">Züge und Außenhüllen</a></li>
                                    <li><a href="handgriffe.htm">Lenker und Griffe</a></li>
                                </ul>
                            </li>

                            <li class="nav-dropdown">
                                <a href="elektrobike_workshop.htm" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-fw"></i> E-Bike <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="elektrobike_workshop.htm">Übersicht E-Bike-Workshop</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li><a href="elektro-antrieb-einbauen-fahrrad.html">Vorderrad-Antrieb einbauen</a></li>
                                    <li><a href="Elektro-Hinterrad-Antrieb-Einbauen.htm">Hinterrad-Antrieb einbauen</a></li>
                                    <li><a href="Vergleich-Laufeigenschaften-Hinterradanrieb.htm">Vergleich-Hinterradantrieb</a></li>
                                    <li><a href="Pflegen_elktrofahrrad.htm">Elektro-Antrieb-Pflege</a></li>
                                    <li><a href="Akku_workshop.htm">Workshop-Akku</a></li>
                                    <li><a href="akku-schutzhuelle.htm">Schutzhülle</a></li>
                                    <li><a href="gaint-e1-umbau-28zoll.htm">Umbau Hinterrad 28 Zoll</a></li>
                                </ul>
                            </li>

                            <li class="nav-dropdown">
                                <a href="tipps.htm" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-bicycle fa-fw"></i> Tipps <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="tipps.htm">Übersicht Tipps</a></li>
                                    <li role="presentation" class="divider"></li>
                                    <li><a href="fahrrad-putzen-pflegen-workshop.htm">Putzen, Pflegen und Warten</a></li>
                                    <li><a href="ergonomie-radfahren.htm">Ergonomie: richtige Sitzposition</a></li>
                                    <li><a href="schraubenanzug.htm">Schrauben richtig anziehen</a></li>
                                    <li><a href="montage_carbon_teile.htm">Carbonteile montieren</a></li>
                                    <li><a href="schlauch_flicken.htm">Platten beheben</a></li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
    </nav>
    <!-- End Navigation -->

Falls Ihr den Fehler entdeckt, würde ich mich sehr freuen.
Danke!

Philip

Drucke diesen Beitrag

  Wann werden die Ressourcen wie Grafiken geladen?
Geschrieben von: Spector - 19.02.2017, 12:11 - Forum: Bootstrap 3 - Antworten (1)

Hallo Community,

schon länger frage ich mich, welche Auswirkungen meine Denkweise auf die mobile Performance meiner Webseiten hat. Ich verwende auf Webseiten gerne das Jumbotron. Über Media Queries steuere ich die im Jumbotron anzuzeigende Grafik. Das heißt bei

  • Desktop verwende ich ein großflächiges, für Widescreen-Displays passende Hintergrundgrafik (bspw. ein Foto, kein kachelbares Muster)
  • Tablets verwende ich das gleiche Bild, nur von den Abmessungen her kleineres Bild
  • und für Smartphones ein anderes, für den Screen angepasstes Bild.
Manchmal treibe ich es noch auf die Spitze, in dem ich für jede Ausrichtung des Tablets / Smartphones ein eigenes Bild verwende. Im geringsten Fall sind es somit 3, im höchsten Fall sind es 5 Bilder.

Nun stelle ich es mir gerade für Smartphone-User grauenvoll vor, wenn jedes mal alle 5 Grafiken mitgeladen werden, obwohl nur maximal 1 (bzw. 2) Grafiken verwendet werden. Das zieht nicht nur am Volumen, sondern ist auch nervig wenn man bereits eine gedrosselte Leitung hat.

Ich bin nun etwas verunsichert. Werden wirklich alle im HTML/CSS enthaltenen Ressourcen sofort geladen oder erst wenn diese tatsächlich benötigt werden (sprich nachträglich angefordert)?

Hoffe ich habe mich verständlich mitgeteilt.

Grüße

Spector

Drucke diesen Beitrag

  row's Ausrichten aber wie?
Geschrieben von: Husker - 14.02.2017, 20:54 - Forum: Bootstrap 3 - Antworten (4)

Hallo,
aktuell habe ich ein kleines Layout Problem bei dem ich nicht so recht weiter komme ...
es könnte aber gut sein, das ich da was grundsätzliches bei bootstrap nicht verstanden habe.

hier mal 2 Fragen:

1. 
wenn ich eine ROW habe in der 2 Spalten liegen 8|4 aber die 4er Spalte deutlich höher ist positioniert er die 8ter Spalte am oben rand der, wie bekomme ich ihn dazu das er die Unten anordnet?

quasi so:

000000004444
000000004444
888888884444

und nicht so:

888888884444
000000004444
000000004444

2. 
Kann man die letzte row so definieren das sie als Footer fungiert also generell so weit wie möglich unten angeorndnet wirt, damit das bei großen auflösungen nicht nur wie ne halbe seite aussieht ?

danke schon einmal im vorraus!

Drucke diesen Beitrag

  Grafik ausrichten???
Geschrieben von: Peeti - 11.02.2017, 20:16 - Forum: Bootstrap 3 - Antworten (1)

Hallo,
ich habe 3 Spalten, in Spalte 1 soll ein Foto, Spalte 2 Text und Spalte 3 bleibt leer.

Wie bekomme ich es hin, dass das Foto linksbündig, jedoch genau am Text in der Höhe ausgerichtet ist.

Der Text hat 10 Zeilen und das Bild steht ganz oben. Es soll jedoch in der Textmitte sein.
Nachfolgend mein Code.

Danke Peeti

             <!--  1 -->
             <div class="blog-author panel panel-primary margin-bottom-30">
             <div class="panel-heading">
             <h3><font color=white>Test</font></h3>
             </div>
             <div class="panel-body">
             <div class="row">
             <div class="col-md-3">
             <img class="img-rounded" src="assets/img/texte/testbild.png" alt="Test">
             </div>   
             <div class="col-md-6">
             <p class="lead text-center"><strong>Der Test</strong></p>
             <p class="lead text-center">kljhkljhlk</p>
             <p class="lead text-center">lkjölkjölk</p>
             <p class="lead text-center">kkjhlkhjlkhj</p>
             <p class="lead text-center">ölkjölkj</p>
             <p class="lead text-center">ölkjlkj</p>
             <p class="lead text-center">safsfsdf</p>                                       
             <p class="lead text-center">sdfsdfsdf</p>                                       
             <p class="lead text-center">sdfsdfs</p>                                       
             <p class="lead text-center">sdfsafsdf</p>                                       
             <p class="lead text-center">sfsdfsdfsd</p>                                       
             <div class="col-md-3">
             </div>             
             </div>
             </div>
             </div>
             </div>   
             <!-- End  1-->



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Bootstrap modal crud table
Geschrieben von: odiug - 09.02.2017, 20:28 - Forum: Bootstrap 3 - Keine Antworten

Hallo,

ich habe folgendes Problem. Ich möchte ein Update Modal über einen link öffnen, dabei soll sich der zu ändernde Inhalt einer Tabellenzeile zum ak­tu­a­li­sie­ren in eine Form laden die sich im Modal befindet.

<td><a data-toggle="modal" href="index.php?id=<?php echo $row_tab['id']; ?>">Open Modal</a></td>

Nur leider öffnet sich das modal nicht.

Könnt ihr mir dabei helfen?

vielen Dank im vorraus

Drucke diesen Beitrag

  Alpha 6 veröffentlicht
Geschrieben von: The-Error - 05.02.2017, 16:57 - Forum: Bootstrap 4 - Keine Antworten

Bootstrap 4 Alpha 6 veröffentlicht. Das Rastersystem und alle wichtigen Komponenten  wurden in Flexbox umgeschrieben und forciert als Standard-Layout-Option.

Umfassende Flexbox

Bootstrap 4 ist jetzt standardmäßig Flexbox!
Flexbox ist ein äußerst leistungsstarkes Layout-Tool, das unvergleichliche Flexibilität und Kontrolle des Rastersystems und der Kernkomponenten bietet. Es kommt auf Kosten der IE 9 Unterstützung, bringt aber erhebliche Verbesserungen an Komponenten-Layout, Ausrichtung und Größe.

Flexbox, hier sind einige der Vorteile die Sie erwarten können, in Bootstrap 4:

  • Automatische Rasterspalten mit gleicher Breite (zB zwei Spalten sind automatisch 50% breit)
  • Gleiche Höhe und gleiche Breite 
  • Vertikale und horizontale Zentrierung ohne Hardcoding-Werte
  • Utility-Klassen für einfache (und reaktionsschnelle!) Änderung an Display, Richtung, Ausrichtung, und vieles mehr
  • Automatische Ränder für einfachen Abstand
  • Berechtigte Navigations- und Buttongruppen
  • Kein HTML-Leerraum mehr oder gebrochenes Tabellenformat
Fast jedes Element nutzt nun die Flexbox
Das bedeutet weniger Vertrauen auf Clearfix, mehr Kontrolle über DOM und visuelle Reihenfolge und weniger Fehler. Navs, Listengruppen, Karten und mehr alle nutzen nun Flexbox. Auch komplexere Komponenten wie das Karussell wurden modifiziert, um Flexbox zu verwenden.

Aktualisierte Navigationsleiste

Wie in der letzten Version erwähnt, war die Alpha 5 Navbar ein wenig halbfertig. Die Navbar wurde neu geschrieben, besser integriertes Reaktionsverhalten und eine verbesserte Anpassung des Layouts dank Flexbox.

Als nächstes kommt die erste Beta


Das Team ist bereit für die erste Beta-Version.

Drucke diesen Beitrag

Question Div Block Mittig auf seite Plazieren
Geschrieben von: Husker - 02.02.2017, 17:32 - Forum: Bootstrap 3 - Antworten (2)

Hallo zusammen,
bevor ich mit meinem kleinen Problemchen loslege, der hinweis, bootstrap und css sind noch recht neu für mich, habe bisher mit PHP nur Backend ohne Oberfläche entwickelt.

also:
Ich möchte auf einer Seite im Prinzip nur einen Satz, mittig zentriert ausgeben,

Entweder eine Erfolgsmeldung (im Bootstrap grün so wie auch unter Comonents dargestellt)
oder eine Fehlermeldung ....

ich bekomme es einfach nicht hin, ich habe gefühlt alles bei google durchprobiert, aber der div Container will sich nicht vom oberen Bildrand lösen,
das ding Klebt fest wie Festgetackert. 

hier mal mein Code:

hier der PHP Teil:

PHP-Code:
$massage =    '
                    <div class="container center vcenter">
                        <div class="center">
                            <div class="col-xs-6 col-md-4 col-lg-6 center">
                                <p class="bg-danger">Es wurden keine Daten zur Validierung übertragen.</p>
                            </div>
                        </div>
                    </div>
                    '


so und nun der HTML Teil:

Code:
<!DOCTYPE html>
<html lang="de">
    <style type="text/css">
          body { background: #92FF50 !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
          .center  { text-align: center; }
          .vcenter {display: inline-block; vertical-align: middle; float: none; }

    </style>
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Account Freischaltung</title>
   <link href="../src/css/bootstrap.min.css" rel="stylesheet">
   <script src="../src/js/jquery.min.js"></script>
   <script src="../src/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="../src/js/jquery-validation/jquery.validate.min.js"></script>
 </head>
 <body>
   <?php echo $massage?>
 </body>
</html>

ich habe wirklich wirklich viel probiert, am liebsten hätte ich das so:

Code:
<div class="alert alert-danger" role="alert">
 <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
 <span class="sr-only">Error:</span>
 Enter a valid email address
</div>


aber es soll wie gesagt Sowohl Vertikal als auch horizontal mittig palziert sein,
und es muss wirklich nicht über die komplette Seite gehen (wobei man das vermutlich mit dem Gridsystem (1/3 | 1/3 | 1/3) lösen können müsste oder ?

ich würde mich wirklich sehr über hilfe freuen.

Drucke diesen Beitrag

  Formular mehrere Text-Felder zu einem Label
Geschrieben von: mpruss - 26.01.2017, 13:45 - Forum: Bootstrap 3 - Antworten (4)

Hallo zusammen,

ich brauche mal ganz dringend eure Hilfe und eure Meinungen, wie ich das Formular am besten umsetzen kann. Die einfachen Felder sind kein Problem, eher sind die kleinen Textfelder unterhalb Liköre das Problem. Wie bekomme ich mehrere Text-Input-Felder zu einem Label hin?

   

Das Ergebnis ist  genau so wie ich es haben will, allerdings ist der Code überhaupt nicht nach meinen Vorstellungen:

   

Code:
<fieldset class="form-group">
    <legend>Liköre</legend>
        <div class="form-group table-row row">
            <label class="col-md-6 col-form-label"></label>
            <div class="col-md-1 table-col">
                <span>50ml</span>
            </div>
            <div class="col-md-1 table-col">
                <span>200ml</span>
            </div>
            <div class="col-md-1 table-col">
                <span>350ml</span>
            </div>
            <div class="col-md-1 table-col">
                <span>500ml</span>
            </div>
            <div class="col-md-1 table-col">
                <span>700ml</span>
            </div>
        </div>
        <div class="form-group table-row row">
            <label for="likoer" class="col-md-6 col-form-label">Allewetter Stimmungsretter</label>
            <div class="col-md-1 table-col">
                <input class="form-control" type="text" value="" id="likoer">
            </div>
            <div class="col-md-1 table-col">
                <input class="form-control" type="text" value="" id="likoer">
            </div>
            <div class="col-md-1 table-col">
                <input class="form-control" type="text" value="" id="likoer">
            </div>
            <div class="col-md-1 table-col">
                <input class="form-control" type="text" value="" id="likoer">
            </div>
            <div class="col-md-1 table-col">
                <input class="form-control" type="text" value="" id="likoer">
            </div>
        </div>
</fieldset>

Ich habe es so gemacht, aber damit hat der Value keinen Wert und die ID wird wegen dem label mehrfach vergeben. Leider habe ich aber noch keine andere Lösung gefunden...
Habt ihr eine Idee oder sogar Praxisbeispiele?  Huh

Vielen vielen Dank und LG

Drucke diesen Beitrag

  Seitenabschnitte immer volle Höhe für Onepage
Geschrieben von: Trawell - 25.01.2017, 14:45 - Forum: Bootstrap 3 - Antworten (1)

Hallo zusammen

Ich möchte eine Onepage mit Bootstrap bauen.

Die einzelnen Abschnitte habe ich in eigenen Container drin.

Wie krieg ich diese Container nun immer mindestens 100% Bildschirmhöhe ?

Gibts da ein Stype von Bootstrap ?

Danke für die Hilfe

Gruss, Trawell

Drucke diesen Beitrag

  Import Woocommerce
Geschrieben von: The-Error - 10.01.2017, 11:33 - Forum: Wordpress - Antworten (1)

Hat jemand Erfahrung mit einen Plugin, mit welchen ich die User Daten in Woocommerce importieren kann. Also User, Passwort, Email, Adresse eine CSV-Datei ist vorhanden.

Drucke diesen Beitrag