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: 122
» Neuestes Mitglied: Ihan187
» Foren-Themen: 128
» Foren-Beiträge: 459

Komplettstatistiken

Benutzer Online
Momentan ist 1 Benutzer online
» 0 Mitglieder
» 1 Gäste

Aktive Themen
col mit fester Breite
Forum: Bootstrap 4
Letzter Beitrag: Telefisch
Vor 9 Stunden
» Antworten: 0
» Ansichten: 6
vorhanden Platz gleichmäs...
Forum: Bootstrap 4
Letzter Beitrag: Emess
17.07.2018, 14:19
» Antworten: 4
» Ansichten: 122
jQuery Isotop Gallery mit...
Forum: Bootstrap Snippet
Letzter Beitrag: Harald.Lichowski
15.07.2018, 08:16
» Antworten: 1
» Ansichten: 88
Onepager Nav und Button P...
Forum: Bootstrap 4
Letzter Beitrag: Emess
13.07.2018, 14:51
» Antworten: 58
» Ansichten: 1.068
Bootstrap Snippets
Forum: Bootstrap Links
Letzter Beitrag: Harald.Lichowski
03.07.2018, 19:36
» Antworten: 0
» Ansichten: 82
Anfängerfrage Cards und F...
Forum: Bootstrap 4
Letzter Beitrag: Telefisch
29.06.2018, 07:49
» Antworten: 4
» Ansichten: 97
DSGVO Kontaktformuler Boo...
Forum: Bootstrap Snippet
Letzter Beitrag: totti
27.06.2018, 16:32
» Antworten: 5
» Ansichten: 284
Navbar - 2 Links oben rec...
Forum: Bootstrap 4
Letzter Beitrag: The-Error
27.06.2018, 07:49
» Antworten: 2
» Ansichten: 70
Bilder Karussell ohne Jav...
Forum: Bootstrap Snippet
Letzter Beitrag: The-Error
09.06.2018, 08:29
» Antworten: 0
» Ansichten: 85
DropDown Erklärungstexte ...
Forum: Bootstrap 4
Letzter Beitrag: jan777
05.06.2018, 11:58
» Antworten: 1
» Ansichten: 110

 
  col mit fester Breite
Geschrieben von: Telefisch - Vor 9 Stunden - Forum: Bootstrap 4 - Keine Antworten

Hallo Forum,
so langsam wird es etwas flüssiger mit bootstrap, allerdings stehe ich hier vor einem Problem, das ich noch nicht gelöst bekomme:

Ich habe meinen body-content in einen fluid-container gepackt. Jetzt soll im Body links ein Treeview und rechts der eigentliche Content angezeigt werden.
Soweit auch alles in Ordnung.
Ich möchte aber das Treeview mit einer maximalen Breite oder einer fixen Breite angezeigt bekommen.
Wie kann ich der ersten Spalte denn sagen, dass sie fix ist?

HTML5
  1.    @Html.Partial("_NavBar")
  2.     <br />
  3.     
  4.     <div class="container-fluid body-content">
  5.         <div class="row">
  6.             <div class="col-3">@Html.Action("Menu", "TreeView")</div>
  7.             <div class="col-xl">@RenderBody()</div>
  8.         </div>
  9.         
  10.  
  11.         @*@RenderBody()*@
  12.         <hr />
  13.         <footer>
  14.             <p>&copy; @DateTime.Now.Year - Circuit Diagram Configurator</p>
  15.         </footer>
  16.     </div>
  17.  
  18.     @Scripts.Render("~/bundles/jquery")
  19.     @Scripts.Render("~/bundles/bootstrap")
  20.     @RenderSection("scripts", required: false)
  21. </body>



...und bei der Gelegenheit...
Wenn der links angezeigte Tree ausgeklappt wird, wird er länger als die Seite, sodass die Seite einen Scrollbalken bekommt.
Kann man das nicht so darstellen, dass nur die col mit dem Treeview einen Scrollbalken bekommt und der rechte Teil fix bleibt?

Danke
Gruß Carsten

Drucke diesen Beitrag

  jQuery Isotop Gallery mit Lightbox
Geschrieben von: The-Error - 13.07.2018, 20:10 - Forum: Bootstrap Snippet - Antworten (1)

Isotope ist wohl eins der schönsten Plugins für eine Gallery.

Isotop Gallery

Demo Gallery



Angehängte Dateien
.rar   Isotope-Gallery.rar (Größe: 4,8 MB / Downloads: 1)
Drucke diesen Beitrag

  Bootstrap Snippets
Geschrieben von: Harald.Lichowski - 03.07.2018, 19:36 - Forum: Bootstrap Links - Keine Antworten

Hallo liebes Forum,

ich möchte euch eine ganz interessante Seite vorstellen wo man einige Bootstrap-Snippets findet:

https://bootsnipp.com/

LG

Drucke diesen Beitrag

  vorhanden Platz gleichmässig verteilen - Bilder
Geschrieben von: Caro - 01.07.2018, 14:44 - Forum: Bootstrap 4 - Antworten (4)

Hallo,
irgendwie bekomme ich das nicht nicht das sich die Bilder den vorhanden Platz gleichmässig verteilen, wobei die Bildgrösse max 250x250px ist.
Die Bilder sollen 4 Stück in reihe angezeigt werden auf dem PC.


Code:
<div class="container margin-top">
   <div class="d-flex flex-row">
      <div class="d-flex flex-column">
        <img src="test3.png" class="img-fluid">
       <img src="test2.png" class="img-fluid">
      </div>
      <div class="d-flex flex-column">
        <img src="test2.png" class="img-fluid">
       <img src="test3.png" class="img-fluid">
      </div>
      <div class="d-flex flex-column">
        <img src="test3.png" class="img-fluid">
       <img src="test2.png" class="img-fluid">
      </div>
      <div class="d-flex flex-column">
      <img src="test3.png" class="img-fluid">
       <img src="test2.png" class="img-fluid">
      </div>
   </div>
</div>
Code:
.margin-top { margin-top: 50px; }

img { margin: 5px; }

Es sollte so aussehen wie mit fünf Bilder in einer Reihe halt nur mit 4.



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Anfängerfrage Cards und Forms
Geschrieben von: Telefisch - 28.06.2018, 11:52 - Forum: Bootstrap 4 - Antworten (4)

Hallo Forum,
als blutiger Anfänger habe ich gleich mal eine Frage:
Ich möchte ein Form bauen, wo ich Eingabefelder in zwei nebeneinanderliegenden Cards anzeige.

HTML5
  1.         <div class="card border-primary mb-3" style="max-width: 27rem;">
  2.             <div class="card-header">Kundendaten</div>
  3.             <div class="card-body">
  4.  
  5.                 <div class="form-group">
  6.                     @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
  7.                     <div class="col-md-10">
  8.                         @Html.EditorFor(model => model.CustomerName, new { htmlAttributes = new { @class = "form-control" } })
  9.                         @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
  10.                     </div>
  11.                 </div>
  12.  
  13.                 <div class="form-group">
  14.                     @Html.LabelFor(model => model.CustomerStreet, htmlAttributes: new { @class = "control-label col-md-2" })
  15.                     <div class="col-md-10">
  16.                         @Html.EditorFor(model => model.CustomerStreet, new { htmlAttributes = new { @class = "form-control" } })
  17.                         @Html.ValidationMessageFor(model => model.CustomerStreet, "", new { @class = "text-danger" })
  18.                     </div>
  19.                 </div>
  20.             </div>
  21.         </div>



Jetzt gebe ich mit  style="max-width: 27rem;" ja auch die Mindestbreite für die jeweilige Card an.
mache ich die Breite z.B. 20rem breit wird das jeweilige Label so schmal, dass nur noch zwei oder drei Buchstaben nebeneinander dargestellt werden, dafür aber mehrere Zeilen im Label.
Mache ich die Card so breit, dass das Label passt, ist jede Menge Platze rechts neben den Eingabefeldern und den Labels.

   

Wie funktioniert das?
Oder gibt es zum Gruppieren von Formularfeldern bessere Elemente als Card?


Danke und Gruß
Carsten

Drucke diesen Beitrag

  Navbar - 2 Links oben rechts auslagern
Geschrieben von: totti - 26.06.2018, 20:09 - Forum: Bootstrap 4 - Antworten (2)

Wisst ihr zufällig, ob es möglich ist, zwei Links aus der Navbar loszulösen und rechts oben an den Bildschirm auszulagern.

Ich habe dies hier auf der Seite gesehen: https://www.telamo.de/
Dort ist ein Link für Datenschutz oben rechts, wenn man den Bildschirm minimiert (auf iPhone-Größe) wird dieser Link mit ins Menü aufgenommen. Ist so etwas auch bei Bootstrap möglich?

Drucke diesen Beitrag

  Bilder Karussell ohne JavaScript nur mit CSS
Geschrieben von: The-Error - 09.06.2018, 08:29 - Forum: Bootstrap Snippet - Keine Antworten

Bilder Karussell ohne JavaScript nur mit CSS

DEMO


HTML5
  1.     <div class="container">
  2.         <h1 class="text-center pt-3">Bilder Karussel ohne JavaScript nur mit CSS</h1>
  3.         <div class="row">
  4.             <div id="karussell">
  5.                 <div id="image">
  6.                     <div class="image bild1">
  7.                         <!-- Bilder in der css-Datei einfügen -->
  8.                     </div>
  9.                     <div class="image bild2">
  10.                         <!-- Bilder in der css-Datei einfügen -->
  11.                     </div>
  12.                     <div class="image bild3">
  13.                         <!-- Bilder in der css-Datei einfügen -->
  14.                     </div>
  15.                     <div class="image bild4">
  16.                         <!-- Bilder in der css-Datei einfügen -->
  17.                     </div>
  18.                     <div class="image bild5">
  19.                         <!-- Bilder in der css-Datei einfügen -->
  20.                     </div>
  21.                     <div class="image bild6">
  22.                         <!-- Bilder in der css-Datei einfügen -->
  23.                     </div>
  24.                     <div class="image bild7">
  25.                         <!-- Bilder in der css-Datei einfügen -->
  26.                     </div>
  27.                     <div class="image bild8">
  28.                         <!-- Bilder in der css-Datei einfügen -->
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </div>



CSS
  1. #karussell {
  2.     perspective: 2500;
  3.     -webkit-perspective: 2500;
  4.     width: 800px;
  5.     margin: 150px auto 80px auto;
  6.     padding-bottom: 60px;
  7.     perspective-origin: 50% 150px;
  8.     -webkit-perspective-origin: 50% 150px;
  9.     transition: perspective, 1s;
  10.     -o-transition: -o-perspective, 1s;
  11.     -moz-transition: -moz-perspective, 1s;
  12.     -webkit-transition: -webkit-perspective, 1s;
  13. }
  14.  
  15. #image:hover {
  16.     animation-play-state: paused;
  17.     -o-animation-play-state: paused;
  18.     -moz-animation-play-state: paused;
  19.     -webkit-animation-play-state: paused;
  20. }
  21.  
  22.  
  23. @-webkit-keyframes spin {
  24.     from {
  25.         transform: rotateY(0);
  26.         -o-transform: rotateY(0);
  27.         -ms-transform: rotateY(0);
  28.         -moz-transform: rotateY(0);
  29.         -webkit-transform: rotateY(0);
  30.     }
  31.     to {
  32.         transform: rotateY(-360deg);
  33.         -o-transform: rotateY(-360deg);
  34.         -ms-transform: rotateY(-360deg);
  35.         -moz-transform: rotateY(-360deg);
  36.         -webkit-transform: rotateY(-360deg);
  37.     }
  38. }
  39.  
  40. #image {
  41.     margin: 0 auto;
  42.     height: 250px;
  43.     width: 400px;
  44.     transform-style: preserve-3d;
  45.     -webkit-transform-style: preserve-3d;
  46.     animation: spin 24s infinite linear;
  47.     -moz-animation: spin 24s infinite linear;
  48.     -o-animation: spin 24s infinite linear;
  49.     -webkit-animation: spin 24s infinite linear;
  50. }
  51.  
  52. .image {
  53.     position: absolute;
  54.     height: 100%;
  55.     width: 100%;
  56.     text-align: center;
  57.     font-size: 20em;
  58.     border: solid 1px #000;
  59.  
  60. }
  61.  
  62. #image > .bild1 {
  63.     background-image: url("../img/001.jpg");
  64.     background-repeat: no-repeat;
  65.     background-size: cover;
  66.     transform: translateZ(485px);
  67.     -moz-transform: translateZ(485px);
  68.     -o-transform: translateZ(485px);
  69.     -ms-transform: translateZ(485px);
  70.     -webkit-transform: translateZ(485px);
  71. }
  72.  
  73. #image > .bild2 {
  74.     background-image: url("../img/002.jpg");
  75.     background-repeat: no-repeat;
  76.     background-size: cover;
  77.     transform: rotateY(45deg) translateZ(485px);
  78.     -moz-transform: rotateY(45deg) translateZ(485px);
  79.     -o-transform: rotateY(45deg) translateZ(485px);
  80.     -ms-transform: rotateY(45deg) translateZ(485px);
  81.     -webkit-transform: rotateY(45deg) translateZ(485px);
  82. }
  83.  
  84. #image > .bild3 {
  85.     background-image: url("../img/003.jpg");
  86.     background-repeat: no-repeat;
  87.     background-size: cover;
  88.     transform: rotateY(90deg) translateZ(485px);
  89.     -moz-transform: rotateY(90deg) translateZ(485px);
  90.     -o-transform: rotateY(90deg) translateZ(485px);
  91.     -ms-transform: rotateY(90deg) translateZ(485px);
  92.     -webkit-transform: rotateY(90deg) translateZ(485px);
  93. }
  94.  
  95. #image > .bild4 {
  96.     background-image: url("../img/010.jpg");
  97.     background-repeat: no-repeat;
  98.     background-size: cover;
  99.     transform: rotateY(135deg) translateZ(485px);
  100.     -moz-transform: rotateY(135deg) translateZ(485px);
  101.     -o-transform: rotateY(135deg) translateZ(485px);
  102.     -ms-transform: rotateY(135deg) translateZ(485px);
  103.     -webkit-transform: rotateY(135deg) translateZ(485px);
  104. }
  105.  
  106. #image > .bild5 {
  107.     background-image: url("../img/005.jpg");
  108.     background-repeat: no-repeat;
  109.     background-size: cover;
  110.     transform: rotateY(180deg) translateZ(485px);
  111.     -moz-transform: rotateY(180deg) translateZ(485px);
  112.     -o-transform: rotateY(180deg) translateZ(485px);
  113.     -ms-transform: rotateY(180deg) translateZ(485px);
  114.     -webkit-transform: rotateY(180deg) translateZ(485px);
  115. }
  116.  
  117. #image > .bild6 {
  118.     background-image: url("../img/006.jpg");
  119.     background-repeat: no-repeat;
  120.     background-size: cover;
  121.     transform: rotateY(225deg) translateZ(485px);
  122.     -moz-transform: rotateY(225deg) translateZ(485px);
  123.     -o-transform: rotateY(225deg) translateZ(485px);
  124.     -ms-transform: rotateY(225deg) translateZ(485px);
  125.     -webkit-transform: rotateY(225deg) translateZ(485px);
  126. }
  127.  
  128. #image > .bild7 {
  129.     background-image: url("../img/007.jpg");
  130.     background-repeat: no-repeat;
  131.     background-size: cover;
  132.     transform: rotateY(270deg) translateZ(485px);
  133.     -moz-transform: rotateY(270deg) translateZ(485px);
  134.     -o-transform: rotateY(270deg) translateZ(485px);
  135.     -ms-transform: rotateY(270deg) translateZ(485px);
  136.     -webkit-transform: rotateY(270deg) translateZ(485px);
  137. }
  138.  
  139. #image > .bild8 {
  140.     background-image: url("../img/008.jpg");
  141.     background-repeat: no-repeat;
  142.     background-size: cover;
  143.     transform: rotateY(315deg) translateZ(485px);
  144.     -moz-transform: rotateY(315deg) translateZ(485px);
  145.     -o-transform: rotateY(315deg) translateZ(485px);
  146.     -ms-transform: rotateY(315deg) translateZ(485px);
  147.     -webkit-transform: rotateY(315deg) translateZ(485px);
  148. }


Drucke diesen Beitrag

  DropDown Erklärungstexte in Begriffsliste
Geschrieben von: jan777 - 05.06.2018, 11:47 - Forum: Bootstrap 4 - Antworten (1)

Moin Smile

Ich hab eine Liste mit Begriffen (keine Buttons), unter denen per Klick auf den Begriff sich die Liste auseinanderschiebt und direkt darunter ein mehr oder weniger langer Erklärungstext erscheint/dazwischenschiebt.

Optimal wäre es, wenn bei dem, Klick auf einen anderen Begriff in der Liste ein schon geöffneter Erklärungstext wieder schließt, dass die Liste überschaubar bleibt.

Weiß jemand wie sowas heißt und wo man ggf. den Source etc. mit etwas Erklärung finden kann?

-----------------------------------

Also als Beispilel bei 4 Begriffen, der zweite ist angekickt:

Begriff1

Begriff2
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.

Begriff3

begriff4

Drucke diesen Beitrag

  Grip Boxen?
Geschrieben von: BlackSky - 01.06.2018, 10:00 - Forum: Bootstrap 4 - Antworten (4)

Hallo Community, Ich habe mich jetzt hier extra in dieses Forum angemeldet und hoffe ihr könnt mir weiterhelfen. 
Ich möchte gerne diese Grip Boxen wie auf der Webseite https://sport-online-shop24.de/ auch erstellen können. Leider suche ich seit Stunden nach ein Plugin das sowas kann ohne Erfolg. Auch bei meinen Theme Anbieter habe ich schon nachgefragt aber alle verweisen auf Bootstrap und geben mir Links aber was soll ich machen wenn ich 0 Plan habe von Bootstrap?

Lg Jens

Drucke diesen Beitrag

  Source-Map Fehler
Geschrieben von: user123 - 31.05.2018, 13:31 - Forum: Bootstrap 4 - Keine Antworten

Hallo,
was hat der folgende Fehler zu bedeuten? Wie bekomme ich diesen weg?


[Bild: ximg.php?fid=76075369]


Vielen Dank

Drucke diesen Beitrag