Chuyển đổi từ bootstrap 3 thành 5
|
Bootstrap là bộ công cụ mã nguồn mở cực kỳ phổ biến có chứa CSS, phông chữ và phần mở rộng JavaScript để giúp làm phong phú thêm các thành phần giao diện trên trang web hoặc ứng dụng Web. CSS đi kèm tăng cường và mở rộng các điều khiển giao diện tiêu chuẩn khi đi kèm với lệnh gọi đến các lớp CSS nhất định. Phông chữ từ Glyphicons. com được bao gồm trong bộ công cụ, với 180 biểu tượng mà bạn có thể sử dụng Show
Các tiện ích mở rộng JavaScript ở dạng trình cắm jQuery và cung cấp các phần tử giao diện bổ sung cùng với việc mở rộng chức năng của các phần tử giao diện tiêu chuẩn. Bộ công cụ bao gồm các tệp phân phối, mẫu, ví dụ và tất cả các tệp nguồn cần thiết để tiếp tục phát triển dựa trên bộ công cụ. Tuy nhiên, trong suốt bài viết này, tôi sẽ chỉ đề cập đến thư mục phân phối Mặc dù tương thích với các phiên bản mới nhất của tất cả các trình duyệt chính, Bootstrap chỉ tương thích một phần với một số phiên bản trình duyệt cũ hơn vì bộ công cụ sử dụng các thuộc tính khác nhau chỉ khả dụng với các trình duyệt hỗ trợ CSS3. May mắn thay, điều này chỉ ảnh hưởng đến một số tiện ích mở rộng của bộ công cụ và không ảnh hưởng đến chức năng thực tế của chính các thành phần giao diện Bootstrap cho phép hiển thị rõ ràng các trang web được cách điệu phong phú dù trên máy tính để bàn, máy tính bảng hay điện thoại di động. Do hỗ trợ thiết kế đáp ứng của Bootstrap, bố cục của các trang web sẽ tự động điều chỉnh dựa trên các đặc điểm của thiết bị. Với chức năng này có sẵn, thời gian để tạo một trang web hoàn chỉnh với sự hỗ trợ đầy đủ của thiết bị đã giảm đáng kể bằng cách loại bỏ nhu cầu phát triển phiên bản chỉ dành cho thiết bị di động của cùng một trang web
Các thành phần sau đây là một số thành phần giao diện cốt lõi có sẵn để sử dụng sau khi gắn Bootstrap vào trang web Hệ thống lưới điệnMột trong những thành phần quan trọng nhất trong bộ công cụ Bootstrap, hệ thống lưới, cho phép căn chỉnh các cột trong các bộ phận với. lớp hàng. Được xác định theo loại thiết bị (di động, máy tính bảng, máy tính để bàn) để giúp tùy chỉnh khả năng phản hồi của bố cục trang web, độ dài của các cột này trong một hàng phải cộng lại bằng 12. Ví dụ sau định nghĩa một lưới gồm bốn cột có chiều rộng bằng nhau Được mô tả chi tiết ở phần sau của bài viết này, hệ thống lưới đã trải qua một bản cập nhật lớn trong Bootstrap 3. 0 kiểu chữBootstrap bổ sung chức năng cho các điều khiển dựa trên văn bản HTML đã có nhưng cũng thêm các điều khiển dựa trên văn bản mới để nâng cao cách hiển thị văn bản. Các điều khiển dựa trên văn bản được thêm vào có trong bộ công cụ cho phép sửa đổi các kiểu phông chữ và mặc dù khả năng sử dụng của các đối tác dựa trên HTML không thay đổi, nhưng bạn nên sử dụng các điều khiển phông chữ mới này để Bootstrap có thể tạo kiểu cho chúng đúng cách. Ngoài ra, Bootstrap bao gồm các lớp để nhấn mạnh văn bản bằng màu sắc và căn chỉnh văn bản trong một điều khiển văn bản Ví dụ sau đây, được thể hiện trong Hình 1, cho thấy một số lớp và điều khiển bổ sung này để nhấn mạnh và căn chỉnh văn bản theo những cách khác nhau Hình 1. Bạn có thể sử dụng màu sắc và căn chỉnh để nhấn mạnh văn bản Hình thứcCác lớp liên quan đến biểu mẫu trong Bootstrap cho phép tạo nhóm và tạo kiểu rõ ràng khi yêu cầu nhập dữ liệu từ người dùng cuối. Bộ công cụ chứa ba loại biểu mẫu. cơ bản, ngang và nội tuyến Ở dạng cơ bản, tất cả các điều khiển đầu vào dựa trên biểu mẫu có chiều rộng là 100% và có thể được nhóm lại với nhau để có khoảng trắng tối ưu trong nhóm. Không giống như biểu mẫu cơ bản, việc sử dụng biểu mẫu ngang làm cho nhãn mô tả và điều khiển đầu vào tồn tại trên cùng một dòng. Được cô đọng thành một dòng duy nhất, biểu mẫu nội tuyến là tối ưu để sử dụng khi giá trị bất động sản trên trang web khan hiếm. Ví dụ trong Liệt kê 1 sử dụng biểu mẫu nằm ngang và kết quả có thể được nhìn thấy trong Hình 2 Liệt kê 1. Sử dụng biểu mẫu ngang và chức năngHình 2. Biểu mẫu ngang cung cấp một cách nhanh chóng và nhất quán để tạo màn hình nhập dữ liệu. nútBootstrap cung cấp các nút cách điệu để giúp phân biệt hành động của nhiều nút có thể xuất hiện trên trang web. Để sử dụng chức năng nút, thuộc tính lớp trong thẻ nút HTML phải chứa. btn cùng với kiểu nút mong muốn và kích thước nút tùy chọn. Ví dụ trong Liệt kê 2 cho thấy nhiều ví dụ sử dụng các kiểu dáng và kích thước khác nhau, và được thể hiện trong Hình 3 Liệt kê 2. Ví dụ mã về chức năng Nút của BootstrapHình 3. Chức năng nút Bootstrap giúp nhanh chóng thêm các nút vào biểu mẫu của bạn. Hình ảnhCác lớp định dạng ảnh Bootstrap giúp hiển thị ảnh theo các kiểu bố cục khác nhau. Ví dụ sau hiển thị biểu trưng Bootstrap trên một trang dưới dạng hình chữ nhật có các góc tròn, hình tròn và hình thu nhỏ. Ví dụ này được hiển thị trong một trình duyệt trong Hình 4 Hình 4. Bạn có thể hiển thị hình ảnh bằng một trong ba lớp hình ảnh. Glyphicons180 biểu tượng từ Glyphicons cung cấp giao diện chuyên nghiệp trên trang web của bạn. Các biểu tượng được chỉ định theo lớp và có thể được sử dụng ở bất kỳ đâu mà văn bản thuần túy xuất hiện. Minh họa trong Hình 5, đoạn mã sau hiển thị nhiều nút biểu tượng Hình 5. Các biểu tượng có thể được sử dụng trong văn bản, nút hoặc bất kỳ nơi nào khác mà bạn muốn hiển thị. Được sử dụng để trợ giúp tạo menu, gọi. các lớp điều hướng trong danh sách không có thứ tự có thể xảy ra theo một trong hai cách. tab hoặc viên thuốc. Được gọi trong các mục danh sách trong danh sách không có thứ tự, các lớp đang hoạt động và bị vô hiệu hóa cho phép chức năng giao diện bổ sung của điều khiển Điều hướng. Được hiển thị trong Hình 6, ví dụ sau đây cho thấy sự khác biệt giữa Điều hướng tab và viên thuốc cùng với chức năng kích hoạt và vô hiệu hóa của các mục trong danh sách Hình 6. Bạn có thể sử dụng điều hướng và thuốc để triển khai các tính năng điều hướng trang web Bootstrap cho phép bất kỳ loại menu nào bao gồm menu thả xuống. Các menu thả xuống này giúp nhóm các mục menu tương tự lại với nhau thành một danh sách. Để xây dựng dựa trên ví dụ về mã Nav, ví dụ sau sẽ thay đổi mục menu đã tắt thành menu thả xuống Để cho phép trình đơn thả xuống hoạt động bình thường, vị trí của mã JavaScript sau cần phải nằm bên dưới vị trí của bootstrap. js được tham chiếu trong trang web ________số 8Hình 7 hiển thị ví dụ mã trước đó cho menu thả xuống trong menu Điều hướng Hình 7. Bạn có thể sử dụng trình đơn thả xuống để nhóm các mục lại với nhau phương thứcChức năng Phương thức đi kèm với Bootstrap cho phép người dùng thực hiện một hành động, chẳng hạn như nhấp vào nút, để hiển thị hộp thoại tương tác. Bất kỳ loại chức năng nào cũng có thể được điền vào hộp thoại này. Cho dù nó chứa điều khiển biểu mẫu, văn bản đơn giản hay bất kỳ loại điều khiển nào khác, Phương thức cung cấp một dạng quy trình công việc đẹp mắt thông qua một trang web. Liệt kê 3 hiển thị mã của phương thức được thấy trong Hình 8 Liệt kê 3. Ví dụ mã về chức năng Modal của BootstrapHình 8. Sử dụng các phương thức để kiểm soát quy trình làm việc thông qua trang web của bạn. Bây giờ, hãy xem một số điểm khác biệt giữa Bootstrap 2. x và Bootstrap 3 Bootstrap 3. Thay đổi đã đếnBootstrap 3. 0 giới thiệu những thay đổi quan trọng. Một số thay đổi này có tác động mạnh hơn những thay đổi khác, tuy nhiên, bạn sẽ thực hiện một số công việc để nâng cấp trang web của mình từ phiên bản Bootstrap trước đó. Bootstrap 3 là một bản nâng cấp toàn diện, vì vậy đừng mong đợi bỏ vào biểu định kiểu mới và các tệp JavaScript và mọi thứ sẽ hoạt động như mong đợi. nó sẽ không May mắn thay, có một số tài nguyên trên Web để trợ giúp quá trình di chuyển tự động-nhưng tôi đang vượt lên chính mình. Hãy bắt đầu bằng việc xem có gì mới và nó sẽ tác động như thế nào đến các trang Bootstrap hiện có của bạn
Điện thoại di động đầu tiênThay đổi quan trọng nhất không phải là kỹ thuật mà là thay đổi trong quan điểm thiết kế. Bootstrap 3 áp dụng phương pháp thiết kế Web đáp ứng "di động đầu tiên" làm chủ đề quan trọng trong toàn bộ khung Điện thoại di động đầu tiên có nghĩa là chính xác những gì được nói. Đó là một sự thay đổi mô hình tập trung vào việc thiết kế giao diện người dùng cho màn hình di động nhỏ hơn trước khi thiết kế nó cho màn hình máy tính để bàn lớn hơn. Thay vì cố gắng lấy một thiết kế dành cho máy tính để bàn và thu nhỏ, ép và nén nó xuống cho màn hình di động, trước tiên, thiết bị di động sẽ lật ngược mọi thứ và làm điều ngược lại. Bạn có không gian hạn chế trên màn hình điện thoại thông minh, vì vậy, trước tiên, điện thoại di động khiến bạn tập trung vào thiết kế đưa nội dung quan trọng và quan trọng nhất lên màn hình nhỏ đó. Ví dụ: khi kích thước màn hình tăng lên thành màn hình máy tính bảng, thiết kế của bạn sẽ phát triển và bắt đầu chứa nhiều nội dung và thông tin hơn. Khi kích thước màn hình đạt tối đa trên màn hình máy tính để bàn lớn, thiết kế của bạn chứa tất cả nội dung và thông tin cho trang. Việc áp dụng phương pháp ưu tiên trên thiết bị di động có nghĩa là không còn phải tạo các phiên bản dành cho máy tính để bàn và thiết bị di động của cùng một trang
Mặc dù việc áp dụng phương pháp ưu tiên thiết bị di động là tính năng mới trong Bootstrap 3, nhưng các tính năng thiết kế đáp ứng tồn tại trong các phiên bản trước, nhưng chúng yêu cầu thêm tệp Bắt Bootstrap 3Trang bắt đầu ( Chuẩn bị các trang của bạn sẵn sàng cho Bootstrap 3Tất cả những gì bạn cần làm là thêm thẻ meta Sử dụng lưới mớiHệ thống lưới mới nổi bật là thay đổi rõ ràng nhất trong Bootstrap 3, vì vậy tôi sẽ bắt đầu với hệ thống đó trước. Đã qua rồi cái thời làm việc với lưới ở chế độ cột có chiều rộng cố định hoặc ở chế độ linh hoạt, đáp ứng. Lưới mới linh hoạt, lấy thiết bị di động làm trung tâm đầu tiên và dựa trên tỷ lệ phần trăm. Điều này có nghĩa là thay vì làm việc với lưới có chiều rộng cố định (940 pixel), giờ đây bạn làm việc với lưới được thiết kế với bố cục dựa trên thiết bị di động và sau đó mở rộng mọi thứ từ đó Hãy cùng xem những thay đổi bạn cần thực hiện trong mã HTML của mình. Trong các phiên bản trước, các hàng được chỉ định bằng lớp Lưới Bootstrap 3 linh hoạt 100% và chỉ yêu cầu sử dụng lớp Hãy xem một lưới mẫu có ba cột có chiều rộng bằng nhau. Các cột được xác định bằng tiền tố lớp Hình 9 minh họa đoạn mã trên trông như thế nào trong trình duyệt máy tính để bàn Hình 9. Cột lưới hiển thị theo chiều ngang trên màn hình rộng Hình 10 hiển thị giao diện của cùng một mã trong điện thoại thông minh. Lưu ý không có máng xối ở hai bên của các cột xếp chồng lên nhau Hình 10. Cột lưới xếp chồng lên nhau trên màn hình điện thoại thông minh Độ lệch cột cũng đã thay đổi trong Bootstrap 3. Bạn sẽ cần thay thế bất kỳ tham chiếu lớp Các cột lồng nhau đã thay đổi trong Bootstrap 3. Bootstrap 2. x cột lồng nhau được thêm vào số lượng cột trong khoảng lưu trữ. Trong đoạn mã bên dưới, hai cột lồng nhau của Trong Bootstrap 3, các cột lồng nhau cần cộng tối đa 12 chứ không phải số cột trong khoảng lưu trữ như trong Bootstrap 2. x. Trong đoạn mã bên dưới, các cột lồng nhau có tổng bằng 12 chứ không phải 9 như mã Bootstrap 2 Nhiều mảnh và bộ phận mớiBootstrap 3 chỉ có một số thành phần thực sự mới vì trọng tâm chủ yếu là các tính năng thiết kế phẳng và ưu tiên thiết bị di động. Có một số lớp mới triển khai mô hình thiết kế ưu tiên thiết bị di động. Bảng 2 liệt kê các phần tử mới, cả thành phần và lớp. Có một vài thành phần mới mà bạn sẽ muốn tự làm quen, cụ thể là Bảng điều khiển, Nhóm danh sách và Jumbotron tấmBảng điều khiển là vùng chứa mà bạn đặt nội dung vào đó. Đơn giản nhất, chúng áp dụng đường viền và phần đệm cơ bản xung quanh nội dung của bạn. Hình 11 cho bạn ý tưởng về chức năng của bảng điều khiển mới. Các bảng được triển khai với lớp bắt đầu là Hình 11. Sử dụng Bảng điều khiển để nhóm và sắp xếp nội dung Các bảng có thể có một tiêu đề và một phần chân trang Các lớp Liệt kê 4 chứa mã đã tạo ra trang mà bạn đã thấy trong Hình 11 Liệt kê 4. Ví dụ mã về chức năng Thành phần Bảng điều khiển của BootstrapLiệt kê các nhómNhóm danh sách cung cấp cách hiển thị danh sách giống như thiết bị di động. Bạn triển khai chúng với lớp Hình 12 cho bạn ý tưởng về chức năng của thành phần nhóm danh sách mới Hình 12. Nhóm danh sách cung cấp các mục danh sách để chọn Lớp huy hiệu thêm khả năng thêm huy hiệu vào bên phải của mục nhóm danh sách Hình 13 hiển thị một nhóm danh sách có huy hiệu Hình 13. Thêm Huy hiệu vào Nhóm danh sách để cung cấp thông tin về các mục trong danh sách Danh sách sẽ là gì nếu các mục không được liên kết với thứ gì khác? Bạn không bị giới hạn ở HTML đơn giản trong một nhóm danh sách. Các lớp bổ sung cho phép bạn tùy chỉnh thêm nội dung của từng nhóm danh sách với các lớp để tùy ý đánh dấu một mục cụ thể là đang hoạt động, thêm tiêu đề mục, chân trang và văn bản mục Hình 14 hiển thị một nhóm danh sách tận dụng các khả năng phức tạp hơn của thành phần nhóm danh sách. Liệt kê 5 hiển thị mã được sử dụng để tạo trang trong Hình 14 Liệt kê 5. Ví dụ về mã của Thành phần nhóm danh sách Bootstrap và chức năng HTML phức tạp của nóHình 14. Nhóm danh sách có thể hiển thị thông tin ngoài tiêu đề mục danh sách đơn giản. JumbotronLớp Phần lớn các thay đổi trong Bootstrap 3 xoay quanh các thay đổi về lớp được thực hiện để hỗ trợ ưu tiên thiết bị di động và mô hình thiết kế đáp ứng Các hình thứcMột điểm cập nhật trong các lớp liên quan đến biểu mẫu là các điều khiển nhập trường hiện được mặc định có chiều rộng là 100%. Điều này được thực hiện để đảm bảo rằng các biểu mẫu nhập dữ liệu trông chính xác trên thiết bị di động Tôi có thể nâng cấp bootstrap 3 lên 5 không?Mặc dù câu trả lời cho câu hỏi này thực sự rất hữu ích nhưng tôi cũng phát hiện ra rằng không có gì gọi là nâng cấp từ Bootstrap 3 lên 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade.
Tôi có thể nâng cấp bootstrap 3 lên 4 không?Với đánh dấu HTML Bootstrap 3 hợp lệ, công cụ nâng cấp này thay thế Bootstrap 3. x Lớp CSS với Bootstrap 4. x lớp . Ngoài ra, công cụ này cập nhật cấu trúc của các thành phần như Navbar, Panel, List và các thành phần khác theo Bootstrap 4 Docs.
Tôi có thể nâng cấp bootstrap 4 lên 5 không?Nếu bạn đang sử dụng Bootstrap 4 hoặc phiên bản cũ hơn của khung Bootstrap, bạn có thể cần tùy chỉnh mức hỗ trợ của mình khi chuyển sang Bootstrap 5 . Internet Explorer 10 và 11 đã chính thức bị loại bỏ trên phiên bản mới.
Sự khác biệt giữa Bootstrap 3 Bootstrap 4 và bootstrap 5 là gì?Bootstrap 3 có hệ thống lưới 4 tầng bao gồm xs, sm, md và lg. Bootstrap 4 có hệ thống lưới 5 tầng bao gồm xs, sm, md, lg và xl . 2. Đơn vị CSS trong Bootstrap 3 là px. |
