Bootstrap đáp ứng lịch
|
Tại W3Schools, bạn sẽ tìm thấy một tài liệu tham khảo Bootstrap đầy đủ về tất cả các lớp CSS, Thành phần và plugin JavaScript - tất cả đều có các ví dụ "Tự dùng thử" Show Bootstrap Chủ đề / MẫuChúng tôi đã tạo một số Mẫu Bootstrap mà bạn có thể sử dụng. Chúng hoàn toàn miễn phí để sử dụng Bootstrap 5 so với. Bootstrap 3 & 4Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn; Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng Nhóm ProFromGo gần đây đã hoàn thành một dự án cho người bạn mới Dave Nelsen của chúng tôi tại Dialog Consulting. Mục tiêu chính của dự án là mang đến cho trang Dialog một sự thay đổi về kiểu dáng, để làm cho nó phản ứng nhanh với các thiết bị di động và để đảm bảo rằng tất cả nó đều được cung cấp bởi CMS yêu thích của chúng tôi, WordPress Dave cũng đã chọn gói Google Apps mà tôi thiết lập và triển khai cho miền của anh ấy để bao gồm tất cả các tính năng ưu việt của Google Apps như Gmail, Lịch Google, v.v. Là một nhà chiến lược và diễn giả truyền thông xã hội, Dave là một người thường xuyên di chuyển nên giải pháp dựa trên đám mây này thực sự phù hợp với mô hình kinh doanh và phong cách sống của anh ấy. Anh ấy thực hiện các cuộc nói chuyện và thuyết trình trên khắp Bắc Mỹ với lịch trình du lịch có thể dễ dàng cạnh tranh với Obama Do lịch diễn thuyết điên cuồng của Dave, việc nhúng Lịch Google của anh ấy vào trang web để khách hàng, bạn bè, gia đình và các đồng nghiệp khác của anh ấy đều có thể theo dõi anh ấy và nơi ở của anh ấy, theo cách mà anh ấy có thể cập nhật nó từ bất kỳ tài khoản nào của anh ấy. Xem xét việc Google hoàn toàn khuyến nghị thiết kế web đáp ứng, tôi thấy hơi thú vị khi nhiều sản phẩm của Google vẫn chỉ khả dụng ở định dạng chiều rộng cố định. Nhưng nếu bạn đọc đến đây, tôi chắc rằng bạn đang hy vọng sẽ có một giải pháp trong tương lai gần, và tôi đảm bảo với bạn. có Giải pháp của chúng tôi dành cho Dave cho phép chúng tôi làm cho Lịch Google phản hồi nhanh bao gồm hai phần Phần một. Tạo Bộ chứa iFrame đáp ứngTôi đã mượn một đoạn mã và chính ý tưởng đó từ một bài đăng blog khác mà tôi bắt gặp trong hành trình tìm kiếm giải pháp của mình. Bạn sẽ thấy nếu bạn dành thời gian để truy cập bài đăng đó, nó chủ yếu giải quyết toàn bộ vấn đề như đã đề cập ở đây trong phần một, nhưng tôi không viết toàn bộ bài đăng trên blog này chỉ để chia sẻ giải pháp mà tôi đã tìm thấy ở nơi khác. Tôi tiến thêm một bước nữa trong phần hai. Điều đó đang được nói, đơn giản là để thuận tiện, đây là mã tôi đã mượn từ ThemeLoom, tôi hy vọng họ sẽ không phiền khi xem xét việc tôi đã ném cho họ hai liên kết và trích dẫn nguồn của tôi. ) Đầu tiên, thêm mã này vào biểu định kiểu CSS của bạn [code] .responsive-iframe-container { .responsive-iframe-container iframe, Và có Phần "1a", bạn sẽ muốn bọc mã nhúng Lịch Google của mình bên trong vùng chứa cho trang web của bạn biết nội dung này sẽ tự thay đổi kích thước một chút [mã số] [/mã số] Phần hai. Tận dụng các lớp có sẵn của Bootstrap và các tùy chọn tùy chỉnh của Lịch GoogleKhi bạn đã thiết lập vùng chứa iframe đáp ứng của mình, bạn vẫn có thể thực hiện một số điều nữa để điều chỉnh điều này chặt chẽ hơn một chút để mang lại trải nghiệm người dùng tối ưu cho khách truy cập của bạn Tôi đã tận dụng một số lớp có sẵn trong Bootstrap và kết hợp chúng với một số tùy chọn tùy chỉnh trong công cụ nhúng của Lịch Google. Khi được kết hợp với nhau, chúng sẽ tạo ra trải nghiệm người dùng hoàn hảo Điều đầu tiên bạn cần làm quen để tận dụng các lớp tiện ích đáp ứng Bootstrap CSS hiện có sẽ là bảng này, mà tôi đã chụp màn hình để thuận tiện  Hai lớp tiện ích đáp ứng sẽ được sử dụng đặc biệt trong ứng dụng này là "điện thoại hiển thị" và "điện thoại ẩn". " Bằng cách sử dụng hai tùy chọn này và Trình trợ giúp nhúng Lịch Google, tôi thực sự đã nhận được mã nhúng iFrame cho HAI phiên bản lịch khác nhau
P. S. - Bạn có thể truy cập trình trợ giúp nhúng Lịch Google bằng cách đăng nhập vào Lịch Google mà bạn muốn thực hiện phản hồi nhanh và theo dõi đường dẫn breadcrumb này
Khi bạn ở trên trang này, bạn sẽ thấy toàn bộ phần được mô tả là "Nhúng Lịch này" và ở bên phải, bạn sẽ thấy một liên kết có nội dung "Tùy chỉnh màu sắc, kích thước và các tùy chọn khác. " Công cụ sẽ trông như thế này Khái niệm cốt lõi ở đây là hiển thị "Chế độ xem lịch" lớn hơn của Lịch Google của bạn trên máy tính bảng và máy tính để bàn và "Chế độ xem chương trình nghị sự" hẹp hơn cho khách truy cập sử dụng điện thoại di động Bạn có thể sẽ muốn chơi đùa một chút với các tùy chọn chiều rộng và chiều cao để nêm nếm cho hợp khẩu vị, nhưng bạn có thể thấy những gì cuối cùng tôi đã đạt được khá dễ dàng bằng cách quét đoạn mã cuối cùng mà tôi đã dán bên dưới Và không cần phải quảng cáo thêm, đây là mã cuối cùng mà tôi đã nhúng vào trang web của Dave để bạn có thể xem thành phẩm. bạn cũng có thể xem qua trang web phản hồi thực tế nơi Lịch Google được nhúng và chơi với chiều rộng của trình duyệt bằng cách thay đổi kích thước để xem kết quả cuối cùng trong hành động [mã số] [/mã số] Giờ đây, Dave có thể quản lý Lịch Google của mình từ thiết bị di động, máy tính xách tay, máy tính để bàn hoặc bất kỳ nơi nào khác mà anh ấy có kết nối Internet và gần như ngay sau khi anh ấy lưu một sự kiện mới, trang "Nói" trên trang web của anh ấy gần như được cập nhật ngay lập tức. Thậm chí tốt hơn, khách truy cập kiểm tra trang web của anh ấy trên thiết bị di động sẽ thấy chủ đề WordPress tùy chỉnh đáp ứng tuyệt vời của anh ấy hoàn chỉnh với lịch phát biểu lên đến từng phút |
