Navigation

    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • TeamSpeak

    [How To] Einfache Timeline mit Bootsstrap 4

    HTML
    2
    3
    71
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Ritzga
      Ritzga last edited by Ritzga

      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!

      1 Reply Last reply Reply Quote 0
      • DerGothic
        DerGothic last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • Ritzga
          Ritzga last edited by

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post