Cái gì nhỏ hơn Xs trong Bootstrap?

Bạn cũng có thể xem xét điều này dọc theo dòng kế thừa CSS và nó xếp tầng. Khai báo cuối cùng của thuộc tính CSS được kế thừa bởi thuộc tính con của nó. Cài đặt mặc định có thể được coi là sẽ không làm bất cứ điều gì khác với những gì tôi đã kế thừa. Điều này là do Bootstrap trước tiên dựa trên Di động, do đó XS là thứ bạn phát triển ban đầu, sau đó phát triển thành kích thước màn hình lớn hơn. Nghĩa là Bootstrap dựa trên truy vấn phương tiện min-width chứ không phải kích thước màn hình max-width hoặc min-width and max-width. Bây giờ nó có một số trong cả hai nhưng nó không chủ yếu được xây dựng trên chúng

HTML mẫu

< body>
    

        < h1>Page Title< /h1>
        < p>A bunch of non-sense wording< /p>
    
< /body>

Ví dụ1 CSS, màu của nội dung áp dụng cho tất cả văn bản ghi đè kiểu dáng mặc định của trình duyệt

body {
    color: red;
}

Tất cả văn bản sẽ có màu đỏ vì các phần tử H1 và Đoạn văn đã kế thừa phần khai báo màu của phần tử Body

Ví dụ2 CSS, màu của lớp heading áp dụng cho tất cả các nút con của nó, văn bản ghi đè phần tử kiểu dáng

body {
    color: red;
}

0

body {
    color: red;
}
.heading {
    color: green;
}

Tất cả văn bản trong div với lớp heading sẽ có màu xanh lá cây vì các phần tử H1 và Đoạn văn đã kế thừa khai báo màu của lớp heading

Ví dụ3 CSS, màu của phần tử H1 áp dụng cho tất cả các nút con của nó, văn bản ghi đè kiểu dáng của lớp heading

body {
    color: red;
}
.heading {
    color: green;
}
h1 {
    color: yellow;
}

Tất cả văn bản trong H1 sẽ có màu vàng, đó là sự kế thừa của phần khai báo màu H1, tuy nhiên, Đoạn văn sẽ vẫn có màu xanh lục vì sự kế thừa của nó vẫn là lớp heading

Vì vậy, theo cách tương tự, ngăn Tùy chọn khi bạn đặt SM thành không, tất cả các kích thước màn hình bên dưới SM trong ngăn Tùy chọn sẽ kế thừa điều tương tự vì chúng được đặt làm mặc định. Mặc định trong tình huống này có nghĩa là sẽ không ghi đè cài đặt kế thừa của tôi

@media (min-width: 576px) {
    h1 {
        display: none;
    }
}

Bất kỳ màn hình nào rộng ít nhất 576px trở lên thì không hiển thị H1. Trong ví dụ của bạn và với ví dụ này, H1 sẽ chỉ hiển thị nếu chiều rộng màn hình nhỏ hơn 576px i. e. Kích thước XS. Vì vậy, để H1 hiển thị lại khi ở trên màn hình lớn, bạn cần đặt một cái gì đó như LG thành Chặn

@media (min-width: 992px) {
    h1 {
        display: block;
    }
}

Điều này ẩn phần tử H1 một cách hiệu quả khi màn hình là SM và MD, nhưng hiển thị H1 khi đó là XS và LG, XL

Bootstrap 4 có 5 Responsive Tiers (a. k. a. “Điểm dừng”) mà bạn có thể nhận thấy trong một số ví dụ về Cột trước đó (ví dụ; col-lg-4, col-md)

(xs) — chiều rộng màn hình < 576px (Đây là bậc “mặc định”)

sm — chiều rộng màn hình ≥ 576px

md — chiều rộng màn hình ≥ 768px

lg — chiều rộng màn hình ≥ 992px

xl — chiều rộng màn hình ≥ 1200px

Bootstrap sử dụng các truy vấn phương tiện CSS để thiết lập các Điểm ngắt đáp ứng này. Chúng cho phép bạn kiểm soát hành vi của Cột ở các độ rộng màn hình khác nhau

Col-sm-6 có nghĩa là sử dụng 6 trong số 12 cột rộng (50%), trên chiều rộng thiết bị nhỏ điển hình (lớn hơn hoặc bằng 768 px)

Điều này là do (xs) là điểm dừng mặc định hoặc ngụ ý. Vì tôi không chỉ định chiều rộng Cột mặc định nên chiều rộng 50% chỉ được áp dụng trên 768px và rộng hơn cho điểm dừng sm

Vì (xs) là điểm dừng mặc định, col-12 được ngụ ý. Vì vậy, điều này

        
Column

Có hiệu quả giống như thế này

________số 8_______

Điểm dừng lớn hơn, ghi đè Điểm dừng nhỏ hơn

xs (mặc định) >
bị ghi đè bởi sm >
bị ghi đè bởi md >
bị ghi đè bởi lg >
bị ghi đè bởi

        
Column

0

Hoặc, ngược lại…

        
Column

0 > ghi đè lg > ghi đè md > ghi đè sm > ghi đè (xs)

Do đó,

        
Column

5 thực sự có nghĩa là 50% chiều rộng đối với quy mô nhỏ và lớn hơn. Đối với cùng một chiều rộng cột trên tất cả các bậc, chỉ cần đặt chiều rộng cho bậc nhỏ nhất mà bạn muốn. Ví dụ

Ví dụ

        
Column

6

cũng giống như,

        
Column

7

Đối với chiều rộng cột khác trên bậc lớn hơn, hãy sử dụng điểm ngắt lớn hơn thích hợp để ghi đè điểm dừng nhỏ hơn. Ví dụ: rộng 3 cột trên sm và rộng 4 cột trên md trở lên

        
..

Các cột Bootstrap 4 cũng hoạt động nhạy bén. Vì tính đơn giản của chúng, tôi thích chúng hơn các cột 12 đơn vị cổ điển. Các cột bố cục tự động hoàn hảo cho mọi kịch bản bố cục yêu cầu các cột có chiều rộng bằng nhau. Nhưng đừng quên, các cột 12 đơn vị có thể được trộn lẫn khi cần thiết

Hãy xem một vài ví dụ về lưới bố cục tự động…

3 cột có chiều rộng bằng nhau. `cols` vẫn nằm ngang ở tất cả các chiều rộng và không xếp chồng lên nhau theo chiều dọc vì điểm dừng xs là mặc định

        
 
           
 
              
1
              
2
 
              
3
           
 
        

3 cột có chiều rộng bằng nhau (đáp ứng). Trong ví dụ này, `cols` vẫn nằm ngang cho đến khi điểm dừng sm là 576px, sau đó xếp chồng lên nhau theo chiều dọc

        
 
           
 
              
1
              
2
 
              
3
           



 
        

Hãy nhớ rằng, bạn có thể tắt sm cho bất kỳ điểm ngắt nào (md,lg,xl) là cần thiết

2 cột, thanh bên trái & phải. Dưới đây là ví dụ về việc kết hợp các cột có chiều rộng xác định cổ điển với các cột bố cục tự động. Cột bên phải sẽ tự động phát triển để lấp đầy chiều rộng. Thanh bên sẽ xếp chồng lên nhau tại điểm ngắt sm là 576px

        
 
           
 
              
sidebar
              
main
 
           
 
        

---

Các điểm chính về Thiết kế đáp ứng bằng cách sử dụng Lưới

Các cột sẽ xếp chồng lên nhau theo chiều dọc (và có chiều rộng đầy đủ) ở độ rộng màn hình nhỏ hơn trừ khi bạn sử dụng lớp

        
Column

9 cụ thể trong đánh dấu HTML của mình. Sử dụng một

        
Column

9 cụ thể để ngăn việc xếp chồng lên nhau theo chiều dọc

Các lớp lưới nhỏ hơn cũng áp dụng cho màn hình lớn hơn trừ khi được ghi đè cụ thể cho chiều rộng màn hình lớn hơn. Vì thế,

thực sự giống như

        
..

1. Do đó, bạn chỉ cần sử dụng lớp có chiều rộng nhỏ nhất mà bạn muốn hỗ trợ

Các hàng là

        
..

2 và do đó các Cột có chiều cao bằng nhau trong cùng một hàng. Sử dụng lề tự động hoặc các mục căn chỉnh Flexbox và căn chỉnh nội dung để căn chỉnh theo chiều ngang hoặc chiều dọc (căn giữa, dưới cùng, bên phải, v.v. )

Các kích thước trong Bootstrap là gì?

Xs có nghĩa là gì trong Bootstrap?

Có X trong Bootstrap không?

Cái gì nhỏ hơn SM trong Bootstrap?