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: 64
» Neuestes Mitglied: hwink
» Foren-Themen: 59
» Foren-Beiträge: 187

Komplettstatistiken

Benutzer Online
Momentan sind 9 Benutzer online
» 1 Mitglieder
» 8 Gäste
The-Error

Aktive Themen
Wer hilft mir beim Dropdo...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
15.11.2017, 02:07
» Antworten: 5
» Ansichten: 55
[gelost] Emailadresse und...
Forum: Bootstrap 3
Letzter Beitrag: Emess
09.11.2017, 21:31
» Antworten: 3
» Ansichten: 99
Nur die Footer und ein Ti...
Forum: Bootstrap 4
Letzter Beitrag: The-Error
06.11.2017, 12:37
» Antworten: 3
» Ansichten: 141
2 Menüs in ein Hamburger ...
Forum: Bootstrap 3
Letzter Beitrag: Eumelchen
05.11.2017, 20:06
» Antworten: 4
» Ansichten: 422
Bootstrap 4 Starter Templ...
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
26.10.2017, 16:37
» Antworten: 0
» Ansichten: 171
Brauche Hilfe bei Navigat...
Forum: Bootstrap 3
Letzter Beitrag: Sonnenfrau
09.10.2017, 11:31
» Antworten: 2
» Ansichten: 283
Formular versendet keine ...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
12.09.2017, 14:05
» Antworten: 1
» Ansichten: 181
Bootstrap 4 Beta veröffen...
Forum: Bootstrap 4
Letzter Beitrag: The-Error
13.08.2017, 14:14
» Antworten: 0
» Ansichten: 366
Bootsnipp Slider
Forum: Bootstrap 3
Letzter Beitrag: The-Error
21.07.2017, 16:49
» Antworten: 1
» Ansichten: 356
Mehrsprachiges Menü
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
18.07.2017, 11:37
» Antworten: 0
» Ansichten: 453

 
  Wer hilft mir beim Dropdown Menue?
Geschrieben von: Emess - 13.11.2017, 21:35 - Forum: Bootstrap 3 - Antworten (5)

Will bei einer Navbar ein Dropdown erstellen. bzw habe ich schon.
Allerdings sollten die Farben und Schriften der eigentlichen Navbar entsprechen und als hoover angezeigt werden.
Die Navigation ist aus einem Bootstrap Schnipsel.

Hier die Seite und mein code.

http://www.my.emess62.de/index.html


Zitat:<div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default navbar-inverse" role="navigation">
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                         <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                </div>
                
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Startseite</a></li>
                        <li><a href="aboutus.html">Das Unternehmen</a>
                        
                        <li class="visible-xs-block"><a href="/heute.html">Heute</a></li>
            <li class="visible-xs-block"><a href="/frueher.html">Früher</a></li>
            <li class="visible-xs-block"><a href="/findlinge.html">Findlinge</a></li>
            
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Der Steinbruch<b class="caret"></b></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="heute.html">Heute</a></li>
                <li><a href="frueher.html">Früher</a></li>
                <li><a href="findlinge.html">Findlinge</a></li>
              </ul>
           
                        </li>
                        <!--<li><a href="findlinge.html">Findlinge</a></li>
                        <li><a href="natursteine.html">Natursteine </a></li> -->
                        <li><a href="grabmale.html">Grabmale</a></li>
                        <li><a href="galerie.html">Galerie</a></li>
                        <li><a href="kontakt.php">Kontakt</a></li>
                        <li><a href="impressum.html">Impressum</a></li>
                    </ul>
                </div>
                
            </nav>
        </div>
    </div>
css
Code:
.navbar.navbar-inverse {
 background-image: linear-gradient(#9f9f9f, #535353 3%, #1f1f1f 17%, #212121 49%, #191919 89%, #000000 100%);
 background-image:url('../bilder/granitmuster.jpg');
 border-top: 1px inset rgba(255, 255, 255, 0.1);
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
 border-radius: 5px;
 margin-top: 10px;
}

.navbar .navbar-nav > li > a {
 color: #d1d1d1;
 font-weight: 700;
 text-rendering: optimizeLegibility;
 text-shadow: 0px -1px black, 0px 1px rgba(255, 255, 255, 0.25);
 line-height: 18px;
}

.navbar .navbar-nav > li.active {
 color: #f8f8f8;
 background-color: #080808;
 box-shadow: inset 0px -28px 23px -21px rgba(255, 255, 255, 0.15);
 border-left: 1px solid #2A2A2A;
 border-right: 1px solid #272727;
}
/*
.btn.btn-gradient-blue {
 background-color: #0c5497 !important;
 background-image: -webkit-linear-gradient(top, #127bde 0%, #072d50 100%);
 background-image: -o-linear-gradient(top, #127bde 0%, #072d50 100%);
 background-image: linear-gradient(to bottom, #127bde 0%, #072d50 100%);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff127bde', endColorstr='#ff072d50', GradientType=0);
 border-color: #072d50 #072d50 #0c5497;
 color: #fff !important;
 text-shadow: 0 -1px 0 rgba(31, 31, 31, 0.29);
 -webkit-font-smoothing: antialiased;
}
*/


über Hilfe würde ich mich freuen.

Drucke diesen Beitrag

  [gelost] Emailadresse und hover. Ich steh auf dem Schlauch
Geschrieben von: Emess - 07.11.2017, 21:25 - Forum: Bootstrap 3 - Antworten (3)

Ich hab mal wieder ein kleines Projekt bei dem ich auf dem Schlauch stehe.
Und zwar ist die Anschrift und E-mail auf dunklem Hintergrund.
Ich möchte wenn man über die E-Mail Adresse mit der Maus fahrt eine gut sichtbare Farbe gehoovert wird.
Ich steh da gerade echt auf dem Schlauch.

www.my.emess62.de/index.html

Das problem ist unten links


Code:
<div class="col-md-3">
        <h3 class="footh">Standort</h3>
<div>
  <h4 class="foot_text">Geschäftstelle</h4>
   <p class="foot_text">Herrngartenstraße 38
   <br>64405 Fischbachtal
   <br>Telefon 060166-8053
   <br>  <a href="mailto:info@granitwerk-wilferth.de" target="_blank">info@granitwerk-wilferth.de
</a></p>
</div>

Drucke diesen Beitrag

Question Nur die Footer und ein Tisch sind nicht bootstraped
Geschrieben von: MikeB - 05.11.2017, 17:28 - Forum: Bootstrap 4 - Antworten (3)

Halo !

Ich programmiere mein erstes Bootstrap-Projekt

Mehrmals startet der Bootstrap nicht automatisch überall auf der von mir entwickelten HTML-Seite im Vergleich zu einer Beispielseite.


Hier ist das, was ich versuche zu reproduzieren:

[Bild: tT4s8.png]


Und hier ist der, den ich produziert habe :

[Bild: z3ARI.png]


Die HTML-Codes sind identisch und ich denke, ich habe die Installation von Bootstrap korrekt durchgeführt.
Ich weiß also nicht, warum das Design der Seite nicht gut funktioniert ... habt ihr irgendwelche Ideen?

Ich folge einem Front-End Web Kurs UI Frameworks und Tools: Bootstrap 4, auf Coursera. Insbesondere der Kurs über CSS-Komponenten von Bootstrap.

Eine Person namens MCheli hat es gut gemacht.
Es ist von Ihrem Code (der mit meinem auf dem Tisch identisch ist), dass die erste Bildschirmaufnahme kommt. Hier ist Ihr GitHub Repository für diese Übung. Hier ist meinem auf Bitbucket.

Drucke diesen Beitrag

  Bootstrap 4 Starter Template
Geschrieben von: The-Error - 26.10.2017, 16:37 - Forum: Bootstrap Snippet - Keine Antworten

Bootstrap 4 Starter Template
Mit Shrinking Navigation, Scrolling Nav und Kontaktformular
Unter Verwendung:

  • Bootstrap 4.0.0-beta
  • jQuery 3.2.1
  • shrink.js
  • scrolling-nav.js

[Bild: strater.png]
Download:
.rar   starter.rar (Größe: 262,02 KB / Downloads: 5)

Drucke diesen Beitrag

  Brauche Hilfe bei Navigationsleiste
Geschrieben von: Sonnenfrau - 08.10.2017, 17:41 - Forum: Bootstrap 3 - Antworten (2)

Hallo zusammen,
ich habe meine Seite mit Bootstrap aufgebaut und jetzt stehe ich vor einer Herausforderung. Habe probiert und getestet, aber es klappt nicht so, wie ich es möchte. Und zwar habe ich eine Navigationsleiste , die so aussieht:

   

Bei Darüberfahren mit der Maus fährt das Untermenü aus. Meine Navigation besteht aus 6 Menüpunkten. Da die Seite sehr umfangreich ist, bestehen einige der Hauptmenü-Items aus einer großen Anzahl von Unterthemen. Die bei kleinem Notebook dann nicht mehr alle angezeigt werden, darum würde ich gerne einen Menüpunkt mehrspaltig machen.

Das CSS ist aber so aufgebaut, dass jeweils nur ein einspaltiges Untermenü ausgefahren wird. Das ist auch größtenteils in Ordnung so, nur beim Menüpunkt "Allgemein" hätte ich wegen der Vielfalt an Artikeln doch lieber, dass ein zwei- oder dreispaltiges Untermenü ausfährt, also so eine Art Mega-Menu.

In etwa so:
   


Wie gesagt, ich habe schon herumgetüftelt, komme aber nicht drauf. Wie kriege ich das hin?

Hier der CSS-Code für das Menü:

Code:
#hornav {
 position: relative;
 width: 100%;
 }

#hornav .container {
 background-color: #336699;
 box-shadow: 0 -4px 0 #33747a inset, 0 0 20px rgba(0, 0, 0, 0.1);
 min-height: 60px;
 display: block;
 
 }

#hornav .navbar-nav {
 float: none;
}
#hornav .no-padding {
 padding-bottom: 0 !important;
}
#hornav ul#hornavmenu {
 display: inline-block;
 margin: 0 0 -6px;
 padding: 0px;
}
#hornav ul#hornavmenu > li {
 margin: 0px;
}
#hornav ul#hornavmenu > li > a,
#hornav ul#hornavmenu > li > span {
 color: #e3e3e3;
 font-size: 14px;
 font-weight: normal;
 letter-spacing: 1px;
 line-height: normal;
 padding: 19px 12px 20px;
 text-transform: uppercase;
 display: block;
}
#hornav ul#hornavmenu > li > a:hover,
#hornav ul#hornavmenu > li > span:hover,
#hornav ul#hornavmenu > li > a.active,
#hornav ul#hornavmenu > li > span.active,
#hornav ul#hornavmenu > li > a.current,
#hornav ul#hornavmenu > li > span.current {
 background: #33747a;
}
#hornav .nav > li > a:hover,
#hornav .nav > li > a:focus {
 background-color: transparent;
}
/* Dropdown Menu */
#hornav ul ul {
 text-align: left;
 background: #f2f2f2;
 border-radius: 5px;
 border: 1px solid #dddddd;
 position: relative;
 -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 display: block;
 list-style: none;
 margin: 0px;
 padding: 5px 0 !important;
 min-width: 200px;
 z-index: 30;
}
#hornav ul ul li {
 min-height: 22px;
 float: none;
 position: relative;
 margin: 0;
}
#hornav ul ul li a,
#hornav ul ul li span {
 background-color: transparent;
 box-shadow: none;
 display: block;
 padding: 6px 15px;
 color: #555555 !important;
 text-transform: none;
 border-top: 1px solid rgba(0, 0, 0, 0.05);
}
#hornav ul ul:before {
 background: transparent url('../img/menu_arrow.png') no-repeat 0 0;
 content: "";
 display: block;
 height: 10px;
 left: 21px;
 position: absolute;
 top: -10px;
 width: 14px;
}
#hornav ul ul li:first-child a {
 border: none;
}
#hornav ul ul li a:active,
#hornav ul ul li a:focus,
#hornav ul ul li a:hover {
 text-decoration: none;
 background-color: rgba(0, 0, 0, 0.05);
}
#hornav ul ul li:hover a {
 text-decoration: none;
}
#hornav ul ul ul:before {
 display: none;
}
#hornav li ul,
#hornav li ul li ul {
 position: absolute;
 height: auto;
 min-width: 200px;
 opacity: 0;
 visibility: hidden;
 transition: all 240ms linear;
 -o-transition: all 240ms linear;
 -ms-transition: all 240ms linear;
 -moz-transition: all 240ms linear;
 -webkit-transition: all 240ms linear;
 top: 70px;
 z-index: 1000;
}
#hornav li:hover > ul,
#hornav li ul li:hover > ul {
 display: block;
 opacity: 1;
 visibility: visible;
 top: 60px;
}
#hornav li ul li ul {
 left: 220px;
 top: 0;
}
#hornav li ul li:hover > ul {
 top: 0px;
 left: 200px;
}
#hornav ul ul .parent:after {
 top: 10px;
 right: 15px;
 color: #777;
 font-size: 14px;
 content: "\f105";
 position: absolute;
 font-weight: normal;
 display: inline-block;
 font-family: FontAwesome;
}


/* dropdowns */
.dropdown-menu {
 z-index: 1000;
 font-size: 14px;
 background-color: #ffffff;
 border: 1px solid #cccccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 0;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu.pull-right {
 right: 0;
 left: auto;
}
.dropdown-menu .divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.dropdown-menu > li > a {
 padding: 5px 20px;
 line-height: 1.42857143;
 color: #333333;
 white-space: nowrap;
}



Und hier der HTML-Code:

Code:
<!-- Top Menu -->
           <div id="hornav" class="bottom-border-shadow">
             
               <div class="container no-padding border-bottom visible-lg">
                    <div class="row">
                       <div class="col-md-12 no-padding">
                           <div class="visible-lg">
                               <ul id="hornavmenu" class="nav navbar-nav">
                                   <li>
                                       <a href="home.htm" class="fa-home active">Home</a>
                                     <ul>
                                       <li><a href="xxx">xxx</a></li>                                        
                                     </ul>
                                   </li>
                                 <li>  
                                 <a href="xxx.htm" class="fa-heart">Einspaltig</a>
                                     <ul>                                          
                                       <li><a href="xxx">xxx</a></li>                                            
                                     </ul>
                                   </li>
                                   <li>
                                       <a href=allgemein.htm class="fa-copy ">Zweispaltig anordnen</a>
                                       <ul>
                                           <li><a href="xxx">xxx</a></li>
                                           <li><a href="xxx">xxx</a></li>
                                           <li><a href="xxx">xxx</a></li>
                                           <li><a href="xxx">xxx</a></li>                                            
                                       </ul>
                                   </li>
                                   
                                   
                                   <li><a href="xxx.htm" class="fa-medkit">Einspaltig</a>
                                     <ul>
                                       <li><a href="xxx">xxx</a></li>                                        
                                     </ul>
                                   </li>
 
                               </ul>
                           </div>
                       </div>
                       
                   </div>
               </div>
           </div>
           <!-- End Top Menu -->

Liebe Grüße
die Sonnenfrau

Drucke diesen Beitrag

  2 Menüs in ein Hamburger verpacken
Geschrieben von: Neo000 - 15.09.2017, 22:58 - Forum: Bootstrap 3 - Antworten (4)

Hallo,

habe ein kleines Problem. Ich möchte 2 Menüs in einer Leiste verstecken. Leider bekomme ich es nur in 2 Menüleisten hin. Siehe Bild

Möchte es aber nur in einem Menü haben. Vllt kann mir mal jemand helfen dabei?



[img][Bild: so2msf2t.png][/img]

Drucke diesen Beitrag

  Formular versendet keine Umlaule
Geschrieben von: andres - 12.09.2017, 09:55 - Forum: Bootstrap 3 - Antworten (1)

Hallo
Ich habe eine bootstrap agency theme am laufen (http://www.psychotherapie-passweg.ch/) am laufen.
Das Formular vesendet keine Umlaute. Im Moment läuft php 5.6.
Konnte das der Grund sein?
Muss ich eine Datei abändern?
Bin leider kein php Kenner.
Weiss jemand Rat?
Besten Dank.


PHP-Code:
<?php
header
("Content-Type: text/html; charset=utf-8");

// Check for empty fields
if(empty($_POST['name'])      ||
 
  empty($_POST['email'])     ||
 
  empty($_POST['phone'])     ||
 
  empty($_POST['message'])   ||
 
  !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
 
  {
 
  echo "No arguments Provided!";
 
  return false;
 
  }
 
  
$name 
strip_tags(htmlspecialchars($_POST['name']));
$email_address strip_tags(htmlspecialchars($_POST['email']));
$phone strip_tags(htmlspecialchars($_POST['phone']));
$message strip_tags(htmlspecialchars($_POST['message']));
 
  
// Create the email and send the message
$to 'info@domain.ch'// Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject "Mitteilung von:  $name";
$email_body "Jemand hat eine Nachricht von ihrer Website versendet. \n\n"."Hier die Angaben:\n\nName: $name\n\nEmail: $email_address\n\nTelefon: $phone\n\nNachricht:\n$message";
$headers "From: noreply@psychotherapie-passweg.ch\n"// This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address \n"  
$headers 
.= 'Content-type: text/plain; charset=UTF-8' "\n";
mail($to,$email_subject,$email_body,$headers);
return 
true        
?>

Code:
/* jqBootstrapValidation

* A plugin for automating validation on Twitter Bootstrap formatted forms.
*
* v1.3.6
*
* License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file
*
* http://ReactiveRaven.github.com/jqBootstrapValidation/
*/

(function( $ ){

    var createdElements = [];

    var defaults = {
        options: {
            prependExistingHelpBlock: false,
            sniffHtml: true, // sniff for 'required', 'maxlength', etc
            preventSubmit: true, // stop the form submit event from firing if validation fails
            submitError: false, // function called if there is an error when trying to submit
            submitSuccess: false, // function called just before a successful submit event is sent to the server
           semanticallyStrict: false, // set to true to tidy up generated HTML output
            autoAdd: {
                helpBlocks: true
            },
           filter: function () {
               // return $(this).is(":visible"); // only validate elements you can see
               return true; // validate everything
           }
        },
   methods: {
     init : function( options ) {

       var settings = $.extend(true, {}, defaults);

       settings.options = $.extend(true, settings.options, options);

       var $siblingElements = this;

       var uniqueForms = $.unique(
         $siblingElements.map( function () {
           return $(this).parents("form")[0];
         }).toArray()
       );

       $(uniqueForms).bind("submit", function (e) {
         var $form = $(this);
         var warningsFound = 0;
         var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
         $inputs.trigger("submit.validation").trigger("validationLostFocus.validation");

         $inputs.each(function (i, el) {
           var $this = $(el),
             $controlGroup = $this.parents(".form-group").first();
           if (
             $controlGroup.hasClass("warning")
           ) {
             $controlGroup.removeClass("warning").addClass("error");
             warningsFound++;
           }
         });

         $inputs.trigger("validationLostFocus.validation");

         if (warningsFound) {
           if (settings.options.preventSubmit) {
             e.preventDefault();
           }
           $form.addClass("error");
           if ($.isFunction(settings.options.submitError)) {
             settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true));
           }
         } else {
           $form.removeClass("error");
           if ($.isFunction(settings.options.submitSuccess)) {
             settings.options.submitSuccess($form, e);
           }
         }
       });

       return this.each(function(){

         // Get references to everything we're interested in
         var $this = $(this),
           $controlGroup = $this.parents(".form-group").first(),
           $helpBlock = $controlGroup.find(".help-block").first(),
           $form = $this.parents("form").first(),
           validatorNames = [];

         // create message container if not exists
         if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
             $helpBlock = $('<div class="help-block" />');
             $controlGroup.find('.controls').append($helpBlock);
                            createdElements.push($helpBlock[0]);
         }

         // =============================================================
         //                                     SNIFF HTML FOR VALIDATORS
         // =============================================================

         // *snort sniff snuffle*

         if (settings.options.sniffHtml) {
           var message = "";
           // ---------------------------------------------------------
           //                                                   PATTERN
           // ---------------------------------------------------------
           if ($this.attr("pattern") !== undefined) {
             message = "Not in the expected format<!-- data-validation-pattern-message to override -->";
             if ($this.data("validationPatternMessage")) {
               message = $this.data("validationPatternMessage");
             }
             $this.data("validationPatternMessage", message);
             $this.data("validationPatternRegex", $this.attr("pattern"));
           }
           // ---------------------------------------------------------
           //                                                       MAX
           // ---------------------------------------------------------
           if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
             var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
             message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->";
             if ($this.data("validationMaxMessage")) {
               message = $this.data("validationMaxMessage");
             }
             $this.data("validationMaxMessage", message);
             $this.data("validationMaxMax", max);
           }
           // ---------------------------------------------------------
           //                                                       MIN
           // ---------------------------------------------------------
           if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
             var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
             message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->";
             if ($this.data("validationMinMessage")) {
               message = $this.data("validationMinMessage");
             }
             $this.data("validationMinMessage", message);
             $this.data("validationMinMin", min);
           }
           // ---------------------------------------------------------
           //                                                 MAXLENGTH
           // ---------------------------------------------------------
           if ($this.attr("maxlength") !== undefined) {
             message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
             if ($this.data("validationMaxlengthMessage")) {
               message = $this.data("validationMaxlengthMessage");
             }
             $this.data("validationMaxlengthMessage", message);
             $this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
           }
           // ---------------------------------------------------------
           //                                                 MINLENGTH
           // ---------------------------------------------------------
           if ($this.attr("minlength") !== undefined) {
             message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
             if ($this.data("validationMinlengthMessage")) {
               message = $this.data("validationMinlengthMessage");
             }
             $this.data("validationMinlengthMessage", message);
             $this.data("validationMinlengthMinlength", $this.attr("minlength"));
           }
           // ---------------------------------------------------------
           //                                                  REQUIRED
           // ---------------------------------------------------------
           if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
             message = settings.builtInValidators.required.message;
             if ($this.data("validationRequiredMessage")) {
               message = $this.data("validationRequiredMessage");
             }
             $this.data("validationRequiredMessage", message);
           }
           // ---------------------------------------------------------
           //                                                    NUMBER
           // ---------------------------------------------------------
           if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
             message = settings.builtInValidators.number.message;
             if ($this.data("validationNumberMessage")) {
               message = $this.data("validationNumberMessage");
             }
             $this.data("validationNumberMessage", message);
           }
           // ---------------------------------------------------------
           //                                                     EMAIL
           // ---------------------------------------------------------
           if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
             message = "Keine gültige Email Adresse<!-- data-validator-validemail-message to override -->";
             if ($this.data("validationValidemailMessage")) {
               message = $this.data("validationValidemailMessage");
             } else if ($this.data("validationEmailMessage")) {
               message = $this.data("validationEmailMessage");
             }
             $this.data("validationValidemailMessage", message);
           }
           // ---------------------------------------------------------
           //                                                MINCHECKED
           // ---------------------------------------------------------
           if ($this.attr("minchecked") !== undefined) {
             message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->";
             if ($this.data("validationMincheckedMessage")) {
               message = $this.data("validationMincheckedMessage");
             }
             $this.data("validationMincheckedMessage", message);
             $this.data("validationMincheckedMinchecked", $this.attr("minchecked"));
           }
           // ---------------------------------------------------------
           //                                                MAXCHECKED
           // ---------------------------------------------------------
           if ($this.attr("maxchecked") !== undefined) {
             message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->";
             if ($this.data("validationMaxcheckedMessage")) {
               message = $this.data("validationMaxcheckedMessage");
             }
             $this.data("validationMaxcheckedMessage", message);
             $this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked"));
           }
         }

         // =============================================================
         //                                       COLLECT VALIDATOR NAMES
         // =============================================================

         // Get named validators
         if ($this.data("validation") !== undefined) {
           validatorNames = $this.data("validation").split(",");
         }

         // Get extra ones defined on the element's data attributes
         $.each($this.data(), function (i, el) {
           var parts = i.replace(/([A-Z])/g, ",$1").split(",");
           if (parts[0] === "validation" && parts[1]) {
             validatorNames.push(parts[1]);
           }
         });

         // =============================================================
         //                                     NORMALISE VALIDATOR NAMES
         // =============================================================

         var validatorNamesToInspect = validatorNames;
         var newValidatorNamesToInspect = [];

         do // repeatedly expand 'shortcut' validators into their real validators
         {
           // Uppercase only the first letter of each name
           $.each(validatorNames, function (i, el) {
             validatorNames[i] = formatValidatorName(el);
           });

           // Remove duplicate validator names
           validatorNames = $.unique(validatorNames);

           // Pull out the new validator names from each shortcut
           newValidatorNamesToInspect = [];
           $.each(validatorNamesToInspect, function(i, el) {
             if ($this.data("validation" + el + "Shortcut") !== undefined) {
               // Are these custom validators?
               // Pull them out!
               $.each($this.data("validation" + el + "Shortcut").split(","), function(i2, el2) {
                 newValidatorNamesToInspect.push(el2);
               });
             } else if (settings.builtInValidators[el.toLowerCase()]) {
               // Is this a recognised built-in?
               // Pull it out!
               var validator = settings.builtInValidators[el.toLowerCase()];
               if (validator.type.toLowerCase() === "shortcut") {
                 $.each(validator.shortcut.split(","), function (i, el) {
                   el = formatValidatorName(el);
                   newValidatorNamesToInspect.push(el);
                   validatorNames.push(el);
                 });
               }
             }
           });

           validatorNamesToInspect = newValidatorNamesToInspect;

         } while (validatorNamesToInspect.length > 0)

         // =============================================================
         //                                       SET UP VALIDATOR ARRAYS
         // =============================================================

         var validators = {};

         $.each(validatorNames, function (i, el) {
           // Set up the 'override' message
           var message = $this.data("validation" + el + "Message");
           var hasOverrideMessage = (message !== undefined);
           var foundValidator = false;
           message =
             (
               message
                 ? message
                 : "'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->"
             )
           ;

           $.each(
             settings.validatorTypes,
             function (validatorType, validatorTemplate) {
               if (validators[validatorType] === undefined) {
                 validators[validatorType] = [];
               }
               if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) {
                 validators[validatorType].push(
                   $.extend(
                     true,
                     {
                       name: formatValidatorName(validatorTemplate.name),
                       message: message
                     },
                     validatorTemplate.init($this, el)
                   )
                 );
                 foundValidator = true;
               }
             }
           );

           if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) {

             var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]);
             if (hasOverrideMessage) {
               validator.message = message;
             }
             var validatorType = validator.type.toLowerCase();

             if (validatorType === "shortcut") {
               foundValidator = true;
             } else {
               $.each(
                 settings.validatorTypes,
                 function (validatorTemplateType, validatorTemplate) {
                   if (validators[validatorTemplateType] === undefined) {
                     validators[validatorTemplateType] = [];
                   }
                   if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) {
                     $this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]);
                     validators[validatorType].push(
                       $.extend(
                         validator,
                         validatorTemplate.init($this, el)
                       )
                     );
                     foundValidator = true;
                   }
                 }
               );
             }
           }

           if (! foundValidator) {
             $.error("Cannot find validation info for '" + el + "'");
           }
         });

         // =============================================================
         //                                         STORE FALLBACK VALUES
         // =============================================================

         $helpBlock.data(
           "original-contents",
           (
             $helpBlock.data("original-contents")
               ? $helpBlock.data("original-contents")
               : $helpBlock.html()
           )
         );

         $helpBlock.data(
           "original-role",
           (
             $helpBlock.data("original-role")
               ? $helpBlock.data("original-role")
               : $helpBlock.attr("role")
           )
         );

         $controlGroup.data(
           "original-classes",
           (
             $controlGroup.data("original-clases")
               ? $controlGroup.data("original-classes")
               : $controlGroup.attr("class")
           )
         );

         $this.data(
           "original-aria-invalid",
           (
             $this.data("original-aria-invalid")
               ? $this.data("original-aria-invalid")
               : $this.attr("aria-invalid")
           )
         );

         // =============================================================
         //                                                    VALIDATION
         // =============================================================

         $this.bind(
           "validation.validation",
           function (event, params) {

             var value = getValue($this);

             // Get a list of the errors to apply
             var errorsFound = [];

             $.each(validators, function (validatorType, validatorTypeArray) {
               if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
                 $.each(validatorTypeArray, function (i, validator) {
                   if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
                     errorsFound.push(validator.message);
                   }
                 });
               }
             });

             return errorsFound;
           }
         );

         $this.bind(
           "getValidators.validation",
           function () {
             return validators;
           }
         );

         // =============================================================
         //                                             WATCH FOR CHANGES
         // =============================================================
         $this.bind(
           "submit.validation",
           function () {
             return $this.triggerHandler("change.validation", {submitting: true});
           }
         );
         $this.bind(
           [
             "keyup",
             "focus",
             "blur",
             "click",
             "keydown",
             "keypress",
             "change"
           ].join(".validation ") + ".validation",
           function (e, params) {

             var value = getValue($this);

             var errorsFound = [];

             $controlGroup.find("input,textarea,select").each(function (i, el) {
               var oldCount = errorsFound.length;
               $.each($(el).triggerHandler("validation.validation", params), function (j, message) {
                 errorsFound.push(message);
               });
               if (errorsFound.length > oldCount) {
                 $(el).attr("aria-invalid", "true");
               } else {
                 var original = $this.data("original-aria-invalid");
                 $(el).attr("aria-invalid", (original !== undefined ? original : false));
               }
             });

             $form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation");

             errorsFound = $.unique(errorsFound.sort());

             // Were there any errors?
             if (errorsFound.length) {
               // Better flag it up as a warning.
               $controlGroup.removeClass("success error").addClass("warning");

               // How many errors did we find?
               if (settings.options.semanticallyStrict && errorsFound.length === 1) {
                 // Only one? Being strict? Just output it.
                 $helpBlock.html(errorsFound[0] +
                   ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
               } else {
                 // Multiple? Being sloppy? Glue them together into an UL.
                 $helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" +
                   ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
               }
             } else {
               $controlGroup.removeClass("warning error success");
               if (value.length > 0) {
                 $controlGroup.addClass("success");
               }
               $helpBlock.html($helpBlock.data("original-contents"));
             }

             if (e.type === "blur") {
               $controlGroup.removeClass("success");
             }
           }
         );
         $this.bind("validationLostFocus.validation", function () {
           $controlGroup.removeClass("success");
         });
       });
     },
     destroy : function( ) {

       return this.each(
         function() {

           var
             $this = $(this),
             $controlGroup = $this.parents(".form-group").first(),
             $helpBlock = $controlGroup.find(".help-block").first();

           // remove our events
           $this.unbind('.validation'); // events are namespaced.
           // reset help text
           $helpBlock.html($helpBlock.data("original-contents"));
           // reset classes
           $controlGroup.attr("class", $controlGroup.data("original-classes"));
           // reset aria
           $this.attr("aria-invalid", $this.data("original-aria-invalid"));
           // reset role
           $helpBlock.attr("role", $this.data("original-role"));
                        // remove all elements we created
                        if (createdElements.indexOf($helpBlock[0]) > -1) {
                            $helpBlock.remove();
                        }

         }
       );

     },
     collectErrors : function(includeEmpty) {

       var errorMessages = {};
       this.each(function (i, el) {
         var $el = $(el);
         var name = $el.attr("name");
         var errors = $el.triggerHandler("validation.validation", {includeEmpty: true});
         errorMessages[name] = $.extend(true, errors, errorMessages[name]);
       });

       $.each(errorMessages, function (i, el) {
         if (el.length === 0) {
           delete errorMessages[i];
         }
       });

       return errorMessages;

     },
     hasErrors: function() {

       var errorMessages = [];

       this.each(function (i, el) {
         errorMessages = errorMessages.concat(
           $(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {submitting: true}) : []
         );
       });

       return (errorMessages.length > 0);
     },
     override : function (newDefaults) {
       defaults = $.extend(true, defaults, newDefaults);
     }
   },
        validatorTypes: {
     callback: {
       name: "callback",
       init: function ($this, name) {
         return {
           validatorName: name,
           callback: $this.data("validation" + name + "Callback"),
           lastValue: $this.val(),
           lastValid: true,
           lastFinished: true
         };
       },
       validate: function ($this, value, validator) {
         if (validator.lastValue === value && validator.lastFinished) {
           return !validator.lastValid;
         }

         if (validator.lastFinished === true)
         {
           validator.lastValue = value;
           validator.lastValid = true;
           validator.lastFinished = false;

           var rrjqbvValidator = validator;
           var rrjqbvThis = $this;
           executeFunctionByName(
             validator.callback,
             window,
             $this,
             value,
             function (data) {
               if (rrjqbvValidator.lastValue === data.value) {
                 rrjqbvValidator.lastValid = data.valid;
                 if (data.message) {
                   rrjqbvValidator.message = data.message;
                 }
                 rrjqbvValidator.lastFinished = true;
                 rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message);
                 // Timeout is set to avoid problems with the events being considered 'already fired'
                 setTimeout(function () {
                   rrjqbvThis.trigger("change.validation");
                 }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
               }
             }
           );
         }

         return false;

       }
     },
     ajax: {
       name: "ajax",
       init: function ($this, name) {
         return {
           validatorName: name,
           url: $this.data("validation" + name + "Ajax"),
           lastValue: $this.val(),
           lastValid: true,
           lastFinished: true
         };
       },
       validate: function ($this, value, validator) {
         if (""+validator.lastValue === ""+value && validator.lastFinished === true) {
           return validator.lastValid === false;
         }

         if (validator.lastFinished === true)
         {
           validator.lastValue = value;
           validator.lastValid = true;
           validator.lastFinished = false;
           $.ajax({
             url: validator.url,
             data: "value=" + value + "&field=" + $this.attr("name"),
             dataType: "json",
             success: function (data) {
               if (""+validator.lastValue === ""+data.value) {
                 validator.lastValid = !!(data.valid);
                 if (data.message) {
                   validator.message = data.message;
                 }
                 validator.lastFinished = true;
                 $this.data("validation" + validator.validatorName + "Message", validator.message);
                 // Timeout is set to avoid problems with the events being considered 'already fired'
                 setTimeout(function () {
                   $this.trigger("change.validation");
                 }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
               }
             },
             failure: function () {
               validator.lastValid = true;
               validator.message = "ajax call failed";
               validator.lastFinished = true;
               $this.data("validation" + validator.validatorName + "Message", validator.message);
               // Timeout is set to avoid problems with the events being considered 'already fired'
               setTimeout(function () {
                 $this.trigger("change.validation");
               }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
             }
           });
         }

         return false;

       }
     },
            regex: {
                name: "regex",
                init: function ($this, name) {
                    return {regex: regexFromString($this.data("validation" + name + "Regex"))};
                },
                validate: function ($this, value, validator) {
                    return (!validator.regex.test(value) && ! validator.negative)
                        || (validator.regex.test(value) && validator.negative);
                }
            },
            required: {
                name: "required",
                init: function ($this, name) {
                    return {};
                },
                validate: function ($this, value, validator) {
                    return !!(value.length === 0  && ! validator.negative)
                        || !!(value.length > 0 && validator.negative);
                },
       blockSubmit: true
            },
            match: {
                name: "match",
                init: function ($this, name) {
                    var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first();
                    element.bind("validation.validation", function () {
                        $this.trigger("change.validation", {submitting: true});
                    });
                    return {"element": element};
                },
                validate: function ($this, value, validator) {
                    return (value !== validator.element.val() && ! validator.negative)
                        || (value === validator.element.val() && validator.negative);
                },
       blockSubmit: true
            },
            max: {
                name: "max",
                init: function ($this, name) {
                    return {max: $this.data("validation" + name + "Max")};
                },
                validate: function ($this, value, validator) {
                    return (parseFloat(value, 10) > parseFloat(validator.max, 10) && ! validator.negative)
                        || (parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative);
                }
            },
            min: {
                name: "min",
                init: function ($this, name) {
                    return {min: $this.data("validation" + name + "Min")};
                },
                validate: function ($this, value, validator) {
                    return (parseFloat(value) < parseFloat(validator.min) && ! validator.negative)
                        || (parseFloat(value) >= parseFloat(validator.min) && validator.negative);
                }
            },
            maxlength: {
                name: "maxlength",
                init: function ($this, name) {
                    return {maxlength: $this.data("validation" + name + "Maxlength")};
                },
                validate: function ($this, value, validator) {
                    return ((value.length > validator.maxlength) && ! validator.negative)
                        || ((value.length <= validator.maxlength) && validator.negative);
                }
            },
            minlength: {
                name: "minlength",
                init: function ($this, name) {
                    return {minlength: $this.data("validation" + name + "Minlength")};
                },
                validate: function ($this, value, validator) {
                    return ((value.length < validator.minlength) && ! validator.negative)
                        || ((value.length >= validator.minlength) && validator.negative);
                }
            },
            maxchecked: {
                name: "maxchecked",
                init: function ($this, name) {
                    var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
                    elements.bind("click.validation", function () {
                        $this.trigger("change.validation", {includeEmpty: true});
                    });
                    return {maxchecked: $this.data("validation" + name + "Maxchecked"), elements: elements};
                },
                validate: function ($this, value, validator) {
                    return (validator.elements.filter(":checked").length > validator.maxchecked && ! validator.negative)
                        || (validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative);
                },
       blockSubmit: true
            },
            minchecked: {
                name: "minchecked",
                init: function ($this, name) {
                    var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
                    elements.bind("click.validation", function () {
                        $this.trigger("change.validation", {includeEmpty: true});
                    });
                    return {minchecked: $this.data("validation" + name + "Minchecked"), elements: elements};
                },
                validate: function ($this, value, validator) {
                    return (validator.elements.filter(":checked").length < validator.minchecked && ! validator.negative)
                        || (validator.elements.filter(":checked").length >= validator.minchecked && validator.negative);
                },
       blockSubmit: true
            }
        },
        builtInValidators: {
            email: {
                name: "Email",
                type: "shortcut",
                shortcut: "validemail"
            },
            validemail: {
                name: "Validemail",
                type: "regex",
                regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}",
                message: "Keine gültige Email Adresse<!-- data-validator-validemail-message to override -->"
            },
            passwordagain: {
                name: "Passwordagain",
                type: "match",
                match: "password",
                message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->"
            },
            positive: {
                name: "Positive",
                type: "shortcut",
                shortcut: "number,positivenumber"
            },
            negative: {
                name: "Negative",
                type: "shortcut",
                shortcut: "number,negativenumber"
            },
            number: {
                name: "Number",
                type: "regex",
                regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?",
                message: "Must be a number<!-- data-validator-number-message to override -->"
            },
            integer: {
                name: "Integer",
                type: "regex",
                regex: "[+-]?\\\d+",
                message: "No decimal places allowed<!-- data-validator-integer-message to override -->"
            },
            positivenumber: {
                name: "Positivenumber",
                type: "min",
                min: 0,
                message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->"
            },
            negativenumber: {
                name: "Negativenumber",
                type: "max",
                max: 0,
                message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->"
            },
            required: {
                name: "Required",
                type: "required",
                message: "This is required<!-- data-validator-required-message to override -->"
            },
            checkone: {
                name: "Checkone",
                type: "minchecked",
                minchecked: 1,
                message: "Check at least one option<!-- data-validation-checkone-message to override -->"
            }
        }
    };

    var formatValidatorName = function (name) {
        return name
            .toLowerCase()
            .replace(
                /(^|\s)([a-z])/g ,
                function(m,p1,p2) {
                    return p1+p2.toUpperCase();
                }
            )
        ;
    };

    var getValue = function ($this) {
        // Extract the value we're talking about
        var value = $this.val();
        var type = $this.attr("type");
        if (type === "checkbox") {
            value = ($this.is(":checked") ? value : "");
        }
        if (type === "radio") {
            value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : "");
        }
        return value;
    };

 function regexFromString(inputstring) {
        return new RegExp("^" + inputstring + "$");
    }

 /**
  * Thanks to Jason Bunting via StackOverflow.com
  *
  * http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910
  * Short link: http://tinyurl.com/executeFunctionByName
 **/
 function executeFunctionByName(functionName, context /*, args*/) {
   var args = Array.prototype.slice.call(arguments).splice(2);
   var namespaces = functionName.split(".");
   var func = namespaces.pop();
   for(var i = 0; i < namespaces.length; i++) {
     context = context[namespaces[i]];
   }
   return context[func].apply(this, args);
 }

    $.fn.jqBootstrapValidation = function( method ) {

        if ( defaults.methods[method] ) {
            return defaults.methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return defaults.methods.init.apply( this, arguments );
        } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.jqBootstrapValidation' );
            return null;
        }

    };

 $.jqBootstrapValidation = function (options) {
   $(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this,arguments);
 };

})( jQuery );

Code:
// Contact Form Scripts

$(function() {

   $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
       preventSubmit: true,
       submitError: function($form, event, errors) {
           // additional error messages or events
       },
       submitSuccess: function($form, event) {
           event.preventDefault(); // prevent default submit behaviour
           // get values from FORM
           var name = $("input#name").val();
           var email = $("input#email").val();
           var phone = $("input#phone").val();
           var message = $("textarea#message").val();
           var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
           if (firstName.indexOf(' ') >= 0) {
               firstName = name.split(' ').slice(0, -1).join(' ');
           }
           $.ajax({
               url: "././mail/contact_me.php",
               type: "POST",
               data: {
                   name: name,
                   phone: phone,
                   email: email,
                   message: message
               },
               cache: false,
               success: function() {
                   // Success message
                   $('#success').html("<div class='alert alert-success'>");
                   $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                       .append("</button>");
                   $('#success > .alert-success')
                       .append("<strong>Ihre Nachricht wurde übermittelt </strong>");
                   $('#success > .alert-success')
                       .append('</div>');

                   //clear all fields
                   $('#contactForm').trigger("reset");
               },
               error: function() {
                   // Fail message
                   $('#success').html("<div class='alert alert-danger'>");
                   $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                       .append("</button>");
                   $('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + "Es scheint, dass der E-Mail-Server nicht reagiert. Bitte versuchen Sie es später!"));
                   $('#success > .alert-danger').append('</div>');
                   //clear all fields
                   $('#contactForm').trigger("reset");
               },
           });
       },
       filter: function() {
           return $(this).is(":visible");
       },
   });

   $("a[data-toggle=\"tab\"]").click(function(e) {
       e.preventDefault();
       $(this).tab("show");
   });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
   $('#success').html('');
});

Drucke diesen Beitrag

  Bootstrap 4 Beta veröffenlicht!
Geschrieben von: The-Error - 13.08.2017, 14:14 - Forum: Bootstrap 4 - Keine Antworten

Nach zwei Jahren Entwicklungszeit nun endlich die erste Beta-Version von Bootstrap 4.

  • Von Less nach Sass verschoben Bootstrap kompiliert nun schneller als je zuvor dank Libsass
  • Flexbox und ein verbessertes Rastersystem.
  • Gedroppte Brunnen, Thumbnails und [b]panels für cards.[/b]
  • Forced Normalize.css und konsolidiert alle unsere HTML-Reset in ein neues CSS-Modul, Reboot.
  • Brandneue Anpassungsmöglichkeiten. Anstatt Stilverzierungen wie Steigungen, Übergänge, Schatten, Rasterklassen und mehr zu einem separaten Stylesheet wie v3 zu verweisen, haben wir alle diese Optionen in Sass-Variablen verschoben. Möchten Standard-Übergänge auf alles oder um abgerundete Ecken zu deaktivieren? Einfach eine Variable aktualisieren und neu kompilieren.
  • Dropped IE8 und IE9 Unterstützung, ließ ältere Browser Versionen, und zog zu Rem-Einheiten für Komponenten-Größe , um die Vorteile der neueren CSS-Unterstützung zu nutzen. Abgesehen von unserem Raster wurden Pixel für rems und ems ausgetauscht, um die reaktionsfähige Typografie und Komponentengrößen noch einfacher zu machen. Benötige Unterstützung für IE8 / IE9, Safari 8-, iOS 8-, etc? Halten Sie mit Bootstrap 3.
  • Umschrieben alle unsere JavaScript-Plugins. Jedes Plugin wurde in ES6 umgeschrieben, um die neuesten JavaScript-Erweiterungen mit neuen Teardown-Methoden, Optionstypprüfung, neuen Methoden und vieles mehr zu nutzen.
  • Verbesserte Auto-Platzierung von Tooltips, Popovers und Dropdowns dank der Hilfe einer Bibliothek namens Popper.js .
  • Neu gestaltete und verbesserte Dokumentation. Wir haben es neu gestaltet, alles in Markdown umgeschrieben und ein paar praktische Plugins hinzugefügt, um Beispiele und Code-Snippets zu rationalisieren, um die Arbeit mit unseren Dokumenten einfacher zu machen. Wir haben auch ein erstaunliches neues Suchformular hinzugefügt!
  • Neue Build-Tools komplett in npm Scripts statt Grunt umgeschrieben, immens vereinfacht den Prozess der Entwicklung und Beitrag zu Bootstrap.
  • Und so viel mehr! Benutzerdefinierte Formularsteuerelemente, ein neu gestaltetes Karussell, eine überholte Navigationsleiste, HTML5-Formular-Validierungsstile, Hunderte von ansprechenden Utility-Klassen, neue Komponenten und mehr wurden ebenfalls aufgenommen.
Quelle: https://blog.getbootstrap.com/2017/08/10...ap-4-beta/

Drucke diesen Beitrag

  Bootsnipp Slider
Geschrieben von: Sven72 - 21.07.2017, 12:24 - Forum: Bootstrap 3 - Antworten (1)

Hallo,

ich möchte gerne dieses Snippet: https://bootsnipp.com/snippets/pjqra bei meiner Bootstrap Seite (Version 3.3.7) einbinden. Was mir nicht gelingt ist das js einzubinden.

Ich habe eine neue Datei mit dem Namen test.js angelegt.
In die Datei habe ich diesen Code eingefügt

Code:
/*Bootstrap Carousel Touch Slider.

http://bootstrapthemes.co

Credits: Bootstrap, jQuery, TouchSwipe, Animate.css, FontAwesome

*/


(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{if(typeof module!=="undefined"&&module.exports){a(require("jquery"))}else{a(jQuery)}}}(function(f){var y="1.6.15",p="left",o="right",e="up",x="down",c="in",A="out",m="none",s="auto",l="swipe",t="pinch",B="tap",j="doubletap",b="longtap",z="hold",E="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled&&!a,d=(window.navigator.pointerEnabled||window.navigator.msPointerEnabled)&&!a,C="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe",preventDefaultEvents:true};f.fn.swipe=function(H){var G=f(this),F=G.data(C);if(F&&typeof H==="string"){if(F[H]){return F[H].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+H+" does not exist on jQuery.swipe")}}else{if(F&&typeof H==="object"){F.option.apply(this,arguments)}else{if(!F&&(typeof H==="object"||!H)){return w.apply(this,arguments)}}}return G};f.fn.swipe.version=y;f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:A};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:E,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,FOUR:4,FIVE:5,ALL:i};function w(F){if(F&&(F.allowPageScroll===undefined&&(F.swipe!==undefined||F.swipeStatus!==undefined))){F.allowPageScroll=m}if(F.click!==undefined&&F.tap===undefined){F.tap=F.click}if(!F){F={}}F=f.extend({},f.fn.swipe.defaults,F);return this.each(function(){var H=f(this);var G=H.data(C);if(!G){G=new D(this,F);H.data(C,G)}})}function D(a5,au){var au=f.extend({},au);var az=(a||d||!au.fallbackToMouseEvents),K=az?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",ax=az?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",V=az?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",T=az?(d?"mouseleave":null):"mouseleave",aD=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ag=0,aP=null,a2=null,ac=0,a1=0,aZ=0,H=1,ap=0,aJ=0,N=null;var aR=f(a5);var aa="start";var X=0;var aQ={};var U=0,a3=0,a6=0,ay=0,O=0;var aW=null,af=null;try{aR.bind(K,aN);aR.bind(aD,ba)}catch(aj){f.error("events not supported "+K+","+aD+" on jQuery.swipe")}this.enable=function(){aR.bind(K,aN);aR.bind(aD,ba);return aR};this.disable=function(){aK();return aR};this.destroy=function(){aK();aR.data(C,null);aR=null};this.option=function(bd,bc){if(typeof bd==="object"){au=f.extend(au,bd)}else{if(au[bd]!==undefined){if(bc===undefined){return au[bd]}else{au[bd]=bc}}else{if(!bd){return au}else{f.error("Option "+bd+" does not exist on jQuery.swipe.options")}}}return null};function aN(be){if(aB()){return}if(f(be.target).closest(au.excludedElements,aR).length>0){return}var bf=be.originalEvent?be.originalEvent:be;var bd,bg=bf.touches,bc=bg?bg[0]:bf;aa=g;if(bg){X=bg.length}else{if(au.preventDefaultEvents!==false){be.preventDefault()}}ag=0;aP=null;a2=null;aJ=null;ac=0;a1=0;aZ=0;H=1;ap=0;N=ab();S();ai(0,bc);if(!bg||(X===au.fingers||au.fingers===i)||aX()){U=ar();if(X==2){ai(1,bg[1]);a1=aZ=at(aQ[0].start,aQ[1].start)}if(au.swipeStatus||au.pinchStatus){bd=P(bf,aa)}}else{bd=false}if(bd===false){aa=q;P(bf,aa);return bd}else{if(au.hold){af=setTimeout(f.proxy(function(){aR.trigger("hold",[bf.target]);if(au.hold){bd=au.hold.call(aR,bf,bf.target)}},this),au.longTapThreshold)}an(true)}return null}function a4(bf){var bi=bf.originalEvent?bf.originalEvent:bf;if(aa===h||aa===q||al()){return}var be,bj=bi.touches,bd=bj?bj[0]:bi;var bg=aH(bd);a3=ar();if(bj){X=bj.length}if(au.hold){clearTimeout(af)}aa=k;if(X==2){if(a1==0){ai(1,bj[1]);a1=aZ=at(aQ[0].start,aQ[1].start)}else{aH(bj[1]);aZ=at(aQ[0].end,aQ[1].end);aJ=aq(aQ[0].end,aQ[1].end)}H=a8(a1,aZ);ap=Math.abs(a1-aZ)}if((X===au.fingers||au.fingers===i)||!bj||aX()){aP=aL(bg.start,bg.end);a2=aL(bg.last,bg.end);ak(bf,a2);ag=aS(bg.start,bg.end);ac=aM();aI(aP,ag);be=P(bi,aa);if(!au.triggerOnTouchEnd||au.triggerOnTouchLeave){var bc=true;if(au.triggerOnTouchLeave){var bh=aY(this);bc=F(bg.end,bh)}if(!au.triggerOnTouchEnd&&bc){aa=aC(k)}else{if(au.triggerOnTouchLeave&&!bc){aa=aC(h)}}if(aa==q||aa==h){P(bi,aa)}}}else{aa=q;P(bi,aa)}if(be===false){aa=q;P(bi,aa)}}function M(bc){var bd=bc.originalEvent?bc.originalEvent:bc,be=bd.touches;if(be){if(be.length&&!al()){G(bd);return true}else{if(be.length&&al()){return true}}}if(al()){X=ay}a3=ar();ac=aM();if(bb()||!am()){aa=q;P(bd,aa)}else{if(au.triggerOnTouchEnd||(au.triggerOnTouchEnd==false&&aa===k)){if(au.preventDefaultEvents!==false){bc.preventDefault()}aa=h;P(bd,aa)}else{if(!au.triggerOnTouchEnd&&a7()){aa=h;aF(bd,aa,B)}else{if(aa===k){aa=q;P(bd,aa)}}}}an(false);return null}function ba(){X=0;a3=0;U=0;a1=0;aZ=0;H=1;S();an(false)}function L(bc){var bd=bc.originalEvent?bc.originalEvent:bc;if(au.triggerOnTouchLeave){aa=aC(h);P(bd,aa)}}function aK(){aR.unbind(K,aN);aR.unbind(aD,ba);aR.unbind(ax,a4);aR.unbind(V,M);if(T){aR.unbind(T,L)}an(false)}function aC(bg){var bf=bg;var be=aA();var bd=am();var bc=bb();if(!be||bc){bf=q}else{if(bd&&bg==k&&(!au.triggerOnTouchEnd||au.triggerOnTouchLeave)){bf=h}else{if(!bd&&bg==h&&au.triggerOnTouchLeave){bf=q}}}return bf}function P(be,bc){var bd,bf=be.touches;if(J()||W()){bd=aF(be,bc,l)}if((Q()||aX())&&bd!==false){bd=aF(be,bc,t)}if(aG()&&bd!==false){bd=aF(be,bc,j)}else{if(ao()&&bd!==false){bd=aF(be,bc,b)}else{if(ah()&&bd!==false){bd=aF(be,bc,B)}}}if(bc===q){if(W()){bd=aF(be,bc,l)}if(aX()){bd=aF(be,bc,t)}ba(be)}if(bc===h){if(bf){if(!bf.length){ba(be)}}else{ba(be)}}return bd}function aF(bf,bc,be){var bd;if(be==l){aR.trigger("swipeStatus",[bc,aP||null,ag||0,ac||0,X,aQ,a2]);if(au.swipeStatus){bd=au.swipeStatus.call(aR,bf,bc,aP||null,ag||0,ac||0,X,aQ,a2);if(bd===false){return false}}if(bc==h&&aV()){clearTimeout(aW);clearTimeout(af);aR.trigger("swipe",[aP,ag,ac,X,aQ,a2]);if(au.swipe){bd=au.swipe.call(aR,bf,aP,ag,ac,X,aQ,a2);if(bd===false){return false}}switch(aP){case p:aR.trigger("swipeLeft",[aP,ag,ac,X,aQ,a2]);if(au.swipeLeft){bd=au.swipeLeft.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case o:aR.trigger("swipeRight",[aP,ag,ac,X,aQ,a2]);if(au.swipeRight){bd=au.swipeRight.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case e:aR.trigger("swipeUp",[aP,ag,ac,X,aQ,a2]);if(au.swipeUp){bd=au.swipeUp.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case x:aR.trigger("swipeDown",[aP,ag,ac,X,aQ,a2]);if(au.swipeDown){bd=au.swipeDown.call(aR,bf,aP,ag,ac,X,aQ,a2)}break}}}if(be==t){aR.trigger("pinchStatus",[bc,aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchStatus){bd=au.pinchStatus.call(aR,bf,bc,aJ||null,ap||0,ac||0,X,H,aQ);if(bd===false){return false}}if(bc==h&&a9()){switch(aJ){case c:aR.trigger("pinchIn",[aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchIn){bd=au.pinchIn.call(aR,bf,aJ||null,ap||0,ac||0,X,H,aQ)}break;case A:aR.trigger("pinchOut",[aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchOut){bd=au.pinchOut.call(aR,bf,aJ||null,ap||0,ac||0,X,H,aQ)}break}}}if(be==B){if(bc===q||bc===h){clearTimeout(aW);clearTimeout(af);if(Z()&&!I()){O=ar();aW=setTimeout(f.proxy(function(){O=null;aR.trigger("tap",[bf.target]);if(au.tap){bd=au.tap.call(aR,bf,bf.target)}},this),au.doubleTapThreshold)}else{O=null;aR.trigger("tap",[bf.target]);if(au.tap){bd=au.tap.call(aR,bf,bf.target)}}}}else{if(be==j){if(bc===q||bc===h){clearTimeout(aW);clearTimeout(af);O=null;aR.trigger("doubletap",[bf.target]);if(au.doubleTap){bd=au.doubleTap.call(aR,bf,bf.target)}}}else{if(be==b){if(bc===q||bc===h){clearTimeout(aW);O=null;aR.trigger("longtap",[bf.target]);if(au.longTap){bd=au.longTap.call(aR,bf,bf.target)}}}}}return bd}function am(){var bc=true;if(au.threshold!==null){bc=ag>=au.threshold}return bc}function bb(){var bc=false;if(au.cancelThreshold!==null&&aP!==null){bc=(aT(aP)-ag)>=au.cancelThreshold}return bc}function ae(){if(au.pinchThreshold!==null){return ap>=au.pinchThreshold}return true}function aA(){var bc;if(au.maxTimeThreshold){if(ac>=au.maxTimeThreshold){bc=false}else{bc=true}}else{bc=true}return bc}function ak(bc,bd){if(au.preventDefaultEvents===false){return}if(au.allowPageScroll===m){bc.preventDefault()}else{var be=au.allowPageScroll===s;switch(bd){case p:if((au.swipeLeft&&be)||(!be&&au.allowPageScroll!=E)){bc.preventDefault()}break;case o:if((au.swipeRight&&be)||(!be&&au.allowPageScroll!=E)){bc.preventDefault()}break;case e:if((au.swipeUp&&be)||(!be&&au.allowPageScroll!=u)){bc.preventDefault()}break;case x:if((au.swipeDown&&be)||(!be&&au.allowPageScroll!=u)){bc.preventDefault()}break}}}function a9(){var bd=aO();var bc=Y();var be=ae();return bd&&bc&&be}function aX(){return !!(au.pinchStatus||au.pinchIn||au.pinchOut)}function Q(){return !!(a9()&&aX())}function aV(){var bf=aA();var bh=am();var be=aO();var bc=Y();var bd=bb();var bg=!bd&&bc&&be&&bh&&bf;return bg}function W(){return !!(au.swipe||au.swipeStatus||au.swipeLeft||au.swipeRight||au.swipeUp||au.swipeDown)}function J(){return !!(aV()&&W())}function aO(){return((X===au.fingers||au.fingers===i)||!a)}function Y(){return aQ[0].end.x!==0}function a7(){return !!(au.tap)}function Z(){return !!(au.doubleTap)}function aU(){return !!(au.longTap)}function R(){if(O==null){return false}var bc=ar();return(Z()&&((bc-O)<=au.doubleTapThreshold))}function I(){return R()}function aw(){return((X===1||!a)&&(isNaN(ag)||ag<au.threshold))}function a0(){return((ac>au.longTapThreshold)&&(ag<r))}function ah(){return !!(aw()&&a7())}function aG(){return !!(R()&&Z())}function ao(){return !!(a0()&&aU())}function G(bc){a6=ar();ay=bc.touches.length+1}function S(){a6=0;ay=0}function al(){var bc=false;if(a6){var bd=ar()-a6;if(bd<=au.fingerReleaseThreshold){bc=true}}return bc}function aB(){return !!(aR.data(C+"_intouch")===true)}function an(bc){if(!aR){return}if(bc===true){aR.bind(ax,a4);aR.bind(V,M);if(T){aR.bind(T,L)}}else{aR.unbind(ax,a4,false);aR.unbind(V,M,false);if(T){aR.unbind(T,L,false)}}aR.data(C+"_intouch",bc===true)}function ai(be,bc){var bd={start:{x:0,y:0},last:{x:0,y:0},end:{x:0,y:0}};bd.start.x=bd.last.x=bd.end.x=bc.pageX||bc.clientX;bd.start.y=bd.last.y=bd.end.y=bc.pageY||bc.clientY;aQ[be]=bd;return bd}function aH(bc){var be=bc.identifier!==undefined?bc.identifier:0;var bd=ad(be);if(bd===null){bd=ai(be,bc)}bd.last.x=bd.end.x;bd.last.y=bd.end.y;bd.end.x=bc.pageX||bc.clientX;bd.end.y=bc.pageY||bc.clientY;return bd}function ad(bc){return aQ[bc]||null}function aI(bc,bd){bd=Math.max(bd,aT(bc));N[bc].distance=bd}function aT(bc){if(N[bc]){return N[bc].distance}return undefined}function ab(){var bc={};bc[p]=av(p);bc[o]=av(o);bc[e]=av(e);bc[x]=av(x);return bc}function av(bc){return{direction:bc,distance:0}}function aM(){return a3-U}function at(bf,be){var bd=Math.abs(bf.x-be.x);var bc=Math.abs(bf.y-be.y);return Math.round(Math.sqrt(bd*bd+bc*bc))}function a8(bc,bd){var be=(bd/bc)*1;return be.toFixed(2)}function aq(){if(H<1){return A}else{return c}}function aS(bd,bc){return Math.round(Math.sqrt(Math.pow(bc.x-bd.x,2)+Math.pow(bc.y-bd.y,2)))}function aE(bf,bd){var bc=bf.x-bd.x;var bh=bd.y-bf.y;var be=Math.atan2(bh,bc);var bg=Math.round(be*180/Math.PI);if(bg<0){bg=360-Math.abs(bg)}return bg}function aL(bd,bc){var be=aE(bd,bc);if((be<=45)&&(be>=0)){return p}else{if((be<=360)&&(be>=315)){return p}else{if((be>=135)&&(be<=225)){return o}else{if((be>45)&&(be<135)){return x}else{return e}}}}}function ar(){var bc=new Date();return bc.getTime()}function aY(bc){bc=f(bc);var be=bc.offset();var bd={left:be.left,right:be.left+bc.outerWidth(),top:be.top,bottom:be.top+bc.outerHeight()};return bd}function F(bc,bd){return(bc.x>bd.left&&bc.x<bd.right&&bc.y>bd.top&&bc.y<bd.bottom)}}}));!function(n){"use strict";n.fn.bsTouchSlider=function(i){var a=n(".carousel");return this.each(function(){function i(i){var a="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";i.each(function(){var i=n(this),t=i.data("animation");i.addClass(t).one(a,function(){i.removeClass(t)})})}var t=a.find(".item:first").find("[data-animation ^= 'animated']");a.carousel(),i(t),a.on("slide.bs.carousel",function(a){var t=n(a.relatedTarget).find("[data-animation ^= 'animated']");i(t)}),n(".carousel .carousel-inner").swipe({swipeLeft:function(n,i,a,t,e){this.parent().carousel("next")},swipeRight:function(){this.parent().carousel("prev")},threshold:0})})}}(jQuery);



//Initialise Bootstrap Carousel Touch Slider
// Curently there are no option available.

$('#bootstrap-touch-slider').bsTouchSlider();


In die html-Datei habe ich das hier vor den schließenden Body Tag eingefügt
Code:
<script src="js/test.js"></script>


Meine Ordnerstruktur sieht so aus:
Ordner: bootstrapp
darin enthalten Ordner: js + css + fonts
+ index.html

Ordner sind in der Anlage

Die Animation geht bei mir nicht. Hat jemand eine Idee was ich falsch mache.
Danke und Grüße



Angehängte Dateien
.zip   bootstrap-3.3.7-dist-vorlage.zip (Größe: 509,55 KB / Downloads: 1)
Drucke diesen Beitrag

  Mehrsprachiges Menü
Geschrieben von: The-Error - 18.07.2017, 11:37 - Forum: Bootstrap Snippet - Keine Antworten

Hier ein Beispiel für ein multilanguage Menu mit Animatin (animate.css):

[Bild: multimenu.jpg]



Angehängte Dateien
.rar   muli-lang-menu.rar (Größe: 18,52 KB / Downloads: 1)
Drucke diesen Beitrag