Hallo, Gast
Du musst dich registrieren bevor du auf unserer Seite Beiträge schreiben kannst.

Benutzername/E-Mail:
  

Passwort
  





Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 103
» Neuestes Mitglied: triples
» Foren-Themen: 94
» Foren-Beiträge: 306

Komplettstatistiken

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

Aktive Themen
Sticky Footer Bootstrap 4
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
Gestern, 09:34
» Antworten: 0
» Ansichten: 27
Button - Reihe am unteren...
Forum: Bootstrap 4
Letzter Beitrag: Nobima
18.04.2018, 14:00
» Antworten: 10
» Ansichten: 135
One Pager. Einige Fragen
Forum: Bootstrap 3
Letzter Beitrag: Emess
17.04.2018, 19:59
» Antworten: 4
» Ansichten: 91
Slide Effekt für Dropdown...
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
15.04.2018, 23:25
» Antworten: 0
» Ansichten: 55
Suche soll ganz rechts
Forum: Bootstrap 4
Letzter Beitrag: The-Error
15.04.2018, 21:22
» Antworten: 1
» Ansichten: 48
Tabelle min-height
Forum: Bootstrap 4
Letzter Beitrag: The-Error
14.04.2018, 13:51
» Antworten: 2
» Ansichten: 21
nav link vertikal zentrie...
Forum: Bootstrap 4
Letzter Beitrag: TheCheaf
11.04.2018, 21:54
» Antworten: 2
» Ansichten: 38
in nav-bar je link andere...
Forum: Bootstrap 4
Letzter Beitrag: The-Error
10.04.2018, 19:29
» Antworten: 1
» Ansichten: 20
Submenü wird abgeschnitte...
Forum: Bootstrap 4
Letzter Beitrag: Harald.Lichowski
09.04.2018, 08:07
» Antworten: 3
» Ansichten: 35
Frage zu Tut Tabpanel ?
Forum: Bootstrap 4
Letzter Beitrag: The-Error
08.04.2018, 11:21
» Antworten: 3
» Ansichten: 71

 
  Sticky Footer Bootstrap 4
Geschrieben von: The-Error - Gestern, 09:34 - Forum: Bootstrap Snippet - Keine Antworten

Sticky Footer Bootstrap 4
Sticky-Footer duch Nutzung Flex-Box

Demo

HTML5
  1. <body class="d-flex flex-column">
  2.    <div class="container flex-grow">
  3.       ...
  4.    </div
  5.    <footer>
  6.       ...
  7.    </footer>
  8. </body>



CSS
  1. body {
  2.    min-height: 100vh;
  3. }
  4. .flex-grow {
  5.    flex: 1;
  6. }



Download kompl. Footer-Template



Angehängte Dateien
.rar   Sticky-Footer.rar (Größe: 17,83 KB / Downloads: 1)
Drucke diesen Beitrag

  One Pager. Einige Fragen
Geschrieben von: Emess - 16.04.2018, 19:40 - Forum: Bootstrap 3 - Antworten (4)

Habe mit ein One Page Templett runtergeladen und etwas mit rumzuspielen und habe da mal einige Vertändnis Fragen.
Im Menu habe ich ein Impressum hinzugefügt doch wie wird das verlinkt?

OK das habe ich herausgefunden.

Unter Portfolio befindet sich eine schöne Galerie in der die Bilder wohl einen gewissen Marker besitzen was eine Sortierung ermöglicht.
Nur finde ich diesen Marker nicht. Ich habe einfach mal eine 4 Katergorie (Kugln) hizugefügt. Doch wie funktioniert das?

Code:
<div id="portfolio">
 <div class="container">
   <div class="section-title text-center center">
     <h2>Portfolio</h2>
     <hr>
   </div>
   <div class="categories">
     <ul class="cat">
       <li>
         <ol class="type">
           [color=#0000FF]<li><a href="#" data-filter="*" class="active">All</a></li>
           <li><a href="#" data-filter=".graphic">Graphic Design</a></li>
           <li><a href="#" data-filter=".illustration">Illustration</a></li>
           <li><a href="#" data-filter=".photography">Photography</a></li>
           <li><a href="#" data-filter=".kugeln">Kugeln</a></li>[/color]
         </ol>
       </li>
     </ul>
     <div class="clearfix"></div>
   </div>
   <div class="row">
     <div class="portfolio-items">
       <div class="col-sm-6 col-md-3 col-lg-3 graphic">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 illustration">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/02-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/02-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 graphic">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/03-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/03-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 graphic">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/04-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/04-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 illustration">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/05-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/05-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 photography">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/06-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/06-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 photography">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/07-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/07-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 graphic">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/08-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/08-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 illustration">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/09-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/09-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 photography">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/10-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/10-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 photography">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/11-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/11-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
       <div class="col-sm-6 col-md-3 col-lg-3 graphic">
         <div class="portfolio-item">
           <div class="hover-bg"> <a href="img/portfolio/12-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
             <div class="hover-text">
               <h4>Project Title</h4>
             </div>
             <img src="img/portfolio/12-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>


Wo werden die Filter definiert?
Hier kann man es sich ansehen.
http://www.my.emess62.de

Wie kann ich es anstellen, dass das Menu etweder früher kollabiert. oder sich in einer row anpasst bevor es kollabiert?
D.h es soll nicht zweireihig dargestellt werden.

Drucke diesen Beitrag

  Slide Effekt für Dropdown-Buttom
Geschrieben von: The-Error - 15.04.2018, 23:25 - Forum: Bootstrap Snippet - Keine Antworten

Dropdown Slide-Effekt
Mit diesen kleine Script kann man sehr einfach den Dropdown Buttom eine Slide- oder Fade-Effekt hinzufügen.
Wichtig: Das Script funtioniert nicht mit der jquery-3.3.1.slim.min.js sondern nur mit:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Demo

Javascript
  1.      $(document).ready(function() {
  2.            $('.dropdown').on('show.bs.dropdown', function() {
  3.                $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  4.            });
  5.            $('.dropdown').on('hide.bs.dropdown', function() {
  6.                $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  7.            });
  8.        });




Angehängte Dateien
.rar   dropdown.rar (Größe: 1,28 KB / Downloads: 2)
Drucke diesen Beitrag

  Suche soll ganz rechts
Geschrieben von: Caro - 15.04.2018, 19:22 - Forum: Bootstrap 4 - Antworten (1)

Hallo,
ich habe mir eine TopNav erstellt mit einer Suche. Die Suche hätte gerne komplett rechts und das Suchfeld sollte den freienplatz einnehmen oder zumindestens das ich selber bestimmen kann in pixel.

Leider weis ich nicht wie man sowas mit Bootstraap machen kann deshalb poste ich mal hier den HTML und CSS Code.

HTML

Code:
<div id="irgendwass" class="container1 topnav">
  <a class="spk" href="..." title="Login Sparkasse">Sparkasse</a>
  <a class="voba" href="..." title="Login Volksbank">Volksbank</a>
  <a class="pp" href="..." title="Login PayPal">PayPal</a>
  <!--
  <a href="#about">Link</a>
  -->
<form class="form-inline my-2 my-lg-0 ">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
CSS
Code:
/* Add a black background color to the top navigation */
.topnav {
    background-image: url("test.jpg");
    background-repeat: repeat-x;
    border-radius: 0.5rem;
    background-color: #333;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size:1rem;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
    letter-spacing:1px;
    }

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

a.spk:hover, a.voba:hover, a.pp:hover{ color: #ffffff; }

a.spk, a.voba, a.pp{ color: #ffffff; }
/* a.spk { color: #ff0000;} */
a.spk:hover{ background-color: #ff0000; }

/* a.voba { color: #005da8;} */
a.voba:hover { background-color: #005da8; }

/* a.pp { color: #019cde;} */
a.pp:hover{ background-color: #019cde; }

.container1 {
    width: 100%;
    max-width: 1140px;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto; }
so sieht es aus
   

so soll es
   

Drucke diesen Beitrag

  Tabelle min-height
Geschrieben von: Nobima - 14.04.2018, 10:53 - Forum: Bootstrap 4 - Antworten (2)

Meine Tabelle ist zu Anfang leer, erst wenn die Daten per Ajax eintreffen, wird sie gefüllt. Damit die leeren Reihen sofort die richtige Höhe haben, fülle ich sie mit Dummys. Der bessere Weg ist sicher die Verwendung der "min-height" Eigenschaft. Leider reagiert die Tabelle nicht auf einen CSS-Eintrag bei den Elementen thead th, tbody td, table .row, #table,  und .container.  Das Laden der Tabelle erfolgt  mit

Code:
$(function ()
  {
    $('#table').bootstrapTable(
      {
      data: mydata
      }
    );
  }
Was mache ich falsch ?
Code:
<div class="container">
  <div class="row">
    <div class="col-md-7">
      <br>
      <table id="table"
             data-height="340"
             class="table table-bordered"
             data-sortable = "true"
        <colgroup>
          <col class="col-md-1">
          <col class="col-md-3">
          <col class="col-md-2">
        </colgroup>
        <thead>
            <tr class="bg-primary">
               <th data-field="Mitarbeiter_Id">Mitarbeiter_Id</th>
               <th data-field="Name"
                   data-sortable="true"
                   data-sorter="starsSorter"> Name
               </th>
               <th data-field="Abteilung">Abteilung</th>
            </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

Drucke diesen Beitrag

  Button - Reihe am unteren Rand
Geschrieben von: Nobima - 12.04.2018, 09:44 - Forum: Bootstrap 4 - Antworten (10)

Hallo,
ich möchte am unteren Rand meiner Seite mit Hintergrundbild eine Reihe von Buttons mit unterschiedlichen Aufgaben (Wechsel zu einer anderen Seite,  Aufuf von JavaScript Funktionen usw.) anordnen. Die Position soll unabhängig von den anderen HTML-Elementen sein. Ich habe zwar viele Beispiele zu Buttons gefunden, aber bei der Positionierung komme ich nicht weiter. Für einen entsprechenden Hinweis wäre ich sehr dankbar.

Drucke diesen Beitrag

  nav link vertikal zentrieren
Geschrieben von: TheCheaf - 10.04.2018, 20:18 - Forum: Bootstrap 4 - Antworten (2)

Guten Abend zusammen,

​ich bin dabei mir eine Navbar zu erstellen. Nun ist es so das mein Dropdown Menü"Mein Bereich" nicht vertikal zentriert in der Navbar dargestellt wird.
​Das hängt damit zusammen, da ein Objekt oberhalb  dargestellt wird, was dort garnichts zu suchen hat! Der markierte Code unten ist mein Problem, wenn ich diese Zeile lösche, wird es an der korrekten position dargestellt und der Punkt ist weg. Das hat aber zur Auswirkung, wenn ich auf mein Dropdown gehe, dass das Fenster ganz links am Rand dargestellt wird. Wenn ich die Zeile wieder einfüge, wird das Dropdown an der richtigen Position dargestellt aber das "Mein Bereich" wird wieder runtergedrückt. Ich hoffe ihr helt mir[Bild: 1523387467_grXVYiyHMi7GXXu.PNG]

Code:
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
            <div class="container">        
                <a class="nav-link btn-primary ml-2 text-white" href="stundenplan.html">Start</a>
                <a class="navbar-brand" href="#">Mein Stundenplan</a>
-------------------------->     <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggler-right btn-primary ml- text-white " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Mein Bereich
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="login.html"> Anmelden</a>
                      <a class="dropdown-item" href="#">Hilfe</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
              
            </div>
        </nav>

Drucke diesen Beitrag

  in nav-bar je link andere Farbe ?
Geschrieben von: Caro - 10.04.2018, 15:16 - Forum: Bootstrap 4 - Antworten (1)

Hallo,
wie muß ich das in css machen wenn ich für jeden Link eine andere hover farbe haben möchte ?
mit "background-color" ist das nur der jintergrund, ich möchte aber nur "color" benutzten was nicht klappt.

Beispiel
 

Code:
<nav class="container navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link rot" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link blau" href="widgets.html">Widgets</a>
</li>
<li class="nav-item">
<a class="nav-link blau1" href="themes.html">Themes</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
hier mein versuch
Code:
ul.navbar-nav a.rot:hover{ color: red; } <<<--- klappt nicht

ul.navbar-nav a.blau:hover{ background-color: #005da8; }

ul.navbar-nav a.blau1:hover{ background-color: #019cde; }

Drucke diesen Beitrag

  Submenü wird abgeschnitten
Geschrieben von: Harald.Lichowski - 08.04.2018, 07:45 - Forum: Bootstrap 4 - Antworten (3)

Hallo liebes Bootstrap-Forum,

nun verfasse ich auch meinen ersten Beitrag und gleich mit einer Frage - aktuell habe ich ein Clandesign an webspell-Nor(http://webspell-nor.de/) dieses benötigt natürlich auch Bootstrap.

Zum Problem:Wenn man über das Menü z.B Main drüber fährt wird das Submenü abgeschnitten. Hättet Ihr für mein Problem lösungsvorschläge ?

Link: http://codeking.at/webspellnor/

Vielen dank, und einen schönen Sonntag!

Drucke diesen Beitrag

  Frage zu Tut Tabpanel ?
Geschrieben von: Caro - 05.04.2018, 22:06 - Forum: Bootstrap 4 - Antworten (3)

Hallo,
ich habe mir folgendes Tut angeschaut
http://bootstrap-forum.de/showthread.php?tid=333

finde ich echt hilfreich solche Tuts, Danke dafür.

wie kann man mit Bootstrap4  dieses vorlage so wie auf dem Screenshot erweitern ?
   

Drucke diesen Beitrag