[How To] Einfaches Chat Fenster mit Bootstrap 4



  • 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!


Log in to reply
 

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