Thanh tiến trình dòng thời gian ngang Bootstrap
|
Kích thước tập tin. 4. 93 KBViews Total. 10278Cập nhật lần cuối. 23/01/2018 04. 01. 00 UTC Ngày Xuất bản. 23/01/2018 04. 02. 20 UTCTrang web chính thức. Tới trang webGiấy phép. MIT Show
Tải xuống bản trình diễn Thêm trong danh mục này Xem các plugin được đề xuất TOP 100 Plugin jQuery 2022 Chrome, IE8+, FireFox, Opera, Safari#Dòng thời gian#Bootstrap  cột mốc một plugin dòng thời gian jQuery sử dụng thành phần thanh tiến trình Bootstrap để tạo dòng thời gian ngang với các cột mốc tùy chỉnh Làm thế nào để sử dụng nó1. Plugin yêu cầu Phông chữ Phông chữ Biểu tượng Tuyệt vời cho các dấu tích và dấu kiểm 2. Bao gồm thư viện jQuery và khung Bootstrap 3 hoặc Bootstrap 4 để cung cấp thành phần thanh tiến trình cho dòng thời gian 3. Bao gồm các tệp của plugin cột mốc jQuery trên trang 4. Tạo vùng chứa mà bạn muốn hiển thị dòng thời gian 5. Tạo dòng thời gian bên trong vùng chứa và xác định một mảng nhãn cho mỗi cột mốc $('#demo').milestones({
stage: 5,
checks: 3
labels: ["Milestone 1","Milestone 2","Milestone 3", ...]
});
6. Tất cả các tùy chọn cấu hình mặc định $('#demo').milestones({
// Array of labels for each milestone
labels : ["Step1","Step2","Step3","Step4"],
// The amount of stages
stage : 2,
// Checked milestones
checks : 2,
// CSS class of Checked milestones
checkclass : 'checkmark'
});
Plugin jQuery tuyệt vời này được phát triển bởi stemo40. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức Hãy ghi nhớ từng danh mục đầu tư riêng lẻ thể hiện một nghệ nhân theo cách mới lạ và mãn nhãn. Những người hít thở với sự tiến bộ và sáng tạo, trong tích tắc sẽ thu hút sự chú ý và khiến bạn ở lại. Tất cả những điều được xem xét, hôm nay chúng tôi sẽ nạp lại hộp công cụ của bạn với một số đoạn mã tuyệt vời, nhanh chóng và gọn gàng giúp tạo niềm vui cho danh mục đầu tư của riêng bạn với một trong những thành phần cơ bản của các dự án kinh doanh như vậy. một quá trình năng động và mê hoặc của các sự kiện. Vì vậy, trong bài viết này, chúng ta sẽ thảo luận về một ví dụ khác về Bootstrap 4 Dòng thời gian ngang (một số dòng thời gian dọc và đáp ứng) bằng HTML, CSS và Javascript Trên thực tế, nếu bạn đi sâu vào bất kỳ hoạt động nào trong số này, bạn sẽ thấy nó không nhiều hoặc chưa từng có. Phần lớn hơn có cấu trúc 4/5 trang cơ bản tương tự và thứ tự dữ liệu tiêu chuẩn (đếm tiểu sử, quản trị, danh mục đầu tư và liên hệ). Điều thực sự có bất kỳ loại hiệu ứng nào là một cách cá nhân và giàu trí tưởng tượng để đối phó với từng phân khúc Khi nghi ngờ, nó gợi ý cải thiện mọi phần quan trọng thông qua một số hệ thống mới nhất và đánh lừa để làm cho nó trông hấp dẫn, quyến rũ và trong mọi trường hợp, hấp dẫn. Biểu đồ hình tròn động thể hiện khả năng cấu trúc liên hệ được phác thảo đầy đủ, bản đồ Google được kiểm tra lại với các điểm nổi bật bổ sung, thanh cuộn sinh động, các chuỗi sự kiện đáp ứng là những lựa chọn nổi bật nhất Họ đặc biệt bổ sung vào xu hướng chung cũng như tạo ra phần giới thiệu ban đầu bền vững, điều rất cần thiết trong cuộc chiến giành khách hàng tiềm năng Bộ sưu tập các ví dụ ngang về dòng thời gian Bootstrap với đoạn mãThật thú vị, với một số thông tin cơ bản về HTML/CSS/JS, bạn cũng có thể thay đổi bất kỳ danh mục đầu tư trực tuyến buồn tẻ và thô thiển nào thành một kiệt tác. Bạn thậm chí không cần phải tạo nó mà không có bất kỳ sự chuẩn bị nào; Nếu bạn muốn thể hiện kinh nghiệm hoặc tiềm năng của mình theo một cách hấp dẫn bên ngoài, thì bạn nên xem xét các câu trả lời đơn giản nhưng thiết thực được ghi lại bên dưới để hoàn thành nhiệm vụ của mình với một mốc thời gian. Chúng tôi đã bao gồm một dòng thời gian ngang, dòng thời gian đáp ứng và Bootstrap 4 hỗ trợ bằng cách sử dụng HTML, CSS và JS Có liên quan
Vì vậy, đây là một số danh sách hàng đầu về Các mốc thời gian ngang của Bootstrap với một đoạn mã 1. Ví dụ về Dòng thời gian ngangĐây là dạng thời gian cơ bản và hiệu quả phụ thuộc vào mặt phẳng nằm ngang. Dựa trên CSS và HTML cho sản phẩm cuối cùng, nhà sản xuất đã đưa ra quan điểm giữ mọi thứ không đáng kể. Nó bao gồm một dòng thời gian đơn giản với các bức chân dung được thực hiện cho mỗi lần chụp Thật vậy, ngay cả sự sống động cũng quá mức không tì vết và mượt mà. Dòng thời gian được cung cấp năng lượng sao cho khi được di chuột vào các vùng sáng, bóng đơn giản sẽ chuyển sang bóng tối hơn Bản trình diễn/Mã 2. Bootstrap ngang & dọc 4 Dòng thời gian HTML CSSHiện tại, đây là một cấu trúc ngày càng cơ bản và rõ ràng, hoàn toàn dựa trên phong cách và mã hóa HTML và CSS. Giống như dòng thời gian trước đây mà chúng tôi đã đề cập, nó theo đuổi một ví dụ tương tự về phong cách, tuy nhiên với một kế hoạch và cấu trúc bóng râm cực kỳ đáng kể Với nền trắng nhạt, các thẻ dựa trên cấu trúc vật liệu bay ra thêm. Hơn nữa, dấu vết của bóng mờ với các biểu tượng hoặc điểm đánh dấu bao gồm một chút sáng tạo mà người ta có thể tìm kiếm Điều này là lý tưởng cho bất kỳ trang web nào vì sự dễ dàng của toàn bộ cấu trúc có thể tùy chỉnh và thích ứng một cách hiệu quả Mặc dù vậy, điều thú vị là nhà sản xuất đã bao gồm cả dòng thời gian dọc và ngang để xem qua Bất cứ điều gì phù hợp với nhu cầu của bạn, về cơ bản hãy theo liên kết bên dưới và có dấu hiệu cải thiện, hãy xem toàn bộ cấu trúc mà nhà sản xuất đã nghĩ ra Bản trình diễn/Mã 3. Bootstrap 4 Dòng thời gian ngang với Nhiệm vụ HTML CSSTiếp theo chúng ta có một Dòng thời gian ngang với các tác vụ. Có hiệu ứng di chuột mượt mà trong thiết kế, Cấu trúc hình tròn ám chỉ sự bắt đầu của sự kiện. Điều đặc biệt về mô hình này là phương tiện mà nó linh hoạt Đáng chú ý hơn cả là nó hoàn toàn được hoàn thiện với HTML và CSS thuần túy. Một cái bẫy tiềm năng của dòng thời gian này là phần lớn các lối vào của nó có thể được nhóm lại với nhau Bản trình diễn/Mã 4. Thiết kế đáp ứng dòng thời gian ngangĐây là một ví dụ về dòng thời gian ngang Bootstrap tĩnh. Đúng như tên gọi, đây là CSS dòng thời gian đáp ứng theo chiều ngang cũng có thể được sử dụng đầy đủ cho các thiết bị khác. Nội dung được đặt bên trong một cấu trúc tròn có vẻ được quản lý tốt và được phân tách bằng một đường mảnh Màu sắc, hình ảnh và hoàn thiện trông tuyệt vời. Vì nó là một hình mẫu lý tưởng nên có thể không có nhiều vấn đề, nhưng cũng không có gì là quan trọng cả. Bạn có thể dễ dàng khắc phục chúng và sử dụng kế hoạch này trên trang web hoặc điểm đến của mình Bản trình diễn/Mã 5. CSS Dòng thời gian Ví dụ ngangVẫn còn nhiều điều để nói về những sắp xếp cơ bản. Tất cả mọi thứ được xem xét, không phải tất cả mọi thứ phải lấy đi hơi thở của khách hàng. Mô hình dựa trên Bootstrap này không phóng đại chút nào Trong mọi trường hợp, những gì nó cung cấp là một phương pháp thông minh để khám phá thông qua việc đăng các sự kiện quan trọng. Nó nhanh chóng, dễ đọc và theo bản năng. Bạn có thể cần gì hơn nữa? Bản trình diễn/Mã 6. HTML CSS Dòng thời gian Bootstrap 4 NgangSự sắp xếp này của Angele là sự thực hiện cơ bản của ý tưởng cơ bản và ý tưởng dựa trên thẻ cho cả dòng thời gian ngang và dọc. Chất được xác định theo thời gian biểu dưới dạng điểm đánh dấu cho các giới hạn hoặc sự kiện khác nhau Mặc dù toàn bộ sự sắp xếp rõ ràng là không quan trọng và trực tiếp, nhưng đây có thể là bước khởi đầu cho nhiệm vụ tùy chỉnh có một không hai của riêng bạn Kết hợp hầu hết các hiệu ứng và hoạt động bổ sung mà bạn thích. Bạn cũng có thể thay đổi các kế hoạch ẩn chung được sử dụng. Bằng cách này, hãy tìm kiếm liên kết bên dưới để có cái nhìn đầy đủ về cấu trúc mã của họ Bản trình diễn/Mã 7. Đáp ứng dòng thời gian ngangKhi bạn vào bất kỳ trang web chuyên nghiệp nào, nó sẽ cung cấp cho bạn ý tưởng từng bước để hoàn tất quy trình đăng nhập/đăng ký của bạn. Đây là cùng một thiết kế. Việc đánh số có mặt trong cấu trúc xung quanh. Mô tả về ý nghĩa của con số cụ thể nằm ngay bên dưới vòng tròn. Điều này sẽ không để người dùng nhầm lẫn về quy trình Vì thiết kế đáp ứng, bạn cũng có thể nhận được thiết kế tương tự trong các thiết bị nhỏ. Nếu bạn đang chạy một dự án/trang web, bạn chỉ cần sử dụng cái này Bản trình diễn/Mã 8. Dòng thời gian với hoạt ảnhĐược tạo trên cơ sở CSS và JavaScript, ví dụ về thời gian biểu chẵn này là một điều tuyệt vời. Nhà thiết kế đã sử dụng cấu trúc với các điểm đánh dấu để phân bổ quá trình các sự kiện Bạn có thể nhấp vào công tắc bật tắt nếu bạn phải bỏ chọn quá trình hoạt động của sự kiện Các kế hoạch che giấu với màu trắng trơn và xanh neon rõ ràng và đủ bắt mắt Đây là một trong những ví dụ về dòng thời gian đáp ứng theo chiều ngang với sự hỗ trợ của HTML, CSS, Javascript và Bootstrap Bản trình diễn/Mã 9. Dòng thời gian ngangCấu trúc này của Marina Marques là sự thực hiện cơ bản của dòng thời gian ngang dựa trên biểu tượng không quan trọng. Các biểu tượng khác nhau được đặt trên dòng thời gian làm điểm đánh dấu cho các khả năng hoặc sự kiện khác nhau. Những mô tả này thực hiện khi nhấn vào biểu tượng riêng lẻ Mặc dù toàn bộ cấu trúc theo tất cả các tài khoản là không đáng kể và đơn giản, nhưng đây có thể là bước khởi đầu cho dự án tùy chỉnh của riêng bạn. Bao gồm phần lớn các tác động bổ sung và sự sống động mà bạn thích Bạn thậm chí có thể thay đổi các kế hoạch tô bóng chung và các biểu tượng được sử dụng. Theo liên kết bên dưới để có cái nhìn đầy đủ về cấu trúc mã của họ Bản trình diễn/Mã 10. Lấy cảm hứng từ dòng thời gian ngangCơ bản và không đáng kể, đây là thử nghiệm đơn giản mà nhà sản xuất đã nghĩ đến để nói chuyện với dòng thời gian theo chiều ngang. Nền tảng và kế hoạch bóng nói chung là đơn giản và sạch sẽ Các nhà sản xuất đã sử dụng JS để bao gồm phần lớn sự tinh tế với sự sống động, hiệu ứng, đặc điểm, hiệu ứng di chuột và chụp nhanh. Đối với mục đích demo, nhà sản xuất đã thêm lại ngày vào khu vực chi tiết Tuy nhiên, bạn có thể dễ dàng thay thế nó bằng một nội dung, tiêu đề hoặc chi tiết để xác định thời gian. Phần lớn tiến độ đều suôn sẻ biết ơn phần lớn các mã được nhận xét tốt Bản trình diễn/Mã 11. Dòng thời gian ngangHiện tại, đây là một trường hợp khác về dòng thời gian nằm ngang mà bạn có thể bắt chước trên trang web của mình. Mặc dù thực tế là không thực chất và có giá trị như các mẫu trước đây của chúng tôi, nhưng đây có thể là một khởi đầu tuyệt vời cho nhiệm vụ tương lai của bạn, nơi bạn có thể thêm những nét tinh tế cơ bản vào sở thích của mình Nó có một hộp thời gian cơ bản với một góc màu hồng. Để cải thiện sự hiểu biết, dòng thời gian làm nổi bật các ghim khác nhau tương phản với tiêu chuẩn hoặc bổ sung do khách hàng đặt Khi được di chuột qua từng chân, sự tinh tế sẽ hiển thị những gì nó muốn nói với Hơn nữa, điều đáng kinh ngạc về điều này là nó rất đơn giản để hiện thực hóa hoặc sao chép vì nó phụ thuộc hoàn toàn vào CSS và HTML. Bản trình diễn/Mã 12. Ví dụ dòng thời gian ngang với JqueryHiện tại, đây là một phương pháp đặc biệt để thực hiện các sự kiện và ngày trên bất kỳ trang web nào một cách hiệu quả vì kế hoạch hoàn toàn đáp ứng. Mặc dù nằm ngang trên sân khấu bên dưới, toàn bộ cấu trúc thay đổi thành dòng thời gian dọc tùy thuộc vào kích thước màn hình Ngoài ra, nó phụ thuộc vào CSS, HTML và JS bổ sung để bao gồm các thành phần sáng tạo. Bạn có thể bao gồm các chi tiết và dữ liệu bạn cần trên các phân đoạn bao gồm tất cả với mỗi điểm đánh dấu Sự sắp xếp của mọi điểm đánh dấu đều và giống nhau và các phân đoạn bao gồm tất cả cũng trao đổi tiêu đề của chúng để thêm phần chi tiết bổ sung đó Nhà sản xuất sử dụng một kế hoạch tạo bóng đơn giản và không đáng kể đã tìm ra cách tận dụng tối đa nó Bản trình diễn/Mã 13. Ví dụ về dòng thời gian theo chiều ngangThảo luận về dòng thời gian hoạt hình, đây là bản chuyển thể vượt trội hơn rất nhiều so với những gì chúng tôi đã trình bày cho đến bây giờ. Với một nền tảng góc trước đây mang lại cảm giác giàu trí tưởng tượng, dòng thời gian xung quanh các thẻ và thậm chí cả các điểm đánh dấu đều được làm sống động Mỗi một trong các điểm đánh dấu kết hợp một hộp dữ liệu nơi khách hàng có thể bao gồm bất kỳ thông tin chi tiết hoặc dữ liệu nào và thậm chí kết hợp các biểu tượng và hình ảnh Khi được di chuột qua các điểm đánh dấu cụ thể, các thẻ sẽ hiển thị dữ liệu và các điểm đánh dấu sẽ thay đổi thiết kế bóng nền bên dưới của chúng Lý tưởng cho bất kỳ điểm đến chuyên nghiệp nào để sử dụng làm dòng thời gian, sự kiện nổi bật hoặc hiển thị quy trình, đây chắc chắn là một khởi đầu thuận lợi đáng kinh ngạc Bản trình diễn/Mã 14. Ví dụ về kiểu thiết kế dòng thời gian web ngangĐây là một phương pháp phi thường khác để hiện thực hóa dòng thời gian ngang của Bootstrap trên bất kỳ trang web nào. Các cấu trúc năng lượng khác nhau cũng được đặt cạnh nhau để tạo ra dòng thời gian nằm ngang đó Thật là bất ngờ khi chỉ có CSS và HTML và tiến trình cũng như tác động chung cũng mượt mà một cách đáng kinh ngạc. Hơn nữa, do cấu trúc rất đơn giản và rõ ràng nên việc hiện thực hóa trên trang web của bạn cũng rất dễ dàng Mặc dù các văn bản và kế hoạch tô bóng được đặc trưng trước cho mục đích demo, bạn có thể dễ dàng thay đổi nó theo sở thích của bạn. Bản trình diễn/Mã 15. Dòng thời gian cho BefinnovativeĐây là một ví dụ tĩnh khác về dòng thời gian Ngang. Bạn có thể thấy một đường ngang với các vòng tròn được sắp xếp ở một khoảng cách thích hợp Ngay phía trên các vòng tròn, các sự kiện cùng với ngày cũng có trong cấu trúc giống như thẻ. Hiệu ứng đổ bóng cũng xuất hiện trong thiết kế Vì không có bất kỳ hiệu ứng chuyển cảnh nào trong thiết kế nên bạn có thể thêm chúng vào cũng như thiết kế hoàn toàn sử dụng CSS Bản trình diễn/Mã 16. Ví dụ về Dòng thời gian ngangMặc dù cấu trúc này tạo ra một quan điểm đơn giản và rõ ràng, nhưng cấu trúc này tinh tế và chuyên nghiệp hơn vẻ ngoài của nó. Nó bao gồm một phương pháp tầm thường với kế hoạch nhưng các thành phần năng lượng là thứ đưa đến cấp độ tiếp theo Có một dòng thời gian cơ bản với các ký hiệu tuyến đường ở hai bên. Bên dưới dòng thời gian, bạn có thể thấy nội dung mà người tạo đã thêm vào để hiển thị khi nhấp vào. Sử dụng HTML, CSS và JS, mô hình dòng thời gian ngang Bootstrap 4 này cũng khá nhạy Các điểm đánh dấu trên dòng thời gian cũng hiển thị tính năng này với các thay đổi màu đơn giản. Tất cả những điều được xem xét, một cách tiếp cận thực sự đáng kinh ngạc để thêm một nét sáng tạo vào trang web của bạn, điều này chắc chắn là duy nhất Bản trình diễn/Mã 17. Bootstrap Dòng thời gian ngang đáp ứng đơn giảnĐây là một thiết kế dòng thời gian ngang đầy màu sắc. Như bạn có thể thấy, tất cả các sự kiện được đặt ở bên trái của trang. Mỗi sự kiện có một đường ngang với màu sắc khác nhau cùng với cấu trúc tròn Khi di chuột vào cấu trúc tròn, mô tả của sự kiện được hiển thị. Cùng với mô tả, thời gian cũng có mặt Thiết kế cũng đáp ứng nên bạn cũng có thể nhận được thiết kế tương tự trong các thiết bị di động. Ngoài ra, bản demo cùng với đoạn mã như sau Bản trình diễn/Mã Phần kết luậnKhi cố gắng diễn đạt suy nghĩ của bạn với khách hàng, việc cung cấp cho họ hàng đống văn bản đơn giản là không thành công. Mọi người đang tìm kiếm sự hài lòng nhất thời và hầu hết sẽ không ở lại để đọc các mục dài. Tất cả chúng ta có nhiều khả năng có thể thể hiện sự nhiệt tình của họ thông qua hình ảnh thuyết phục Vì vậy, các mốc thời gian là một trong những thành phần trực quan nổi bật hơn mà chúng tôi có sẵn cho chúng tôi. Một người giỏi có thể trình bày một câu chuyện theo cách đơn giản để theo đuổi và thậm chí là trực quan. Họ cũng có thể thu hút sự chú ý của khách hàng và chào đón họ quan tâm đến trải nghiệm Một điều mà các mô hình trên cho thấy là các mốc thời gian có thể thích ứng một cách khó hiểu. Chúng có thể là bất cứ thứ gì, từ một thiết kế được tổ chức sơ sài đến một trải nghiệm hoàn toàn sinh động và trực quan Dọc theo những dòng này, bất kể loại dữ liệu bạn muốn hiển thị hay phong cách của riêng bạn, rất có thể một trong những phần này sẽ phù hợp lý tưởng |
