Tùy chỉnh Xu hướng Bố cục Bootstrap, Công cụ & Khung
Bootstrap hiện là khuôn khổ đầu cuối số một và dễ dàng cách nhanh nhất để xây dựng bố cục. Nó đã tồn tại trong nhiều năm và các nhà phát triển bên thứ ba thậm chí đã xuất bản tài nguyên của họ trực tuyến. Những tài nguyên này từ chủ đề miễn phí đến plugin và khung chi tiết.
Trong bài viết này, tôi muốn chia sẻ một số ít tài nguyên và thực hành tốt nhất dành cho các nhà phát triển muốn tiến xa hơn với Bootstrap.
Tất cả tài nguyên trong bài này là miễn phí, vì vậy bạn có thể sử dụng chúng theo cách bạn thấy phù hợp. Ngay cả khi bạn chưa bao giờ sử dụng Bootstrap, bạn chắc chắn sẽ tìm thấy thứ gì đó ở đây sẽ giúp bạn bắt đầu.
Tái cấu trúc với Bootstrap
Thư viện Bootstrap mặc định đi kèm với nó thiết kế độc đáo Trông thật tuyệt vời. Nó được biết đến rộng rãi trên web và bạn có thể dễ dàng biết khi nào một trang web sử dụng các yếu tố Bootstrap truyền thống.
Nhưng, bạn cũng có thể tự mình gác lại những yếu tố này để sử dụng mã của Bootstrap làm nền tảng cho bố cục của bạn.
Có một vài cách khác nhau bạn có thể làm được việc này:
- Thêm biểu định kiểu của riêng bạn để ghi đè mặc định.
- Tùy chỉnh đầu ra của BootStrap, do đó bạn chỉ nhận được các yếu tố bạn muốn.
- Kết hợp với các tiện ích bổ sung và plugin / chủ đề.
Tùy chọn cuối cùng đó là phổ biến nhất và đó là một trong những lý do Bootstrap phát triển quá nhanh.
Cấp tôi cũng là một fan hâm mộ lớn của họ tùy chỉnh công cụ bởi vì nó hoàn toàn miễn phí và mang lại cho bạn nhiều quyền kiểm soát bạn muốn sử dụng tính năng nào.
Có hàng tấn tài nguyên cho BootStrap 3/4, được tạo bởi các nhà phát triển bên thứ ba, vì vậy việc này trở nên dễ dàng hơn bao giờ hết tạo bố cục BootStrap độc đáo của riêng bạn không cần viết nhiều mã.
Plugin & tiện ích bổ sung
Vì Bootstrap đi kèm với một thư viện JavaScript đồ sộ, nên nó đủ dễ để mở rộng các tính năng JavaScript. Và các nhà phát triển chắc chắn đã làm như vậy với các plugin của riêng họ, nhiều plugin được phát hành miễn phí trực tuyến.
Đây là những mục yêu thích của tôi mà tất cả hỗ trợ Bootstrap nguyên bản. Nhiều người trong số họ chạy trên jQuery, vì vậy chúng cũng dễ dàng tùy chỉnh nếu bạn biết cách đi vòng quanh thư viện jQuery.
Trình xác nhận mẫu
Đầu tiên là yêu thích của tôi plugin xác thực mẫu, Trình xác thực mẫu. Nó chạy trên jQuery và nó hỗ trợ cả đống khung công tác: Bootstrap, Foundation, Pure, UIKit và các khung khác.
Bạn có thể thủ công thêm bất kỳ số lượng 51 trình xác nhận cho bất kỳ hình thức trên trang web của bạn. Điều này có nghĩa là khách truy cập sẽ cần phải đáp ứng các yêu cầu xác thực đó trước khi họ có thể gửi nội dung.
Nhiều hình thức liên lạc sử dụng các trình xác nhận để yêu cầu địa chỉ email làm việc. Tuy nhiên, bạn cũng có thể sử dụng chúng để tải lên hình ảnh hoặc mật khẩu, hầu như bất cứ điều gì mà Bootstrap-heart mong muốn.
Bộ chọn thời gian
Công cụ chọn ngày cũng là một nỗi đau rất lớn để mã hóa chính mình. Nhiều hình thức chỉ sử dụng menu thả xuống cho cài đặt ngày / tháng / năm nhưng bạn cũng có thể sử dụng biểu mẫu này Plugin chọn ngày Bootstrap để tự cứu mình.
Nó hoàn toàn là nguồn mở và chạy trên thư viện Bootstrap 3.x. Bạn cũng sẽ nhận thấy nó hỗ trợ cả ngày và thời gian bằng cách sử dụng một plugin jQuery khác, Khoảnh khắc.
Nhìn chung, thư viện này là tuyệt vời để có một công cụ chọn ngày làm việc hoạt động. Nó có rất nhiều phụ thuộc nhưng, may mắn thay, bạn sẽ không cần phải viết nhiều mã để làm cho nó hoạt động.
Xếp hạng sao
Đây là một tính năng thú vị khác cho xếp hạng sao trên web Bạn có thể nối một đánh giá một đến năm sao bất cứ nơi nào trên trang web của bạn, sử dụng thư viện Bootstrap cho các hành vi JavaScript.
Khi người dùng di chuyển qua các ngôi sao này, màn hình sẽ thay đổi thành bất kỳ xếp hạng nào dựa trên vị trí con trỏ của họ. Sau đó, chỉ với một cú nhấp chuột, người dùng bỏ phiếu và đặt xếp hạng sao, bao gồm xếp hạng nửa sao.
Plugin này chắc chắn phức tạp để thiết lập bởi vì bạn có thể thay đổi nhiều cài đặt mặc định cho các kỹ thuật tiên tiến hơn. Nhưng, bạn có thể xem bản demo trực tiếp đơn giản để đánh giá xem plugin xếp hạng sao này có phù hợp với trang web của bạn không.
VÒI
Bootstrap đi kèm với nó phong cách bố trí bàn riêng để hiển thị dữ liệu dạng bảng trên frontend. Nhưng, với Plugin bổ sung, bạn có thể thêm một loạt các tính năng bổ sung vào các bảng Bootstrap của mình.
Đây là một trong những plugin chi tiết nhất của jQuery và đây chỉ là một số tính năng bạn có thể thêm:
- Phân trang tùy chỉnh.
- Sắp xếp cột.
- Lọc dữ liệu.
- Hiệu ứng hoạt hình bảng.
- Kiểm tra để chọn toàn bộ hàng.
WATable được mô tả như là một Con dao của quân đội Thụy Sĩ và tôi phải đồng ý với mô tả này. Thực tế là nó hỗ trợ Bootstrap chỉ là đóng băng trên bánh.
Đây là một số plugin yêu thích của tôi nhưng có rất nhiều plugin khác ngoài đó. Bạn có thể duyệt qua nhiều hơn trên trang này nếu bạn tò mò.
Khung Bootstrap
Bootstrap thực sự là một khung lớn vì nó cho phép người dùng tùy chỉnh các kiểu HTML và CSS mặc định với một vài lớp.
Nhưng, các nhà phát triển đã lấy thư viện BootStrap mặc định và thêm các kiểu riêng của họ để tạo các khung lớn hơn nữa làm việc như chủ đề, vì vậy bạn không cần phải khởi động lại Bootstrap từ đầu.
Rất may, tất cả đều miễn phí và tất cả đều chạy trên các lớp BootStrap mặc định.
Bootflat
Có lẽ khung BootStrap nổi tiếng nhất là Giao diện người dùng Bootflat cái đó theo xu hướng thiết kế phẳng.
Nó hoạt động với tất cả các tính năng Bootstrap mặc định, bao gồm tất cả các thành phần JavaScript. Sự khác biệt chính là nhiều hơn trong thiết kế và kết cấu nơi các phần tử trang sử dụng lược đồ màu phẳng để di chuyển khỏi các kiểu gradient của Bootstrap.
Bootflat đã không được sử dụng quá mức rất nhiều, vì vậy bạn có thể thêm khung này trên bất kỳ trang đích hoặc trang chủ nào để tạo giao diện độc đáo cho trang web của bạn.
Nó miễn phí 100% và thậm chí đi kèm với một chọn màu, vì vậy bạn có thể tìm thấy bảng màu phẳng để phù hợp với bố cục của bạn.
Hoàn thành đi tiêu
Điều này đáng ngạc nhiên bộ kit UI cũng được xây dựng trên đầu thư viện Bootstrap 3 và được phát hành miễn phí trên GitHub.
Get Shit Done đến từ nhóm tại Creative Tim nơi họ bán một vài tài nguyên cao cấp. Bộ giao diện người dùng cụ thể này có phiên bản pro nhưng hoàn toàn không cần thiết.
Phiên bản nguồn mở có quá đủ cho tất cả mọi người và bạn có thể kiểm tra bản thử trực tiếp để xem nó trông như thế nào trong trình duyệt.
Thiết kế vật liệu Bootstrap
Một xu hướng thiết kế phổ biến khác là Thiết kế vật liệu của Google. Đây là ngôn ngữ thiết kế ban đầu được tạo cho các nhà thiết kế ứng dụng Android nhưng kể từ đó lan truyền trên mạng và thu hút được nhiều sự hỗ trợ từ các nhà thiết kế UI / UX.
Khung vật liệu Bootstrap đáng kinh ngạc này sử dụng các tính năng thiết kế vật liệu để xây dựng một phong cách thiết kế tùy chỉnh ra khỏi thư viện của Bootstrap.
Theo mặc định, nó hỗ trợ mọi thứ trong BootStrap 3 và hiện đang được làm lại để hỗ trợ Bootstrap 4. Bạn có thể tìm hiểu thêm trên trang chủ chính thức có tài liệu và bản demo.
Một thư viện tương tự bạn có thể thử là MDBootstrap, mặc dù tôi thấy cái này khó hơn một chút khi làm việc với.
Bootplus
Google đã tạo ngôn ngữ thiết kế vật liệu nhưng họ cũng có phong cách riêng cho nhiều công cụ và ứng dụng web của họ.
Bootplus bắt chước phong cách giao diện Google+, cùng với nhiều tài liệu trợ giúp của Google, Google Drive và các ứng dụng web tương tự. Nó có tất cả các tính năng tương tự như Bootstrap, bao gồm lưới, kiểu bố trí, kiểu phần tử và các thành phần JavaScript.
Bạn thậm chí có thể duyệt qua một bản demo trên trang web để xem Sự khác biệt giữa Bootplus và UI Bootstrap ban đầu. Đối với tài nguyên miễn phí, Bootplus có phạm vi rộng và hoàn hảo cho bất kỳ ai thích kỹ thuật thiết kế của Google.
Công cụ & tài nguyên
Cuối cùng, tôi muốn đi sâu vào nhiều công cụ miễn phí cho tùy chỉnh và xây dựng bố cục Bootstrap.
Các công cụ này là tất cả các ứng dụng web và nhiều trong số chúng thậm chí còn có nguồn mở trên GitHub. Chúng được tạo ra để tiết kiệm thời gian của bạn và giúp bạn thiết kế bố cục Bootstrap đáng kinh ngạc mà không cần nhiều mã.
Biên tập trực tiếp
Miễn phí Bootstrap biên tập trực tiếp là một trong những công cụ tốt nhất cho các nhà thiết kế phi kỹ thuật. Nếu bạn không biết cách viết mã, bạn vẫn có thể dựa vào trình tạo Bootstrap này để tạo toàn bộ bố cục từ đầu.
Nó chạy ngay trong trình duyệt của bạn và thậm chí bạn có thể chọn từ các mẫu được tạo sẵn để bắt đầu.
Tùy chọn trong thanh bên cho phép bạn thêm các giá trị CSS nhất định nếu bạn biết một số mã hóa frontend. Nhưng, bạn cũng có thể sử dụng GUI để thay đổi màu sắc, phông chữ, kích thước và khá nhiều thứ khác mà bạn thích.
Khi bạn đã hoàn tất, nhấp chuột “Lấy chủ đề” và bạn có thể sao chép / dán các kiểu CSS đã cập nhật vào dự án của riêng bạn. Cách siêu dễ dàng để restyle Bootstrap mà không cần phải mã hóa lại mọi thứ từ đầu.
Trình tạo Mẫu
Miễn phí Trình xây dựng mẫu Bootstrap là một công cụ trình duyệt kéo và thả cho phép bạn tạo các biểu mẫu Bootstrap từ đầu.
Một lần nữa, nó đòi hỏi kiến thức mã hóa bằng không và bạn có toàn quyền truy cập vào tất cả 3 yếu tố Bootstrap. Chỉ cần chọn phần tử bạn muốn và kéo nó vào hộp bên trái. Từ đây, bạn có thể thay đổi mọi thứ từ văn bản giữ chỗ sang lớp CSS.
Cho đến nay, trình xây dựng biểu mẫu tuyệt vời nhất tôi từng thấy và nó miễn phí 100%!
BootSwatchr
Một công cụ miễn phí khác mà tôi thực sự thích là BootSwatchr. Nó dựa trên khung Bootstrap và cho phép bạn cập nhật màu sắc, phong cách chủ đề, và Bố cục tổng thể của trang.
Những gì tôi thích về ứng dụng này là làm thế nào nó cũng đi kèm với một bộ sưu tập miễn phí của các phong cách thiết kế sẵn.
Vì vậy, bạn có thể tải xuống một thiết kế người khác đã làm hoặc bạn có thể sử dụng nó làm điểm bắt đầu để tùy chỉnh chủ đề của riêng bạn.
Tiến về phía trước
Bootstrap chỉ đang phát triển phổ biến, vì vậy bây giờ là thời điểm tốt nhất để đi sâu vào khuôn khổ này. Rất may, có hàng tá plugin, khung và công cụ miễn phí bạn có thể sử dụng để đẩy nhanh quá trình phát triển.
Trong bài viết này, tôi chỉ cho thấy phần nổi của tảng băng trôi, vì vậy nếu bạn không thấy bất cứ điều gì ở đây thì hãy tìm đến Google và xem những gì khác bạn có thể tìm thấy.
