Mẫu HTML hộp trò chuyện

Tìm hiểu cách tạo tin nhắn trò chuyện bằng CSS

Xin chào. Hôm nay bạn thế nào?

Chào. tôi ổn. Cam ơn vi đa hỏi

Ngọt. Vì vậy, những gì bạn muốn làm ngày hôm nay?

Không, tôi không biết. Chơi bóng đá. hoặc tìm hiểu thêm mã hóa có lẽ?

Tự mình thử »

Bước 1) Thêm HTML

Thí dụ

Xin chào. Hôm nay bạn thế nào?

Xin chào. tôi ổn. Cam ơn vi đa hỏi.

Thật ngọt ngào. Vậy hôm nay bạn muốn làm gì?

Không, tôi không biết nữa. Chơi bóng đá. hoặc có thể học thêm mã hóa?

Bước 2) Thêm CSS

Thí dụ

/* Vùng chứa trò chuyện */
thùng đựng hàng {
biên giới. 2px rắn #dedede;
màu nền. #f1f1f1;
bán kính đường viền. 5px;
đệm. 10px;
lề. 10px 0;
}

/* Vùng chứa trò chuyện tối hơn */
tối hơn {
màu viền. #ccc;
màu nền. #ddd;
}

/* Xóa số float */
thùng đựng hàng. sau đó {
nội dung. "";
thông thoáng. cả hai;
trưng bày. bàn;
}

/* Hình ảnh phong cách */
vùng chứa img {
trôi nổi. bên trái;
chiều rộng tối đa. 60px;
bề rộng. 100%;
lề phải. 20px;
bán kính đường viền. 50%;
}

/* Tạo kiểu cho ảnh phù hợp */
img vùng chứa. đúng {
trôi nổi. đúng;
lề trái. 20px;
lề phải. 0;
}

/* Văn bản kiểu thời gian */
đúng giờ {
trôi nổi. đúng;
màu. #aaa;
}

/* Văn bản kiểu thời gian */
thời gian còn lại {
trôi nổi. bên trái;
màu. #999;
}

Thẻ. Hơn 150 Chủ đề / Mẫu Bootstrap miễn phí, Mẫu trò chuyện / Plugin trò chuyện / Phần mềm trò chuyện, Mẫu trò chuyện Bootstrap

Tất cả các mẫu hộp trò chuyện bootstrap này đều được tải xuống miễn phí. Chúng tôi đã thu thập một vài mẫu hộp trò chuyện / phòng trò chuyện bootstrap và chúng tôi sẽ cập nhật nhiều mẫu phòng trò chuyện hơn trong tương lai. Các mẫu phòng trò chuyện Bootstrap dễ dàng tích hợp với trang web của bạn

Các mô-đun trò chuyện trực tiếp đã trở thành một kênh giao tiếp tối ưu trong mối quan hệ kinh doanh giữa khách hàng và nhà cung cấp của nó. Hôm nay chúng ta sẽ xem xét các ví dụ khác nhau về 5 Mẫu Chatbox sử dụng HTML CSS và JavaScript

Trò chuyện trực tiếp không chỉ hiệu quả trong việc làm cho trang web của bạn trở nên sống động mà còn giúp công việc kinh doanh diễn ra nhanh chóng. Trò chuyện đảm bảo rằng khách hàng nhận được câu trả lời trong một thời gian ngắn. Dưới đây là một số hộp Trò chuyện CSS

NỘI DUNG

1. Giao diện người dùng hộp trò chuyện bật lên

Ở góc dưới cùng bên phải, có nút bật lên trò chuyện. Khi người dùng nhấp vào nút này, một hộp trò chuyện đẹp mắt sẽ mở ra. Nhấp vào nút Đóng một lần nữa sẽ ẩn hộp trò chuyện

Xem giao diện người dùng Pen Chat của Shiva Pandey (@shivapandey) trên CodePen. 0

Demo và mã nguồn

Tác giả

thần shiva pandey

Được tạo nên bởi

Html, CSS và jQuery

2. Tiện ích trò chuyện trực tiếp

Đây là bản demo của mẫu tiện ích trò chuyện trực tiếp đơn giản với hình đại diện người dùng

Xem tiện ích trò chuyện Pen Live của Jack Nyaga (@djak35) trên CodePen. ánh sáng

Demo và mã nguồn

Tác giả

Jack Nyaga

Được tạo nên bởi

Html, CSS và jQuery

3. WhatsApp như Mẫu giao diện người dùng trò chuyện

Xem Ứng dụng nhắn tin trực tiếp giao diện người dùng Bootstrap Chat lấy cảm hứng từ Pen WhatsApp của Filip Rastovic (@FilipRastovic) trên CodePen. ánh sáng

Bộ sưu tập các ví dụ mã trò chuyện Bootstrap tùy chỉnh miễn phí. Cập nhật bộ sưu tập tháng 11 năm 2020. 2 mặt hàng mới

Những bài viết liên quan

1. Trò chuyện CSS
2. Trò chuyện jQuery
3. Cuộc trò chuyện thuận gió

Tác giả

• Bootdey
• 12 Tháng Ba, 2021

liên kết

• bản demo và mã

Làm với

• HTML/CSS

Về một mã

Ứng dụng trò chuyện Bootstrap

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. phông chữ tuyệt vời. css

Phiên bản Bootstrap. 4. 5. 0

Tác giả

• Bootdey
• 20 Tháng Mười

liên kết

• bản demo và mã

Làm với

• HTML/CSS

Về một mã

Trò chuyện trắng Bootstrap

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. phông chữ tuyệt vời. css

Phiên bản Bootstrap. 4. 5. 0

Tác giả

• Kabir Bhatia
• Tháng Sáu, 2020

liên kết

• bản demo và mã

Làm với

• HTML/CSS

Về một mã

Biểu mẫu trò chuyện trực tiếp Bootstrap 4 với các biểu tượng người dùng

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. phông chữ tuyệt vời. css

Phiên bản Bootstrap. 4. 4. 1

Tác giả

• Nhóm BBBootstrap
• tháng 11 năm 2019

liên kết

• bản demo và mã

Làm với

• HTML/CSS

Về một mã

Bootstrap 4 Ứng dụng trò chuyện đơn giản

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. -

Phiên bản Bootstrap. 4. 0. 0

Tác giả

• Nhóm BBBootstrap
• tháng 11 năm 2019

liên kết

• bản demo và mã

Làm với

• HTML/CSS

Về một mã

Bootstrap 4 Hộp tin nhắn trò chuyện tuyệt vời

Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari

Đáp ứng. có

Phụ thuộc. phông chữ tuyệt vời. css

Phiên bản Bootstrap. 4. 0. 0

Tác giả

• Ondrej
• 23 Tháng Mười

liên kết

• bản demo và mã

Làm với

• HTML/CSS/JS

Về một mã

Trò chuyện Bootstrap

Trò chuyện Bootstrap kết hợp tính đơn giản và chức năng để tạo bố cục trực quan mà bạn có thể sử dụng cho dự án ứng dụng trò chuyện tiếp theo của mình. Nó có các cuộc hội thoại theo chuỗi được sắp xếp theo những cuộc hội thoại gần đây nhất. Các thanh cuộn tối thiểu đảm bảo rằng giao diện người dùng trò chuyện của bạn không bị phân tâm và tập trung. Sử dụng Bootstrap 4, giao diện người dùng trò chuyện được tạo bằng mã có cấu trúc tốt và hiệu quả. Nó đã được cải tiến với các biểu tượng Font Awesome để làm nổi bật trải nghiệm người dùng

Làm cách nào để tạo một hộp trò chuyện trong HTML?

/* Trò chuyện bật lên - ẩn theo mặc định */. biểu mẫu-cửa sổ bật lên { hiển thị. không ai; . đã sửa; . 0;.

/* Vùng văn bản có chiều rộng đầy đủ */. vùng chứa biểu mẫu textarea { chiều rộng. 100%; . 15px; . 5px 0 22px 0;.

/* Đặt kiểu cho nút gửi/đăng nhập */. biểu mẫu-container. btn { màu nền. #04AA6D; . trắng;

Làm cách nào để tạo một hộp trò chuyện trong CSS?

Tạo hộp trò chuyện bằng CSS . specify the height and width of the

. Bây giờ hãy xác định hai