Bootstrap siêu nhỏ

Bây giờ, bạn đã quen với việc sử dụng hệ thống lưới và các lớp tiện ích. Do đó, hướng dẫn tiếp theo của chúng tôi sẽ có vẻ dễ dàng. chúng tôi sẽ giới thiệu các lớp đáp ứng mà bạn có thể sử dụng trong lưới của mình

Các lớp Bootstrap Col-XS được áp dụng trong trường hợp thiết bị có màn hình nhỏ - chiều rộng không quá 576 pixel. Trong hầu hết các trường hợp, nó là một chiếc điện thoại khá đơn giản

nội dung

• 1. Bootstrap Col-XS. Mẹo chính
• 2. Lưới XS
• 3. Bố cục tự động
• 4. Bootstrap Col-XS. Tóm tắt

Bootstrap Col-XS. Mẹo chính

• Hệ thống lưới Bootstrap 4 cung cấp một tập hợp các lớp phản hồi để chỉ định trên màn hình nào mà một bố cục nhất định hoạt động
• Lớp Bootstrap Col-XS (cực nhỏ) áp dụng lớp cột lưới cho một phần tử khi màn hình hẹp hơn 576px
• Nó được tạo bằng cách sử dụng Bootstrap

  
     
        Bootstrap Example
        
        
        
        
     
     
        
  The following are extra small buttons:
        
           Exra Small Primary button
        
        
           Extra Small button
        
     
  

  7 trong mã của bạn

Lưới XS

Các lớp cột Bootstrap cực nhỏ (_______18) áp dụng khi màn hình hẹp hơn 576px

Các cột giống như cột bạn thấy bên dưới được tạo bằng cách sử dụng tiền tố lớp. col-xs-*

col-xs-4

col-xs-8

Bây giờ, ở đây chúng ta có một ví dụ HTML tạo bố cục đơn giản áp dụng cho mọi kích thước màn hình và trông giống như bố cục được hiển thị ở trên

Sao chép ví dụ

<div class="container">
  <div class="row">
    <div class="bg-info col-xs-4">
      ...
    </div>
    <div class="bg-primary col-xs-8">
      ...
    </div>
  </div>
</div>

Dùng thử trực tiếp Tìm hiểu trên Udacity

ưu

• Thiết kế đơn giản (không có thông tin không cần thiết)
• Các khóa học chất lượng cao (ngay cả những khóa học miễn phí)
• Tính năng đa dạng

• chương trình cấp bằng nano
• Thích hợp cho doanh nghiệp
• Giấy chứng nhận hoàn thành trả tiền

LOẠI TRỪ. GIẢM GIÁ 75%

ưu

• Dễ điều hướng
• Không có vấn đề kỹ thuật
• Có vẻ quan tâm đến người dùng của nó

• Rất nhiều khóa học đa dạng
• chính sách hoàn tiền trong 30 ngày
• Giấy chứng nhận hoàn thành miễn phí

THẤP NHƯ 12. 99$

ưu

• Trải nghiệm người dùng tuyệt vời
• Cung cấp nội dung chất lượng
• Rất minh bạch với giá cả của họ

• Giấy chứng nhận hoàn thành miễn phí
• Tập trung vào các kỹ năng khoa học dữ liệu
• Lịch học linh hoạt

GIẢM GIÁ 75%

Bố cục tự động

Sử dụng hệ thống lưới Bootstrap 4, bạn cũng có thể tạo bố cục tự động. Chúng được tạo bằng cách không chỉ định số lượng cột mà cột lưới sẽ kéo dài (bỏ qua số đối với tất cả các vùng chứa cột bên trong vùng chứa hàng)

Khi bạn làm điều này, Bootstrap 4 sẽ tự động xác định số lượng cột mà mỗi thành phần cột sẽ trải qua để tất cả chúng bằng nhau và trải dài trên toàn bộ chiều rộng có sẵn cùng nhau

Sử dụng. btn-xs để tạo kích thước nút cực nhỏ so với nút tiêu chuẩn

Bạn có thể thử chạy đoạn mã sau để làm cho kích thước của nút nhỏ hơn

Thí dụ

Bản thử trực tiếp

   
      Bootstrap Example
      
      
      
      
   
   
      
The following are extra small buttons:
      
         Exra Small Primary button
      
      
         Extra Small button
      
   

Cập nhật ngày 12-Jun-2020 14. 18. 27

Điểm dừng là các khối xây dựng của thiết kế đáp ứng. Sử dụng chúng để kiểm soát thời điểm bố cục của bạn có thể được điều chỉnh ở một chế độ xem hoặc kích thước thiết bị cụ thể

   
      Bootstrap Example
      
      
      
      
   
   
      
The following are extra small buttons:
      
         Exra Small Primary button
      
      
         Extra Small button
      
   

điểm dừng có sẵn

Bootstrap bao gồm sáu điểm dừng mặc định, đôi khi được gọi là các tầng lưới, để xây dựng phản hồi nhanh. Các điểm dừng này có thể được tùy chỉnh nếu bạn đang sử dụng các tệp Sass nguồn của chúng tôi

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Mỗi điểm ngắt được chọn để giữ thoải mái các vùng chứa có chiều rộng là bội số của 12. Điểm ngắt cũng đại diện cho một tập hợp con các kích thước thiết bị và kích thước khung nhìn phổ biến—chúng không nhắm mục tiêu cụ thể đến mọi trường hợp sử dụng hoặc thiết bị. Thay vào đó, các phạm vi cung cấp một nền tảng vững chắc và nhất quán để xây dựng cho hầu hết mọi thiết bị

Các điểm ngắt này có thể tùy chỉnh thông qua Sass—bạn sẽ tìm thấy chúng trong bản đồ Sass trong biểu định kiểu

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

________số 8

Để biết thêm thông tin và ví dụ về cách sửa đổi các biến và bản đồ Sass của chúng tôi, vui lòng tham khảo phần Sass của tài liệu Grid

Vì Bootstrap được phát triển cho thiết bị di động trước, nên chúng tôi sử dụng một số truy vấn phương tiện để tạo các điểm dừng hợp lý cho bố cục và giao diện của chúng tôi. Các điểm ngắt này chủ yếu dựa trên độ rộng khung nhìn tối thiểu và cho phép chúng tôi mở rộng quy mô các phần tử khi khung nhìn thay đổi

chiều rộng tối thiểu

Bootstrap chủ yếu sử dụng các phạm vi truy vấn phương tiện sau đây—hoặc các điểm dừng—trong các tệp Sass nguồn của chúng tôi cho bố cục, hệ thống lưới và các thành phần của chúng tôi

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Các mixin Sass này dịch trong CSS đã biên dịch của chúng tôi bằng cách sử dụng các giá trị được khai báo trong các biến Sass của chúng tôi. Ví dụ

   
      Bootstrap Example
      
      
      
      
   
   
      
The following are extra small buttons:
      
         Exra Small Primary button
      
      
         Extra Small button
      
   

Chiều rộng tối đa

Đôi khi, chúng tôi sử dụng các truy vấn phương tiện theo hướng khác (kích thước màn hình nhất định hoặc nhỏ hơn)

   
      Bootstrap Example
      
      
      
      
   
   
      
The following are extra small buttons:
      
         Exra Small Primary button
      
      
         Extra Small button
      
   

Các mixin này lấy các điểm dừng đã khai báo đó, trừ đi

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { .. }`
@include media-breakpoint-up(sm) { .. }
@include media-breakpoint-up(md) { .. }
@include media-breakpoint-up(lg) { .. }
@include media-breakpoint-up(xl) { .. }
@include media-breakpoint-up(xxl) { .. }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

   
      Bootstrap Example
      
      
      
      
   
   
      
The following are extra small buttons:
      
         Exra Small Primary button
      
      
         Extra Small button
      
   

Tại sao phải trừ. 02px?

Điểm ngắt đơn

Ngoài ra còn có các truy vấn phương tiện và mixin để nhắm mục tiêu một phân đoạn kích thước màn hình bằng cách sử dụng độ rộng điểm dừng tối thiểu và tối đa

Kích thước XS trong Bootstrap là gì?

Có X trong Bootstrap không?

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

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