Trung tâm văn bản bootstrap 4
|
Gần đây, đã có rất nhiều cuộc thảo luận về những điểm mới trong Bootstrap 4 và tôi tò mò muốn xem xét sự khác biệt về hình thức và kiểu dáng. Dưới đây là hướng dẫn trực quan sẽ cho bạn thấy có gì mới trong Bootstrap 4 so với Bootstrap 3 Show
Bảng bây giờ là Thẻ Điều bạn nhận thấy đầu tiên trong Bootstrap 4 là. bảng điều khiển và. cũng đã được thay thế bởi. Thẻ. Điều này rất có ý nghĩa vì thẻ là một trong những xu hướng nổi tiếng hơn trong thiết kế đáp ứng. Các Thẻ Bootstrap 4 có thể là số ít, được nhóm lại với nhau hoặc có chiều cao bằng nhau. Ở dạng mặc định, bạn sẽ thấy chúng trông gần giống nhau Nhưng nhờ có flexbox, giờ đây việc tạo các nhóm thẻ có cùng chiều cao trở nên dễ dàng hơn nhiều… Các màu thẻ theo ngữ cảnh vẫn còn trong Bootstrap 4, nhưng giờ đây chúng táo bạo hơn với nền ngược Ngoài ra, có các thẻ phác thảo khi bạn muốn màu theo ngữ cảnh mà không có màu nền đậm Phông chữ lớn hơn Như bạn có thể nhận thấy với các thẻ, rõ ràng là kiểu chữ lớn hơn trong Bootstrap 4. Kích thước phông chữ mặc định đã tăng từ 14px lên 16px trong Bootstrap 4 mới. Ngoài ra còn có các tiêu đề hiển thị lớn mới để làm cho văn bản thực sự nổi bật. Tất cả kích thước phông chữ trong Bootstrap 4 hoàn toàn dựa trên các đơn vị `rem` để tất cả các kích thước phông chữ đều liên quan đến phần tử gốc Lưới đã thay đổi Nhìn lại Bootstrap 3, 4 tầng lưới (điểm ngắt 'xs', 'sm', 'md' và 'lg') hoạt động như thế này Như bạn có thể thấy trong Bootstrap 3, điểm dừng nhỏ nhất có nhiều loại thiết bị có chiều rộng nhỏ hơn 768px. Do đó, không có cách nào đơn giản để tạo các bố cục lưới khác nhau cho màn hình điện thoại thông minh điển hình (~375px). Cũng không có cách nào để phân biệt giữa chế độ dọc và ngang trên thiết bị di động Lưới Bootstrap 4Giới thiệu tầng lưới XL mớiHướng tới Bootstrap 4, tầng lưới mới cung cấp hỗ trợ tốt hơn cho chiều rộng thiết bị nhỏ hơn điển hình. Hiện có 5 bậc (hoặc điểm dừng) để hỗ trợ chiều rộng màn hình dọc và ngang điển hình Bootstrap 4 giới thiệu một điểm ngắt lưới mới với các lớp col-xl-*. Bậc bổ sung này mở rộng phạm vi truy vấn phương tiện xuống tận 544 px (hoặc 34 em dựa trên kích thước mới). Mặc dù cấp XL mới sẽ khiến người ta nghĩ rằng nó được thêm vào để hỗ trợ màn hình cực lớn, nhưng thực tế lại ngược lại Tất cả 3. x tầng trượt lên trong 4. x, để phù hợp với tầng 544 px đến 768 px mới ở dưới cùng. Trong khi 3 cũ. x col-xs-* hỗ trợ độ rộng màn hình dưới 768 px, phiên bản 4 mới. x col-xs-* hỗ trợ chiều rộng màn hình dưới 544 px. Cấp xs mới nhỏ hơn này có nghĩa là điện thoại thông minh hỗ trợ chân dung được cải thiện Máy tính để bàn và máy tính xách taymáy tính bảng cảnh quanMáy tính bảng dọc & phablet ngangPhablet & điện thoại thông minh ngangđiện thoại thông minh chụp chân dungTrong BS 4, tầng bổ sung cho phép chúng tôi nhắm mục tiêu các thiết bị nhỏ hơn 544 px và tạo bố cục dành riêng cho chiều rộng màn hình này. Hãy thử đoạn mã ví dụ này để xem tất cả các điểm ngắt lưới BS 4 hoạt động như thế nào Bản trình diễn lưới Bootstrap 4 nhiều điều nhỏ Một sự khác biệt rõ ràng giữa 2. x đến 3. x là bước chuyển từ thiết kế gradient sang thiết kế phẳng, điều này thể hiện rõ nhất ở kiểu dáng nút và nút điều hướng. Bootstrap 4 tinh tế hơn trong giao diện của nó. Lấy ví dụ các nút. Chúng vẫn phẳng, và bây giờ có thêm hương vị phác thảo mới lớp học tiện ích Một trong những tính năng mới yêu thích của tôi trong Bootstrap 4 là việc bổ sung các float phản hồi cho phép bạn thả nổi một phần tử (trái, phải) dựa trên tầng lưới. Thiếu tính năng này thường là một trở ngại yêu cầu các truy vấn phương tiện CSS tùy chỉnh và các lớp trong Bootstrap 3. Hãy xem xét một tình huống mà chúng ta chỉ muốn căn phải các phần tử (float. phải) trên các điểm dừng cụ thể và nếu không thì quay lại hành vi mặc định của Tương tự, các lớp căn chỉnh văn bản có thể được sử dụng để định vị văn bản đáp ứng trong Bootstrap 4 Ngoài ra, có một số lớp tiện ích giãn cách tiện dụng cho phép kiểm soát tốt hơn không gian ngang và dọc bằng cách sử dụng lề và đệm thay đổi xung quanh các phần tử. Lúc đầu, bạn có thể nghĩ rằng các lớp giãn cách này là vô ích. Tuy nhiên, bạn có nhớ đã thử bất kỳ thao tác nào sau đây với Bootstrap 3 không?
Trong Bootstrap 4, các tiện ích giãn cách giúp dễ dàng thay đổi khoảng trắng ngang hoặc dọc. Ngoài ra còn có một cái mới. Lớp http. //www. mật mã. com/go/kaWaobOUD8/bootstrap-4-spacing-utils Khi viết bài này, Bootstrap 4 vẫn đang ở giai đoạn alpha và cách tốt nhất để theo dõi tiến độ là tại blog chính thức của Bootstrap Cập nhật tháng 7 năm 2016 Bootstrap 4 Alpha 3 đã phát hànhBản phát hành alpha 3 mới nhất đã ra mắt và có một số thay đổi mới cần xem xét. Đây là một bản tóm tắt… Thẻ. Thành phần thẻ mới thay thế nhãn cũ Phông chữ. Ngăn xếp phông chữ gốc mới hiện là mặc định Cập nhật tháng 9 năm 2016 Bootstrap 4 Alpha 4Hiện Bootstrap 4 alpha 4 đã ra mắt, các nhà sản xuất Bootstrap đã thông báo rằng họ đang tạm dừng phát triển trên Bootstrap 3, để đạt được tiến độ nhanh hơn trên Bootstrap 4 Cập nhật tháng 1 năm 2017 Bootstrap 4 Alpha 6Với bản phát hành mới nhất này, Bootstrap hiện là flexbox theo mặc định, do đó không còn biến $enable_flexbox nữa. Cũng đã có một số đổi tên để đơn giản hóa và trực quan hóa tên lớp. Điều quan trọng nhất là việc bỏ hậu tố cột Flexbox hiện cũng được sử dụng cho thành phần Navbar (thay vì float) và đã có một vài thay đổi đối với các lớp Navbar để làm cho các điểm dừng khác nhau và căn chỉnh nội dung dễ dàng hơn. Ngoài ra còn có nhiều lớp tiện ích flexbox làm cho các bố cục dựa trên flexbox khác nhau trở nên cực kỳ đơn giản. Bản phát hành Alpha 6 cũng có nghĩa là Bootstrap 4 Beta sẽ xuất hiện tiếp theo Cập nhật tháng 5 năm 2018 Bootstrap 4 đã chính thức được phát hành vài tháng trước và hiện đang ở phiên bản 4. 1. 1. Để biết thông tin mới nhất về Bootstrap 4. 1, hãy xem những bài viết mới này… 10 lý do Bootstrap 4 tốt hơnHoặc, tại sao chuyển sang flexbox là một cải tiến lớnvừa phải. com Trình tạo chủ đề Bootstrap tùy chỉnhGiới thiệu Whoot. dây đeovừa phải. com Tìm hiểu thêm về Bootstrap 4 Cảnh báo người trong cuộc. Nếu bạn đang xem xét phiên bản mới, hãy xem Hướng dẫn cơ bản về Bootstrap 4 — đó là một bộ sưu tập ngày càng nhiều các đoạn trích, ví dụ và câu chuyện hướng dẫn miễn phí về Bootstrap 4 dành riêng cho WDstack |
