Einfache Timeline mit Bootsstrap 4



  • Ihr wolltest schon immer mal eine responsive Timeline, ohne dabei viel Zeit zu investieren? Dann seid ihr hier genau richtig!

    Vorschau
    Unbenannt.png

    HTML:

    <ol class="list-unstyled ml-5 timeline">
        <li>
            <h5>test</h5>
            <p>
                
            </p>
        </li>
        <li>
            <h5>test</h5>
            <p>
                
            </p>
        </li>
        <li>
            <h5>test</h5>
            <p>
    
            </p>
            <p>
                
            </p>
        </li>
        <li>
            <h5>test</h5>
            <p>
    
            </p>
        </li>
    </ol>
    

    CSS:

    .timeline:before, .timeline:after {
      content: "";
      background: #ffc107;
      width: 5px;
      height: 60px;
      position: absolute;
      z-index: 2;
      margin: 0 0 0 -1px;
    }
    .timeline:after {
      height: 90px;
      margin: -80px 0 0 -1px;
    }
    .timeline > li {
      border: 2px solid;
      border-color: #343a40 !important;
      margin: 0 0 -2px 0;
      padding: 30px;
      counter-increment: li;
      position: relative;
      width: 42rem;
    }
    .timeline > li:nth-child(odd):before, .timeline > li:nth-child(even):before {
      content: counter(li);
      display: flex;
      -ms-flex-pack: center !important;
      justify-content: center !important;
      -ms-flex-align: center !important;
      align-items: center !important;
      position: absolute;
      border-radius: 50%;
      height: 50px;
      width: 50px;
      background-color: #343a40;
      color: white;
      font-weight: bold;
      z-index: 3;
    }
    .timeline > li:nth-child(odd):before {
      right: 100%;
      margin-right: -25px;
    }
    .timeline > li:nth-child(even):before {
      left: 100%;
      margin-left: -25px;
    }
    .timeline > li:nth-child(odd) {
      border-right: none;
      border-left: 2px solid;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      margin-right: 30px;
      padding-right: 0;
    }
    .timeline > li:nth-child(even) {
      border-left: none;
      border-right: 2px solid;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-left: 30px;
      padding-left: 0;
      text-align: right;
    }
    .timeline > li:first-child {
      border-top: none;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }
    .timeline > li:last-child {
      border-bottom: none;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    

    Die Funktionsweise, ist dabei recht simpel. Es wird eine sorted List hierfür verwendet, welche gezielt die Zahlen formatiert und die Border-Eigenschaften an richtiger Stelle eingeblendet und gerundet werden.

    Falls ihr Fragen, oder Verbesserungen habt, dann schreibt es mir!

    Livecode
    Schaut hier!



  • Danke fürs hochladen. Das ist ziemlich simpel aufgebaut und einfach zu verstehen. Das wäre evtl was für einen webbasierenden Chat oder für kommentieren.
    Mit einem genauen Zeitstempel nahezu pefekt.



  • Ich habe mal einen Live-Code noch hinzugefügt.


Log in to reply
 

Looks like your connection to MyTechZone 2 was lost, please wait while we try to reconnect.