Bạn may mắn; . Những thay đổi bạn cần thực hiện thường chỉ là đổi tên lớp và một số thiết lập
Tìm kiếm một trình xây dựng trực tuyến Bootstrap?
- 👉 Hãy dùng thử Trình tạo Bootstrap của chúng tôi và tạo các dự án không giới hạn cho số lượng khách hàng không giới hạn
- 👉 Bắt đầu xây dựng trang web bằng Mẫu Bootstrap của chúng tôi
Để giúp bạn tiết kiệm nhiều thời gian tìm kiếm nhật ký thay đổi, tôi đã biên soạn một danh sách những điều bạn cần biết khi di chuyển từ Bootstrap 3 sang Bootstrap 4
Chúng tôi sẽ bắt đầu bằng cách thảo luận về những thay đổi được thực hiện trong khung Bootstrap 4 và nó sẽ ảnh hưởng như thế nào đến hiệu suất trang web của bạn. Sau đó, chúng ta sẽ xem xét cách cài đặt bootstrap mới và cách đơn vị đo lưới đã thay đổi và cách flexbox có thể trợ giúp cho các thiết kế đáp ứng. Chúng ta cũng sẽ thảo luận về các thay đổi đối với một số thành phần và xem điều gì sẽ xảy ra với JavaScript trên phiên bản mới
Trình tạo mẫu email trực tuyến
Với Bưu thiếp, bạn có thể tạo và chỉnh sửa các mẫu email trực tuyến mà không cần bất kỳ kỹ năng viết mã nào. Bao gồm hơn 100 thành phần giúp bạn tạo các mẫu email tùy chỉnh nhanh hơn bao giờ hết
Dùng thử miễn phíSản phẩm khácCuối cùng, chúng ta sẽ xem xét một số thành phần mới bao gồm thẻ, chú giải công cụ và hộp linh hoạt. Nếu bạn đang chuẩn bị di chuyển một trang web từ phiên bản Bootstrap cũ sang Bootstrap 4, thì bài viết này là dành cho bạn
Bắt đầu nào
Mục lục
Video hướng dẫn
Thay đổi toàn cầu
Đây là những thay đổi toàn cầu trong Bootstrap 4
- Chuyển từ Ít hơn sang Sass cho các tệp CSS nguồn
- Đã chuyển từ px sang rem làm đơn vị CSS chính
- Truy vấn phương tiện hiện ở dạng ems thay vì pxs
- Kích thước phông chữ chung tăng từ 14px lên 16px
Mã nguồn Bootstrap
Mã nguồn Bootstrap 3 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. Nó có hệ thống phân cấp tệp sau
Trong Bootstrap v4. 0. 0-alpha, nguồn Ít hơn đã được thay thế bằng các tệp Sass do quá trình di chuyển từ Ít hơn sang Sass qua libSass. Vì Bootstrap 4 không hỗ trợ glyphicons nữa nên thư mục fonts cũng bị bỏ qua. Bootstrap 4 có hệ thống phân cấp tệp sau
Tạo trang web với Trình tạo trực tuyến của chúng tôi
Với Ứng dụng Khởi động và Ứng dụng Trang trình bày, bạn có thể tạo trang web không giới hạn bằng trình chỉnh sửa trang web trực tuyến bao gồm các thành phần, mẫu và chủ đề được mã hóa và thiết kế sẵn
Try Startup App Try Slides AppSản phẩm khácTại thời điểm viết bài này, phiên bản biên dịch Bootstrap 4 chưa có sẵn
Cài đặt Bootstrap 4
Bootstrap 4 cung cấp nhiều tùy chọn để cài đặt. Bootstrap 4 Alpha mới ra mắt nên không phải tất cả các trình quản lý gói đều đã xuất bản phiên bản 4 alpha, nhưng nó sẽ sớm ra mắt
Bạn có thể chọn các tùy chọn bạn muốn theo những gì bạn cần
- Source Files: Use Bootstrap by downloading the complete package source which includes Sass, JavaScript, and documentation files. This requires a Sass compiler, Autoprefixer, and some setup. If you wish to just use the bootstrap files you can just copy the location of the CSS and JavaScript inside the tag into your section before all other stylesheets to load the CSS.
- Bootstrap CDN: Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Copy the link inside the tag into your section before all other stylesheets to load the CSS.
- Trình quản lý gói. Sử dụng trình quản lý gói, chẳng hạn như Bower, npm, sao băng và nhà soạn nhạc để cài đặt Bootstrap. Điều này sẽ yêu cầu trình biên dịch Sass và Autoprefixer để thiết lập khớp với các phiên bản được biên dịch chính thức
- Xây dựng tùy chỉnh. Nếu bạn chỉ cần một phần CSS hoặc JS của Bootstrap, bạn có thể sử dụng một trong các bản dựng tùy chỉnh có sẵn
- Khởi động lại bao gồm các biến/mixin, Chuẩn hóa và Khởi động lại. Không có JavaScript
- Lưới chỉ bao gồm các biến/mixin và hệ thống lưới của chúng tôi. Không có JavaScript
- Flexbox bao gồm tất cả Bootstrap có bật flexbox và hỗ trợ trình duyệt thấp hơn
Cập nhật hệ thống lưới
Hệ thống lưới Bootstrap 4 vẫn tuân theo cùng một cú pháp HTML, nhưng đơn vị đo lường thay đổi
Ví dụ: bạn vẫn có thể sử dụng cùng một đánh dấu lưới 12 cột và lưới lồng
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Điều này không mới; . Tuy nhiên, các lớp Bootstrap 4 đã sử dụng ems chứ không phải pixel và họ đã thêm một lớp mới cho màn hình cực lớn. Kiểm tra các lớp cùng với kích thước màn hình của họ
- col-xs cho màn hình cực nhỏ [chiều rộng màn hình nhỏ hơn 34em]
- col-sm cho màn hình nhỏ hơn [chiều rộng màn hình 34em trở lên]
- col-md cho màn hình trung bình [chiều rộng màn hình 48em trở lên]
- col-lg để hiển thị lớn hơn [chiều rộng màn hình 62em trở lên]
- col-xl cho màn hình cực lớn [chiều rộng màn hình 75em trở lên]
Một điều đáng chú ý nữa là lớp container và hàng. Vùng chứa có độ rộng tối đa được đặt bằng rems trong khi hàng có lề trái và phải âm -. 9375rem và phần đệm trái và phải là 0. 9375 rem là 15px trong Bootstrap 3
Mặc dù đây có thể là một điều tốt để hỗ trợ tất cả các kích thước màn hình, nhưng có thể mất thời gian để một số nhà thiết kế và nhà phát triển web làm quen với nó vì hầu hết các chương trình đồ họa đang được sử dụng ngày nay như Photoshop đều sử dụng pixel trong thiết kế của nó
Nếu bạn đang sử dụng phiên bản nguồn Sass CSS của Bootstrap 4, bạn có thể kiểm soát kích thước lưới bằng cách thay đổi các biến sau
- cột lưới $. số lượng lưới theo chiều ngang [12 mặc định]
- $grid-gutter-width. tổng số phần đệm xung quanh mỗi lưới [mặc định 30px]
- $grid-float-breakpoint. kích thước tối thiểu của thanh điều hướng trở nên không bị thu gọn [$screen-sm-min default]
- $grid-float-breakpoint-max. kích thước tối đa khi thanh điều hướng bắt đầu thu gọn [mặc định sẽ là kích thước của $grid-float-breakpoint – 1]
Đặt lại cập nhật thành phần
Nicolas Gallagher bình thường hóa. css đã được sử dụng trong Bootstrap 3 để thiết lập lại CSS và nó đã được cải thiện trong Bootstrap 4
Using the same file you see in Boostrap 3, they added some Bootstrap reset and base styles that are handy and compressed it into a single file and call it reboot.css. For example, some
Cell 1 | Cell 2 | Cell 3 |
Cell 4 | Cell 5 | Cell 6 |
Cell 7 | Cell 8 | Cell 9 |
Đoạn mã trên sẽ thích điều này
Mẫu lớp
Biểu mẫu có một số thay đổi đối với các lớp. Hai thay đổi chính được thực hiện là đổi tên. đầu vào-lg và. các lớp đầu vào-sm để. kiểm soát hình thức-lg và. form-control-sm và thả. biểu mẫu-nhóm-*
Trong Bootstrap 4 thêm cái mới. lớp nhãn điều khiển biểu mẫu thành các nhãn trung tâm theo chiều dọc với. điều khiển biểu mẫu
Hãy xem những thay đổi trong hành động
PasswordSign in
Đoạn mã trên sẽ trông như thế này
Di cư khác
Ngoài các thay đổi và cập nhật lớp ở trên, các tên lớp sau cũng cần được thay đổi nếu bạn đang di chuyển từ Bootstrap 3 sang Bootstrap 4
Thay đổi JavaScript
Bootstrap sử dụng rất nhiều thành phần phụ thuộc của JavaScript và giống như trong các thành phần thông thường, thực sự không có nhiều thay đổi, đặc biệt là về phần JavaScript
Đôi khi, chúng ta sẽ thấy một số điều chỉnh nhưng nhìn chung trạng thái mã hóa khá giống nhau. Sau đây là một số điều chỉnh
- Bỏ hỗ trợ cho IE8. Giờ đây, hỗ trợ Internet Explorer 8 đã ngừng hoạt động, bạn có thể sử dụng jQuery 2 một cách an toàn. 0 là phiên bản nhanh hơn của jQuery
- Hỗ trợ ES6. Tất cả các plugin được viết bằng ES6 và được biên dịch bằng Babel, một trình biên dịch JavaScript. Điều tốt về điều này là nó có thể được biên dịch và duy trì dễ dàng hơn và nhanh hơn
- Các vấn đề về AMD và UMD đã được giải quyết
Các tính năng mới
Hầu hết các thay đổi đã được thực hiện để mang lại sự phù hợp với sơ đồ đặt tên được sử dụng bởi các lớp khác nhau nhưng về phần này, chúng ta hãy xem qua một số tính năng mới chính
thẻ
Trong Bootstrap 4, các bảng điều khiển, hình thu nhỏ và giếng đã bị xóa và thay thế bằng thẻ. Thành phần này có thể được sử dụng để hiển thị thông tin dưới dạng trang hoặc vùng chứa hỗ trợ các loại nội dung khác nhau như liên kết, văn bản, hình ảnh, đầu trang, chân trang, v.v. với nhiều màu nền khác nhau
Để bật thẻ, hãy thêm. thẻ và. các lớp khối thẻ cho một phần tử. Ngoài ra còn có một số lớp khác mà bạn có thể sử dụng bên trong. hạng thẻ
- tiêu đề thẻ cho tiêu đề tiêu đề
- card-text cho phần tử văn bản
- tiêu đề thẻ cho tiêu đề
- chân thẻ cho chân trang
Kiểm tra mã dưới đây để xem nó hoạt động
Card HeaderThis is the Card Title
These are card text. See? They are awesome!
Card Footer
Đoạn mã trên sẽ có kết quả này
Hộp linh hoạt
Một tính năng tùy chọn khác được thêm vào trong Bootstrap 4 là flexbox. Bố cục hộp linh hoạt hoặc flexbox là một mô hình hộp mới được tối ưu hóa cho bố cục giao diện người dùng hoạt động với CSS3. Nó cho phép sắp xếp các phần tử trên một trang sao cho các phần tử “dự đoán” khi bố cục trang được thay đổi kích thước
Để kích hoạt nó trong dự án Bootstrap 4 của bạn, hãy đặt biến Boolean $enable-flex thành true trong tệp và sau khi biên dịch lại, mong rằng tất cả bố cục lưới ngay lập tức chuyển sang sử dụng flexbox điều chỉnh cú pháp HTML của bạn
Bản demo codepen này của Nicholas Cerminara cho thấy flexbox hoạt động như thế nào trong thời gian thực
Ghi chú. Flexbox không hỗ trợ Internet Explorer 9
Chú giải công cụ
Plugin chú giải công cụ Bootstrap ban đầu dựa trên jQuery. plugin say được viết bởi Jason Frame. Tuy nhiên, trong Bootstrap 4, nó chuyển sang Tether, một plugin của bên thứ ba. Nếu bạn muốn sử dụng tính năng mới này, hãy bao gồm tether. js ngay trước bootstrap. js
Từ cuối cùng
Trong bài viết này, bạn đã tìm hiểu về những điều cần biết khi di chuyển từ Bootstrap 3 sang Bootstrap 4. Bạn nên luôn kiểm tra tài liệu chính thức và các bản cập nhật trong tương lai
Bạn có thể cân nhắc sử dụng trình quản lý gói để thực hiện quá trình di chuyển của mình. Một cái gì đó giống như một Grunt. tác vụ js cùng với nút. js, để khi bạn chạy hệ thống xây dựng của mình, những thay đổi này được thực hiện trong thời gian thực. Tuy nhiên, tại điều đáng chú ý là không phải tất cả các trình quản lý gói đều đã xuất bản Bootstrap 4 alpha
Trong hướng dẫn tiếp theo, tôi sẽ đi vào hướng dẫn chi tiết hơn khi sử dụng Sass và grunt. js để tăng tốc quá trình phát triển Boostrap