Navigation

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

    [How To] Einfaches Chat Fenster mit Bootstrap 4

    HTML
    1
    1
    81
    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

      Ein Chat mit Bootstrap 4 ? Kein Problem @DerGothic!

      Vorschau
      chat.png

      HTML:

      <ul class="container list-unstyled chat">
          <li class="own">
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Doggo</span>
                  <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
                  I am bekom fat long woofer snoot puggo, smol long woofer.</p>
                  <span>09:11 09.08.2020</span>
              </div>
          </li>
          <li class="own">
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Doggo</span>
                  <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.</p>
                  <span>10:35 09.08.2020</span>
              </div>
          </li>
          <li>
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Borker</span>
                  <p>I am bekom fat long woofer snoot puggo, smol long woofer.</p>
                  <span>11:21 09.08.2020</span>
              </div>
          </li>
          <li>
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Borker</span>
                  <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
                  I am bekom fat long woofer snoot puggo, smol long woofer.</p>
                  <span>11:23 09.08.2020</span>
              </div>
          </li>
          <li class="own">
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Doggo</span>
                  <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.</p>
                  <span>12:04 09.08.2020</span>
              </div>
          </li>
          <li>
              <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
              <div>
                  <span>Borker</span>
                  <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
                  I am bekom fat long woofer snoot puggo, smol long woofer.</p>
                  <span>12:31 09.08.2020</span>
              </div>
          </li>
      </ul>
      

      CSS:

      .chat p {
        margin-bottom: 0;
      }
      .chat img {
        height: 4rem;
        width: 4rem;
        margin-right: 1rem;
      }
      .chat li {
        display: -ms-flexbox !important;
        display: flex !important;
        margin-bottom: 2rem;
        position: relative;
        text-align: left;
        width: 50%;
        margin-left: 0;
      }
      .chat li:not(.own) span:first-of-type {
        font-size: 1.2rem;
        font-weight: bolder;
      }
      .chat li:not(.own) span:first-of-type:after {
        content: "\a";
        white-space: pre;
      }
      .chat li span:last-of-type {
        position: absolute;
        bottom: -1rem;
        right: 0;
        font-size: 0.6rem;
      }
      .chat li:not(.own):after {
        content: "";
        position: absolute;
        margin-top: -0.4rem;
        margin-left: -5px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #82ccdd;
        transform: rotate(45deg);
        left: 4.5rem;
        top: 2rem;
      }
      .chat li div {
        border-radius: 5%;
        background-color: #82ccdd;
        padding: 0.2rem 0.6rem 0.2rem 0.2rem;
        min-width: 86%;
      }
      .chat .own {
        margin-left: 50%;
      }
      .chat .own span:first-of-type {
        display: none;
      }
      .chat .own:after {
        content: "";
        position: absolute;
        margin-top: -6px;
        margin-left: -5px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #82ccdd;
        transform: rotate(-45deg);
        right: -15px;
        top: 10px;
      }
      .chat .own img {
        display: none;
      }
      

      Die Funktionsweise, ist simpel. Es wird eine unsortierte List hierfür verwendet. Das IMG-Tag ist der Avatar des Benutzers. Der erste SPAN-Tag ist der Username und der zweite SPAN-Tag ist das Datum.

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

      Livecode
      Find live version here!

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