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: 36
» Neuestes Mitglied: Zittzewitz
» Foren-Themen: 37
» Foren-Beiträge: 132

Komplettstatistiken

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

Aktive Themen
Kalender Projekt. Wer kan...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
18.04.2017, 19:10
» Antworten: 33
» Ansichten: 1.072
IE keine hover-Effekt im ...
Forum: Bootstrap 3
Letzter Beitrag: designermohr
31.03.2017, 11:21
» Antworten: 0
» Ansichten: 65
2 unabhängige Modal's auf...
Forum: Bootstrap 3
Letzter Beitrag: Hiro
14.03.2017, 09:42
» Antworten: 7
» Ansichten: 456
Mehrsprachiges Menü kaput...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
05.03.2017, 18:07
» Antworten: 2
» Ansichten: 265
Menü-Fehler: in mobiler A...
Forum: Bootstrap 3
Letzter Beitrag: Emess
27.02.2017, 22:22
» Antworten: 2
» Ansichten: 279
Wann werden die Ressource...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
20.02.2017, 13:45
» Antworten: 1
» Ansichten: 218
row's Ausrichten aber wie...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:03
» Antworten: 4
» Ansichten: 431
Grafik ausrichten???
Forum: Bootstrap 3
Letzter Beitrag: The-Error
17.02.2017, 12:02
» Antworten: 1
» Ansichten: 200
Bootstrap modal crud tabl...
Forum: Bootstrap 3
Letzter Beitrag: odiug
09.02.2017, 20:28
» Antworten: 0
» Ansichten: 125
Div Block Mittig auf seit...
Forum: Bootstrap 3
Letzter Beitrag: Husker
07.02.2017, 13:29
» Antworten: 2
» Ansichten: 271

 
  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

  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.

Bootsrap Flexbox

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