Tôi nên học Bootstrap 3 hay 4?
|
Bootstrap (hiện tại v3. 3. 7) có một số cách dễ dàng để nhanh chóng bắt đầu, mỗi cách phù hợp với một cấp độ kỹ năng và trường hợp sử dụng khác nhau. Đọc qua để xem những gì phù hợp với nhu cầu cụ thể của bạn Show
CSS, JavaScript và phông chữ được biên dịch và rút gọn. Không có tài liệu hoặc tệp nguồn gốc nào được bao gồm Tải xuống Bootstrap Bootstrap CDNNhững người ở jsDelivr đã ân cần cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Chỉ cần sử dụng các liên kết Bootstrap CDN này Cài đặt với BowerBạn cũng có thể cài đặt và quản lý Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng Bower Cài đặt với npmBạn cũng có thể cài đặt Bootstrap bằng npm Bootstrap's
Cài đặt với ComposerBạn cũng có thể cài đặt và quản lý Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng Trình soạn thảo Cần có Autoprefixer cho Ít/SassBootstrap sử dụng Autoprefixer để xử lý các tiền tố của nhà cung cấp CSS. Nếu bạn đang biên dịch Bootstrap từ nguồn Ít/Sass của nó và không sử dụng Gruntfile của chúng tôi, bạn sẽ cần tự mình tích hợp Autoprefixer vào quy trình xây dựng của mình. Nếu bạn đang sử dụng Bootstrap được biên dịch sẵn hoặc sử dụng Gruntfile của chúng tôi, bạn không cần phải lo lắng về điều này vì Autoprefixer đã được tích hợp vào Gruntfile của chúng tôi Bootstrap có thể tải xuống ở hai dạng, trong đó bạn sẽ tìm thấy các thư mục và tệp sau đây, nhóm các tài nguyên chung một cách hợp lý và cung cấp cả các biến thể được biên dịch và rút gọn Bootstrap được biên dịch sẵnSau khi tải xuống, hãy giải nén thư mục đã nén để xem cấu trúc của (đã biên dịch) Bootstrap. Bạn sẽ thấy một cái gì đó như thế này Đây là dạng cơ bản nhất của Bootstrap. các tệp được biên dịch trước để sử dụng nhanh chóng trong hầu hết mọi dự án web. Chúng tôi cung cấp CSS và JS đã biên dịch ( Mã nguồn khởi độngTải xuống mã nguồn Bootstrap bao gồm nội dung CSS, JavaScript và phông chữ được biên dịch sẵn, cùng với nguồn Ít hơn, JavaScript và tài liệu. Cụ thể hơn, nó bao gồm những điều sau đây và hơn thế nữa Bootstrap sử dụng Grunt cho hệ thống xây dựng của nó, với các phương pháp thuận tiện để làm việc với khung. Đó là cách chúng tôi biên dịch mã của mình, chạy thử nghiệm và hơn thế nữa Cài đặt GruntĐể cài đặt Grunt, trước tiên bạn phải tải xuống và cài đặt nút. js (bao gồm npm). npm là viết tắt của các mô-đun đóng gói nút và là một cách để quản lý các phụ thuộc phát triển thông qua nút. js Sau đó, từ dòng lệnh
Khi hoàn tất, bạn sẽ có thể chạy các lệnh Grunt khác nhau được cung cấp từ dòng lệnh Các lệnh Grunt có sẵn$ composer require twbs/bootstrap1 (Chỉ cần biên dịch CSS và JavaScript)Tạo lại thư mục $ composer require twbs/bootstrap3 (Xem)Xem các tệp Ít nguồn hơn và tự động biên dịch lại chúng thành CSS bất cứ khi nào bạn lưu thay đổi $ composer require twbs/bootstrap4 (Chạy thử nghiệm)Chạy JSHint và chạy thử nghiệm QUnit không đầu trong PhantomJS $ composer require twbs/bootstrap5 (Xây dựng và thử nghiệm nội dung tài liệu)Xây dựng và kiểm tra CSS, JavaScript và các nội dung khác được sử dụng khi chạy tài liệu cục bộ thông qua $ composer require twbs/bootstrap7 (Xây dựng hoàn toàn mọi thứ và chạy thử nghiệm)Biên dịch và giảm thiểu CSS và JavaScript, xây dựng trang web tài liệu, chạy trình xác thực HTML5 đối với tài liệu, tạo lại nội dung Trình tùy chỉnh, v.v. Yêu cầu Jekyll. Thường chỉ cần thiết nếu bạn đang tự hack Bootstrap Xử lý sự cốNếu bạn gặp sự cố khi cài đặt các phụ thuộc hoặc chạy các lệnh Grunt, trước tiên hãy xóa thư mục Bắt đầu với mẫu HTML cơ bản này hoặc sửa đổi. Chúng tôi hy vọng bạn sẽ tùy chỉnh các mẫu và ví dụ của chúng tôi, điều chỉnh chúng cho phù hợp với nhu cầu của bạn Sao chép HTML bên dưới để bắt đầu làm việc với một tài liệu Bootstrap tối thiểu Xây dựng dựa trên mẫu cơ bản ở trên với nhiều thành phần của Bootstrap. Chúng tôi khuyến khích bạn tùy chỉnh và điều chỉnh Bootstrap cho phù hợp với nhu cầu của dự án cá nhân của bạn Lấy mã nguồn cho mọi ví dụ bên dưới bằng cách tải xuống kho lưu trữ Bootstrap. Các ví dụ có thể được tìm thấy trong thư mục Sử dụng khuôn khổMẫu dành cho người mới bắt đầuKhông có gì ngoài những điều cơ bản. CSS và JavaScript đã biên dịch cùng với vùng chứa Chủ đề BootstrapTải chủ đề Bootstrap tùy chọn để có trải nghiệm trực quan nâng cao lướiNhiều ví dụ về bố cục lưới với cả bốn tầng, lồng vào nhau, v.v. JumbotronXây dựng xung quanh jumbotron với thanh điều hướng và một số cột lưới cơ bản jumbotron hẹpXây dựng một trang tùy chỉnh hơn bằng cách thu hẹp vùng chứa mặc định và jumbotron thanh điều hướngMẫu siêu cơ bản bao gồm thanh điều hướng cùng với một số nội dung bổ sung Thanh điều hướng trên cùng tĩnhMẫu siêu cơ bản với thanh điều hướng trên cùng tĩnh cùng với một số nội dung bổ sung cố định thanh điều hướngMẫu siêu cơ bản với thanh điều hướng trên cùng cố định cùng với một số nội dung bổ sung thành phần tùy chỉnhChe phủMẫu một trang để xây dựng các trang chủ đơn giản và đẹp mắt băng chuyềnTùy chỉnh thanh điều hướng và băng chuyền, sau đó thêm một số thành phần mới BlogBố cục blog hai cột đơn giản với điều hướng, tiêu đề và loại tùy chỉnh bảng điều khiểnCấu trúc cơ bản cho bảng điều khiển quản trị với thanh bên và thanh điều hướng cố định Trang đăng nhậpBố cục và thiết kế biểu mẫu tùy chỉnh cho biểu mẫu đăng nhập đơn giản Chân trang cố địnhĐính kèm một chân trang vào dưới cùng của chế độ xem khi nội dung ngắn hơn nó Chân trang cố định với thanh điều hướngĐính kèm chân trang vào dưới cùng của chế độ xem với thanh điều hướng cố định ở trên cùng thí nghiệmBootstrap không phản hồiDễ dàng vô hiệu hóa khả năng phản hồi của Bootstrap ngoài canvasXây dựng menu điều hướng ngoài canvas có thể chuyển đổi để sử dụng với Bootstrap Bootlint là công cụ linter HTML Bootstrap chính thức. Nó tự động kiểm tra một số lỗi HTML phổ biến trong các trang web đang sử dụng Bootstrap theo cách khá "vanilla". Các thành phần/widget của Vanilla Bootstrap yêu cầu các phần của DOM tuân theo các cấu trúc nhất định. Bootlint kiểm tra xem các phiên bản của các thành phần Bootstrap có cấu trúc HTML chính xác không. Cân nhắc thêm Bootlint vào chuỗi công cụ phát triển web Bootstrap của bạn để không có lỗi phổ biến nào làm chậm quá trình phát triển dự án của bạn Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết tin đồn mới nhất và video âm nhạc tuyệt vời Bootstrap tự động điều chỉnh các trang của bạn cho các kích thước màn hình khác nhau. Dưới đây là cách tắt tính năng này để trang của bạn hoạt động như ví dụ không phản hồi này Các bước để vô hiệu hóa khả năng phản hồi của trang
Bạn vẫn sẽ cần Reply. js cho IE8 (vì các truy vấn phương tiện của chúng tôi vẫn ở đó và cần được xử lý). Điều này vô hiệu hóa các khía cạnh "trang web dành cho thiết bị di động" của Bootstrap Mẫu Bootstrap bị vô hiệu hóa khả năng phản hồiChúng tôi đã áp dụng các bước này cho một ví dụ. Đọc mã nguồn của nó để xem những thay đổi cụ thể được triển khai Xem ví dụ không phản hồi Bootstrap được xây dựng để hoạt động tốt nhất trong các trình duyệt dành cho máy tính để bàn và thiết bị di động mới nhất, nghĩa là các trình duyệt cũ hơn có thể hiển thị các kết xuất theo kiểu khác, mặc dù đầy đủ chức năng, của một số thành phần nhất định trình duyệt được hỗ trợCụ thể, chúng tôi hỗ trợ các phiên bản mới nhất của các trình duyệt và nền tảng sau Các trình duyệt thay thế sử dụng phiên bản mới nhất của WebKit, Blink hoặc Gecko, dù trực tiếp hay thông qua API chế độ xem web của nền tảng, đều không được hỗ trợ rõ ràng. Tuy nhiên, Bootstrap (trong hầu hết các trường hợp) cũng sẽ hiển thị và hoạt động chính xác trong các trình duyệt này. Thông tin hỗ trợ cụ thể hơn được cung cấp dưới đây Thiêt bị di độngNói chung, Bootstrap hỗ trợ các phiên bản mới nhất của các trình duyệt mặc định của mỗi nền tảng chính. Lưu ý rằng các trình duyệt proxy (chẳng hạn như Opera Mini, chế độ Turbo của Opera Mobile, UC Browser Mini, Amazon Silk) không được hỗ trợ ChromeFirefoxSafariAndroidSupportedSupportedN/AiOSSupportedSupportedSupported Trình duyệt máy tính để bànTương tự, các phiên bản mới nhất của hầu hết các trình duyệt máy tính để bàn đều được hỗ trợ ChromeFirefoxInternet ExplorerOperaSafariMacSupportedSupportedN/ASupportedSupportedWindowsSupportedSupportedSupportedSupportedNot supported Trên Windows, chúng tôi hỗ trợ Internet Explorer 8-11 Đối với Firefox, ngoài bản phát hành ổn định thông thường mới nhất, chúng tôi cũng hỗ trợ phiên bản Bản phát hành hỗ trợ mở rộng (ESR) mới nhất của Firefox Không chính thức, Bootstrap sẽ có giao diện và hoạt động đủ tốt trong Chromium và Chrome dành cho Linux, Firefox dành cho Linux và Internet Explorer 7, cũng như Microsoft Edge, mặc dù chúng không được hỗ trợ chính thức Để biết danh sách một số lỗi trình duyệt mà Bootstrap phải vật lộn với, hãy xem Bức tường lỗi trình duyệt của chúng tôi Internet Explorer 8 và 9Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên, xin lưu ý rằng một số thuộc tính CSS3 và phần tử HTML5 không được các trình duyệt này hỗ trợ đầy đủ. Ngoài ra, Internet Explorer 8 yêu cầu sử dụng Reply. js để bật hỗ trợ truy vấn phương tiện Tính năngInternet Explorer 8Internet Explorer 9_______10_______7Không được hỗ trợĐược hỗ trợ Truy cập Tôi có thể sử dụng. để biết chi tiết về hỗ trợ trình duyệt của các tính năng CSS3 và HTML5 Internet Explorer 8 và Phản hồi. jsCẩn thận với những lưu ý sau khi sử dụng Reply. js trong môi trường sản xuất và phát triển của bạn cho Internet Explorer 8 Trả lời. js và CSS tên miền chéoSử dụng trả lời. js với CSS được lưu trữ trên một miền (phụ) khác (ví dụ: trên CDN) yêu cầu một số thiết lập bổ sung. để biết chi tiết Trả lời. js và bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/3Do các quy tắc bảo mật của trình duyệt, hãy trả lời. js không hoạt động với các trang được xem qua giao thức Trả lời. js và bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/5Trả lời. js không hoạt động với CSS được tham chiếu qua Internet Explorer 8 và kích thước hộpIE8 không hỗ trợ đầy đủ Internet Explorer 8 và @font-faceIE8 có một số vấn đề với IE Các chế độ tương thíchBootstrap không được hỗ trợ trong các chế độ tương thích cũ của Internet Explorer. Để chắc chắn rằng bạn đang sử dụng chế độ hiển thị mới nhất cho IE, hãy xem xét đưa thẻ Xác nhận chế độ tài liệu bằng cách mở các công cụ sửa lỗi. nhấn F12 và kiểm tra "Chế độ tài liệu" Thẻ này được bao gồm trong tất cả các tài liệu và ví dụ của Bootstrap để đảm bảo hiển thị tốt nhất có thể trong mỗi phiên bản Internet Explorer được hỗ trợ Xem câu hỏi StackOverflow này để biết thêm thông tin Internet Explorer 10 trong Windows 8 và Windows Phone 8Internet Explorer 10 không phân biệt chiều rộng của thiết bị với chiều rộng của khung nhìn và do đó không áp dụng đúng các truy vấn phương tiện trong CSS của Bootstrap. Thông thường, bạn chỉ cần thêm một đoạn CSS nhanh để sửa lỗi này Tuy nhiên, điều này không hoạt động đối với các thiết bị chạy phiên bản Windows Phone 8 cũ hơn Update 3 (a. k. a. GDR3), vì nó khiến các thiết bị như vậy hiển thị chế độ xem chủ yếu là máy tính để bàn thay vì chế độ xem "điện thoại" hẹp. Để giải quyết vấn đề này, bạn cần bao gồm CSS và JavaScript sau đây để khắc phục lỗi Để biết thêm thông tin và hướng dẫn sử dụng, hãy đọc Windows Phone 8 và Device-Width Lưu ý, chúng tôi đưa điều này vào tất cả các tài liệu và ví dụ của Bootstrap để minh họa Làm tròn phần trăm SafariCông cụ kết xuất của các phiên bản Safari trước v7. 1 cho OS X và Safari cho iOS v8. 0 gặp một số rắc rối với số lượng chữ số thập phân được sử dụng trong các lớp lưới
Phương thức, thanh điều hướng và bàn phím ảoTràn và cuộnHỗ trợ cho Trường văn bản iOS và cuộnKể từ iOS 9. 3, trong khi một phương thức đang mở, nếu lần chạm đầu tiên của cử chỉ cuộn nằm trong ranh giới của một văn bản Tôi nên học Bootstrap 3 hay 4 hay 5?Bootstrap là phiên bản Bootstrap mới nhất và nên được sử dụng nhưng nó chủ yếu phụ thuộc vào mã bạn đang viết. Nếu bạn đang sử dụng JQuery thay vì JS, thì hãy sử dụng Bootstrap 4 nhưng nếu bạn đang sử dụng JS thì nên ưu tiên Bootstrap 5 vì Bootstrap 5 không hỗ trợ JQuery. jQuery và Bootstrap có lỗi thời không?
Bootstrap 4 có đáng học vào năm 2022 không?Bất kỳ khung CSS nào cũng là lựa chọn tốt cho năm 2022 . Chỉ là Bootstrap đi kèm với các thiết kế hạn chế mà các thiết kế từ bên ngoài phải được tích hợp. Trong Bootstrap, chúng ta có thể thêm lớp được xác định trước vào mã mà không cần viết mã. Được sử dụng bởi nhiều công ty nổi tiếng như Twitter, Udemy, Spotify, v.v.
Học Bootstrap 4 có ổn không?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 lỗi quan trọng và thay đổi tài liệu, và việc tiếp tục sử dụng chúng là hoàn toàn an toàn .
Tôi nên học phiên bản Bootstrap nào vào năm 2022?B3. Bootstrap 3 là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu. |
