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

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

  Logo mittig in Navbar
Geschrieben von: The-Error - Gestern, 13:35 - Forum: Bootstrap Snippet - Keine Antworten

Um das Logo (navbar-brand) mittig in der Navigation zu zentrieren:

Demo

HTML5
  1.     <nav id="topNav" class="navbar fixed-to navbar-expand-md navbar-dark bg-dark">
  2.         <div class="container">
  3.  
  4.             <!-- Logo mittig -->
  5.             <a class="navbar-brand mx-auto" href="/"><img src="logo.png" height="50px"></a>
  6.  
  7.             <!-- Toggeler-Button -->
  8.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
  9.                 <span class="navbar-toggler-icon"></span>
  10.             </button>
  11.             <div class="navbar-collapse collapse">
  12.  
  13.                 <!-- Navi linke Seite -->
  14.                 <ul class="navbar-nav">
  15.                     <li class="nav-item">
  16.                         <a class="nav-link" href="#">Home</a>
  17.                     </li>
  18.                     <li class="nav-item">
  19.                         <a class="nav-link" href="#">Projekte</a>
  20.                     </li>
  21.                     <li class="nav-item">
  22.                         <a class="nav-link" href="#">Galerie</a>
  23.                     </li>
  24.                 </ul>
  25.  
  26.                 <!-- Navi rechte Seite -->
  27.                 <ul class="navbar-nav ml-auto">
  28.                     <li class="nav-item">
  29.                         <a class="nav-link" href="#">Kontakt</a>
  30.                     </li>
  31.                     <li class="nav-item">
  32.                         <a class="nav-link" href="#">Impressum</a>
  33.                     </li>
  34.                     <li class="nav-item">
  35.                         <a class="nav-link" href="#">DSGVO</a>
  36.                     </li>
  37.                 </ul>
  38.  
  39.             </div>
  40.         </div>
  41.     </nav>



CSS
  1.         .navbar {
  2.             background-color: #6f5499 !important;
  3.         }
  4.  
  5.         @media (min-width: 768px) {
  6.             .navbar-brand {
  7.                 position: absolute;
  8.                 left: 50%;
  9.                 transform: translateX(-50%);
  10.             }
  11.         }
  12.  
  13.         @media (min-width: 768px)and (max-width: 991px) {
  14.             a.navbar-brand img {
  15.                 height: 30px
  16.             }
  17.         }


Drucke diesen Beitrag

  Bilder per Klick vergrößern
Geschrieben von: Con - Gestern, 06:35 - Forum: Bootstrap 4 - Antworten (1)

Hallo liebe Forumgemeinschaft,

sollte ich bei meiner Suche ggf. eine bereits vorhandene und für meinen Fall passende Antwort übersehen haben, so bitte ich um Nachsicht. Vermutlich wird das daran liegen das ich ggf. nicht die in der IT-Welt richtigen Bezeichnungen zur Suche verwendet habe. Nun aber mal mein Problem mit der Bitte um ein Hinweis ;-)


Ich "programmiere" (wenn man das überhaupt so nennen kann) ausschließlich privat und auch wirklich nur sehr "oberflächlich", insofern habe ich mir ein frei verfügbares Theme nebst diversen *.js, *.css aus dem Internet geholt:

  <!-- =======================================================
    Theme Name: Regna
    Theme URL: https://bootstrapmade.com/regna-bootstra...-template/
    Author: BootstrapMade.com
    License: https://bootstrapmade.com/license/
  ======================================================= -->

Soweit haben meine Anpassungen bis jetzt auch alle funktioniert. Ich scheitere jedoch kläglich dabei für Bilder eine Funktion hinzuzufügen, so dass diese bei einem Klick auf das Bild vergrößert werden und dann auch wieder verkleinert werden (z.B. durch einen Klick neben das vergrößerte Bild oder durch einen Klick auf ein "X" - optimal wäre natürlich beides).

Aktuell kann ich das Bild zwar über <a href=""> vergrößern, nur bekomme ich es dann nicht mehr klein. Mit der Funktion Modal auf dieser Seite hier https://www.w3schools.com/howto/howto_cs...images.asp habe ich diverse Implementierungsversuche unternommen nur komme ich an dieser Stelle leider auch nicht wirklich weiter.


Das hier wären die Bilder um die es geht ...

    <section id="portfolio">
      <div class="container wow fadeInUp">
        <div class="section-header">
          <h3 class="section-title">Hier meine Überschrift</h3>
          <p class="section-description">blablablablabla</p>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul id="portfolio-flters">
              <li data-filter=".filter-standa, .filter-standb, .filter-standc, .filter-standd" class="filter-active">All</li>
              <li data-filter=".filter-standa">Stand A</li>
              <li data-filter=".filter-standb">Stand B</li>
              <li data-filter=".filter-standc">Stand C</li>
              <li data-filter=".filter-standd">Stand D</li>
            </ul>
          </div>
        </div>
        <div class="row" id="portfolio-wrapper">
          <div class="col-lg-3 col-md-6 portfolio-item filter-standa">
            <a href="img/portfolio/standa.jpg">
              <img src="img/portfolio/standa.jpg" alt="">
              <div class="details70">
                <h4>Stand A</h4>
                <span>blablablablabla</span>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 portfolio-item filter-standd">
            <a href="">
              <img src="img/portfolio/standd.jpg" alt="">
              <div class="details50">
                <h4>Stand D</h4>
                <span>blablablablabla</span>
              </div>
            </a>
          </div>

         ... diverse weitere Einträge ...

        </div>


... wäre super wenn einer von euch eine Idee hätte und mir weiterhelfen könnte.

Lieben Dank
Gruß
Con

Drucke diesen Beitrag

  Switch individueller Style
Geschrieben von: Wolki - 20.03.2019, 15:30 - Forum: Bootstrap 4 - Antworten (3)

Hallo,

ich bin Bootstrap 4 Anfänger und verzweifel daran dem Switch von Bootstrap eine neue Farbe zu verpassen.
Kennt jemand die Klassen, die ich überschreiben muss?

Mein Code:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1" name="" value="">
    <label class="custom-control-label" for="switch1">An / Aus</label>
 </div>

Drucke diesen Beitrag

Sad Navbar wird nicht bei Desktop Bildschirmgröße angezeigt
Geschrieben von: elementOne - 19.03.2019, 17:25 - Forum: Bootstrap 4 - Antworten (3)

Hallo zusammen,

ich habe ein gewaltiges  Problem. Meine Hauptnavi ist nicht zu sehen!  Confused  Ich kann lediglich in der Mobile Auflösung das Menu-Icon klicken um das Menü aufklappen zu lassen in der mobilen Ansicht. Das funktioniert super. Ich kann DANN auch das Browserfenster vergrößern auf Desktop Größe, dann ist die Navi auch auf Desktopgröße zu sehen, aber wenn ich die Seite neu lade, ist die Navi wieder verschwunden. Dodgy Sprich... die Navi erscheint nur über den Navi-Toggler in der Desktop Ansicht. Was hab ich nur falsch gemacht?? Wäre super, wenn ihr mir helfen könntet.

Hier die ersten Zeilen  Code meiner Page:

HTML5
  1. <div class="container-fluid">
  2.         <div class="row wrapper">
  3.             <div class="col-lg-3 col-md-12">
  4.         
  5.     <!-- navbar -->
  6.        <nav class="navbar navbar-default">
  7.         <div class="container-fluid">
  8.           <div class="navbar-header">
  9.             <button id="mobilemenu" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  10.               <span class="sr-only">Navigation ein-/ausblenden</span>
  11.               <span class="icon-bar"><i class="fas fa-bars"></i></span>
  12.             </button>
  13.             <a class="navbar-brand" href="index.html"><img src="images/logo.gif" alt="Logo" class="logo"></a>
  14.           </div>
  15.             
  16.           <div id="navbar" class="navbar-collapse collapse">
  17.             <ul class="nav navbar-nav">
  18.               <li><a href="ueberuns.html">&Uuml;ber uns</a></li>
  19.               <li>
  20.                 <a href="arbeiten.html" >Arbeiten<span class="caret"></span></a>
  21.                 <ul>
  22.                   <li><a href="#">Indoor</a></li>
  23.                   <li><a href="#">Outdoor</a></li>
  24.                   <li><a href="#">Diverse</a></li>
  25.                 </ul>
  26.               </li>
  27.                 
  28.               <li><a href="kontakt.html">Kontakt</a></li>
  29.             </ul>
  30.           </div><!--/.nav-collapse -->
  31.         </div>
  32.       </nav>



Folgende JS hab ich unten in die Seite eingebunden:
Javascript
  1.  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  2.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  3.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


Drucke diesen Beitrag

  Div unten rechts
Geschrieben von: Spike - 16.03.2019, 23:51 - Forum: Bootstrap 4 - Antworten (13)

kleines Div unten rechts einblenden lassen mit OK Button.
So wie die das überall mit der cookie frage machen.
Wie geht das?



[Bild: BF2.jpg]

Drucke diesen Beitrag

  Bootstrap mit PHP
Geschrieben von: Ratloser - 14.03.2019, 08:03 - Forum: Bootstrap 4 - Antworten (6)

Hallo,

vorweg erstmal ein Hallo hier. Ich bin mir nicht sicher ob das Thema hier richtig ist. Mein Problem betrifft Bootstrap mit PHP (vermute ich).

Ich habe ein Problem mit "ID" Wert Übergabe an PHP mit Echo Ausgabe. Funktioniert tadelos mit HTML(ohne Bootstrap einbindung) an PHP. Sobald ich Bootstrap verwende habe ich Probleme.

Im HTML (testuser.html) Bereich steht (nur die divs):

<div class="input-group mb-3">
     <div class="input-group-prepend">
      <span class="input-group-text">Vorname:</span>
     </div>
     <input type="text" class="form-control" id="vor" required>
 </div>

In meiner testuser.php steht:
?>
<?php echo"Hallo ".$_POST["vor"];?>
<h4>Ihre Daten wurden wie folgt erfasst:</h4>
<p>
<?php  echo"Antragsteller: ".$_POST["vor"];
?>

Als Fehler erhalte ich folgenden Ausgabe:
( ! ) Notice: Undefined index: vor in C:\wamp\www\testuser.php on line 35 // Ist die Zeile <?php echo"Hallo ".$_POST["vor"];?>
( ! ) Notice: Undefined index: vor in C:\wamp\www\testuser.php on line 40// <?php  echo"Antragsteller: ".$_POST["vor"];

Ich kann einfach den Fehler nicht finden... Huh 

Vielleicht hat jemand eine Idee... und sorry wenn ich in der falschen Rubrik bin..

Vielen Dank schon mal

Gruß
Ratloser

Drucke diesen Beitrag

  Event Manager mit Divi-Theme
Geschrieben von: The-Error - 12.03.2019, 18:43 - Forum: Wordpress - Antworten (2)

Nach den letzten Update von Divi auf die Divi-Version 3.20.1 funktioniert der Event Manager nicht mehr richtig.
Es werden keine Events im Dashboard mehr angezeigt.


Wenn einer der älteren Version von Divi z.B. 3.19.18 oder 3.19.5 wieder eingespielt wird funktioniert wieder alles!

Drucke diesen Beitrag

  Language Dateien für WP Bootstrap 4?
Geschrieben von: Montviso - 12.03.2019, 09:19 - Forum: Bootstrap 4 - Antworten (4)

Ich verwenden aktuelles Wordpress mit Gutenberg und WP Bootstrap 4 und bin soweit sehr zufrieden.
Nur fehlen die Übersetzungen, z.B. bei Kommentaren oder Blog User / Datum ect.
Wenn ich auf ein Standard-Theme von WP switche, dann sind die Übersetzungen da.

Was ist denn die beste Strategie, diese Übersetzungen zu machen, bzw. zu importieren?
Die Webseite soll dann auch noch mit Polylang oder dgl. Mehrsprachig werden.

Gibt es irgendwo eine .po Datei die ich einfach integrieren kann?
Ich lese von Plugins, die man installieren kann, aber ist das wirklich nötig?

Drucke diesen Beitrag

  Popover
Geschrieben von: Spike - 12.03.2019, 09:02 - Forum: Bootstrap 4 - Antworten (5)

Hallo.
Problem mit Popover.
Nach diesem Tutorial: https://bootstrap-forum.de/Tutorial/BS4-Popover.html

Funktioniert es nicht bei mir. Ich bekomme nur den alten normalen Title zu sehen.
Was feht da für eine js oder css datei die man noch einbinden muss oder so?
Oder stört da der Code irgend wo doppelt das es sich überschreibt und das deswegen nicht funktioniert?


Gruß

Drucke diesen Beitrag

  FontAwsome Symbol bei Crome nicht dargestellt
Geschrieben von: jan777 - 02.03.2019, 17:52 - Forum: Bootstrap 4 - Antworten (1)

Hab das Prob dass ein FontAwsome-Symbol bei Firefox rund wie gewünscht dargestellt wird, bei Google-Crome erscheint aber nur ein quadratischer Rahmen.

Ich verstehs nicht.


<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-balance-scale fa-stack-1x fa-inverse"></i>
</span>

Drucke diesen Beitrag

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

Benutzername/E-Mail:


Passwort





[-]
Letzte Beiträge
Bilder per Klick vergrößern
Last Post: The-Error
Gestern 15:26
» Replies: 1
» Views: 8
Logo mittig in Navbar
Last Post: The-Error
Gestern 13:35
» Replies: 0
» Views: 6
Switch individueller Style
Last Post: Wolki
21.03.2019 09:19
» Replies: 3
» Views: 50

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

[-]
Statistics
» Members: 214
» Latest member: Con
» Forum threads: 200
» Forum posts: 833

Full Statistics

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

>