Mẫu thẻ Bootstrap
|
Thẻ trong Bootstrap 4 là một hộp có viền với một số phần đệm xung quanh nội dung của nó. Nó bao gồm các tùy chọn cho đầu trang, chân trang, nội dung, màu sắc, v.v. Show
John DoeMột số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư Xem hồ sơThẻ cơ bảnMột thẻ cơ bản được tạo với lớp Thí dụ
thẻ cơ bản Tự mình thử » Nếu bạn đã quen với Bootstrap 3, các thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ Đầu trang và cuối trangLớp Thí dụ
tiêu đề Nội dung chân trang Tự mình thử » Thẻ theo ngữ cảnhĐể thêm màu nền cho thẻ, hãy sử dụng các lớp theo ngữ cảnh (_______4, Tiêu đề, văn bản và liên kếtSử dụng phần tử nếu nó là phần tử con cuối cùng (hoặc phần tử duy nhất) bên trong Thí dụ
tiêu đề thẻMột số văn bản ví dụ. Một số văn bản ví dụ Tự mình thử » Hình ảnh thẻJohn DoeMột số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư Xem hồ sơJane DoeMột số văn bản ví dụ một số văn bản ví dụ. Jane Doe là một kiến trúc sư và kỹ sư Xem hồ sơThêm Thí dụ
John DoeMột số văn bản ví dụ Tự mình thử » Liên kết kéo dàiThêm lớp John DoeMột số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư Xem hồ sơJane DoeMột số văn bản ví dụ một số văn bản ví dụ. Jane Doe là một kiến trúc sư và kỹ sư Xem hồ sơThí dụTự mình thử »Lớp phủ hình ảnh thẻJohn DoeMột số văn bản ví dụ một số văn bản ví dụ. Một số văn bản ví dụ một số văn bản ví dụ. Một số văn bản ví dụ một số văn bản ví dụ. Một số văn bản ví dụ một số văn bản ví dụ Xem hồ sơBiến hình ảnh thành nền thẻ và sử dụng Thí dụ
John DoeMột số văn bản ví dụ Tự mình thử » Cột thẻMột số văn bản bên trong thẻ đầu tiên Một số văn bản bên trong thẻ thứ hai Một số văn bản bên trong thẻ thứ ba Một số văn bản bên trong thẻ thứ tư Một số văn bản bên trong thẻ thứ năm Một số văn bản bên trong thẻ thứ sáu Lớp Ghi chú. Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px), CÓ lề trên và dưới Từ gợi ý tìm kiếm Google Assistant đến các ứng dụng giao đồ ăn trực tuyến, thẻ được sử dụng rộng rãi trong thiết kế giao diện hiện đại. Bản chất đơn giản và linh hoạt của thiệp giúp người thiết kế dễ dàng sử dụng cho mọi mục đích. Cho dù bạn đang tìm kiếm một thiết kế thẻ nhỏ để hiển thị nội dung có kích thước vừa phải hay một thẻ mở rộng đầy đủ để cung cấp thông tin ngắn gọn, thì đều có thiết kế dành cho bạn trong danh sách ví dụ về thẻ bootstrap này Thẻ Bootstrap rất linh hoạt và dễ dàng thích ứng với kích thước của màn hình. Ví dụ: các thẻ tự sắp xếp theo định dạng thư viện trên màn hình máy tính lớn, giống như trên Pinterest. Khi bạn nhìn thấy cùng một nội dung trên thiết bị di động, chúng sẽ tự sắp xếp theo định dạng dọc để có thiết kế thân thiện với ngón tay cái. Bản chất linh hoạt này của thẻ bootstrap khiến chúng vừa là yếu tố phụ vừa là yếu tố cốt lõi trong thiết kế. Chúng tôi đã thu thập một số khái niệm thiết kế trong danh sách ví dụ về thẻ bootstrap này để bạn có thể áp dụng một thiết kế độc đáo trong dự án của mình  Thẻ phân phối Bootstrap với hoạt ảnh UXThẻ giao hàng là một vài yếu tố được sử dụng rộng rãi trong các ứng dụng di động Thương mại điện tử hiện đại. Mỗi ứng dụng thử những điều mới và nhiều ứng dụng sử dụng thiết kế dòng thời gian đơn giản để rõ ràng hơn Người tạo thẻ bootstrap này đã sử dụng hình ảnh và dấu thời gian để truyền tải thông điệp rõ ràng tới khán giả. Hình ảnh động mượt mà đưa trải nghiệm lên một cấp độ hoàn toàn mới và cho phép chủ sở hữu ứng dụng thêm nhiều thông tin hơn trong một không gian nhỏ. Toàn bộ tập lệnh mã được chia sẻ với bạn trên trình chỉnh sửa Codepen, nơi bạn có thể chỉnh sửa và trực quan hóa kết quả tùy chỉnh trước khi đưa đoạn mã vào dự án của mình Thông tin / Tải xuống Bản trình diễn Thẻ thiết kế vật liệu đáp ứngĐây là một ví dụ về thẻ bootstrap đáp ứng. Trong thiết kế này, hoạt ảnh UX cũng được sử dụng hiệu quả để hiển thị thêm thông tin trong không gian nhất định Người tạo đã tạo các thẻ này làm thẻ hồ sơ theo thiết kế mặc định. Bạn có thể sử dụng thiết kế này làm cơ sở và tạo thẻ tùy chỉnh của mình. Toàn bộ tập lệnh mã được chia sẻ với bạn và bạn có thể chỉnh sửa tập lệnh để xem cách bạn có thể sử dụng mã này trong dự án của mình Thông tin / Tải xuống Bản trình diễn Tương tác di chuột qua thẻNhư tên của nó, bạn sẽ có được các tương tác di chuột qua thẻ gọn gàng trong ví dụ về thẻ bootstrap này Người tạo đã sử dụng hiệu ứng thị sai và văn bản để hiển thị thông tin liên quan cho người dùng. Đây sẽ là một lựa chọn tốt nếu bạn định tạo thẻ tương tác cho dịch vụ và thẻ sản phẩm của mình. Ngoài ra, bạn có nút kêu gọi hành động để đưa người dùng đến các trang liên quan. Vì toàn bộ khái niệm chủ yếu được tạo bằng tập lệnh CSS, bạn có thể sử dụng khái niệm này trên bất kỳ trang web nào. Một ưu điểm khác của mã hóa đơn giản của thiết kế này là bạn có thể sửa đổi nó dễ dàng theo yêu cầu của mình Thông tin / Tải xuống Bản trình diễn Hiệu ứng Holo Thẻ bài PokemonBạn sẽ có được hiệu ứng thẻ bootstrap bắt mắt và phong phú trong thiết kế này. Đoạn mã này sẽ hữu ích nếu bạn muốn tạo hiệu ứng theo phong cách giả tưởng cho các phần tử thẻ của mình Sử dụng nhiều hoạt ảnh trên một yếu tố luôn là một thách thức vì nó có thể dễ dàng làm hỏng toàn bộ trải nghiệm. Tuy nhiên, tác giả của thẻ bootstrap này đã cân bằng hoạt ảnh một cách thông minh để mang lại trải nghiệm sống động. Người sáng tạo đã sử dụng các hình ảnh động lấp lánh, hiệu ứng nổi mượt mà và hiệu ứng chuyển đổi ánh sáng trong thiết kế này. Bạn có thể xem toàn bộ tập lệnh mã để có ý tưởng rõ ràng về cách thiết kế này hoạt động Thông tin / Tải xuống Bản trình diễn Thẻ sản phẩm BootstrapThẻ sản phẩm Bootstrap được sử dụng rộng rãi trong các thiết kế cửa hàng trực tuyến hiện đại để mang lại trải nghiệm mua sắm dễ dàng hơn cho người dùng. Thẻ sản phẩm động này cho phép người dùng chọn màu & kích thước sản phẩm và thêm vào giỏ hàng mà không cần tải trang sản phẩm. Các yếu tố thông minh như thế này sẽ giúp trải nghiệm mua hàng dễ dàng hơn mà còn giúp người dùng nhìn thấy nhiều sản phẩm trên trang web của bạn. Bạn có thể sử dụng ví dụ thẻ bootstrap này trên các trang web và ứng dụng di động vì tính chất thông minh, linh hoạt của nó. Nếu bạn là nhà phát triển Shopify, hãy xem bộ sưu tập chủ đề Shopify đơn giản của chúng tôi Thông tin / Tải xuống Bản trình diễn Băng chuyền thẻ Bootstrap ngangĐúng như tên gọi, người sáng tạo đã sử dụng thẻ bootstrap cho băng chuyền. Tất cả các thông tin liên quan được đưa ra trong không gian nhất định. Ngoài ra, nền hình ảnh lớn làm cho thẻ hấp dẫn. Bạn thậm chí có thể thêm hiệu ứng di chuột vào thẻ để làm cho nó sống động hơn. Vì thẻ này sử dụng khung Bootstrap4 mới nhất và tập lệnh CSS3 nên nó có thể xử lý tất cả các hiệu ứng hiện đại mà không gặp sự cố nào. Tệp mã là tệp có thể tải xuống để bạn có thể sử dụng dễ dàng với bất kỳ trình chỉnh sửa mã nào bạn thích và sử dụng nó trong dự án của bạn mà không gặp sự cố nào Thông tin / Tải xuống Bản trình diễn Mẫu thẻ Bootstrap thị saiĐây là lựa chọn tốt nhất nếu bạn đang tìm kiếm một thẻ bootstrap với các hiệu ứng di chuột và thị sai tương tác. Mặc dù đây là một mô hình khái niệm, nhưng các chi tiết được thực hiện cẩn thận, như đã thấy trong trang web hoặc ứng dụng cuối cùng. Vì ý tưởng thiết kế dựa trên chuyển động của con trỏ nên mẫu thẻ bootstrap này phù hợp trên trang web hơn là trên ứng dụng di động. Các chuyển động của bóng cũng được hiệu chỉnh thông minh trong mẫu này để mang lại cảm giác chân thực cho thiết kế. Thiết kế này sử dụng đồng thời nhiều hiệu ứng và người sáng tạo đã pha trộn chúng một cách đẹp mắt để tạo ra trải nghiệm người dùng phong phú, làm cho nó trở thành lựa chọn tốt nhất cho các nhà thiết kế giao diện người dùng hiện đại Thông tin / Tải xuống Bản trình diễn Đập vỡ- Bộ giao diện người dùng BootstrapSmash là bộ giao diện người dùng đa năng cho các trang web và ứng dụng di động. Bạn nhận được tất cả các yếu tố giao diện người dùng cơ bản trong bộ công cụ này để bỏ qua các công việc nhàm chán và tập trung vào khía cạnh sáng tạo. Các yếu tố thẻ khác nhau được đưa ra trong gói này để cho phép bạn trình bày nội dung gọn gàng cho khán giả. Vì là bộ giao diện người dùng đa năng nên các hiệu ứng hoạt ảnh được giữ ở mức tối thiểu nhất có thể. Bạn vẫn có thể thêm các hiệu ứng hoạt hình vào các thành phần nếu muốn. Người tạo đã viết cấu trúc mã một cách chu đáo để bạn có thể dễ dàng thêm các hiệu ứng và tính năng tùy chỉnh vào các phần tử Thông tin / Tải xuống Thẻ – BTS trên SoompiMột trong những lợi thế lớn nhất của giao diện người dùng thẻ là quản lý nội dung và sắp xếp chúng một cách hấp dẫn. Thẻ bootstrap dễ dàng hoạt động với cả đầu vào cảm ứng và chuột, chúng rất tự nhiên khi sử dụng. Trong ví dụ về thẻ bootstrap này, bạn nhận được các thẻ hiển thị nội dung liên quan đến một chủ đề cụ thể. Nhà phát triển có các mũi tên điều hướng để người dùng dễ dàng chuyển đổi giữa các thẻ. Mặc dù đây là một thẻ nhỏ đơn giản nhưng hiệu ứng di chuột được sử dụng để mở rộng thẻ và cung cấp tổng quan ngắn gọn về nội dung. Vì là mẫu concept nên chưa hỗ trợ cử chỉ vuốt. Nhưng bạn có thể điều chỉnh mã để thêm cử chỉ vuốt Thông tin / Tải xuống Bản trình diễn thẻ hoạt hìnhHiệu ứng hoạt hình và chuyển tiếp tạo nét đặc trưng cho thiết kế của bạn. Vì các khung phát triển web hiện đại hỗ trợ nhiều hiệu ứng hoạt hình nhẹ, bầu trời là giới hạn cho trí tưởng tượng của bạn. Trong ví dụ này, nhà phát triển đã cung cấp cho chúng ta 24 loại hiệu ứng động cho các lá bài. Tất cả các hình ảnh động của thẻ đều ở mức tối thiểu và không chiếm nhiều không gian màn hình. Do đó, bạn có thể sử dụng hiệu ứng chuyển đổi và hoạt hình này trên các trang web chuyên nghiệp mà không cần do dự. Toàn bộ cấu trúc mã được sử dụng để tạo 24 thẻ hoạt hình khác nhau này được chia sẻ với bạn trên trình chỉnh sửa CodePen. Chỉ cần chọn thẻ bạn thích và bắt đầu chỉnh sửa nó Thông tin / Tải xuống Bản trình diễn Thẻ tin tức – Chỉ CSSThẻ tin tức đang trở nên khá phổ biến hiện nay. Ngay cả ứng dụng Google Tin tức được thiết kế lại cũng tổng hợp tất cả các tin tức liên quan dưới dạng thành phần thẻ. Nếu bạn cũng muốn trình bày tin tức của mình dưới dạng thẻ, thiết kế thẻ này có thể mang đến cho bạn một số ý tưởng mới. Hình ảnh được giữ làm trung tâm thu hút trong thiết kế này. Do đó người dùng có thể có ý tưởng trước khi xem toàn bộ bài viết. Các hiệu ứng di chuột nhỏ cũng được sử dụng để làm sinh động phần tử. Nhìn chung, nó là một thẻ tin tức lớn được thiết kế hợp lý với tất cả các tính năng cơ bản được thực hiện hoàn hảo. Thêm vào đó, nó là một thiết kế dựa trên tập lệnh CSS thuần túy. Do đó, bạn có thể sử dụng thiết kế này một cách dễ dàng trên trang web/ứng dụng của mình Thông tin / Tải xuống Bản trình diễn Thẻ thông tinTrong thế giới web giàu nội dung này, người sáng tạo đang áp dụng các kỹ thuật khác nhau để làm cho nội dung dễ tiếp thu. Một trong những kỹ thuật hiệu quả như vậy là trình bày nội dung dưới dạng nội dung có kích thước vừa phải. Người sáng tạo đã sử dụng thiết kế thẻ một cách hiệu quả trong thiết kế này cho chiến lược nội dung có kích thước vừa phải. Hiệu ứng hình ảnh giống như 3D mang lại cho thiết kế thẻ này cảm giác tương tác. Nếu bạn sử dụng hình ảnh tùy chỉnh cho nội dung của mình, bản chất tập trung vào hình ảnh của thiết kế thẻ này sẽ có ích. Lỗ hổng duy nhất trong thiết kế này là thiếu các tùy chọn điều hướng. Bạn không nhận được các mũi tên điều hướng hoặc thao tác cuộn đầu vào để tương tác với các thẻ. Nếu bạn dự định sử dụng thiết kế này cho dự án của mình, bạn có thể cần khắc phục sự cố tùy chọn điều hướng này Thông tin / Tải xuống Bản trình diễn Thẻ liên hệCác biểu tượng được phóng to khi người dùng di chuột qua nó, giúp tương tác dễ dàng hơn rất nhiều. Một thẻ liên hệ nhỏ gọn sẽ luôn giúp bạn dễ dàng chia sẻ hồ sơ của mình trên các nền tảng khác nhau. Thiết kế thẻ liên hệ này có thể hữu ích nếu bạn định liệt kê tất cả các liên kết truyền thông xã hội của mình trên thanh bên của trang web cá nhân của bạn. Một ưu điểm khác của thiết kế này là nó sử dụng tập lệnh HTML và CSS mới nhất. Do đó, bạn có thể dễ dàng sử dụng mã trong dự án của mình và có thể giới thiệu các tính năng và yếu tố mới mà không mất nhiều thời gian. Thông tin / Tải xuống Bản trình diễn Thẻ ngang với hoạt hình mờ dầnThiết kế thẻ ngang này sẽ là một lựa chọn tốt nếu thẻ của bạn cần xử lý các đoạn trích dài như trong trang chủ blog. Do thiết kế theo chiều ngang, bạn có đủ không gian để hiển thị đoạn trích bài đăng trên blog và hình ảnh trên blog. Hoạt hình cuộn mượt mà cũng được cung cấp trong mẫu này, vì vậy bạn cũng có thể sử dụng thiết kế thẻ này cho các danh sách dài. Bạn thậm chí có thể thêm các băng chuyền hình ảnh nhỏ vào các thẻ này để thu hút người dùng. Xem bộ sưu tập thiết kế băng chuyền bootstrap của chúng tôi để biết thêm các thiết kế tương tác và đáp ứng Thông tin / Tải xuống Bản trình diễn Fork it – Một lá bàiNgười sáng tạo đã cho chúng tôi các thiết kế thẻ đẹp với các kích cỡ khác nhau trong ví dụ này. Thẻ được thiết kế gọn gàng cho phép bạn dễ dàng thêm văn bản, hình ảnh và các yếu tố khác trong không gian nhất định. Hiệu ứng đổ bóng và độ sâu được sử dụng thông minh để mang lại cái nhìn chân thực cho lá bài. Vấn đề duy nhất với thiết kế thẻ này là các yếu tố trong thẻ này không hoạt động. Bạn có thể sử dụng thiết kế CSS của ví dụ thẻ bootstrap này và có thể thêm các yếu tố và tính năng tùy chỉnh của riêng bạn. Toàn bộ code script được chia sẻ với bạn trên CodePen editor. Bạn có thể cắt mã và sử dụng nó trong thiết kế của mình dựa trên nhu cầu của bạn Thông tin / Tải xuống Bản trình diễn Thẻ Clash of ClansĐúng như tên gọi, người sáng tạo đã sử dụng các nhân vật nổi tiếng của trò chơi Clash of Clans trong thiết kế thẻ bài này. Thiết kế thẻ này sẽ là một lựa chọn tốt nếu bạn định sử dụng thẻ cho các sản phẩm của mình hoặc cho các thành viên trong nhóm của bạn xem. Thiết kế thẻ dài mang lại cho bạn nhiều không gian để hiển thị hình ảnh và văn bản rõ ràng cho khán giả. Để mang lại hiệu ứng chuyển tiếp mượt mà và hình ảnh chân thực cho hình ảnh nhân vật, người sáng tạo đã sử dụng một vài dòng javascript trong ví dụ về thẻ bootstrap này. Bằng cách thực hiện một vài thay đổi đối với mã, bạn có thể lắp thẻ này vào thiết kế của mình Thông tin / Tải xuống Bản trình diễn Tiến sĩ. Thẻ thuốc MarioĐây là một ví dụ thẻ bootstrap khác được thiết kế dựa trên trò chơi. Người sáng tạo đã sử dụng trò chơi arcade cũ, Dr. Thuốc Mario cho thẻ. Với sự trợ giúp của các khung phát triển web hiện đại, người sáng tạo đã tạo ra một thiết kế thẻ giống như những viên thuốc tuyệt đẹp. Thiết kế kiểu Chia màn hình sử dụng các thẻ bootstrap này để cung cấp cho bạn không gian để thêm hình ảnh và văn bản trong không gian nhất định. Giống như ví dụ về thẻ Fork It đã đề cập ở trên, người tạo chỉ cung cấp cho bạn thiết kế cơ bản. Bạn không nhận được bất kỳ yếu tố hoặc tính năng tương tác nào trong thiết kế này. Bằng cách sử dụng thẻ này làm cơ sở, bạn có thể tạo thẻ tùy chỉnh của mình với các tính năng bạn muốn Thông tin / Tải xuống Bản trình diễn Thẻ phương tiện hoạt hình đơn giảnĐây là một thiết kế thiệp đơn giản và có thể áp dụng thực tế. Hiệu ứng di chuột mượt mà được sử dụng để thêm sức sống cho nội dung phương tiện trên thẻ. Vì là mô hình ý tưởng nên người tạo chỉ sử dụng hình ảnh trong bản demo, nhưng bạn cũng có thể thêm các loại nội dung khác. Cũng giống như thiết kế, tập lệnh mã của thiết kế này cũng đơn giản và rõ ràng. Người tạo đã tạo thẻ này chủ yếu bằng cách sử dụng tập lệnh HTML và CSS3. Do đó, làm việc với mẫu này sẽ là một công việc dễ dàng và có thể dễ dàng triển khai trên trang web của bạn mà không gặp bất kỳ sự cố nào Thông tin / Tải xuống Bản trình diễn Thẻ hồ sơ CSSNếu bạn đang tạo trang web cá nhân hoặc trang web của người làm nghề tự do, việc thêm thẻ hồ sơ tương tác sẽ giúp người dùng dễ dàng liên hệ với bạn thông qua các liên kết hồ sơ mạng xã hội được cung cấp. Người tạo đã cung cấp cho chúng tôi một thiết kế thẻ hồ sơ hoạt hình gọn gàng chuyên nghiệp trong ví dụ này. Hiệu ứng hoạt hình mượt mà và nhanh chóng để người dùng có thể dễ dàng tương tác với thẻ này. Do thiết kế đơn giản này, bạn có thể sử dụng chiếc xe này ngay cả trên thanh bên của trang web của mình. Ví dụ: bạn có thể sử dụng thẻ này trên thanh bên để hiển thị thông tin chi tiết và tiểu sử của tác giả trên trang web blog cá nhân Thông tin / Tải xuống Bản trình diễn Lật Bài – PhimTrong ví dụ này, bạn nhận được hoạt ảnh lật thẻ để hiển thị hình ảnh và các nội dung liên quan. Hiệu ứng xoay thị sai mượt mà và trôi chảy, điều mà người dùng sẽ rất thích. Nếu bạn không thích hiệu ứng xoay thị sai, hãy xem bộ sưu tập hiệu ứng hoạt hình lật thẻ CSS của chúng tôi. Đến với thiết kế này, nhà phát triển đã tối ưu hóa thiết kế này cho máy tính để bàn. Ngay cả hoạt ảnh lật thẻ cũng sử dụng trình kích hoạt di chuột. Bạn phải điều chỉnh mã một chút để làm cho nó thân thiện với thiết bị di động. Ngoài ra, thiết kế này rất tuyệt và có thể được sử dụng trên bất kỳ phần nào của trang web Thông tin / Tải xuống Bản trình diễn Khái niệm thẻ thành viên rê bóngMột nơi khác mà thẻ được sử dụng là phần chi tiết hồ sơ. Giống như đặt tiện ích mạng xã hội trên thanh bên, bạn có thể sử dụng thẻ để hiển thị một số thông tin hồ sơ cơ bản. Trong khái niệm này, nhà phát triển đã sử dụng thẻ Bootstrap để hiển thị các bức ảnh Dribbble của một người dùng cụ thể. Ngoại trừ các mũi tên, mọi thứ khác đều hoạt động trơn tru trong thiết kế này. Hiệu ứng chuyển tiếp kéo thẻ đàn hồi trông tuyệt vời trên tiện ích nhỏ này. Thiết kế và cấu trúc mã cũng đơn giản trong ví dụ này. Toàn bộ thiết kế được tạo bằng tập lệnh HTML5 và CSS3, do đó bạn có thể dễ dàng sử dụng mã này Thông tin / Tải xuống Bản trình diễn lật thẻCác thiết kế thực tế tự nhiên đang trở nên phổ biến đối với các chủ sở hữu trang web sáng tạo. Các yếu tố ảo được kết hợp tốt trong môi trường và hoạt động như một yếu tố bất ngờ cho người dùng. Hiệu ứng hoạt hình lật thẻ này là một trong những khái niệm sáng tạo như vậy. Mặc dù thiết kế ban đầu sử dụng thẻ poker trong thiết kế, nhưng bạn có thể thay thế nó bằng thiết kế thẻ của mình. Một lần nữa, đây cũng là hoạt ảnh lật thẻ được kích hoạt khi di chuột, hoạt động trôi chảy. Và, nhà phát triển đã cung cấp cho chúng tôi cả hoạt ảnh vào và ra trong ví dụ này. Thiết kế thẻ dựa trên CSS3 đơn giản này rất dễ chỉnh sửa và sử dụng trên trang web của bạn Thông tin / Tải xuống Bản trình diễn Quẹt thẻBạn có thể hiểu từ cái tên rằng các thẻ bootstrap này tuân theo cử chỉ vuốt. Cử chỉ vuốt dường như là cách tự nhiên nhất để tương tác với ứng dụng trên điện thoại thông minh hiện đại. Ngay cả Apple cũng đã giới thiệu cử chỉ vuốt trên iPhone X và các mẫu máy để người dùng có trải nghiệm tốt hơn. Thiết kế này có thể cung cấp cho bạn một số ý tưởng nếu bạn cũng đang có kế hoạch tạo thẻ bằng cử chỉ vuốt. Nhà phát triển thiết kế thẻ này không chỉ sử dụng cử chỉ vuốt mà còn sử dụng các thao tác chạm để mở rộng chi tiết thẻ. Bạn có các nhãn ở đầu màn hình để hiển thị tên thẻ. Về iPhone, hãy xem các mô hình iPhone của chúng tôi để giới thiệu các thiết kế giao diện thẻ di động của bạn một cách trang nhã cho người dùng Thông tin / Tải xuống Bản trình diễn Thanh trượt thẻ blog đáp ứngTác giả của thiết kế này đã hợp nhất thanh trượt và thẻ để giúp bạn tạo thành phần tương tác. Trong thiết kế danh thiếp này, bạn có một không gian riêng để làm nổi bật và hiển thị hình ảnh. Hiệu ứng đổ bóng và màu chuyển sắc được sử dụng thông minh để trình bày nội dung một cách trang nhã cho người dùng. Thiết kế thẻ mặc định hỗ trợ kiểm soát cuộn để nó hoạt động hoàn hảo trên cả phiên bản dành cho thiết bị di động và máy tính để bàn của trang web của bạn. Thiết kế tổng thể trông tuyệt vời, nhưng vẫn còn chỗ để thêm sự sáng tạo của bạn. Ví dụ: nút gradient được giữ như một yếu tố lý tưởng. Bạn có thể sử dụng một số hiệu ứng để thêm gia vị cho thiết kế. Hãy xem bộ sưu tập nút gradient CSS của chúng tôi để có thêm ý tưởng thiết kế Thông tin / Tải xuống Bản trình diễn Thẻ Infographic sử dụng FlexboxThẻ luôn cung cấp một cái nhìn phong phú cho nội dung. Sử dụng hình ảnh sẽ giúp bạn dễ dàng thu hút sự chú ý của người dùng. Mặc dù thiết kế này không có hình ảnh, nhưng nhà thiết kế đã sử dụng các hình dạng hình học và kiểu chữ để trình bày nội dung một cách hấp dẫn với người dùng. Loại thiết kế chuyên nghiệp này sẽ là một bổ sung tuyệt vời cho các trang web kinh doanh. Hiệu ứng hoạt hình tinh tế làm cho các thẻ thậm chí còn hấp dẫn hơn đối với người dùng. Một điểm khác với thẻ bootstrap này là nó được tạo hoàn toàn bằng cách sử dụng các tập lệnh CSS3 và HTML5. Do đó, bạn có thể dễ dàng sử dụng mã để tạo thiết kế thẻ tùy chỉnh của mình Thông tin / Tải xuống Bản trình diễn Hiệu ứng thị sai thanh trượt thẻThiết kế này có tất cả tiềm năng trở thành yếu tố thẻ cốt lõi trong bất kỳ ứng dụng di động nào. Trong thiết kế ban đầu, nhà phát triển đã coi nó như một thanh trượt toàn trang. Những thẻ trực quan phong phú này đặt sản phẩm ở phía trước và tất cả các thông tin liên quan ở trên cùng. Các loại thẻ này là lựa chọn tốt nhất cho các trang web và ứng dụng Thương mại điện tử. Ở trên cùng, bạn có khoảng trống để hiển thị giá sản phẩm và các nút kêu gọi hành động ở dưới cùng. Thiết kế đơn giản của những thẻ này cho phép nó được sử dụng như một tiện ích băng chuyền nhỏ hoặc như một yếu tố chính trong các ứng dụng di động Thông tin / Tải xuống Bản trình diễn Thẻ BootstrapĐây là những tấm thiệp trông đơn giản và thanh lịch để hiển thị hình ảnh và một vài dòng về. Thiết kế thẻ đơn giản này có thể được sử dụng trong trang danh mục đầu tư hoặc trong phần blog của trang chủ để hiển thị các bài viết mới nhất. Hiệu ứng di chuột được sử dụng để hiển thị nút kêu gọi hành động. Nếu bạn muốn duy trì sự đơn giản của thiết kế ngay cả trong nút kêu gọi hành động, bạn có thể đặt nó dưới dạng liên kết văn bản. Hãy xem bài đăng về kiểu liên kết CSS của chúng tôi để có thêm cảm hứng thiết kế Thông tin / Tải xuống Bản trình diễn Những thẻ không có ý nghĩaThẻ được sử dụng hiệu quả để trình bày một loạt sự kiện hoặc thông tin ở định dạng có kích thước vừa phải. Với cách tiếp cận thông minh này, người dùng dễ dàng tiếp thu thông tin và có xu hướng ghi nhớ lâu. Trong thiết kế thẻ này, nhà phát triển đã sử dụng các nhân vật hoạt hình trong thẻ để thể hiện thông tin liên quan đến họ. Các hiệu ứng chuyển đổi thẻ mượt mà và nhanh chóng để người dùng có thể dễ dàng chuyển sang các thẻ họ muốn. Trong thiết kế mặc định, chỉ hỗ trợ đầu vào các phím mũi tên trên bàn phím. Bạn có thể thêm hỗ trợ cử chỉ cuộn và vuốt để trực quan hơn. Để có hiệu ứng hoạt hình mượt mà, ví dụ về thẻ bootstrap này sử dụng một vài dòng javascript Thông tin / Tải xuống Bản trình diễn Hoạt hình thẻTừ chính cái tên, bạn có thể suy ra rằng ví dụ hoạt hình thẻ bootstrap này. Nhà phát triển đã sử dụng hiệu ứng hoạt hình dựa trên di chuột trong thiết kế này. Bản chất đơn giản của hoạt hình này làm cho nó trở thành lựa chọn tốt nhất cho thẻ hồ sơ và thẻ sản phẩm. Một khoảng trống cho liên kết văn bản được cung cấp ở góc dưới cùng bên phải, điều này sẽ hữu ích để bạn hướng người dùng đến các trang tương ứng. Do thiết kế ban đầu sử dụng các hình dạng hình học trong thiết kế nên nhà phát triển đã sử dụng các hình dạng này một cách hiệu quả trong hiệu ứng di chuột. Nếu bạn có các yếu tố hoặc hình ảnh khác, hãy xem bộ sưu tập hiệu ứng di chuột của chúng tôi để có thêm cảm hứng mà bạn có thể sử dụng trong thiết kế danh thiếp này Thông tin / Tải xuống Bản trình diễn Thẻ cuộn vô tậnNếu bạn định sử dụng thẻ trong thanh trượt hoặc băng chuyền, đoạn mã này có thể giúp bạn. Do kích thước linh hoạt của chúng, thẻ được sử dụng ở các phần khác nhau của trang web. Đây là một ví dụ đơn giản về băng chuyền trượt tự động. Các thẻ được làm dài hơn và rộng hơn, vì vậy bạn có thể thêm bất kỳ loại nội dung nào vào thẻ này. Vì nó là một ví dụ về hiệu ứng cuộn, nên nhà phát triển chủ yếu sử dụng CSS và Javascript trong mã. Bạn có thể điều chỉnh mã dựa trên loại nội dung bạn sẽ sử dụng Thông tin / Tải xuống Bản trình diễn Hoạt hình thẻHình dạng sáng tạo tùy chỉnh được sử dụng rộng rãi trong thiết kế web hiện đại. Trong thẻ này, người tạo đã sử dụng sóng hình sin giống như hình dạng hữu cơ để phân tách hình ảnh và nội dung. Thiết kế thẻ hình ảnh sáng tạo này sẽ là một bổ sung hoàn hảo cho các trang web du lịch hiện đại. Có nhiều khoảng trống cho nội dung văn bản để giải thích về hình ảnh tương ứng. Các văn bản được in đậm và rõ ràng để người dùng có thể dễ dàng đọc nội dung. Nếu muốn, bạn có thể thêm một liên kết văn bản ở cuối thẻ để hướng người dùng đến các trang mong muốn. Một ưu điểm khác với hoạt hình thẻ này là nó hoàn toàn được tạo bằng tập lệnh CSS3. Do đó, bạn có thể kết hợp mã này trong thiết kế hiện tại của mình Thông tin / Tải xuống Bản trình diễn Di chuột để biết thông tin sản phẩmTác giả của thiết kế này đã sử dụng thẻ để hiển thị hình ảnh sản phẩm. Nhà phát triển đã sử dụng hiệu ứng di chuột sáng tạo để làm cho nó trở nên độc đáo so với các thẻ bootstrap còn lại trong danh sách này. Vì là hình ảnh sản phẩm nên nhà thiết kế đã sử dụng các cạnh để thể hiện gọn gàng các nội dung liên quan. Hầu hết các nhà thiết kế sử dụng thiết kế menu phụ để hiển thị các chi tiết liên quan đến sản phẩm của trang web. Nhưng trên thiết bị di động, chúng ta có thể sử dụng các yếu tố thiết kế sáng tạo để cung cấp các tính năng tương tự mà không tốn nhiều không gian màn hình. Nhà phát triển đã sử dụng tập lệnh HTML và CSS3 để tạo mô hình khái niệm này Thông tin / Tải xuống Bản trình diễn Thẻ hồ sơThẻ hồ sơ được sử dụng rộng rãi trong cả thiết kế giao diện người dùng web và thiết bị di động. Xem tất cả các nội dung có liên quan ở một nơi làm cho thẻ trở thành yếu tố tốt hơn để hiển thị thông tin hồ sơ. Thẻ hồ sơ này lớn hơn một chút, mang lại cho bạn nhiều không gian để thêm chi tiết hồ sơ và các nút kêu gọi hành động. Việc sử dụng các hiệu ứng chuyển màu và phát sáng làm cho các yếu tố khác biệt với nhau. Bạn có thể giảm kích thước thẻ và xóa các phần tử không mong muốn nếu muốn. Thiết kế thẻ hồ sơ này sẽ là một bổ sung tốt cho các trang web cá nhân và danh mục đầu tư. Để biết thêm hiệu ứng phát sáng, hãy xem bộ sưu tập hiệu ứng phát sáng CSS của chúng tôi Thông tin / Tải xuống Bản trình diễn Băng chuyền thẻ thủ thuật CSSTrong ví dụ về thẻ bootstrap này, nhà phát triển đã cung cấp cho chúng tôi một gói thẻ được sắp xếp cùng nhau. Khi di chuột qua thẻ, bạn có thể xem chi tiết đầy đủ trong thẻ. Người tạo thẻ này đã sử dụng thẻ để hiển thị thanh thống kê hình tròn. Bạn có thể sử dụng thiết kế này như vậy trong trang web cá nhân để thể hiện kỹ năng của mình. Để làm rõ giá trị, bạn có thể hiển thị các giá trị số trên thẻ. Trên nền đen sạch sẽ, có thể nhìn thấy các yếu tố đầy màu sắc. Vì thiết kế này được tạo hoàn toàn bằng tập lệnh CSS3, nên bạn có thể sử dụng bất kỳ cách phối màu hiện đại nào trong thiết kế này Thông tin / Tải xuống Bản trình diễn Thẻ người chơi/người dùngGamification là một trong những chiến lược tương tác được các chuyên gia sử dụng để khiến người dùng/nhân viên tích cực tham gia vào một sự kiện hoặc chiến dịch. Nếu bạn đang áp dụng chiến lược trò chơi hóa như vậy, thẻ này có thể giúp hiển thị hiệu suất của người dùng của bạn. Thiết kế được phân đoạn giúp bạn sắp xếp nội dung và hiệu ứng di chuột được sử dụng để hiển thị nhiều nội dung hơn ở một nơi. Ví dụ về thẻ bootstrap này được lấy cảm hứng từ Play Game của Google, nơi bạn có thể xem thành tích và các hoạt động khác của người dùng. Toàn bộ khái niệm được thiết kế bằng tập lệnh HTML5 và CSS3. Các cấu trúc mã được xử lý đúng cách sẽ giúp công việc tùy chỉnh của bạn dễ dàng hơn Thông tin / Tải xuống Bản trình diễn Thẻ BootstrapTrong ví dụ này, nhà phát triển đã cung cấp cho chúng tôi ba thiết kế thẻ đơn giản. Ngoài các thẻ vừa và nhỏ thông thường, người tạo cũng đã cung cấp cho chúng tôi một thẻ xã hội trong ví dụ này. Đưa ra tùy chọn thích và chia sẻ ngay bên dưới nội dung sẽ tăng cơ hội nội dung tiếp cận được lượng khán giả lớn hơn. Vì nó chỉ là một mô hình khái niệm, các tùy chọn không đầy đủ chức năng và ít hiệu ứng hoạt hình được sử dụng hơn. Toàn bộ cấu trúc mã được sử dụng để tạo thiết kế này được chia sẻ với bạn trong trình chỉnh sửa CodePen, do đó bạn có thể chỉnh sửa và trực quan hóa kết quả trước khi sử dụng nó trong dự án của mình Thông tin / Tải xuống Bản trình diễn Hiệu ứng gấp thẻ xuốngThẻ bootstrap này là một lựa chọn tốt nếu bạn đang sử dụng nội dung lồng nhau. Đúng như tên gọi, thẻ gập xuống để hiển thị thông tin bổ sung. Vì là thiết kế ý tưởng nên có một số sai sót trong thiết kế mặt trước, nhưng không có gì là nghiêm trọng. Thiết kế và cấu trúc mã được giữ rất đơn giản trong thiết kế này. Do cấu trúc đơn giản này, bạn có thể thêm bất kỳ yếu tố bổ sung nào. Bạn có thể dễ dàng điều chỉnh mã và biến nó thành một yếu tố hoàn hảo trên trang web hoặc ứng dụng của mình Thông tin / Tải xuống Bản trình diễn Lật thẻ hoạt hìnhĐây cũng là một thiết kế thẻ hồ sơ, nhưng tác giả đã sử dụng hoạt ảnh lật trong thẻ này. Thẻ thực hiện một vòng xoay dọc đầy đủ để hiển thị thông tin của hồ sơ, điều này rất đẹp mắt. Vì thẻ này sử dụng mặt trước và mặt sau của thẻ nên bạn có đủ không gian cho hình ảnh và nội dung văn bản. Thiết kế mặc định có thể được sử dụng như vậy trong phần nhóm của trang web của bạn. Các hiệu ứng hoạt hình chiếm một số không gian theo chiều dọc, vì vậy bạn không cần phải sắp xếp lại các thành phần trang web khác. Để có trải nghiệm mượt mà, nhà phát triển đã sử dụng một vài dòng Javascript cùng với mã CSS3 Thông tin / Tải xuống Bản trình diễn Giao diện người dùng thẻ CSS thuần túyTrong thiết kế này, người sáng tạo đã sử dụng thẻ trong thanh trượt. Các hiệu ứng nảy được thêm vào các chuyển đổi thẻ, mang lại cho thiết kế lưới bị hỏng này một cái nhìn tự nhiên. Nếu bạn đang tìm kiếm một thiết kế thẻ thú vị, thẻ này chắc chắn sẽ gây ấn tượng với bạn. Nội dung văn bản được hiển thị trong thẻ có kích thước đầy đủ để bạn có thể rõ ràng và chi tiết cho người dùng. Tất cả các yếu tố vui nhộn và hiệu ứng hoạt hình sáng tạo này đều được tạo bằng tập lệnh CSS3. Do cấu trúc mã đơn giản này, bạn có thể dễ dàng sử dụng thiết kế này trong mẫu trang web sáng tạo của mình Thông tin / Tải xuống Bản trình diễn CSS khó di chuộtTricky CSS hover là một thiết kế thẻ điên rồ khác dành cho sản phẩm. Hình ảnh sản phẩm nổi và nền bán trong suốt mang đến cho thiết kế thẻ sản phẩm một diện mạo độc đáo. Lời kêu gọi hành động để thêm vào giỏ hàng và chi tiết sản phẩm được hiển thị trên thẻ. Các hiệu ứng hoạt hình mượt mà và rõ ràng, được người dùng yêu thích sử dụng trên thiết bị di động và máy tính để bàn Thông tin / Tải xuống Bản trình diễn Ảnh động lật thẻĐây là một ví dụ khác về thẻ bootstrap cho hoạt ảnh lật thẻ. Trong thiết kế này, nhà phát triển đã sử dụng hoạt ảnh lật từ trái sang phải. Vì đây là hiệu ứng hoạt hình được kích hoạt khi di chuột nên người dùng có thể xem nhanh thông tin. Hiệu ứng đổ bóng và độ sâu được sử dụng thông minh để tách thẻ khỏi nền. Thiết kế đơn giản này được tạo bằng tập lệnh HTML5 và CSS3. Vì nó là một bản demo, các văn bản được giữ nhỏ, nhưng bạn có thể tăng kích thước văn bản Thông tin / Tải xuống Bản trình diễn Thẻ FlexboxThẻ Flexbox là một ví dụ hoàn hảo về thiết kế thư viện dựa trên thẻ. Trong thiết kế này, người sáng tạo đã sử dụng thẻ theo hướng dọc. Ruy băng được sử dụng để làm nổi bật tiêu đề của thẻ, nếu bạn đang sử dụng thẻ làm bìa album, phần tử ruy băng này sẽ mang lại nét trang nhã cho thiết kế của bạn. Vì các thẻ được đóng gói chặt chẽ nên nhà phát triển đã giữ cho các hiệu ứng di chuột đơn giản và gọn gàng. Bằng cách thực hiện một số điều chỉnh đối với mã, bạn có thể sử dụng thiết kế thư viện thẻ này trong trang web của mình. Thiết kế thư viện này được tạo bằng tập lệnh CSS3 và được chia sẻ với bạn trên trình chỉnh sửa CodePen. Bạn có thể chỉnh sửa và trực quan hóa các tùy chỉnh của mình trong chính trình chỉnh sửa Làm cách nào để chèn thẻ trong Bootstrap?Tiêu đề thẻ được sử dụng bằng cách thêm. card-title thành thẻ . Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm. liên kết thẻ tới thẻ
Làm cách nào để tạo thẻ cột trong Bootstrap?Thành phần cột Thẻ Bootstrap 5 . Ví dụ cơ bản. sử dụng lớp. row-cols để kiểm soát số lượng cột lưới (bao quanh thẻ của bạn) mà bạn hiển thị trên mỗi hàng. . hai cột. sử dụng lớp. . Phản ứng nhanh nhẹn. Đây là. . khoảng cách. Sử dụng máng xối để thêm đệm giữa các cột của bạn. . chiều cao bằng nhau. Khi bạn cần chiều cao bằng nhau, hãy thêm Làm cách nào để căn chỉnh thẻ trong Bootstrap?Trong bootstrap 4, để căn giữa thẻ trong cột lưới, hãy sử dụng
.
Làm cách nào để căn 3 thẻ theo chiều ngang Bootstrap?Điều đúng đắn là các thẻ được căn chỉnh theo chiều ngang, tôi làm điều này như thế nào? . trái; rõ ràng. không ai; . use css - something like float:left;clear:none; applied to each card. |
