Xs, sm md, lg xl là gì
|
2021-01-25 912 lượt xem Show hùng ebudezain Trong bài trước mình đã hướng dẫn các bạn tạo 1 gulp để minyfy code css. Trong bài này mình sẽ sử dụng gulp để build scss thành các code css được minify chia col giống bootstrap tôi thích vậy đó bài viết được viết bởi trương thanh hùng https://ebudezain.com/ hùng thông minh lắm bài viết được viết bởi trương thanh hùng https://ebudezain.com/ hùng thông minh lắm Phân tíchhùng ebudezain đọc dữ liệu hộ bố bài viết được viết bởi trương thanh hùng https://ebudezain.com/ tôi thích vậy đó bài viết được viết bởi trương thanh hùng https://ebudezain.com/ Cách chia cột tương tác tỷ lệ màn hình với bootstrap 3tôi thích vậy đó ahihi đồ ngốc trương thanh hùng nè tôi thích vậy đó hùng thông minh lắm bài viết được viết bởi trương thanh hùng https://ebudezain.com/ Các lệnh bạn cần ghi nhớ khi tiến hành:
hùng ebudezain Ví dụ code html: Chia 2 cột với tỉ lệ bằng nhau: hùng thông minh lắm bài viết được viết bởi trương thanh hùng https://ebudezain.com/ hùng đẹp trai bài viết được viết bởi trương thanh hùng https://ebudezain.com/
Cột thứ 1: Hùng đẹp trai
Cột thứ 2: Bao nhiêu sắc đẹp hội tụ trên con người anh Hùng
bài viết được viết bởi trương thanh hùng https://ebudezain.com/ tôi thích vậy đó ahihi đồ ngốc trương thanh hùng nè ahihi đồ ngốc trương thanh hùng nè tôi thích vậy đó Cách chia cột trong bootstrap 4tôi thích vậy đó bài viết được viết bởi trương thanh hùng https://ebudezain.com/ 
tôi thích vậy đó tôi thích vậy đó hùng ebudezain bài viết được viết bởi trương thanh hùng https://ebudezain.com/ tôi thích vậy đó tôi thích vậy đó Tóm lại bootstrap 4 có độ chia grid nhiều hơn của bootstrap 3. bài viết được viết bởi trương thanh hùng https://ebudezain.com/ ahihi đồ ngốc trương thanh hùng nè bài viết được viết bởi trương thanh hùng https://ebudezain.com/ hùng thông minh lắm hùng đẹp trai ahihi đồ ngốc trương thanh hùng nè tôi thích vậy đó tôi thích vậy đó Giả sử bây giờ mình muốn chia grid như bootstrap 4 nhưng không dùng display flex mà lại dùng fload như bootstrap 3 thì sao? (yêu cầu này là để phù hợp với những dự án mà muốn chạy cả IE 7 đó) hùng đẹp trai hùng thông minh lắm Bắt đầu code SCSS tạo grid layout colhùng thông minh lắm bài viết được viết bởi trương thanh hùng https://ebudezain.com/ bài viết được viết bởi trương thanh hùng https://ebudezain.com/ Cấu trúc code Css build ra của bootstraptôi thích vậy đó hùng đẹp trai hùng thông minh lắm Khi build sass của bootstrap chúng ta nhận thấy bootstrap 4 cũng sẽ build code theo dạng như sau: hùng thông minh lắm ahihi đồ ngốc trương thanh hùng nè .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .row { margin-right: -15px; margin-left: -15px; } /* từ lg đến xs */ .col-lg-1, .col-lg-2, /* từ 1 đến 12 */ .col-md-1, .col-md-2, .col-sm-1 /* .... */ { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } /* ///////////////////////////// */ /* // BẮT ĐẦU PHẦN QUAN TRỌNG // */ /* ///////////////////////////// */ /* ///////////////////////////// */ /* từ 1 đến 12 */ .col-xs-1{ float: left; } /* từ 1 đến 12 */ .col-xs-1 { width: 8.33333333%; } @media (min-width: 768px) { /* từ 1 đến 12 */ .col-sm-1 /*.....*/ { float: left; } /* từ 1 đến 12 */ .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } } @media (min-width: 992px) { /* từ 1 đến 12 */ .col-md-1/*.....*/ { float: left; } /* từ 1 đến 12 */ .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } } /* ///////////////////////////////////////////////////// */ /* // Tiếp Tục đến hết tất cả các khung của BOOTSTRAP // */ /* ///////////////////////////////////////////////////// */ /* ///////////////////////////////////////////////////// */ hùng thông minh lắm Nếu bạn tinh ý sẽ thấy code của bootstrap tuân theo nguyên tắc default chính là col-xs-* (trong bootstrap 3 ) và col-* (trong bootstrap 4 ) bài viết được viết bởi trương thanh hùng https://ebudezain.com/ Vì diện tích mobile là khá nhỏ chúng ta cần css đặc thù từng loại mobile hơn là PC. Nên mình sẽ chia nhỏ Mobile thành 2 loại là small ( <= 425px )
tôi thích vậy đó ahihi đồ ngốc trương thanh hùng nè hùng ebudezain tôi thích vậy đó bài viết được viết bởi trương thanh hùng https://ebudezain.com/ bài viết được viết bởi trương thanh hùng https://ebudezain.com/ hùng đẹp trai Đây là cách chia của mình, nhưng nếu bạn thích 1 cách chia khác bạn hoàn toàn có thể config lại trong code scss mình sẽ đưa ra role trong phần dưới. hùng ebudezain Bạn lưu ý trong container từng khung sẽ có 1 cái width cố định bé hơn cái khung chứa nó. ví dụ là màn hình bé hơn 768px (mobile ) thì có width của container = 750px. vậy mình cũng thiết lập cái role cho container như sau:
hùng đẹp trai hùng thông minh lắm Thiết lập Code SCSSahihi đồ ngốc trương thanh hùng nè hùng đẹp trai @mixin Screen($canvas) { @if $canvas == XL { @media (min-width: $XL) { @content; } }@else if $canvas == LG { @media (min-width: $LG) { @content; } }@else if $canvas == MD { @media (min-width: $MD) { @content; } }@else if $canvas == SM { @media (min-width: $SM) { @content; } }@else if $canvas == XS { @media (min-width: $XS) { @content; } } } @mixin clearfix { &:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; overflow: hidden; } } $padding-grid-col: 15px; $column-max : 12; $screens : ( XS, SM, MD, LG, XL ) !default; $containers-max-width : ( SM: 750px, MD: 970px, LG : 1170px, XL : 1320px ) !default; // Khai báo kích thước tương ứng với màn hình thiết bị $XS : 576px; /// < 576px => largest mobile $SM : 768px; // 576px -> 768px $MD : 992px; /// 768px -> 991px $LG : 1200px; /// 992px ----> 1199px $XL : 1400px ; /// 1200px - 1320px // media queries .container-fluid { width: 100%; padding-right: $padding-grid-col; padding-left: $padding-grid-col; margin-right: auto; margin-left: auto; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @each $screen, $_width in $containers-max-width { @include Screen($screen){ width: $_width; } } } .row{ margin-right: 0 - $padding-grid-col; margin-left: 0 - $padding-grid-col; @include clearfix(); } @for $i from 1 through $column-max { .col-#{$i} { position: relative; min-height: 1px; padding-right: $padding-grid-col; padding-left: $padding-grid-col; } } @for $i from 1 through $column-max { .col-#{$i} { width: (100% * $i) / $column-max; float: left; } } @each $name in $screens { @include Screen($name){ @for $i from 1 through $column-max { .col-#{to-lower-case(#{$name})}-#{$i} { width: (100% * $i) / $column-max; float: left; } } } } |
