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: 39
» Neuestes Mitglied: GhostGCR
» Foren-Themen: 38
» Foren-Beiträge: 134

Komplettstatistiken

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

Aktive Themen
Rows: Spalten tanzen je n...
Forum: Bootstrap 3
Letzter Beitrag: BootstrapWorld
06.05.2017, 22:40
» Antworten: 1
» Ansichten: 198
[gelöst] Kalender Projekt...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
18.04.2017, 19:10
» Antworten: 33
» Ansichten: 1.678
IE keine hover-Effekt im ...
Forum: Bootstrap 3
Letzter Beitrag: designermohr
31.03.2017, 11:21
» Antworten: 0
» Ansichten: 121
2 unabhängige Modal's auf...
Forum: Bootstrap 3
Letzter Beitrag: Hiro
14.03.2017, 09:42
» Antworten: 7
» Ansichten: 619
Mehrsprachiges Menü kaput...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
05.03.2017, 18:07
» Antworten: 2
» Ansichten: 367
Menü-Fehler: in mobiler A...
Forum: Bootstrap 3
Letzter Beitrag: Emess
27.02.2017, 22:22
» Antworten: 2
» Ansichten: 381
Wann werden die Ressource...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
20.02.2017, 13:45
» Antworten: 1
» Ansichten: 302
row's Ausrichten aber wie...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:03
» Antworten: 4
» Ansichten: 592
Grafik ausrichten???
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:02
» Antworten: 1
» Ansichten: 287
Bootstrap modal crud tabl...
Forum: Bootstrap 3
Letzter Beitrag: odiug
09.02.2017, 20:28
» Antworten: 0
» Ansichten: 188

 
  Rows: Spalten tanzen je nach Bildschirmgröße herum
Geschrieben von: rvs - 03.05.2017, 07:20 - Forum: Bootstrap 3 - Antworten (1)

Hallo,
ich habe ein Problem mit der richtigen Anordnung von Spalten auf verschiedenen Bildschirmgrößen. Wer kann mir einen Tipp geben, wie ich das folgende Problem lösen kann?

Das Ziel: Ich möchte auf der Startseite 6 Teaser mit kurzen Texten platzieren. Auf großen Bildschirmen soll es 2 Reihen mit je 3 Teasern geben. Auf mittelgroßen Bildschirmen sollen es 3 Reihen mit je 2 Teasern sein.

Das soll auf Bildschirm ab "lg" so aussehen:
1. Teaser    2. Teaser     3. Teaser   
4. Teaser    5. Teaser     6. Teaser 

... und auf Bildschirmen "sm" und "md" so:
1. Teaser    2. Teaser    
3. Teaser    4. Teaser   
5. Teaser    6. Teaser 

Lösungsansatz: Ich habe 1 row mit 6 Teaser definiert: div class="col-...."
1. Für große Bildschirme sind die Teaserspalten jeweils 4 Grundrasterspalten breit: col-lg-4
2. Für mittlere Bildschirme sind sie jeweils 6 Grundrasterspalten breit: col-sm-6 und col-md-6
3. Für die kleinsten Bildschirme ist der Teaser 12 Grundrasterspalten breit: keine spezielle Definition erforderlich

Das sieht im quellcode verkürzt so aus:
<div class="container">
    <div class="row">

         <div class="col-sm-6 col-md-6 col-lg-4">
          <p> ....... </p>
        </div

        <div class="col-sm-6 col-md-6 col-lg-4">
          <p> ....... </p>
        </div

        etc. .... 3. bis 6. Spalte

    </div>
</div>

Nun das Problem:
Der 3. Teaser läuft bei Bildschirmen "sm" eine Zeile länger als der 4. Teaser. Als Folge bleibt der 5. Teaser sozusagen an der unteren rechten Ecke des 3. Teasers hängen. Er rutscht also nicht in die 3. Zeile unter den 3. Teaser, sondern in der 3. Zeile unter den 4. Teaser. Das sieht dann so aus:
1. Teaser    2. Teaser
3. Teaser    4. Teaser
                 5. Teaser
6. Teaser

Meine Frage: Lässt sich dieses Phänomen verhindern? Es wäre schön, wenn sich die Teaser unabhängig von den Textlängen vernünftig auf dem Bildschirmen anordnen würden.

Für nützliche Tipps dankbar:
Rüdiger

Drucke diesen Beitrag

  [gelöst] Kalender Projekt. Wer kann es erklären?
Geschrieben von: Emess - 01.04.2017, 22:25 - Forum: Bootstrap 3 - Antworten (33)

Hab mal wieder Zeit was zu lernen.
Ich mach für meinen Verein eine Seite in der der ich gerne unter "Termine" einen Kalender installieren würde.
Die Seite ist Angelfreunde Fischbachtal
Den Kalender gibt es hier, Aber ich hab keine Ahnung wie ich den einbinde Huh

Drucke diesen Beitrag

  IE keine hover-Effekt im dropdownmenu
Geschrieben von: designermohr - 31.03.2017, 11:21 - Forum: Bootstrap 3 - Keine Antworten

Hallo Zusammen,

ich weiß der Internet Explorer ist ein ungeliebtes Kind, aber leider gibt es immer noch genug Ahnungslose die den Internet Explorer und in meinem Fall den Micorsoft Edge in Windows Home auf dem Windows Phone oder Tablet nutzen. Deshalb optimieren ich, leider, auch für diesen Browser die aktuelle Webseite.

Ich nutze in einem aktuellen Projekt Bootstrap 3 und eine Menüführung über „navbar“ und „dropdown“. ich habe die default-Version von bootstrap um die Optionen erweitert, das auch Submenüs in tieferen Ebenen dargestellt werden und dass die Submenüs nicht alle sofort sichtbar sind.

Nun das Problem:
Im Internet Explorer 11 und Edge 38 auf einem Tablet mit Windows 10 Home lässt sich leider das Dropdown Menü mit einer einfachen Touch-Gestik nicht ausklappen, bzw. nur mit einem längeren Touch-Moment ausklappen und auswählen. Dadurch werden die Submenü für diese User nicht erreichbar sein. Blöd.

Diese Fehlfunktion hat sich insbesondere in der Darstellung oberhalb von 992px Breite Viewport, in der Desktop Ansicht, gezeigt. Die Toggle-Navbar
Das Projekt befindet sich gerade in der Entwicklung. Eine Kopie zur Einsicht befindet sich unter dieser URL:

http://devel3-neulken.motyp.de/


Diese HTML-Anweisung habe ich verwendet:

Code:
<nav class="navbar-collapse navbar-responsive-collapse collapse in" aria-expanded="true" style="">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown main">
            <a class="dropdown-toggle" data-toggle="dropdown" title="Kanzlei Neulken & Partner: Selbstverständnis, Entwicklung der Kanzlei und Leistungsangebot, Mandanten, Beratungsleistungen, Mitarbeiter, Standorte, Kooperationspartner" href="/ueber-uns/">Über uns</a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a title="Unser Selbstverständnis" href="/ueber-uns/unser-selbstverstaendnis/">Unser Selbstverständnis</a>
                    </li>
                    <li class="dropdown-submenu">
                        <a title="Kooperationspartner" href="/ueber-uns/kooperationspartner/">Kooperationspartner</a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                            <a title="Kooperationspartner:" href="/ueber-uns/kooperationspartner/nrt/">NRT</a>
                            </li>
                        </ul>
                    </li>
                </ul>
        </li>

    </ul>
</nav>


In der CSS habe ich einen Media-query bei 991px gesetzt.
/* Viewport Desktop */
@media
(min-width: 992px) { ... }


/* Viewport Smartphone, Tabletts */
@media (max-width: 991px) {


/* Dropdown Menu in der Ebene 3 - ausschalten */
.header .dropdown-submenu > .dropdown-menu {
   display: none;
   margin-left: 15px;
}

/* Dropdown Menu in der Ebene 3 - einschalten beim active/hover */
.header .dropdown-submenu .active > .dropdown-menu {
   display: block;
   margin-left: 15px;
}
}

Drucke diesen Beitrag

Question 2 unabhängige Modal's auf einer Seite
Geschrieben von: Hiro - 09.03.2017, 14:32 - Forum: Bootstrap 3 - Antworten (7)

Hallo Bootstrap-Freunde,

ich habe viel gegoogelt und versucht, bevor ich hier her kam Confused
Ich hoffe ihr könnt mir helfen!

Ich habe 2 Modals auf einer Seite eingebunden. Die Thumbnails beider Galerien werden angezeigt.
Trotz unterschiedlicher IDs und data-tagets wird nur die erste geöffnet. Bei der zweiten erscheint kein Bild.
Wenn ich aber bei der ersten auf "nächstes Bild" klicke, kann ich auch durch Galerie 2 switchen Huh 

Wo ist mein Fehler?

Code:
Modal 1

<div class="col-lg-3 col-md-6 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="img/galerie/wohnen-1.jpg" data-target="#image-gallery-wohnung">
 <img class="img-responsive" src="img/galerie/wohnen-1.jpg">
</a>
</div>

<div class="modal fade" id="image-gallery-wohnung" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button>
    <h4 class="modal-title" id="image-gallery-title"></h4>
  </div>
  <div class="modal-body">
   <img id="image-gallery-image" class="img-responsive" src="">
  </div>
  <div class="modal-footer">
   <div class="col-md-2">
    <button type="button" class="btn btn-primary" id="show-previous-image">Zurück</button>
   </div>
   <div class="col-md-8 text-justify" id="image-gallery-caption">
    <!-- This text will be overwritten by jQuery -->
   </div>
   <div class="col-md-2">
    <button type="button" id="show-next-image" class="btn btn-default">Weiter</button>
   </div>
  </div>
 </div>
</div>
</div>

Modal 2

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="img/gaestebuch/gastte9.jpg" data-target="#image-gallery-gaeste">
  <img class="img-responsive" src="img/gaestebuch/gastte9.jpg">
 </a>
</div>

<div class="modal fade" id="image-gallery-gaeste" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button>
     <h4 class="modal-title" id="image-gallery-title"></h4>
   </div>
   <div class="modal-body">
    <img id="image-gallery-image" class="img-responsive" src="">
   </div>
   <div class="modal-footer">
    <div class="col-md-2">
     <button type="button" class="btn btn-primary" id="show-previous-image">Zurück</button>
    </div>
    <div class="col-md-8 text-justify" id="image-gallery-caption">
     <!-- This text will be overwritten by jQuery -->
    </div>
    <div class="col-md-2">
     <button type="button" id="show-next-image" class="btn btn-default">Weiter</button>
    </div>
   </div>
  </div>
 </div>
</div>

Danke schon mal im Voraus! =)

lg Hiro

Drucke diesen Beitrag

  Mehrsprachiges Menü kaputt
Geschrieben von: Garfield42 - 27.02.2017, 17:28 - Forum: Bootstrap 3 - Antworten (2)

Liebes Forum

Ich habe ein Problem, mit dem ich selber nicht mehr weiter komme. Ein Kollege hat mir nach meinen Wünschen eine neue Webseite gebaut, nun hatte er aber ewig keine Zeit mehr dafür und wird demnächst auch nicht haben. Ich würde diese nun gerne wenigstens mit den vorhandenen Sachen fertig stellen, damit ich sie endlich nutzen kann.
Ich selbst kann ein wenig HTML und ganz ganz wenig CSS (wenns simpel und in einer Datei ist). Er macht das professionell und hat mich nun mit über 7000 Dateien zurück gelassen, mit denen ich nichts anfangen kann... und ich habe heute das erste Mal etwas von Bootstrap gehört.

Folgende Probleme habe ich:

1. Problem: Ich habe einen Menübalken mit mehreren Menüpunkten. Und ich habe ein zweites Menü, das drei vorhandene Sprachen definiert. Korrekterweise würde nun nur der Menübalken der angewählten Sprache angezeigt werden.
Beide Menüs stehen in der index.html drin, an der ich etwas anderes geändert hatte und seither werden alle drei Menübalken angezeigt (also de / en / it untereinander). Offenbar hatte mein Kollege eine andere Datei hochgeladen als er mir auf den PC gespeichert hat, so dass mir die Sicherungsdateien, die ich später selbst gemacht hatte, nicht helfen.

Hier der (vermutlich) zuständige Ausschnitt aus der index.html:

Code:
<div id="navigation-top" class="nav navbar" role="navigation">
                <div class="container-fluid">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="glyphicon glyphicon-menu-hamburger"></span>
                        </button>
                        
                    <div id="main-menu" class="collapse navbar-collapse">
                        <div class="language-selection nav navbar-right">
                            <div class="language-selection-inner">
                                <a class="language-selector language-selector-de" href="#" data-language-code="de" data-toggle="tooltip" data-placement="bottom" title="Deutsch">
                                    <img src="assets/img/flags/flags/shiny/24/Switzerland.png" alt="Deutsch" style="vertical-align: top" />
                                </a>
                                <a class="language-selector language-selector-en" href="#"  data-language-code="en" data-toggle="tooltip" data-placement="bottom" title="English">
                                    <img src="assets/img/flags/flags/shiny/24/United-Kingdom.png" alt="English" style="vertical-align: top" />
                                </a>
                                <a class="language-selector language-selector-it" href="#"  data-language-code="it" data-toggle="tooltip" data-placement="bottom" title="Italiano">
                                    <img src="assets/img/flags/flags/shiny/24/Italy.png" alt="Italiano" style="vertical-align: top" />
                                </a>
                                <a class="language-selector language-selector-de">
                                    <a href="/rss.xml"><img src="assets/img/icons/rss.png" style="vertical-align: top">
                                </a>
                            </div>
                        </div>

                        <ul class="nav navbar-nav navigation-main navigation-main-de">
                          <li>
                            <a href="#news" class="active">News</a>
                          </li>
                          <li>
                            <a href="#genealogy">Genealogie</a>
                          </li>
                          <li>
                            <a href="#photos">Fotos</a>
                          </li>
                          <li>
                            <a href="#roleplaying">Rollenspiel</a>
                          </li>
                          <li>
                            <a href="/Forum" title="Nightwishs Wohnzimmer" data-toggle="tooltip" data-placement="bottom" target="forum">Forum</a>
                          </li>
                          <li>
                            <a href="#crafting">Basteleien</a>
                          </li>
                        </ul>
                        
                        <ul class="nav navbar-nav navigation-main navigation-main-en">
                          <li>
                            <a href="#news" class="active">News</a>
                          </li>
                          <li>
                            <a href="#genealogy">Genealogy</a>
                          </li>
                          <li>
                            <a href="#photos">Photos</a>
                          </li>
                          <li>
                            <a href="#roleplaying">Roleplaying</a>
                          </li>
                          <li>
                            <a href="/Forum" title="Nightwishs Wohnzimmer" data-toggle="tooltip" data-placement="bottom" target="forum">Forum</a>
                          </li>
                          <li>
                            <a href="#crafting">Crafting</a>
                          </li>
                        </ul>
                        
                        <ul class="nav navbar-nav navigation-main navigation-main-it">
                          <li>
                            <a href="#news" class="active">Novità</a>
                          </li>
                          <li>
                            <a href="#genealogy">Genealogia</a>
                          </li>
                          <li>
                            <a href="#photos">Foto</a>
                          </li>
                          <li>
                            <a href="#roleplaying">Gioco di ruolo</a>
                          </li>
                          <li>
                            <a href="/Forum" title="Nightwishs Wohnzimmer" data-toggle="tooltip" data-placement="bottom" target="forum">Forum</a>
                          </li>
                          <li>
                            <a href="#crafting">Bricolage</a>
                          </li>
                        </ul>                            
                    </div>
                </div>
            </div>
        </div>


Hier befindet sich meine neue Webseite, der gesamte Quellcode sollte zugänglich sein.
Das Menü war schon "kaputt", bevor ich den RSS-Feed eingefügt hatte, daran sollte es also nicht liegen.
Ich habe mir eine Anleitung zu einem Menü angeschaut und sehe ein paar Unterschiede, die für mich aber halbwegs sinnvoll erscheinen. Ich habe schon rausgefunden, dass "collapse" sich auf Responsive-Design bezieht und nicht auf das, was ich mit den drei Sprachen möchte. Von der Logik her würde ich sagen, dass es sowas wie eine "wenn - dann" Einstellung sein müsste, aber ich bin völlig überfordert.
Kann mir hier jemand helfen?

2. Problem: um auf die Möglichkeit mit dem RSS-Feed hinzuweisen, wollte ich neben den Flaggen im Menü oben auch noch das RSS-Symbol haben. Ich dachte mir, damit das überhaupt klappen kann, kopiere ich mal die Zeile von der ersten Flagge, mit der Idee, danach noch eine eigene class dafür zu machen. Inzwischen glaube ich, dass das nur bedingt sinnvoll ist. Denn ich will beim RSS-Symbol nur einen Link auf die RSS-Seite haben. Was mit "in neuem Tab öffnen" auch funktioniert, aber mit Links-Klick passiert nie was, auch wenn ich die CSS-Infos in dieser Zeile raus lösche.
Code:
<a class="language-selector language-selector-de">
    <a href="/rss.xml"><img src="assets/img/icons/rss.png" style="vertical-align: top">
</a>

Die betreffende Zeile ist auch im Code weiter oben drin.
Hat jemand eine Idee, wie ich diese Zeile schreiben muss, damit das RSS-Symbol zwar in das Symbole/Sprachen-Menü eingebunden ist, sich aber nicht so verhält wie die Flaggen-Symbole?

3. Problem: meine Mailadresse ist auch eingebunden, allerdings hätte ich gerne eine andere Adresse drin (eine mit besserem Spamschutz sowie meiner Domain). In einer der pages sieht das nun so aus:
Code:
<div class="news-item">
    <div class="news-item-header">
        Neue Webseite ist schon fast Online
        <div class="news-item-date">27. 12. 2015</div>
    </div>
    <div class="news-item-body">
        <p>Hier geht's zu der <a class="mail-link">E-Mail</a>.</p>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>
In den drei CSS-Dateien, die in der index.html genannt werden, finde ich aber diesen mail-link oder die Adresse nicht. In dieser page wird keine andere CSS-Datei angegeben. Wie finde ich nun die Datei, in der die Mailadresse definiert ist? Hat jemand einen Tipp oder eine Idee, wie ich konkreter suchen kann?

Ich habe noch ein Bild hinzugefügt mit den Problemen, damit das später auch anderen hilft.

Ich danke euch schon mal im Voraus.



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Menü-Fehler: in mobiler Ansicht ist das Menü direkt ausgeklappt (statt zugeklappt)
Geschrieben von: KOS - 21.02.2017, 13:58 - Forum: Bootstrap 3 - Antworten (2)

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