Cara Menciptakan Chat Box Keren Dengan Bootstrap
Dalam postingan ini aku memberi Anda desain chat box keren memakai boostrap 4 dengan html dan css tambahan. Kita akan sama- berguru menciptakan desain layout kotak dialog flat design yang keren. desain chat box ini untuk live chatbox.
Desain kotak dialog atau chat box merupakan salah satau komponen yang sering ada pada web yang berafiliasi dengan costumer atau pelanggan untuk saling berkomunikasi atau saling tanya jawab. bila kau ingin atau punya rencana untuk menambahkan fitur chat box di web anda. kau sanggup ikuti cara-cara dibawah ini atau menjadikannya rujukan untuk dikembangkan.
Desain layout chatbox ini kita akan memakai framework boostrap 4, alasannya yakni sudah masuk akal disaat kini penggunaan framework untuk mempermudah pekerjaan koding. selain itu ada juga aksesori css modifikasi yang ditambahkan dalam desain kotak dialog kali ini.
Desain kotak pesan ini ini menyerupai mirip facebook, gmail, google plus. yang kita buat kini yakni desain chat box live atau langsung.
Daripada berlama-lama lagi, yuk kita buat chat box nya dengan menciptakan file gres dengan notepad / sublime / teks editor serupa. Silahkan buat dalam satu project atau folder semoga lebih gampang di pahami. New File > Beri nama Index.html > Paste kan isyarat dibawah ini dan SAVE.
Bgaimana manis bukan? kini kau tinggal kreasikan dan kombinasikan kedalam kodingan kau yang lain semoga menjadi kesatuan yang utuh dan chat box nya sanggup mampu digunakan. Chat box ini cocok untuk web yang ingin pribadi berkomunikasi dengan pelanggan atau live chat.
Semoga kau suka dengan desainnya, bila kau suka kau sanggup bagikan keteman-teman kau yang lain. dan bila ada pertanyaan dan masukkan seputar ini, silahkan berikan komentar dan pendapatmu di kolom kemntar kami. happy coding!
Desain kotak dialog atau chat box merupakan salah satau komponen yang sering ada pada web yang berafiliasi dengan costumer atau pelanggan untuk saling berkomunikasi atau saling tanya jawab. bila kau ingin atau punya rencana untuk menambahkan fitur chat box di web anda. kau sanggup ikuti cara-cara dibawah ini atau menjadikannya rujukan untuk dikembangkan.
Desain layout chatbox ini kita akan memakai framework boostrap 4, alasannya yakni sudah masuk akal disaat kini penggunaan framework untuk mempermudah pekerjaan koding. selain itu ada juga aksesori css modifikasi yang ditambahkan dalam desain kotak dialog kali ini.
Desain kotak pesan ini ini menyerupai mirip facebook, gmail, google plus. yang kita buat kini yakni desain chat box live atau langsung.
Daripada berlama-lama lagi, yuk kita buat chat box nya dengan menciptakan file gres dengan notepad / sublime / teks editor serupa. Silahkan buat dalam satu project atau folder semoga lebih gampang di pahami. New File > Beri nama Index.html > Paste kan isyarat dibawah ini dan SAVE.
<!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="custom.css"> </head> <body> <div class="container"> <div class="row pt-3"> <div class="col-lg-3 m-0 chat-main"> <div class="row"> <div class="col-md-12 chat-header rounded-top p-2"> <div class="row"> <div class="col-md-2 image"> <img src="http://nicesnippets.com/demo/man01.png" class="rounded"> </div> <div class="col-md-7 user-detail pt-2"> <h6 class="pt-1">Alex Steve</h6> <i class="fa fa-circle active ml-1" aria-hidden="true"></i> </div> <div class="col-md-3 options text-right pt-2"> <i class="fa fa-ellipsis-h mr-1 hide-chat-box"></i> <i class="fa fa-times hide-chat-box"></i> </div> </div> </div> <div class="col-md-12 chat-content p-0 bg-white border border-top-0"> <ul class="pl-3 pr-3 pt-1 mb-1"> <li class="p-2 mb-1 rounded"> <span class="float-right time">12:00</span> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">This is the nice one place in world.</p> </li><hr> <li class="p-2 mb-1 rounded bg-info text-white"> <span class="float-right time text-white">12:10</span> <p class="m-0">Good Morning.</p> </li> <li class="p-2 mb-1 rounded"> <span class="float-right time">12:00</span> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">This is the nice one place in world.</p> </li><hr> <li class="p-2 mb-1 rounded bg-info text-white"> <span class="float-right time text-white">12:10</span> <p class="m-0">Good Morning.</p> </li> </ul> <p class="text-center mb-2 sender font-italic">Stephen</p> <div class="msg-box p-2"> <div class="row"> <div class="col-md-9"> <input type="text" class="form-control" placeholder="message ..."> </div> <div class="col-md-3 pl-0"> <button class="btn btn-success">Send</button> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> .chat-main{ bottom: 0; right:120px; position: fixed; } .chat-header{ background: #E5EFC1; border:1px solid #D7DF71; } .image img{ height: 40px; width: 40px; } .user-detail h6{ display: inline-block; } .user-detail .active{ color: #32B92D; font-size: 12px; } .options i{ color: #a1a1a1; font-size: 19px; cursor: pointer; } .chat-content, .chat-content .sender, .user-detail h6{ font-size: 14px; } .chat-content ul{ height: 260px; overflow-x: scroll; overflow-x: hidden; } .chat-content ul li{ list-style: none; background: #F5F5F5; } .chat-content .msg-box{ background: #e1e1e1; } .chat-content .msg-box .send-btn{ background: #39AEA9; } .chat-content .time{ font-size: 10px; color: #a1a1a1; } 
Bgaimana manis bukan? kini kau tinggal kreasikan dan kombinasikan kedalam kodingan kau yang lain semoga menjadi kesatuan yang utuh dan chat box nya sanggup mampu digunakan. Chat box ini cocok untuk web yang ingin pribadi berkomunikasi dengan pelanggan atau live chat.
Semoga kau suka dengan desainnya, bila kau suka kau sanggup bagikan keteman-teman kau yang lain. dan bila ada pertanyaan dan masukkan seputar ini, silahkan berikan komentar dan pendapatmu di kolom kemntar kami. happy coding!
Posting Komentar untuk "Cara Menciptakan Chat Box Keren Dengan Bootstrap"