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

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

  Javascript Problem beim automatischen Schließen des Submenüs
Geschrieben von: dandarkisland - 19.05.2019, 12:39 - Forum: Bootstrap 4 - Antworten (3)

Hallo, 

ich habe auf der Website https://bit.ly/2HBwLiR das Problem, dass beim Klicken auf die Hauptpunkte des Menüs das Submenü zwar öffnet, aber nicht beim weiterklicken wieder automatisch schließt. Ich vermute es hängt an einem JS Problem in Bezug auf BS4 - allerdings weiß ich nicht, wo der Fehler genau liegen kann? Hat jemand eine schnelle Idee?

Gruß Daniel

Drucke diesen Beitrag

  Frames?
Geschrieben von: Daniel26 - 17.05.2019, 10:09 - Forum: Bootstrap 4 - Antworten (3)

Hallo,

jaja, ich weiß, Frames sind tot Smile
Ich hab das letzte mal mit HTML was vor 15 Jahren gemacht...aber jetzt muss ich beruflich nochmal ran.
Ich soll ein Webinterface bauen, mit dem sich Hardware von uns konfigurieren lässt.
Das ganze soll auf der linken Seite ein Menü haben, rechts sollen dann die Konfigurationen gemacht werden.
Ich möchte aber nicht in jeder Datei das Menü mitschleifen.
Früher hätte man sowas wohl mit Frames gemacht. Wie erschlägt man sowas heute mit Bootstrap? Hat mir jemand ein paar Stichworte?

Gruß

Daniel

Drucke diesen Beitrag

  Bootstrap 3 --> Bootstrap 4
Geschrieben von: Svenmann - 15.05.2019, 05:16 - Forum: Bootstrap 4 - Antworten (3)

Moin Leute, 

habe zu meinem Thema leider nix hilfreiches gefunden.

Ich habe mein eigenes Wordpress Theme und habe BS3 eingebunden. Jetzt will ich ein Upgrade auf BS4 machen.
habe auch alles wie beschrieben eingebunden (mit jQuery, Popper und Bootstrap).

Jetzt werden verschiedene Teile meiner Homepage völlig anders dargestellt als zuvor. Z.B. wird der Komplette Header ausgeblendet und die Horizontalen Navbars sind Vertikal.

Habe ich etwas nicht beachtet oder muss ich noch was umstellen oder mein CSS komplett ändern?

Ich bedanke mich für eure Antworten.


Gruß Svenmann

Drucke diesen Beitrag

  Bootstrap 4 Mega Menu
Geschrieben von: The-Error - 11.05.2019, 11:30 - Forum: Bootstrap Snippet - Keine Antworten

Bootstrap 4 Mega Menu
   

Demo

HTML5
  1.     <li class="nav-item dropdown megamenu-li">
  2.         <a class="nav-link dropdown-toggle" href="" id="megamenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu</a>
  3.  
  4.         <div class="dropdown-menu megamenu" aria-labelledby="megamenu">
  5.             <div class="row">
  6.                 <div class="col-sm-6 col-lg-2">
  7.                     <h5>Spalte 1 Link's</h5>
  8.                     <a class="dropdown-item" href="#">Another action</a>
  9.                     <a class="dropdown-item" href="#">Something else here</a>
  10.                 </div>
  11.                 <div class="col-sm-6 col-lg-2">
  12.                     <h5>Spalte 2 Link's</h5>
  13.                     <a class="dropdown-item" href="#">Another action</a>
  14.                     <a class="dropdown-item" href="#">Something else here</a>
  15.                 </div>
  16.                 <div class="col-sm-6 col-lg-4">
  17.                     <h5>Spalte 3 Text</h5>
  18.                 </div>
  19.                 <div class="col-sm-6 col-lg-4">
  20.                     <h5>Spalte 4</h5>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </li>



CSS
  1.  .megamenu-li {
  2.      position: static;
  3.  }
  4.  
  5.  .megamenu {
  6.      position: absolute;
  7.      width: 100%;
  8.      left: 0;
  9.      right: 0;
  10.      padding: 20px;
  11.  }



Javascript
  1.         $(document).ready(function() {
  2.             $(".megamenu").on("click", function(e) {
  3.                 e.stopPropagation();
  4.             });
  5.         });




Angehängte Dateien
.rar   Megamenu.rar (Größe: 6,01 MB / Downloads: 1)
Drucke diesen Beitrag

  Hilfe in CSS
Geschrieben von: Germanikus - 09.05.2019, 10:12 - Forum: CSS - Antworten (8)

Hallo zusammen,
ich bin neu hier und arbeite eigentlich schon länger mit Bootstrap.
Nun wollte ich meine TCG Datenbank auf dem neustenstand bringen und angefangen hab ich mit einem neuen Designe für die Seite.
Gleich mal vorweck. Die Webseite kann von keinem Besucht werden (ausser man hat Hamachi und ist in der Gruppe, nur ein Freund und ich).

Leider stoße ich immer wieder auf das Problem mit CSS.
Das ich garnicht behersche, leider.
Auch generell bin ich ein schlechter Programmierer und mach das nur als Hobby.
Ich hoffe ihr könnt mir da weiter helfen

1. Beim ersten Problem habe ich oben rechts (rot makiert). ich will das mit dem roten Button vergrößern, so das dieses graue teil verschwindet.
2. Beim zweiten Problem habe ich das der Text feld unten mir zu eng ist. Ich würde dies auf die gesamt länge ziehen wollen.
3. Dies ist eher eine unwichtige frage und ist mir gerade spontan eingefallen. Kann man bei den Buttons eine Grafik einfügen lassen und wen ja, wie?

https://screenshots.firefox.com/1e01uBMq.../127.0.0.1



PHP-Code:
<link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.temp.css" rel="stylesheet">
<
link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.min.css" rel="stylesheet">
<
script src="<?php echo base_url() ?>assets/js/ver4.x/bootstrap.min.js"></script>
<
script src="<?php echo base_url() ?>assets/js/ver4.x/jquery.min.js"></script>
<
style>
.
show-on-hover:hover ul.dropdown-menu {
 
   displayblock   
}
.
fa-shopping-cart,
.
fa-exchange,
.
fa-bell-o{
 
 font-size:200%;
}
</
style>
<
div class="small-top">
 <
div class="container">
 <
div class="row">
 <
div class="col-lg-4 date-sec">
 <
div><?php echo date('Y.m.d H:i:s'); ?></div>
 </div>
            <div class="col-lg-3 offset-lg-5">
 <div class="social-icon">
 <a target="_blank" href="<?php echo base_url(); ?>users/profil/<?php echo $this->session->userdata('username'); ?>" class="fa fa-user"> <?php echo $this->session->userdata('username'); ?></a>
 </div>
            </div>
            <!-- <div class="col-lg-3 offset-lg-5">
 <div class="social-icon">
 <a target="_blank" href="#" class=" fa fa-facebook"></a>
 <a target="_blank" href="#" class=" fa fa-twitter"></a>
 <a target="_blank" href="#" class=" fa fa-google-plus"></a>
 <a target="_blank" href="#" class=" fa fa-linkedin"></a>
 <a target="_blank" href="#" class=" fa fa-youtube"></a>
 <a target="_blank" href="#" class=" fa fa-vimeo-square"></a>
 </div>
            </div> -->
 </div>
 </div>
</div>
<div class="top-head left" style="background-image: url(<?php echo base_url(); ?>/assets/images/text_bg.png); background-repeat:repeat-x;float:left;">
 <div class="container">
 <div class="row">
 <div class="col-md-6 col-lg-4">
                <h1>Yugi-Mania<!-- <small>Sammelkarten</small> --></h1>
 </div>
 <div class="col-md-6 col-lg-3 ml-auto admin-bar hidden-sm-down">
                <nav class="nav nav-inline">
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-shopping-cart"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-exchange"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 <div class="btn-group show-on-hover">
 <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-bell-o"></i> <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <!-- <li><a href="#">Something else here</a></li> -->
 <!-- <li class="divider"></li> -->
 <li>Separated link</li>
 </ul>
 </div>
 </nav>
 </div>
 </div>
 </div>
</div>
<section class="top-nav">
 <nav class="navbar navbar-expand-lg py-0">
 <div class="container">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
 <ul class="nav navbar-nav ">
 <li class="nav-item active"> <a class="nav-link" href="<?php echo base_url(); ?>event/index">Event <span class="sr-only">(current)</span></a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>rechnung/index">Rechnung</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>protokoll/index">Protokollliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>karte/index">Kartenliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>edition/index">Editionliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>pages/produckt_list">Producktliste</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>trade/index">Trade</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>warenkorb/index">Warenkorb</a> </li>
 <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>umsatz/index">Umsatz</a> </li>
 </ul>
 <form class="ml-auto">
 <div class="search">
 <input type="text" class="form-control" placeholder="suchen" />
 <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
 </div>
 </form>
 </div>
 </div>
 </nav>
</section>
<section class="section-01">
 <div class="container">
 <div class="row"> 



CSS
  1. @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
  2.  
  3.  
  4. body {
  5.   color: #5a5a5a;
  6.   font-family: 'Open Sans',Arial,sans-serif;
  7.   font-size: 15px;
  8. }
  9. h1,h2,h3,h4,h5{
  10.     font-family: 'Montserrat', sans-serif;
  11. }
  12. a, a:hover, .btn{outline:none!important;}
  13. .btn-search{background: #FD3A13; border-color: #FD3A13; color: #fff; padding: 7px 10px}
  14. .btn-search:hover{background: #ca1b1b; border-color: #ca1b1b}
  15. section{padding: 30px 0; float: left; width: 100%}
  16. .card{float: left; width:100%}
  17. .navbar {border: medium none; float: left; margin-bottom: 0px; width: 100%;  border-radius: 0}
  18. .title-large {font-size: 20px; margin: 10px 0 5px; line-height: 27px; color: #141517;}
  19. .title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
  20. .title-x-small {font-size: 18px; margin: 0px;}
  21. .title-large a, .title-small a, .title-x-small a{color: inherit}
  22. .banner-sec{float: left; width: 100%; background: #EBEBEB}
  23. .card-block{padding:0 10px 10px;}
  24. .card-text{margin: 0}
  25. .text-time{color: #ff0000; font-weight: 600;}
  26. .banner-sec .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}
  27.  
  28. header{float: left; width:100%}
  29. .small-top{ border-bottom: 1px solid #2b2b2b;float: left; width: 100%; background: #000}
  30. .small-top .social-icon{float: right;}
  31. .small-top .social-icon a {border-left: 1px solid #2b2b2b; color: #ca1b1b; float: left; padding: 6px 13px;}
  32. .small-top .social-icon a:last-child {border-right: 1px solid #2b2b2b;}
  33. .small-top .social-icon a:hover {color:#FD3A13; text-decoration: none;}
  34. .small-top .date-sec {font-size: 13px; font-weight: 600; float: left; margin-top: 4px; color: #898989}
  35. .top-head{background: #141517; width: 100%; float: left; height: 100px;}
  36. .top-head h1 {color: #fff; font-size: 36px; font-weight: 600; margin: 18px 0 0;}
  37. .top-head small{float: left; width: 100%; font-size: 14px; color: #c0c0c0; margin-top: 5px; margin-left: 5px;}
  38. .top-head .admin-bar {text-align: right; margin-top: 22px;}
  39. .top-head .admin-bar a {color: #fff; line-height: 49px; position: relative; padding:0 7px;}
  40. .top-head .admin-bar a:hover{color: #ff0000}
  41. .top-head .admin-bar a i{margin-right: 6px;}
  42. .top-head .admin-bar .ping {background: #ff0000; border: 3px solid #141517; border-radius: 50%; height: 14px; position: absolute; right: 3px;    top: 13px; width: 14px; z-index: 1;}
  43. .top-head .admin-bar img {float: right; height: 50px; width: 50px; margin-left: 18px;}
  44. .top-nav{background: #fff; padding: 0; border-bottom: 1px solid #dbdbdb}
  45. .top-nav .nav-link {padding-bottom: 0.7rem; padding-top: 0.7rem;}
  46. .top-nav .navbar-nav .nav-item + .nav-item{margin-left:0}
  47. .top-nav li a{color: #141517; text-transform: uppercase; font-size: 14px; font-weight: 700; padding: 0 10px; border-bottom: 2px solid #fff}
  48. .top-nav li a:hover, .top-nav li a:focus, .top-nav li.active a{color: #141517; border-bottom: 2px solid #FD3A13 }
  49. .top-nav .form-control{border-color: #fff}
  50. .navbar-toggle{background: #fff;}
  51. .navbar-toggle .icon-bar{background:#0A2E61; }
  52. .navbar-brand{display: none;}
  53.  
  54. .top-slider .carousel-indicators{bottom: 0}
  55. .top-slider .carousel-indicators li{border:1px solid #000;}
  56. .top-slider .carousel-indicators .active{background:#000;}
  57.  
  58.  
  59. .side-bar .nav-tabs{border-bottom:none;}
  60. .side-bar .nav-tabs .nav-link {color: #aeaeae; text-transform: uppercase; border: none;}
  61. .side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover{border-bottom:2px solid #ff0000;  text-transform: uppercase; color: #222}
  62. .sidebar-tabing .media{margin-top: 20px}
  63. .sidebar-tabing img{width: 120px;height: 100px;}
  64. .sidebar-tabing .title-small {line-height: 23px; margin-top: 5px; font-size: 18px}
  65.  
  66. #search {float: right; margin-top: 9px; width: 250px;}
  67. .search {padding: 5px 0; width: 230px; height: 30px; position: relative; left: 10px; float: left; line-height: 22px;}
  68. .search input {background: #d0d0d0; border: medium none; border-radius: 3px 0 0 3px; float: left; height: 36px; line-height: 18px; margin-left: 210px; padding: 0 9px; position: absolute; top: 0px; width: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out;
  69. -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
  70. .search:hover input, .search input:focus { width: 200px; margin-left: 0px; background: #d0d0d0;}
  71. .top-nav .btn {position: absolute;right: 0;top: 0px;border-radius:3px;}
  72.  
  73. .banner-sec{float: left; width:100%;}
  74. .banner-sec .news-block{margin-bottom: 20px}
  75. .banner-sec .news-block:last-child{margin-bottom: 0px}
  76. .banner-sec .news-des {margin-bottom: 5px;}
  77. .banner-sec .title-large{margin: 18px 0 0}
  78. .banner-sec .time{margin-top: 0px; font-size: 13px;}
  79. .banner-sec .carousel-control.left, .banner-sec .carousel-control.right{background: none;}
  80. .banner-sec .card{margin-bottom:20px;}
  81.  
  82. .section-01{float: left; width: 100%;  border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5}
  83. .section-01 .heading-large {border-bottom: 2px solid #222; color: #222; float: left; width: 100%; padding:0 0 6px; margin:0 0 18px; text-align: left;}
  84. .section-01 .heading-large::before, .section-01 .heading-large::after{background: transparent;}
  85. .section-01 .heading-small {border-bottom: 2px solid #222; color: #222; float: left; margin: 7px 0 0; width: 100%; padding-bottom: 10px; font-size: 18px }
  86. .section-01 .title-small {margin-bottom: 5px; font-size:17px }
  87. .section-01 .news-block{border-bottom: 1px dashed #000; padding-bottom: 30px; border: none;}
  88. .section-01 aside > .news-block{border-bottom: 1px dashed #000; padding-bottom: 19px;}
  89. .section-01 aside > .news-block:last-child{border-bottom: none; margin-bottom: 20px}
  90. .section-01 .card{border: none;}
  91. .section-01 .card-block{padding: 10px 0;}
  92. .section-01 .video-sec {float: left; margin-top: 30px; width: 100%;}
  93. .section-01 .video-block {float: left; margin-top: 20px; width: 100%;}
  94.  
  95. .action-sec{width:100%; float:left; background:#222}
  96. .action-box{float:left; width:100%; text-align:center;}
  97. .action-box h2{color:#fff; font-size:20px;}


Drucke diesen Beitrag

  CSS: Nur 1/3 eines (Slideshow-)Bildes anzeigen lassen?
Geschrieben von: datsuxindau - 01.05.2019, 15:58 - Forum: Bootstrap 3 - Antworten (1)

Moin,

ich bin gerade ein bisschen mit Websites (Bootstrap 3) am rumbasteln.
Habe nun zu oberst eine Carousel-Slideshow, die abwechselnd 5 Bilder zeigt.

Nun die Frage: Wie kann ich bloss einen Drittel der Silde-Bilder (Oberer Bild-Drittel) anzeigen lassen?

Habe es so lösen können (CSS):


CSS
  1. img.sliderimage {
  2. width: 100%;
  3. height: auto;
  4. margin-bottom: -400px;
  5. margin-top: -350px;
  6. }




Aber finde das zu waaghalsig und hätte lieber eine elegantere Lösung, die wirklich exakt 1 Drittel des Bildes anzeigt.

Lösungsvorschläge? Achja: Bin auf diesem Gebiet ein Noob, eine kurze Erklärung wäre toll. Undecided

Drucke diesen Beitrag

  Bootstrap Fixed Menu mit Slide-Effekt
Geschrieben von: The-Error - 20.04.2019, 18:22 - Forum: Bootstrap Snippet - Keine Antworten

Demo

HTML5
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.  
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="description" content="Bootstrap Fixed Menu mit Slide-Effekt">
  7.     <meta name="author" content="Bootstrap-Forum">
  8.     <title>Bootstrap Fixed Menu mit Slide-Effekt</title>
  9.  
  10.     <!-- Bootstrap core CSS -->
  11.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  12.  
  13.     <!-- Place your stylesheet here-->
  14.     <link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
  15.     <style>
  16.         .header_menu.fixed nav {
  17.             position: fixed;
  18.             top: -70px;
  19.             left: 0;
  20.             right: 0;
  21.             transform: translateY(70px);
  22.             transition: transform 500ms ease, background 500ms ease;
  23.             -webkit-transition: transform 500ms ease, background 500ms ease;
  24.             box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.3);
  25.             background-color: #6f5499 !important;
  26.         }
  27.  
  28.         .header_menu.fixed .nav-link {
  29.             line-height: 20px;
  30.         }
  31.  
  32.         .header_menu.fixed nav img.logo {
  33.             height: 35px;
  34.         }
  35.  
  36.     </style>
  37. </head>
  38.  
  39.     <header class="header_menu">
  40.         <nav class="navbar navbar-expand-md navbar-dark bg-dark main_menu">
  41.             <div class="container">
  42.                 <a class="navbar-brand" href="https://bootstrap-forum.de/"><img class="logo" src="img/logo.png" /></a>
  43.                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  44.                     <span class="navbar-toggler-icon"></span>
  45.                 </button>
  46.  
  47.                 <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  48.                     <ul class="navbar-nav ml-auto">
  49.                         <li class="nav-item active">
  50.                             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  51.                         </li>
  52.                         <li class="nav-item">
  53.                             <a class="nav-link" href="#">Link</a>
  54.                         </li>
  55.                         <li class="nav-item">
  56.                             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  57.                         </li>
  58.                         <li class="nav-item dropdown">
  59.                             <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  60.                             <div class="dropdown-menu" aria-labelledby="dropdown01">
  61.                                 <a class="dropdown-item" href="#">Action</a>
  62.                                 <a class="dropdown-item" href="#">Another action</a>
  63.                                 <a class="dropdown-item" href="#">Something else here</a>
  64.                             </div>
  65.                         </li>
  66.                     </ul>
  67.  
  68.                 </div>
  69.  
  70.             </div>
  71.         </nav>
  72.     </header>
  73.     <main role="main" class="container">
  74.  
  75.         <div class="text-center mt-5 pt-5">
  76.             <h1>Bootstrap Fixed Menu mit Slide-Effekt</h1>
  77.             <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  78.         </div>
  79.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
  80.  
  81.         <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
  82.  
  83.         <p>Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.</p>
  84.  
  85.         <p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
  86.  
  87.         <p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis</p>
  88.         <p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
  89.  
  90.         <p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis</p>
  91.     </main><!-- /.container -->
  92.  
  93.  
  94.     <!-- Bootstrap core JavaScript
  95.     ================================================== -->
  96.     <!-- Placed at the end of the document so the pages load faster -->
  97.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  98.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  99.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  100.  
  101.     <script>
  102.         $(document).ready(function() {
  103.             (function($) {
  104.                 "use strict"
  105.                 var nav_offset_top = $('.header_menu').height() + 150;
  106.  
  107.                 /**  Navbar **/
  108.                 function navbarFixed() {
  109.                     if ($('.header_menu').length) {
  110.                         $(window).scroll(function() {
  111.                             var scroll = $(window).scrollTop();
  112.                             if (scroll >= nav_offset_top) {
  113.                                 $(".header_menu").addClass("fixed");
  114.                                 $('#searchInput').fadeOut();
  115.                             } else {
  116.                                 $(".header_menu").removeClass("fixed");
  117.                             }
  118.                         });
  119.                     };
  120.                 };
  121.                 navbarFixed();
  122.             })(jQuery)
  123.         });
  124.     </script>
  125. </body>
  126. </html>


Drucke diesen Beitrag

  Nav-items mit animierten Unterstrich und Trennstrich.
Geschrieben von: The-Error - 19.04.2019, 19:10 - Forum: Bootstrap Snippet - Keine Antworten

Mit ein paar Zeilen css erhält man diesen schönen Effekt.

Demo



CSS
  1.         /* Hintergrungfarbe Navigation */
  2.         .bg-dark {
  3.             background-color: #6f5499 !important;
  4.         }
  5.  
  6.         /* Unterstrich Animation */
  7.         @media (min-width: 768px) {
  8.             .navbar-expand-md .navbar-nav .nav-link {
  9.                 padding-top: 0;
  10.                 padding-bottom: 0;
  11.                 padding-right: 1rem;
  12.                 padding-left: 1rem;
  13.                 line-height: 1rem;
  14.             }
  15.  
  16.             li.nav-item a {
  17.                 position: relative;
  18.             }
  19.  
  20.             li.nav-item a:after {
  21.                 content: '';
  22.                 position: absolute;
  23.                 bottom: -12px;
  24.                 left: 0;
  25.                 width: 0%;
  26.                 border-bottom: 2px solid #fff;
  27.                 transition: 0.6s;
  28.             }
  29.  
  30.             li.nav-item a:hover:after {
  31.                 width: 100%;
  32.             }
  33.  
  34.  
  35.             /* Trennstriche */
  36.             nav li {
  37.                 border-right: 1px solid #fff;
  38.             }
  39.  
  40.             nav li:last-child {
  41.                 border-right: none;
  42.             }
  43.         }



HTML5
  1.     <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  2.         <div class="container">
  3.             <a class="navbar-brand" href="#"><img src="images/logo.png" height="40px" /></a>
  4.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  5.                 <span class="navbar-toggler-icon"></span>
  6.             </button>
  7.  
  8.             <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  9.                 <ul class="navbar-nav ml-auto ">
  10.                     <li class="nav-item active">
  11.                         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  12.                     </li>
  13.                     <li class="nav-item">
  14.                         <a class="nav-link" href="#">Über-uns</a>
  15.                     </li>
  16.                     <li class="nav-item">
  17.                         <a class="nav-link" href="#">Kontakt</a>
  18.                     </li>
  19.                     <li class="nav-item">
  20.                         <a class="nav-link" href="#">Portfolio</a>
  21.                     </li>
  22.                     <li class="nav-item">
  23.                         <a class="nav-link" href="#">Impressum</a>
  24.                     </li>
  25.                 </ul>
  26.             </div>
  27.         </div>
  28.     </nav>


Drucke diesen Beitrag

  BG / Top nach dem Laden langsam rauszoomen
Geschrieben von: jan777 - 14.04.2019, 09:59 - Forum: Bootstrap 4 - Antworten (3)

Hab ein BS4 Standard-Template und oben ein BG-Foto, dass ich gern nach dem Laden der Seite um ca. 50% rauszoomen würde - also man lädt, erhält den Mittelpunkt-Bereich des Fotos in groß und dann zoomt das Bild langsam (4-6 sec. o.ä.) auf Originalgröße/Fullscreen raus.

Bei der Tablett- und Handy-Ansicht soll das BG-Bild in voller Größe (seitenbreit) ohne animtaion angezeigt werden.

Derzeitiger Code ist:

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-white sticky-top bg-white border-bottom box-shadow" id="mainNav">
       <a class="navbar-brand js-scroll-trigger" href="index.html" title="Titeltext> home">Titeltext</a>
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarResponsive">
               <ul class="navbar-nav ml-auto">
               <p class="nav-link bold">untertiteltext</p>
               </ul>
        </div>
 </nav>

Weiß jemand, wie man so etwas machen kann?

Drucke diesen Beitrag

  [gelöst] Schaltflächen im PopOver reagieren nicht
Geschrieben von: Berndi - 09.04.2019, 22:32 - Forum: Javascript jQuery & Ajax - Antworten (1)

Hallo Experten,

ich habe auf meiner Seite meherre Felder, denen Popovers zugeordnet sind.
In den Popovers habe ich Schlatflächen platziert, die ich nun mittels jQuery abfangen möchte.

Die Schaltflächen sind folgendermaßen aufgebaut:

HTML5
  1. <a id="33" class="btn btn-danger gored"><span class="fas fa-times" tab-index="0"></span></a>



Im Feld "id" steht jeweils der Index aus der SQL-Tabelle, aus der die Schlatflächen generiert werden.

Mit folgendem Code, versuche ih nun diese Schaltfäche anzusprechen:
Javascript
  1.         $(document).ready(function() {
  2.           $(".gored").click(function() {
  3.               alert($(this).attr('id'));
  4.             });
  5.           }); 




Leider passiert überhaupt nichts.

Wenn ich den jQuery-Code in der Firefox-Konsole eingebe, funktioniert er zumindest bei einer Schaltfläche.
Was mache ich falsch?

Liebe Grüße,
Berndi

PS: das Phänomen lässt sich hier nachvollziehen.[url=https://tinyurl.com/yxj4xnob][/url]

Drucke diesen Beitrag

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

Benutzername/E-Mail:


Passwort





[-]
Letzte Beiträge
Javascript Problem beim automatischen Sc...
Last Post: The-Error
19.05.2019 15:14
» Replies: 3
» Views: 34
Frames?
Last Post: The-Error
17.05.2019 17:15
» Replies: 3
» Views: 58
Bootstrap 3 --> Bootstrap 4
Last Post: The-Error
16.05.2019 13:15
» Replies: 3
» Views: 52

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

[-]
Statistics
» Members: 239
» Latest member: Sittingbull
» Forum threads: 215
» Forum posts: 885

Full Statistics

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

>