Nâng cấp Bootstrap 3 lên 4 Visual Studio

Kết nối web 7. 0 chuyển từ Bootstrap v3 sang v4, đây là một thay đổi khá lớn đối với khung Bootstrap. May mắn thay, đối với các tính năng được sử dụng bởi các mẫu và biểu định kiểu cơ sở của Kết nối web, các thay đổi là tương đối nhỏ

Hầu hết các khái niệm Bootstrap từ 3. x vẫn nguyên vẹn trong v4 - có rất nhiều tính năng và thành phần mới và một số đã thay đổi. Tuy nhiên, một số khái niệm bố cục phổ biến nhất và bố cục điều khiển biểu mẫu cơ sở hầu như giống nhau giữa 3 và 4

Bạn có cần nâng cấp không?

Nếu bạn có một ứng dụng hiện có trong Bootstrap 3, bạn không cần phải nâng cấp nó lên v4. Kết nối web tiếp tục chạy với các mẫu cũ và mọi thứ sẽ tiếp tục hoạt động theo cách đó. Khi một dự án đã được thiết lập, có rất ít điều mà Kết nối web thực hiện mà phụ thuộc vào các tính năng cụ thể của boostrap

Có một số điều khiển wwHtmlHelper bị ảnh hưởng, tuy nhiên, bạn có thể kiểm soát việc hiển thị các điều khiển này bằng cách sử dụng công tắc trình biên dịch trong wconnect_override.h

#UNDEFINE BOOTSTRAP_VERSION
#DEFINE BOOSTRAP_VERSION        3

Khi bạn đặt cờ này, Kết nối web sẽ hiển thị một số điều khiển - HtmlDateTextBox(), HtmlErrorDisplay() - dựa trên cài đặt đó

Những điều sẽ phá vỡ

Có một danh sách toàn diện về tất cả các thay đổi trong Bootstrap 4 kể từ 3. x ở đây

• Chuyển sang v4
• GizModo Tổng quan về Di chuyển sang v4

Trong số những thứ đó, hầu hết những thứ mà bạn có khả năng gặp phải là

• Bảng điều khiển, Chà, Chú giải công cụ và một số khác đã được chuyển đổi thành Thẻ
• Hầu hết kiểu dáng màu nền trước và màu nền hiện được thực hiện với các lớp bg-style và

  
  	
  
  		
  
  			
  
  				
  
  					
  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.
  		
  	
  
  

  0 giúp đơn giản hóa mọi thứ rất nhiều
• Nhóm đầu vào đã thay đổi thành khác nhưng hợp lý hơn nếu cú ​​pháp dài dòng hơn
• Có một số thay đổi kích thước trong các hình thức

Tôi đã thay đổi hai trang web có kích thước trung bình thành Bootstrap 4 và tôi mất hai đến ba giờ trên mỗi trang để sửa tất cả các trang. Hầu hết các thay đổi là tìm kiếm và thay thế cộng với một số sắp xếp lại thủ công. Các tài liệu điều khiển Bootstrap là một trợ giúp tuyệt vời cho việc này và cuối cùng tôi đã tạo một số Đoạn mã cho điều này cho Visual Studio và Visual Studio Code được bao gồm trong Kết nối web và những điều này có thể giúp tạo lại một số 'điều khiển' nhanh hơn

Nhìn chung, tôi nghĩ nên nâng cấp lên v4 nếu bạn đang tích cực bảo trì ứng dụng. Phiên bản mới dễ dàng hơn và nhất quán hơn trong việc sử dụng các kiểu, trông mượt mà hơn nhiều, khắc phục nhiều sự cố lạ trên thiết bị di động so với phiên bản v3 và đảm bảo bạn đang làm việc với công nghệ hiện tại vẫn được cập nhật và bảo trì

Với đánh dấu HTML Bootstrap 3 hợp lệ, công cụ nâng cấp này sẽ thay thế Bootstrap 3. x lớp CSS với Bootstrap 4. lớp x. 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. Xem Hướng dẫn di chuyển Bootstrap 4 hoàn chỉnh để biết những thay đổi mới nhất

Có gì mới trong Bootstrap 4?

Dưới đây là những thay đổi về hạng mà dịch vụ này sẽ di chuyển. col-*-offset-*. bù lại-*. col-*-push-*. đặt hàng-*-2. col-*-kéo-*. đặt hàng-*-1. bảng điều khiển. Thẻ. tiêu đề bảng điều khiển. tiêu đề thẻ. tiêu đề bảng điều khiển. tiêu đề thẻ. bảng điều khiển cơ thể. thân thẻ. chân trang bảng điều khiển. chân thẻ. bảng điều khiển chính. Thẻ. bg-chính. chữ trắng. bảng điều khiển thành công. Thẻ. bg-success. chữ trắng. thông tin bảng điều khiển. Thẻ. chữ trắng. thông tin bg. bảng cảnh báo. Thẻ. cảnh báo bg. bảng điều khiển nguy hiểm. Thẻ. nguy hiểm bg. chữ trắng. Tốt. Thẻ. thân thẻ. hình nhỏ. Thẻ. thân bài. danh sách nội tuyến > li. list-inline-item. menu thả xuống > li. mục thả xuống. thanh điều hướng > li. mục điều hướng. thanh điều hướng > li > a. liên kết điều hướng. thanh điều hướng bên phải. ml-auto. thanh điều hướng-btn. mục điều hướng. navbar-fixed-top. cố định hàng đầu. điều hướng xếp chồng lên nhau. cột flex. btn-mặc định. btn-trung học. phản hồi img. img-chất lỏng. img-vòng tròn. hình tròn. Tôi đang có căn cứ. làm tròn. dạng ngang (đã xóa). Đài. kiểm tra biểu mẫu. hộp kiểm. kiểm tra biểu mẫu. đầu vào-lg. kiểm soát hình thức-lg. đầu vào-sm. hình thức kiểm soát-sm. nhãn kiểm soát. col-form-nhãn. bảng cô đặc. bảng-sm. phân trang > li. mục trang. phân trang > li > a. trang liên kết. mục. carousel-item. khối trợ giúp. văn bản biểu mẫu. kéo sang phải. thả nổi bên phải. kéo sang trái. float-left. khối trung tâm. mx-auto. khối d. ẩn-xs. d-không. ẩn-sm. d-sm-không. ẩn-md. d-md-none. ẩn-lg. d-lg-không. có thể nhìn thấy-xs. khối d. d-sm-không. có thể nhìn thấy-sm. d-không. khối d-sm. d-md-none. có thể nhìn thấy-md. d-không. khối d-md. d-lg-không. có thể nhìn thấy-lg. d-không. d-lg-khối. d-xl-none. nhãn mác. phù hiệu. phù hiệu. phù hiệu. thuốc huy hiệu

Ghi chú. Hiện tại dịch vụ này không di chuyển phông chữ Biểu tượng và Thanh tiến trình. Glyphicons đã bị xóa khỏi Bootstrap 4, nhưng có thể sử dụng một thư viện biểu tượng phông chữ khác như FontAwesome

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ác

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

Try Startup App Try Slides AppSản phẩm khác

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

styles we’re customized for a simpler baseline and later provide .table, .table-bordered, and more.

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

Table Header 1	Table Header 2	Table Header 3
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

	

		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 for the text element
• 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

Làm cách nào để chuyển đổi Bootstrap 3 thành 4?

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

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 Bootstrap 3 lên 4 trong Angular CLI?