Kích thước văn bản bootstrap

Nắm bắt được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi đối với việc phát triển web tốt hơn, nhanh hơn và mạnh hơn

Show

loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những yêu cầu thứ nhất phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn





  ...

Ưu tiên các thiết bị di động

Với Bootstrap 2, chúng tôi đã bổ sung thêm các phong cách thân thiện với các thiết bị di động như một phần chính của khung. Tuy nhiên, trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các tùy chọn kiểu dáng cho các thiết bị, chúng tôi đã gắn trực tiếp vào lõi. Các kiểu dành cho thiết bị di động xuyên suốt trong cả thư viện thay vì nằm trong các tệp riêng lẻ

Để đảm bảo việc kết xuất và "chạm phóng to", hãy thêm thẻ meta viewport vào của bạn

Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm

17 vào chế độ xem meta của thẻ. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các trang web, vì vậy hãy cân nhắc trước khi sử dụng

Bootstrap thiết lập các kiểu chung cho công việc hiển thị, kiểu chữ và các liên kết. Cụ thể, chúng tôi

  • Thiết lập
    18 trên thẻ
    19
  • Sử dụng các thuộc tính
    20,
    21, và
    22 làm cơ sở của kiểu chữ
  • Thiết lập màu sắc chung của các liên kết bằng thuộc tính
    23 và áp dụng hiệu ứng gạch dưới khi
    24

Những phong cách này nằm trong tập tin

25

bình thường hóa. css

Để cải thiện việc kết xuất đối với các trình duyệt, chúng tôi sử dụng Chuẩn hóa. css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal

Hộp đựng

Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một

26. Vùng chứa thiết lập thuộc tính
27 trên tất cả các kích thước được áp dụng cho truy vấn phương tiện để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do
28 và chiều rộng cố định nên vùng chứa mặc định không thể bị lồng

Use class

26 for a container responsive có chiều rộng cố định

...

Sử dụng lớp

30 cho vùng chứa có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn

...

Bootstrap bao gồm một hệ thống lưới đáp ứng, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của thiết bị. Nó bao gồm để thuận tiện cho việc xây dựng cục bộ, cùng với đó

Giới thiệu

Các hệ thống lưới được sử dụng để tạo ra các cực cho các trang bằng các chuỗi và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới Bootstrap đang hoạt động

  • Các hàng được đặt bên trong một
    26 (chiều rộng cố định) hoặc
    30 (chiều rộng đầy đủ) để căn chỉnh và thiết lập phần đệm một cách thích hợp
  • Sử dụng các hàng để tạo ra các cột theo hàng ngang
  • Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử trực tiếp của các hàng
  • Các lớp được định nghĩa trước như
    33 và
    34 luôn sẵn sàng để xây dựng các mạng lưới bố cục một cách nhanh nhất. Một số ít mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa
  • Các cột được tạo nên các máng xối (khoảng trắng nằm giữa các cột nội dung) bằng
    28. Giá trị đệm đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị biên âm trên các
    33
  • Các cột của lưới được tạo ra bằng cách chỉ định số cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục cục bộ với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class
    34

Vui lòng xem các ví dụ để biết cách áp dụng các nguyên tắc này vào mã của bạn

Chúng tôi sử dụng các truy vấn phương tiện sau trong các tập tin Ít hơn của chúng tôi để tạo ra các điểm nổi bật chính trong hệ thống lưới của chúng tôi

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */



/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { .. }



/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { .. }



/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { .. }

Để tương thích với một số ít thiết bị, chúng tôi sẽ mở rộng các truy vấn phương tiện này bằng cách bổ sung các thuộc tính

38

@media (max-width: @screen-xs-max) { .. }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }

@media (min-width: @screen-lg-min) { .. }

Các tùy chọn của lưới

Vui lòng xem hệ thống lưới của Bootstrap đang hoạt động như thế nào trên các thiết bị trong bảng sau

Thiết bị cực nhỏ Điện thoại (<768px)Thiết bị nhỏ Máy tính bảng (≥768px)Thiết bị trung bình Máy tính để bàn (≥992px)Thiết bị lớn Máy tính để bàn (≥1200px)Hành vi lưới Luôn luôn nằm ngangĐược thu gọn để bắt đầu, nằm ngang ở trên các điểm ngắtChiều rộng vùng chứa Không có (tự động)750px970px1170pxTiền tố lớp

39
40
41_______1____2Độ dày cộtTự động1

Ví dụ. Chồng theo hàng ngang

Sử dụng một tập hợp các lớp

43, bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên thiết bị di động và máy tính bảng (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Please set the table of the grid to side in the
33

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

Ví dụ. thùng chứa chất lỏng

Chuyển bất kỳ một mạng lưới lưới có chiều rộng cố định nào thành một mạng lưới có chiều rộng đầy đủ bằng cách thay đổi

26 bên ngoài cùng thành
30

...

Ví dụ. Điện thoại di động và máy tính để bàn

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? . Vui lòng xem ví dụ bên dưới để hiểu rõ hơn về cách thức hoạt động



.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

Ví dụ. Điện thoại, máy tính bảng, máy tính để bàn

Bạn có thể tạo ra các cơ cấu tổ chức cục bộ hơn nữa bằng cách sử dụng các lớp dành cho bảng máy tính

49

col-xs-12. col-sm-6. col-md-8

0

Đặt lại cột đáp ứng

Khi sử dụng 4 bậc (tương ứng với 4 điểm kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một kích thước được xác định, có thể sẽ có một cột cao hơn các cột . Để sửa lỗi này, hãy sử dụng một lớp

50 cùng với chúng tôi

col-xs-6. col-sm-3
Thay đổi kích thước khung nhìn của bạn hoặc kiểm tra nó trên điện thoại của bạn để biết ví dụ

1

Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn

2

Di chuyển cột

Di chuyển cột sang phía bên phải bằng cách sử dụng các class

51. Các class này làm tăng khoảng lề trái (margin-left) của một cột lên bằng
52 cột. Ví dụ,
53 dịch
54 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cột

col-md-4 . col-md-offset-4

col-md-3 . col-md-offset-3

col-md-3 . col-md-offset-3

col-md-6 . col-md-offset-3

3

Các cột lồng nhau

Để tạo ra các cột lồng nhau, Hãy thêm một

33 mới và một tập các cột
43 bên trong cột
43 đã tồn tại. Các hàng nằm bên trong có thể chứa một tập hợp các cột, tối đa là 12 hoặc ít hơn

4

Thứ tự cột

Dễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các class

58 và
59

5

Các biến số và mixin Less

Ngoài việc thuận tiện cho việc xây dựng bố cục cục bộ một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Ít hơn để tạo ra các bố cục cục bộ theo nghĩa đơn giản của riêng bạn

biến số

Các biến tham số xác định số lượng cột, độ rộng và kích thước truy vấn phương tiện. Chúng tôi sử dụng những biến này để tạo ra các lưới lớp (đã đề cập ở phía trên) cũng như các mixin được liệt kê bên dưới đây

6

hỗn hợp

Mixin được sử dụng để liên kết với các biến số , mục đích là để tạo ra CSS ngữ nghĩa cho các cột riêng lẻ trong hệ thống lưới

7

Ví dụ ứng dụng

Bạn có thể thay đổi giá trị các biến số về các giá trị tùy biến của riêng bạn, nếu không hãy sử dụng các giá trị trộn lẫn với các giá trị mặc định của nó. Đây là một ví dụ về việc sử dụng các thiết lập mặc định để tạo ra một cột cục bộ 2 với khoảng trắng ở giữa

8

9

tiêu đề

Tất cả các tiêu đề thẻ của HTML, thẻ từ

to, all available. Các lớp từ
60 đến
61 được sử dụng khi bạn muốn tạo kiểu cho các thẻ tiêu đề nhưng vẫn muốn văn bản của bạn hiển thị trên cùng một dòng

Nét chấm phẩy 36px

h2. tiêu đề bootstrap

Nét chấm phẩy 30px

h3. tiêu đề bootstrap

Dấu chấm phẩy 24px

h4. tiêu đề bootstrap

Nét chấm phẩy 18px
h5. tiêu đề bootstrap
Dấu chấm phẩy 14pxh6. Bootstrap tiêu đề Semibold 12px

0

Bạn cũng có thể tạo ra các văn bản khác đi kèm trong tiêu đề bằng thẻ

62hoặc lớp
63

h2. Tiêu đề Bootstrap Văn bản phụ

h3. Tiêu đề Bootstrap Văn bản phụ

h4. Tiêu đề Bootstrap Văn bản phụ

h5. Tiêu đề Bootstrap Văn bản phụ
h6. Tiêu đề Bootstrap Văn bản phụ

1

Thân hình

64 default of Bootstrap is 14px, with
65 has Rate 1. 428. Các thuộc tính này được áp dụng cho các phần và tất cả các đoạn văn bản. Hơn nữa,

(các đoạn văn) sẽ nhận khoảng căn lề bên dưới (margin-bottom) bằng một nửa chiều cao dòng của chúng (mặc định là 10px)

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. Nullam id dolor id nibh ultricies phương tiện

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit

Làm nổi bật đoạn văn

Bạn có thể làm cho một đoạn văn trở nên nổi bật hơn bằng cách thêm lớp

66

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus

Build with Less

Typograghy ​​ratio trong Bootstrap based on 2 variable in Ít hơn trong các biến. ít hơn.

21 và
22. Biến thứ nhất là cơ sở kích thước phông chữ được sử dụng rất phổ biến, còn biến thứ hai là cơ sở chiều cao dòng. Chúng tôi sử dụng những biến này và một số cơ sở toán học cho phép để tạo lề, phần đệm và chiều cao dòng. Các biến tùy chỉnh và Bootstrap sẽ tự động điều chỉnh

Nhấn mạnh

Vui lòng sử dụng các thẻ nhấn mạnh mặc định của HTML với các kiểu đơn giản

Text has small size

Để giảm tính năng nhấn mạnh cho các đoạn văn bản hoặc khối văn bản, hãy sử dụng thẻ

62 để thay đổi kích thước của những văn bản đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những
64 của riêng họ khi nằm trong thẻ
62. Bạn cũng có thể sử dụng một phần tử có lớp
63 trên cùng một dòng thay vì
62

Dòng văn bản này được coi là bản in đẹp

2

in đậm

Được sử dụng để nhấn mạnh một đoạn văn bản với giá trị font-weight cao

Đoạn văn bản sau đây được hiển thị dưới dạng văn bản in đậm

3

in nghiêng

Được sử dụng để nhấn mạnh một đoạn văn bản với chữ nghiêng

Đoạn văn bản sau đây được hiển thị dưới dạng văn bản in nghiêng

4

Các phần tử thay thế

Bạn có thể tự sử dụng các thẻ

62và
62in HTML5. Thẻ
62được sử dụng để tô đậm một từ hoặc cụm từ trong khi thẻ
62được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,

Các lớp căn chỉnh

Dễ dàng căn chỉnh lại văn bản với các thành phần khác bằng các lớp căn chỉnh văn bản

Văn bản căn trái

Căn giữa văn bản

Văn bản được căn phải

văn bản hợp lý

5

Tên viết tắt

Sử dụng thẻ

62 của HTML để hiển thị tên viết tắt, và sẽ hiển thị đầy đủ tên khi di chuột qua. Các thẻ này thuộc tính
79 đi kèm, có đường viền bên dưới ở dạng dấu chấm liền nhau và khi di chuột qua sẽ hiển thị con trỏ dạng trợ giúp

Tên viết tắt cơ bản

Thuộc tính sử dụng

79 có giá trị là tên đầy đủ của tên viết tắt trên thẻ
62

Viết tắt của thuộc tính từ là attr

6

chủ nghĩa ban đầu

Thêm class

82 vào thẻ
62 để thiết lập kích thước phông chữ nhỏ hơn một chút

HTML là thứ tốt nhất kể từ khi bánh mì cắt lát

7

address

Hiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả. Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ

84

Twitter, Inc
795 Đại lộ Folsom, Phòng 600
San Francisco, CA 94107
P. (123) 456-7890Họ Tên

8

Trích dẫn khối

Để trích dẫn một khối nội dung từ một nguồn khác trong tài liệu của bạn

Default default block

Hãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ

thẻ ưu tiên sử dụng

Inside

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

9

Các tùy chọn cho khối trích dẫn

Bạn có thể tùy chọn thay đổi nội dung và kiểu của khối

.

Set a source name

Please add a

to verify the source quote to from where. Name of source-work by
62

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

...

0

Các định dạng được hiển thị thay thế

Để căn bản phải trích dẫn nội dung, hãy sử dụng class

86

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante

...

1

danh sách

Danh sách không có thứ tự

Một danh sách các hạng mục được sắp xếp không theo thứ tự nào cả

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Số nguyên molie lorem tại massa
  • Facilisis trong pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat tại
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Danh sách có thứ tự

Một danh sách các hạng mục được sắp xếp theo một thứ tự nhất định

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Số nguyên molie lorem tại massa
  4. Facilisis trong pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Danh sách không được định kiểu

Loại bỏ thuộc tính

87 mặc định của danh sách và khoảng căn lề trái (lề-trái) trên tất cả các hạng mục của danh sách. Lưu ý rằng, công việc này chỉ áp dụng cho các thẻ

  • is con direct next of
      hoặc
        , điều đó có nghĩa là bạn có thể cần thêm lớp cho các danh sách khác nằm sâu bên trong

        • Lorem ipsum dolor sit amet
        • Consectetur adipiscing elit
        • Số nguyên molie lorem tại massa
        • Facilisis trong pretium nisl aliquet
        • Nulla volutpat aliquam velit
          • Phasellus iaculis neque
          • Purus sodales ultricies
          • Vestibulum laoreet porttitor sem
          • Ac tristique libero volutpat tại
        • Faucibus porta lacus fringilla vel
        • Aenean sit amet erat nunc
        • Eget porttitor lorem

        ...

        2

        The same lines list

        Đặt tất cả các hạng mục trong danh sách trên cùng một dòng theo cách sử dụng thuộc tính

        88 cùng thuộc tính đệm có giá trị nhỏ

        • Lorem ipsum
        • Phasellus iaculis
        • Nulla volutpat

        ...

        2

        Thông tin chi tiết

        Một danh sách các thuật ngữ với thông tin đi kèm

        Danh sách mô tả Danh sách mô tả là hoàn hảo để xác định thuật ngữ. EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Malesuada portaEtiam porta sem malesuada magna mollis eismod

        ...

        4

        Chi tiết theo hàng ngang

        Vui lòng đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ

        nằm sát nhau. Thông thường, bạn chỉ cần sử dụng các thẻ mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng định dạng này

        Danh sách mô tả Danh sách mô tả là hoàn hảo để xác định thuật ngữ. EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Malesuada portaEtiam porta sem malesuada magna mollis eismod. Felis eismod semper eget laciniaFusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

        ...

        4

        Truncping auto

        Danh sách các thông tin theo hàng ngang sẽ tự động cắt ngắn các thuật ngữ quá dài để phù hợp với các cột bên trái bằng cách sử dụng thuộc tính

        89. Để tương thích với các khung nhìn, chúng tôi sẽ thay đổi về định dạng xếp hạng chồng mặc định

  • Line line

    Khi bạn muốn sử dụng những đoạn mã gợi ý trên cùng 1 dòng, hãy đóng gói nó bằng thẻ

    90

    For example,

    should be wrapped as inline.

    ________16_______6

    Đầu vào từ người dùng

    Sử dụng thẻ ________1_______62 để chỉ rõ đầu vào mà người dùng có thể nhập được từ bàn phím.

    To switch directories, type cd followed by the name of the directory.

    ________16_______7

    Khối cơ bản

    Sử dụng thẻ

    ________16_______8

    ________16_______9

    Bạn cũng có thể thêm lớp

    92 để thiết lập chiều cao tối đa bằng 350px và cho phép người dùng cuộn nội dung theo chiều dọc

    biến số

    Để chỉ rõ đâu là biến số, hãy sử dụng thẻ

    62

    ...

    0

    Đầu ra mẫu

    Để xác định đầu ra mẫu của một chương trình, hãy sử dụng thẻ

    62

    Văn bản này được coi là đầu ra mẫu từ một chương trình máy tính

    ...

    1

    95 vào bất kỳ thẻ nào
    96

    97 để thêm kiểu định dạng đường kẻ viền cho bất kỳ bảng nào mà bạn muốn

    Tương thích với hầu hết các loại trình duyệt

    Bảng kẻ sọc được tạo kiểu thông qua bộ chọn

    98 của CSS(Không được hỗ trợ trong Internet Explorer 8)

    #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

    ...

    2

    Table has a border

    Thêm lớp

    99 để hiển thị đường viền cho bảng và các ô trong bảng

    #First NameLast NameUsername1MarkOtto@mdoMarkOtto@TwBootstrap2JacobThornton@fat3Larry the Bird@twitter

    ...

    2

    Bảng có dòng đổi màu khi di chuột

    Thêm lớp

    00 để kích hoạt trạng thái di chuột trên các dòng của bảng bên trong thẻ

    #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

    ...

    2

    Chặt bảng

    Thêm lớp

    01 để làm cho các ô trong bảng gần nhau hơn

    #First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

    ...

    2

    Các class theo ngữ cảnh

    Sử dụng các lớp theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng

    ClassDescription

    02Áp dụng màu hover cho một dòng hoặc một ô trong bảng
    03Biểu thị sự thành công hoặc một hành động tích cực
    04Biểu thị sự thay đổi và hành động mang tính thông báo
    05Biểu thị cảnh báo hoặc nhắc nhở
    06Biểu thị nguy hiểm hoặc một hành động tính

    #Tiêu đề cộtTiêu đề cộtTiêu đề cột1Nội dung cộtNội dung cộtNội dung cột2Nội dung cộtNội dung cộtNội dung cột3Nội dung cộtNội dung cộtNội dung cột4Nội dung cộtNội dung cộtNội dung cột5Nội dung cộtNội dung cột6Nội dung cộtNội dung cột7Nội dung cộtNội dung cột8Nội dung cộtNội dung cột9Nội dung cột9Nội dung cộtNội dung cột

    ...

    7

    Bảng đáp ứng

    Để tạo bảng đáp ứng, hãy bọc phần tử có lớp

    07 bằng một phần tử khác có lớp
    08, khi đó bảng sẽ tự động điều chỉnh kích thước cho phù hợp và cho phép người dùng cuộn ngang trên các thiết bị di động (độ

    #Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảngTô của bảngTô bảng của Ô của bảngTiêu đề của bảngTiêu đề của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của ô.

    #Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảngTô của bảngTô bảng của Ô của bảngTiêu đề của bảngTiêu đề của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của bảng.Ô của ô.

    ...

    8

    ví dụ cơ bản

    Các thành phần của biểu mẫu (điều khiển biểu mẫu) tự động nhận một số kiểu chung. Toàn bộ các form-control

    62,
    62

    Hộp kiểm và radio

    Hộp kiểm được sử dụng để lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất

    Default (xếp chồng)

    ...

    9

    Hộp kiểm trên cùng một dòng

    Hãy sử dụng lớp

    11 hoặc
    12 để hiển thị danh sách các hộp kiểm/radio trên cùng một dòng

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    0

    Lựa chọn

    Sử dụng tùy chọn mặc định hoặc bổ sung

    13 để hiển thị nhiều tùy chọn cùng một lúc

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    1

    Các form-control tĩnh

    Khi bạn cần đặt một dòng văn bản thuần bên cạnh một nhãn bên trong một biểu mẫu dàn hàng ngang, hãy sử dụng lớp

    14 trên thẻ

    .

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    2

    Đầu vào đang được tập trung

    Chúng tôi loại bỏ

    15 mặc định trên một số kiểm soát biểu mẫu và sử dụng
    16 để hiển thị đầu vào như đang được
    17

    Trình diễn
    17 trạng thái

    Ví dụ đầu vào ở trên sử dụng các kiểu tùy chỉnh trong tài liệu của chúng tôi để thể hiện trạng thái

    17 trên một
    20

    Đầu vào bị vô hiệu hóa

    Vui lòng thêm thuộc tính

    21 vào đầu vào để ngăn người dùng nhập dữ liệu và làm cho đầu vào hiển thị giống như đã bị vô hiệu hóa

    Fieldset is null offset

    Vui lòng thêm thuộc tính

    21 vào một

    to nullizes all the form-control is side in

    Chức năng liên kết của thẻ
    62không bị ảnh hưởng

    Lớp này sẽ chỉ làm thay đổi hình thức của các nút

    62chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa chức năng liên kết, hãy sử dụng Javascript

    Tính tương thích với các trình duyệt

    Mặc dù Bootstrap sẽ áp dụng các kiểu này trên tất cả các trình duyệt, tuy nhiên Internet Explorer 9 (và các phiên bản thấp hơn) không hoàn toàn hỗ trợ thuộc tính

    21 trên một

    Vì thế, hãy sử dụng Javascript để vô hiệu hóa bộ trường hóa trên các trình duyệt này

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    4

    đầu vào chỉ đọc

    Thêm thuộc tính boolean

    26 vào đầu vào để ngăn người dùng nhập và định kiểu đầu vào là bị vô hiệu hóa

    Trạng thái xác nhận

    Bootstrap cung cấp các kiểu xác nhận biểu thị các trạng thái lỗi, cảnh báo và áp dụng thành công trên các biểu mẫu kiểm soát. Để sử dụng, hãy thêm các lớp

    27,
    28, hoặc
    29 vào phần tử cha. Bất kỳ phần tử nào có lớp
    30,
    20, và
    32 bên trong phần tử cha đó sẽ được áp dụng kiểu xác nhận

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    6

    Các biểu tượng tùy chọn

    Nếu bạn muốn tăng tính trực tiếp, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các lớp đi kèm

    Icon, label and group of input

    Việc thiết lập vị trí cho các biểu tượng là cần thiết để các đầu vào không được gắn nhãn và chọn các bằng cách thêm một tiện ích bổ sung vào phía bên phải. Đối với các đầu vào không gắn nhãn, hãy điều chỉnh giá trị trên cùng. Đối với đầu vào của nhóm, hãy điều chỉnh giá trị bên phải theo một cách thích hợp tùy thuộc vào chiều rộng của tiện ích bổ sung

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    7

    Các tùy chọn biểu tượng biểu tượng cũng hoạt động trên các biểu mẫu cùng dòng và biểu mẫu hàng ngang

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    8

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    
    
    /* Small devices (tablets, 768px and up) */
    
    @media (min-width: @screen-sm-min) { .. }
    
    
    
    /* Medium devices (desktops, 992px and up) */
    
    @media (min-width: @screen-md-min) { .. }
    
    
    
    /* Large devices (large desktops, 1200px and up) */
    
    @media (min-width: @screen-lg-min) { .. }
    9

    Các biểu tượng tùy chọn có nhãn
    33 ẩn

    Đối với các điều khiển biểu mẫu không có nhãn hiển thị, hãy thêm lớp

    33 trên nhãn. Bootstrap sẽ tự động điều chỉnh vị trí của biểu tượng sau khi nó được thêm vào

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    0

    Change size of form-control

    Hãy sử dụng các lớp tương tự như

    35 để thiết lập chiều cao và sử dụng các lớp tương tự như
    36 để thiết lập chiều rộng của điều khiển biểu mẫu (tương tự như các cột của lưới)

    Change the height

    Tạo các điều khiển biểu mẫu cao hơn hoặc thấp hơn tương ứng với kích thước của nút

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    1

    Change width

    Dựa vào các đầu vào bằng các cột của lưới hoặc bất kỳ phần tử cha tùy biến nào để dễ dàng điều chỉnh theo chiều rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiết)

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    2

    Text help

    To add text help for form-control, hãy bọc văn bản đó bằng một thẻ

    62 có lớp
    32

    Một khối văn bản trợ giúp ngắt thành một dòng mới và có thể mở rộng ra ngoài một dòng

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    3

    Các tùy chọn

    Sử dụng bất kỳ lớp nào có sẵn của nút để tạo kiểu cho nút

    Thông tin thành công chính mặc định Cảnh báo Liên kết nguy hiểm

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    4

    Sizes

    Bạn muốn nút để hay nút nhỏ?

    Nút lớn Nút lớn

    Nút mặc định Nút mặc định

    Nút nhỏ Nút nhỏ

    Nút cực nhỏ Nút cực nhỏ

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    5

    Nếu bạn muốn tạo một nút có chiều rộng bằng chiều rộng của phần tử cha (toàn chiều rộng), hãy sử dụng lớp

    42

    Nút cấp khối Nút cấp khối

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    6

    Kích hoạt trạng thái

    Các nút sẽ hiển thị bên dưới hình thức giống như đã được nhấn (với màu nền tối, đường viền tối đa hoặc bóng đổ vào phía trong) khi được kích hoạt. Hãy sử dụng

    43 với thẻ và
    02 với thẻ
    62. Tuy nhiên, bạn cũng có thể sử dụng
    02 trên thẻ nếu bạn muốn tái tạo trạng thái kích hoạt

    Elemental section

    Nhất thiết phải thêm

    43 làm giả lớp, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng lớp
    02

    Nút chính Nút

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    7

    Phần tử 62

    Hãy sử dụng lớp

    02 trên các nút định dạng
    62

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    8

    Trạng thái vô hiệu hóa

    Làm cho các nút trông giống như không thể nhấp vào bằng cách làm mờ chúng đi 50%

    Elemental section

    Please use the property

    21 on buttons format. Nút chính Nút

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    7

    Tính tương thích của trình duyệt

    Nếu bạn thêm thuộc tính

    21 vào một trình duyệt Internet Explorer 9 (và các phiên bản thấp hơn) sẽ sinh ra văn bản có màu xám giống với bóng của nó. Rất tiếc là chúng tôi vẫn chưa sửa lỗi này

    Phần tử 62

    Hãy sử dụng lớp

    55 trên các nút định dạng
    62

    @media (max-width: @screen-xs-max) { .. }
    
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .. }
    
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .. }
    
    @media (min-width: @screen-lg-min) { .. }
    8

    Chúng tôi sử dụng

    55 như một lớp tiện ích trong trường hợp này, tương tự như lớp
    02, vì vậy không thiết yếu nhất phải có tiền tố đi kèm

    Chức năng liên kết không bị ảnh hưởng

    Lớp này sẽ chỉ thay đổi về mặt hình thức của mã thẻ> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa liên kết trên thẻ

    62, hãy sử dụng Javascript

    Use the instance context

    Mặc dù các lớp chỉ được sử dụng trên các phần tử

    62và nhưng chỉ có các phần tử được hỗ trợ bên trong các thành phần điều hướng như điều hướng và thanh điều hướng

    Vui lòng sử dụng các lớp của nút trên một trong các loại thẻ

    62, , hoặc
    62

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    1

    63

    Tính tương thích với các trình duyệt

    Chúng tôi đề xuất sử dụng bất kỳ phần tử nào khi có thể để báo cáo tính năng tương thích với các trình duyệt

    Ngoài ra, trình duyệt Firefox có một lỗi dừng thiết lập

    65 trên các nút định dạng
    62. Điều này sẽ làm cho các nút có chiều cao không chính xác khi hiển thị trên Firefox

    Ảnh phản hồi

    Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di động bằng cách sử dụng lớp

    66. Lớp này sẽ thiết lập
    67 và
    68 lên ảnh để chúng có thể co giãn theo Tỷ lệ tương ứng với phần tử cha của chúng

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    2

    Các định dạng của ảnh

    Thêm các lớp vào thẻ

    69 để tạo kiểu cho ảnh một cách dễ dàng

    Tính tương thích với các trình duyệt

    Hãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo tròn

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    3

    Các sắc màu theo ngữ cảnh

    Bootstrap có một tập hợp các lớp tiện ích hỗ trợ người dùng trong quá trình truyền tải ý nghĩa bằng màu sắc. Những lớp này cũng có thể áp dụng cho các liên kết và cũng có tác dụng làm tối màu các liên kết khi di chuột qua như kiểu mặc định của các liên kết

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh

    Nullam id dolor id nibh ultricies xe cộ ut id elit

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula

    Maecenas sed diam eget risus varius blandit sit amet non magna

    Etiam porta sem malesuada magna mollis euismo

    Donec ullamcorper nulla non metus auctor fringilla

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    4

    Xử lý với đặc tính hiệu

    Đôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là văn bản của bạn được bọc bằng một thẻ

    62 gắn với một trong các lớp này

    Các màu nền theo ngữ cảnh

    Tương tự như các lớp dành cho màu sắc của văn bản theo ngữ cảnh, bạn cũng dễ dàng thiết lập màu nền của bất kỳ phần tử nào bằng các lớp ngôn ngữ cảnh cho màu nền. Các phần tử

    62 sẽ bị tối màu khi di chuột vào giống như các lớp áp dụng với văn bản

    Nullam id dolor id nibh ultricies xe cộ ut id elit

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula

    Maecenas sed diam eget risus varius blandit sit amet non magna

    Etiam porta sem malesuada magna mollis euismo

    Donec ullamcorper nulla non metus auctor fringilla

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    5

    Xử lý với đặc tính hiệu

    Đôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là bọc văn bản của bạn bằng một thẻ

    mount with one in this class

    Icon "đóng cửa"

    Sử dụng biểu tượng "Đóng" chung cho việc xóa (hoặc đóng lại) các hộp phương thức hoặc các thông báo

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    6

    dấu mũ

    Sử dụng dấu mũ để xác định chức năng xuống dưới và hướng xuống dưới. Lưu ý rằng caret default sẽ tự động thay đổi chiều trong

    Trôi nổi

    Bạn có thể áp dụng hiệu ứng float vào một phần tử (trái hoặc phải) bằng cách sử dụng một lớp tương ứng.

    72 được thêm vào để tránh các vấn đề liên quan đến đặc tính hiệu. Các lớp cũng có thể được sử dụng như các mixin

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    8

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-1

    .col-md-8

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-4

    .col-md-6

    .col-md-6

    9

    Không sử dụng cho thanh điều hướng

    Để điều chỉnh các thành phần trong thanh điều hướng với các lớp tiện ích, hãy sử dụng

    73 hoặc
    74. to know more chi tiết

    Căn giữa các khối nội dung

    Thiết lập thuộc tính

    75 vào một phần tử và căn cứ giữa bằng
    76. Tiện ích này có thể được sử dụng bằng mixin hoặc class

    ...

    0

    ...

    1

    Clearfix

    Xóa thuộc tính

    77 trên một phần tử bất kỳ bằng cách sử dụng lớp
    50, được lấy từ micro clearfix của Nicolas Gallagher. Lớp này cũng có thể được sử dụng như một mixin

    ...

    2

    ...

    3

    Ẩn và hiện nội dung

    Bạn có thể làm cho một phần tử ẩn đi hoặc hiện ra (hỗ trợ cả thiết bị đọc màn hình) bằng cách sử dụng các lớp

    79 và
    80. Những lớp này sử dụng
    72 để tránh xung đột về tính đặc hiệu, giống như. Chúng chỉ được áp dụng lên các khối định dạng phần tử (hiển thị. block) và cũng có thể sử dụng như các mixin

    Lớp

    82 thi thoảng không có tác dụng trên các thiết bị đọc màn hình, do đó lớp này đã bị loại bỏ ở phiên bản 3. 0. 1 and are instead by
    80 and
    33

    Ngoài ra, lớp

    85 được sử dụng để ẩn/hiện một phần tử, điều đó có nghĩa là thuộc tính hiển thị của nó không bị thay đổi và có thể vẫn ảnh hưởng đến luồng của tài liệu

    ...

    4

    ...

    5

    Nội dung thiết bị đọc màn hình

    Bạn có thể ẩn một phần tử bằng lớp

    33 trên tất cả các thiết bị ngoại trừ màn hình đọc. Kết hợp lớp
    33 cùng với lớp
    88 để hiển thị phần tử một lần nữa khi được lấy nét (không giới hạn như đối với người dùng chỉ sử dụng bàn phím). Bạn nên tham khảo. Lớp này cũng được sử dụng như mixin

    ...

    6

    ...

    7

    Replace image

    Sử dụng lớp

    89 hoặc mixin để thay thế nội dung văn bản của một phần tử bằng một hình nền

    ...

    8

    ...

    9

    Đối với nhu cầu phát triển các ứng dụng thân thiện với thiết bị di động, chúng tôi sử dụng những lớp tiện ích này để ẩn và hiển thị nội dung trên các thiết bị khác nhau thông qua truy vấn phương tiện. Ngoài ra, các lớp tiện ích dành cho việc đóng/mở nội dung để vào cũng được thêm vào

    Hãy cố gắng sử dụng những lớp này theo một cách giới hạn và tránh việc tạo ra quá nhiều phiên bản hoàn toàn khác nhau trên cùng một trang. Thay vì thế, hãy sử dụng chúng để bổ sung cho công việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện chỉ có tác dụng đối với các khối định dạng phần tử (hiển thị. chặn hoặc hiển thị. inline-block) and table. Việc sử dụng các phần tử cùng dòng (hiển thị. nội tuyến) và các phần tử nằm trong bảng (, ,. ) sẽ không được hỗ trợ đáp ứng

    Các lớp có sẵn

    Sử dụng đơn lẻ hoặc kết hợp các lớp có sẵn để ẩn/hiện nội dung tương ứng với các kích thước của khung nhìn

    Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)

    90VisibleHiddenHiddenHidden
    91HiddenVisibleHiddenHidden
    92HiddenHiddenVisibleHidden
    93HiddenHiddenHiddenVisible
    94HiddenVisibleVisibleVisible
    95VisibleHiddenVisibleVisible
    96VisibleVisibleHiddenVisible
    97VisibleVisibleVisibleHidden

    kể từ v3. 2. 0, các lớp

    98 cho mỗi điểm dừng có ba biến thể, một biến thể cho mỗi giá trị thuộc tính CSS
    99 được liệt kê bên dưới

    Group of classesCSS

    99

    ...

    01

    ...

    02

    ...

    03

    ...

    04

    ...

    05
    88

    Vì vậy, đối với màn hình cực nhỏ (

    ...

    07) chẳng hạn, các lớp
    98 có sẵn là.

    ...

    09,

    ...

    10 và

    ...

    11

    Các lớp

    ...

    12,

    ...

    13,

    ...

    14 và

    ...

    15 cũng tồn tại, nhưng không được dùng nữa kể từ v3. 2. 0. Chúng tương đương với

    ...

    01, ngoại trừ các trường hợp đặc biệt bổ sung để chuyển đổi

    ...

    17

    ...

    18

    ...

    19HiddenVisible

    ...

    20VisibleHidden

    ...

    21 cũng tồn tại nhưng đã bị loại bỏ trong phiên bản 3. 2. 0. Lớp này sử dụng tương tự như lớp

    ...

    22, ngoại trừ một số trường hợp đặc biệt như đối với các thành phần liên quan đến

    ...

    23 sử dụng một công cụ tuyệt vời của Ít hơn để tự động tạo ra màu sắc phù hợp nhất khi di chuột. Bạn có thể sử dụng

    ...

    24,

    ...

    25,

    ...

    26, và

    ...

    27

    kiểu chữ

    Dễ dàng thiết lập kiểu chữ, kích thước chữ, tiêu đề với một số ít biến của Ít hơn. Ngoài ra, Bootstrap cũng tận dụng những biến này để cho phép người dùng sử dụng các kiểu chữ trộn một cách dễ dàng hơn

    
    
    

    .col-xs-12 .col-md-8

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6

    .col-xs-6

    5

    Icon icon

    Có hai biến được sử dụng để tùy chọn tên biến và nơi lưu trữ biểu tượng của bạn

    
    
    

    .col-xs-12 .col-md-8

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6

    .col-xs-6

    6

    Các thành phần

    Các thành phần trong Bootstrap sử dụng các biến số mặc định để thiết lập các giá trị chung. Dưới đây là danh sách các biến hoặc cách sử dụng

    
    
    

    .col-xs-12 .col-md-8

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6

    .col-xs-6

    7

    nhà cung cấp mixin

    Verdor mixin là mixin giúp hỗ trợ các trình duyệt bằng cách bổ sung các tiền tố liên quan trong CSS đã được dịch của bạn

    kích thước hộp

    Khởi tạo lại mô hình hộp của các thành phần bằng một menu mixin. Đối với từng ngữ cảnh, hãy đọc bài viết hữu ích sau từ Mozilla

    mixin đã bị loại bỏ trong phiên bản 3. 2. 0, with the current output of autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho Bootstrap phiên bản 4

    
    
    

    .col-xs-12 .col-md-8

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6

    .col-xs-6

    8

    Góc bo tròn

    Ngày nay, hầu như toàn bộ các trình duyệt tiên tiến đều được hỗ trợ thuộc tính

    ...

    28 (không cần tiền tố). Vì thế sẽ không có mixin

    ...

    29, tuy nhiên Bootstrap cũng bổ sung thêm những phím tắt để nhanh chóng bo tròn 2 góc cạnh bất kỳ của một đối tượng

    
    
    

    .col-xs-12 .col-md-8

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6 .col-md-4

    .col-xs-6

    .col-xs-6

    9

    Đổ bóng

    Nếu đa số đối tượng người dùng mà bạn hướng đến đều sử dụng các trình duyệt và thiết bị tiên tiến, thì bạn có thể sử dụng thuộc tính

    16 mà không cần tiền tố. Tuy nhiên để hỗ trợ các thiết bị Android (phiên bản nhỏ hơn 4) và iOS (phiên bản nhỏ hơn 5), hãy sử dụng mixin đã bị loại bỏ để thêm vào tiền tố

    ...

    31

    Mixin này đã bị loại bỏ ở phiên bản 3. 1. 0, do Bootstrap không hỗ trợ nền tảng chính thức không chính thức (các nền tảng không hỗ trợ các thuộc tính tiêu chuẩn). Để đảm bảo toàn bộ tính năng tương thích ngược, Bootstrap sẽ tiếp tục mixin này ở bên trong để tận hưởng phiên bản 4 của Bootstrap

    Hãy chắc chắn sử dụng các màu

    ...

    32 trong giá trị hộp-bóng của bạn để chúng tôi có thể hiển thị phù hợp nhất với màu nền

    00

    Sự chuyển dịch (Transition)

    There are 3 mixin of less support transition one way linh hoạt. Thiết lập tất cả các thông tin chuyển đổi với chỉ duy nhất một mixin hoặc chỉ định thời gian thực hiện và thời gian hiển thị của quá trình chuyển đổi nếu cần thiết

    Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho Bootstrap phiên bản 4

    01

    Biến dạng (Transformation)

    Bạn có thể quay, chuyển đổi tỷ lệ, tinh tiến hoặc kéo bất kỳ đối tượng nào

    Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho Bootstrap phiên bản 4

    02

    Sự chuyển động (Animation)

    Bạn không thể sử dụng một mixin để khai báo tất cả các thuộc tính chuyển động của CSS3 trong một lần hoặc các mixin khác cho các thuộc tính riêng lẻ

    Mixin này đã bị loại bỏ ở phiên bản 3. 2. 0, with the current output of autoprefixer. Để đảm bảo tính tương thích ngược, Bootstrap sẽ tiếp tục sử dụng mixin nội bộ cho Bootstrap phiên bản 4

    03

    Độ trong suốt (Opacity)

    Thiết lập chế độ trong suốt cho toàn bộ trình duyệt và cung cấp

    ...

    33 Hỗ trợ trình duyệt IE8

    04

    Trình giữ chỗ

    Cung cấp ngữ cảnh cho các điều khiển biểu mẫu nằm bên trong mỗi trường

    05

    cột

    Tự động sinh ra các cột bằng CSS bên trong một phần tử đơn lẻ

    06

    Dốc

    Bạn có thể dễ dàng chuyển đổi 2 màu thành màu nền theo hiệu ứng gradient. Bạn cũng có thể thiết lập hướng gradient, sử dụng tới 3 màu sắc khác nhau hoặc sử dụng gradient theo vòng tròn. Bạn chỉ cần duy nhất một mixin để thực hiện tất cả những thứ mà bạn muốn

    07

    Bạn cũng có thể chỉ rõ góc của 2 màu cơ sở (gradient tuyến tính)

    08

    Nếu bạn muốn chuyển màu theo dạng kẻ sọc, bạn chỉ cần xác định một nền màu và chúng tôi sẽ phủ các đường mờ lên cho bạn

    09

    Ngoài ra, nếu bạn muốn thiết lập gradient theo 3 màu, hãy thiết lập theo thứ tự. Màu thứ nhất, màu thứ 2, điểm dừng của màu thứ 2 và màu thứ 3 với những mixin sau

    10

    Xin lưu ý rằng, bất cứ khi nào bạn xóa một gradient, hãy nhớ xóa cả thuộc tính

    ...

    33 (dành riêng cho IE) mà bạn đã thêm vào. Bạn có thể làm thế bằng cách sử dụng mixin

    ...

    35 cùng với

    ...

    36

    Các mixin tiện ích

    Mixin này kết hợp các thuộc tính CSS không liên quan đến nhau để đạt được mục tiêu

    Clearfix

    Please replace the job more

    ...

    37 bằng cách thêm mixin

    ...

    38 vào các phần tử thích hợp. Please use micro clearfix of Nicolas Gallager

    11

    Căn giữa theo hàng ngang

    Nhanh chóng căn giữa bất kỳ phần tử nào bên trong phần tử cha của nó. Lưu ý rằng, các thuộc tính

    27 và
    38 yêu cầu phải được thiết lập

    12

    Help to size

    Dễ dàng xác định chiều của một đối tượng

    13

    Textarea cho phép thay đổi kích thước

    Dễ dàng cấu hình các tùy chọn về thay đổi kích thước cho vùng văn bản hoặc bất kỳ phần tử nào khác. Mặc định theo cách thức hoạt động thông thường của trình duyệt

    ...

    41

    14

    Dễ dàng cắt ngắn văn bản bằng cách duy nhất một mixin. Lưu ý rằng, các phần tử

    ...

    42 ở dạng

    ...

    43 hoặc

    ...

    44

    15

    Hình ảnh Retina

    Xác định hai đường dẫn ảnh và chiều của ảnh @1x, và Bootstrap sẽ cung cấp truy vấn phương tiện @2x. Nếu bạn có nhiều ảnh, hãy cân nhắc việc viết CSS cho ảnh của bạn bằng tay trong truy vấn phương tiện

    16

    Mặc dù Bootstrap được xây dựng dựa trên Less, nhưng nó cũng hỗ trợ Sass. Chúng tôi duy trì nó trong một kho Github riêng biệt và quản lý các bản cập nhật bằng mã biến đổi (tập lệnh chuyển đổi)

    Bên trong đó có gì?

    Vì cổng Sass có một kho riêng biệt và hướng tới các đối tượng khác (so với Bootstrap thông thường) nên nội dung của nó khác biệt hoàn toàn so với Bootstrap thông thường. Điều này đảm bảo rằng cổng Sass của Bootstrap sẽ tương thích với hầu hết các hệ thống dựa trên Sass