Hallo, Gast
Sie müssen sich registrieren bevor Sie auf unserer Seite Beiträge schreiben können.

Benutzername/E-Mail:
  

Passwort
  





Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 44
» Neuestes Mitglied: Sven72
» Foren-Themen: 51
» Foren-Beiträge: 161

Komplettstatistiken

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

Aktive Themen
Bootsnipp Slider
Forum: Bootstrap 3
Letzter Beitrag: The-Error
21.07.2017, 16:49
» Antworten: 1
» Ansichten: 26
Mehrsprachiges Menü
Forum: Hilfe - Häufig gestellte Fragen
Letzter Beitrag: The-Error
18.07.2017, 11:37
» Antworten: 0
» Ansichten: 36
Panel mit Navigation
Forum: Hilfe - Häufig gestellte Fragen
Letzter Beitrag: The-Error
06.07.2017, 11:15
» Antworten: 0
» Ansichten: 108
Grid-System (Raster) in B...
Forum: Bootstrap 4
Letzter Beitrag: The-Error
28.06.2017, 11:41
» Antworten: 0
» Ansichten: 157
Collapsed Navbar schließt...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
22.06.2017, 16:47
» Antworten: 1
» Ansichten: 269
Favicon für Bootstrap-For...
Forum: Smalltalk
Letzter Beitrag: The-Error
22.06.2017, 15:55
» Antworten: 1
» Ansichten: 221
Bootstrap 3 für Anfänger
Forum: Bootstrap 4
Letzter Beitrag: The-Error
15.06.2017, 07:08
» Antworten: 1
» Ansichten: 239
1200px Layout in Bootstra...
Forum: Bootstrap 3
Letzter Beitrag: The-Error
13.06.2017, 11:32
» Antworten: 1
» Ansichten: 236
Bootstrap Lightbox
Forum: Bootstrap 3
Letzter Beitrag: The-Error
13.06.2017, 11:19
» Antworten: 4
» Ansichten: 1.058
Bilder im Slider bzw. Car...
Forum: Bootstrap 3
Letzter Beitrag: Emess
12.06.2017, 14:07
» Antworten: 4
» Ansichten: 319

 
  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: Hilfe - Häufig gestellte Fragen - 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: 0)
Drucke diesen Beitrag

  Panel mit Navigation
Geschrieben von: The-Error - 06.07.2017, 11:15 - Forum: Hilfe - Häufig gestellte Fragen - Keine Antworten

Panel mit Navigation und Content!

So sieht es aus!

Code:
<!DOCTYPE html>
<html lang="de">

<head>
   <meta charset="utf-8">
   <title>Bootstrap Lightbox</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Das neueste kompilierte und minimierte CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <style type="text/css">
       .panel {
           border-radius: 0;
           border-color: #000;
           border-width: 3px;
       }
       
       .panel-heading {
           background-color: #337ab7;
           border-radius: 0;
       }
       
       .navi-panael {
           background-color: #2DC300
       }
       
       .nav-pills>li>a {
           border-radius: 0;
           color: #000;
       }
       
       .nav-pills>li>a:hover {
           color: #000;
       }
       
       .nav>li>a:focus,
       .nav>li>a:hover,
       {
           text-decoration: none;
           background-color: #8A8A8A;
       }
       
       .nav-pills>li.active>a,
       .nav-pills>li.active>a:focus,
       .nav-pills>li.active>a:hover {
           color: #fff;
           background-color: #8A8A8A;
       }
       
       .tab-content {
           background-color: #FFFBFB;
           padding: 15px;
       }

   </style>

   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
   <div class="container">
       <div class="panel ">
           <!-- Standard-Panel-Inhalt -->
           <div class="panel-heading ">
               <h2>Panel-Überschrift</h2>
           </div>





           <div class="navi-panael">
               <ul class="nav nav-pills ">
                   <li class="active">
                       <a href="#start" data-toggle="tab">Start</a>
                   </li>
                   <li><a href="#profil" data-toggle="tab">Profil</a>
                   </li>
                   <li><a href="#kontakt" data-toggle="tab">Kontakt</a>
                   </li>
                   <li><a href="#info" data-toggle="tab">Info</a>
                   </li>
               </ul>
           </div>
           <div class="tab-content clearfix">
               <div class="tab-pane active" id="start">
                   <h3>Start</h3>
                   <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p>

                   <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden, der den Schmerz</p>
               </div>

               <div class="tab-pane" id="profil">
                   <h3>Profil</h3>
                   <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>

                   <p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>

                   <p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da</p>
               </div>
               <div class="tab-pane" id="kontakt">
                   <h3>Kontakt</h3>
                   <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>

                   <p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
               </div>
               <div class="tab-pane" id="info">
                   <h3>Info</h3>
                   <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p>

                   <p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
               </div>
           </div>
       </div>
   </div>




</body>

</html>

Drucke diesen Beitrag

  Grid-System (Raster) in Bootstrap 4 ändern
Geschrieben von: The-Error - 28.06.2017, 11:41 - Forum: Bootstrap 4 - Keine Antworten

In Bootstrap 4 ist es möglich ein benutzerdefiniertes Raster zu erzeugen.

Benötigt wird ein Sass-Kompilier wie Koala
Die Bootstrap Source files

In den Verzeichnis scss befindet sich die Datei "_custom.scss"

Diese wir wie folgt bearbeitet:

Code:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
$grid-columns:               16;

durch  $grid-columns: 16; wird das Raster auf 16 gesetzt.

Danach wird mit Koala die bootstrap.css neu kompiliert.
Nun sollte das Bootstrip Gridsystem aus 16 Spalten bestehen.



Video zum Umgang mit Sass und Koala:




Im Anhang ein Beispiel mit 16 Spalten Rastersystem



Angehängte Dateien
.rar   bootstrap-4.0.0.rar (Größe: 213,09 KB / Downloads: 0)
Drucke diesen Beitrag

  Collapsed Navbar schließt sich in Safari sofort nach dem öffnen
Geschrieben von: Post1982 - 21.06.2017, 11:15 - Forum: Bootstrap 3 - Antworten (1)

Hallo zusammen,

wenn ich meine Seite über den Safari auf dem IPhone öffne, dann schließt sich die Navbar sofort nach dem anklicken wieder und bleibt nicht offen.

Hat jemand eine Idee, wie ich dieses Verhalten ändern kann?

Vielen Dank im Voraus

MfG

Drucke diesen Beitrag

  Favicon für Bootstrap-Forum
Geschrieben von: Idna - 19.06.2017, 13:27 - Forum: Smalltalk - Antworten (1)

Ich finde dass ein Favicon für das Bootstrap-Forum nicht schlecht wäre dann kann ich die Seite in meine Lesezeichenleiste schmeissen und hat ein Farbiges Symbol.
Wink

Drucke diesen Beitrag

  Bootstrap 3 für Anfänger
Geschrieben von: Idna - 13.06.2017, 12:03 - Forum: Bootstrap 4 - Antworten (1)

Lohnt sich eigentlich noch Bootstrap 3 für Anfänger oder sollte schon die Version 4 genutzt werden?

Was meint ihr dazu?

Drucke diesen Beitrag

Question 1200px Layout in Bootstrap?
Geschrieben von: Idna - 12.06.2017, 23:45 - Forum: Bootstrap 3 - Antworten (1)

Hallo, ich bin ziemlich neu im Gebiet Bootstrap und hatte heute angefangen mich damit zu beschäftigen und ich bin direkt auf ein Problem gestoßen.

Mein in Photoshop entworfenes Layout hat eine Breite von 1200px, das blöde ist das diese Breite irgendwas mit 1170px zu tun hat, naja 1200px funktionieren eben nicht.

Kann ich mein Layout doch noch irgendwie mit 1200px und Bootstrap in HTML anpassen?


Mit freundlichem Gruße
Idna

Drucke diesen Beitrag

  Bilder im Slider bzw. Carousel responsiv
Geschrieben von: Emess - 11.06.2017, 14:27 - Forum: Bootstrap 3 - Antworten (4)

Hab gerade mal wieder Zeit etwas zu basteln und mich so mit Bootstrap vertraut zu machen.
Ich habe eine bereits vorhandene Seite des bastelns Willen modifiziert.
Auf der Basis Seite war der Container auf 1050px begrenzt deshalb sind auch die Bilder im Slider 1050px breit.
In meinem neuen Szenario will ich den Container auf sagen wir  90% begrenzen. Wie muss ich da die Bilder
behandeln. Ist mir nicht klar
Links sagen mehr als tausend Worte

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

freue mich auf Anregungen.

Drucke diesen Beitrag

  In einer form felder nebeneinanderbekommen
Geschrieben von: Stef - 29.05.2017, 16:38 - Forum: Bootstrap 3 - Antworten (1)

Hey,

ich möchte, dass je 2 input felder der 4 ersten input felder nebeneinander geordnet sind. Und dann möchte ich noch das die 3 letzten select-felder nebeneinander geordnet sind

So bei input feldern:

Feld1 Feld2
Feld3 Feld4

So bei den select-felder:

Feld1 Feld2 Feld3

Ich habe es mit class="form-inline" getestet aber ohne Erfolg. 

Mein Code:


Code:
<section class="container">
               <div class="col-md-12">
                   <form class="form-horizontal control-label col-sm-2">
                       <div class="form-group">
                           <label>Vorname: </label>
                           <input class="form-control" type="text" name="test">
                           <label>Nachname: </label>
                           <input class="form-control" type="text" name="test1">
                           <label>Passwort: </label>
                           <input class="form-control" type="password" name="test2">
                           <label>Passwort wiederholen: </label>
                           <input class="form-control" type="password" name="test3" style="margin-bottom:10px;">
                           
                           <p><u>Geschlecht:</u></p>
                           <label>Männlich </label>
                           <input  type="radio" name="test3" ><br>
                           <label>Weiblich </label>
                           <input  type="radio" name="test3" style="margin-bottom:10px;">
                           
                           <p><u>Ihr Geburtsdatum:</u></p>
                           <div>
                               <label for="tag">Tag</label>
                                   <select id="tag" class="form-control">
                                       <option>1</option>
                                       <option>2</option>
                                       <option>3</option>
                                       <option>4</option>
                                       <option>5</option>
                                   </select>
                           </div>
                           <div >
                               <label for="monat">Monat</label>
                                   <select id="monat" class="form-control">
                                       <option>01</option>
                                       <option>02</option>
                                       <option>03</option>
                                       <option>04</option>
                                       <option>05</option>
                                   </select>
                       </div>
                           
                           <div style="margin-bottom:10px;">
                                   <label for="jahr">Jahr</label>
                                       <select id="jahr" class="form-control">
                                           <option>1997</option>
                                           <option>1998</option>
                                           <option>1999</option>
                                           <option>2000</option>
                                           <option>2001</option>
                                       </select>
                           </div>
                       
                           <input type="submit" class="form-control btn btn-success">
                       </div>
                   
                   </form>
                   
               </div>
           </section>


Hoffe ihr könnt mir helfen.

Gruß,
Stef

Drucke diesen Beitrag