Nâng cấp bootstrap 3 lên 5

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

Cuố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

Tạ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

1. 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.
2. 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.
3. 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
4. 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

Thay đổi và cập nhật lớp học

Đã có khá nhiều thay đổi về tên lớp giữa hai phiên bản và một số lớp đã bị thu hồi

kiểu chữ

Kiểu chữ Bootstrap đang sử dụng rems. Không giống như px và em, nó không phải là một đơn vị cố định hoặc tương đối trực tiếp hoặc gần nhất với phép đo gốc của nó. Đơn vị rem là động và liên quan đến thẻ HTML gốc. Tuy nhiên, bạn vẫn có thể sử dụng px, em và pt trên các dự án Bootstrap nếu muốn

Để cung cấp cho bạn ý tưởng về cách thức hoạt động của rems, bạn có thể chia mục tiêu thành kích thước cơ sở của html theo pixel

Giả sử chúng ta có đoạn mã sau

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

Trong ví dụ trên, chúng tôi đặt thẻ đoạn thành 1 rem tương đương với 16px làm kích thước gốc html của chúng tôi. Trong khi thẻ h1 sẽ có 1. 875rem nếu bạn sẽ chia kích thước mục tiêu là 30px cho kích thước gốc html là 16px

Bootstrap 4 kéo các đơn vị rems vào cảnh để có tỷ lệ hoàn hảo 100% cho toàn bộ ứng dụng. Điều này giúp dễ dàng tăng hoặc giảm tỷ lệ cho các thiết bị. Cũng cần lưu ý rằng kích thước của thẻ html có thể được tùy chỉnh theo kích thước ưa thích của bạn

Bảng lớp theo ngữ cảnh

Bootstrap 3 đã sử dụng lớp ngữ cảnh để đặt một số màu nền trên các hàng của bảng hoặc các ô riêng lẻ. Trong Bootstrap 4, họ đã thêm. tiền tố table-* trên mỗi lớp theo ngữ cảnh

Bảng cô đọng đã đổi tên

Bootstrap 3 đã qua sử dụng. lớp table-condensed để làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô. Trong Bootstrap 4, nó được đổi tên thành. table-sm để thống nhất

Kiểm tra ví dụ mã dưới đây

Đ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

	

		Email
		

			
			
		
		

			Password
			

				
				
			
			

				

					Sign 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 Header 
	

		
		
This 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

Tôi có thể nâng cấp Bootstrap 3 lên 5 không?

Làm cách nào để nâng cấp các phiên bản Bootstrap?

Tôi có nên nâng cấp Bootstrap 3 lên 4 không?

Tại sao phải nâng cấp lên Bootstrap 5?