Các thành phần

Hàng chục thành phần có thể tái sử dụng được xây dựng để cung cấp điều hướng, cảnh báo, cửa sổ bật lên và hơn thế nữa.

Các ví dụ

Hai tùy chọn cơ bản, cùng với hai biến thể cụ thể hơn.

Nhóm nút đơn

Bọc một loạt các nút với .btntrong .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Left </button>
  3. <button class = "btn" > Middle </button>
  4. <button class = "btn" > Right </button>
  5. </div>

Nhiều nhóm nút

Kết hợp các tập hợp <div class="btn-group">thành một <div class="btn-toolbar">thành phần phức tạp hơn.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Nhóm nút dọc

Làm cho một tập hợp các nút xuất hiện xếp chồng theo chiều dọc thay vì theo chiều ngang.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Hộp kiểm và hương vị radio

Các nhóm nút cũng có thể hoạt động như bộ đàm, trong đó chỉ một nút có thể hoạt động hoặc hộp kiểm, nơi bất kỳ số lượng nút nào có thể hoạt động. Xem tài liệu JavaScript cho điều đó.

Danh sách thả xuống trong các nhóm nút

Đứng lên!Các nút có trình đơn thả xuống phải được bao bọc riêng lẻ trong của chúng .btn-grouptrong một .btn-toolbarđể hiển thị phù hợp.

Tổng quan và ví dụ

Sử dụng bất kỳ nút nào để kích hoạt menu thả xuống bằng cách đặt nó trong a .btn-groupvà cung cấp đánh dấu menu thích hợp.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Hoạt động
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Hoạt động với tất cả các kích thước nút

Nút thả xuống hoạt động ở bất kỳ kích thước nào .btn-large:, .btn-smallhoặc .btn-mini.

Yêu cầu JavaScript

Nút thả xuống yêu cầu plugin thả xuống Bootstrap hoạt động.

Trong một số trường hợp — như thiết bị di động — menu thả xuống sẽ mở rộng ra bên ngoài khung nhìn. Bạn cần giải quyết căn chỉnh theo cách thủ công hoặc bằng JavaScript tùy chỉnh.


Nút chia nhỏ thả xuống

Dựa trên các kiểu và đánh dấu của nhóm nút, chúng ta có thể dễ dàng tạo một nút tách. Các nút phân tách có một hành động tiêu chuẩn ở bên trái và một menu thả xuống ở bên phải với các liên kết theo ngữ cảnh.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Kích thước

Sử dụng các lớp nút bổ sung .btn-minihoặc .btn-smallđể .btn-largeđịnh kích thước.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Hành động </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Menu thả xuống

Menu thả xuống cũng có thể được chuyển đổi từ dưới lên bằng cách thêm một lớp duy nhất vào lớp cha trực tiếp của .dropdown-menu. Nó sẽ lật hướng của menu .caretvà định vị lại chính menu để di chuyển từ dưới lên thay vì từ trên xuống.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Phân trang tiêu chuẩn

Phân trang đơn giản lấy cảm hứng từ Rdio, tuyệt vời cho các ứng dụng và kết quả tìm kiếm. Khối lớn khó bỏ sót, có thể mở rộng dễ dàng và cung cấp các vùng nhấp chuột lớn.

  1. <div class = "pagination" >
  2. <ul>
  3. <li> <a href = "#"> Trước đó </a> </li>
  4. <li> <a href = "#"> 1 </a> </li>
  5. <li> <a href = "#"> 2 </a> </li>
  6. <li> <a href = "#"> 3 </a> </li>
  7. <li> <a href = "#"> 4 </a> </li>
  8. <li> <a href = "#"> 5 </a> </li>
  9. <li> <a href = "#"> Tiếp theo </a> </li>
  10. </ul>
  11. </div>

Tùy chọn

Trạng thái đã tắt và đang hoạt động

Các liên kết có thể tùy chỉnh cho các trường hợp khác nhau. Sử dụng .disabledcho các liên kết không thể nhấp vào và .activeđể chỉ ra trang hiện tại.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disable" > <a href = "#"> & laquo; </a> </li>
  4. <li class = "active" > <a href = "#"> 1 </a> </li>
  5. ...
  6. </ul>
  7. </div>

Bạn có thể tùy ý hoán đổi các neo đang hoạt động hoặc bị vô hiệu hóa cho các nhịp để loại bỏ chức năng nhấp chuột trong khi vẫn giữ lại các kiểu đã định.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disable" > <span> & laquo; </span> </li>
  4. <li class = "active" > <span> 1 </span> </li>
  5. ...
  6. </ul>
  7. </div>

Kích thước

Phân trang lớn hơn hay nhỏ hơn lạ mắt? Thêm .pagination-large, .pagination-smallhoặc .pagination-minicho các kích thước bổ sung.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Căn chỉnh

Thêm một trong hai lớp tùy chọn để thay đổi sự liên kết của các liên kết phân trang: .pagination-centered.pagination-right.

  1. <div class = "pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Máy nhắn tin

Các liên kết trước và sau nhanh chóng để triển khai phân trang đơn giản với các kiểu và đánh dấu nhẹ. Nó tuyệt vời cho các trang web đơn giản như blog hoặc tạp chí.

Ví dụ mặc định

Theo mặc định, các trung tâm máy nhắn tin liên kết.

  1. <ul class = "pager" >
  2. <li> <a href = "#"> Trước đó </a> </li>
  3. <li> <a href = "#"> Tiếp theo </a> </li>
  4. </ul>

Các liên kết được căn chỉnh

Ngoài ra, bạn có thể căn chỉnh từng liên kết sang các bên:

  1. <ul class = "pager" >
  2. <li class = "trước" >
  3. <a href = "#"> & larr ; Cũ hơn </a>
  4. </li>
  5. <li class = "tiếp theo" >
  6. <a href = "#"> Mới hơn & rarr ; </a>
  7. </li>
  8. </ul>

Trạng thái vô hiệu hóa tùy chọn

Các liên kết máy nhắn tin cũng sử dụng .disabledlớp tiện ích chung từ việc phân trang.

  1. <ul class = "pager" >
  2. <li class = "trước đó bị vô hiệu hóa" >
  3. <a href = "#"> & larr ; Cũ hơn </a>
  4. </li>
  5. ...
  6. </ul>

Nhãn

Nhãn Đánh dấu
Mặc định <span class="label">Default</span>
Thành công <span class="label label-success">Success</span>
Cảnh báo <span class="label label-warning">Warning</span>
Quan trọng <span class="label label-important">Important</span>
Thông tin <span class="label label-info">Info</span>
Nghịch đảo <span class="label label-inverse">Inverse</span>

danh hiệu

Tên Thí dụ Đánh dấu
Mặc định 1 <span class="badge">1</span>
Thành công 2 <span class="badge badge-success">2</span>
Cảnh báo 4 <span class="badge badge-warning">4</span>
Quan trọng 6 <span class="badge badge-important">6</span>
Thông tin số 8 <span class="badge badge-info">8</span>
Nghịch đảo 10 <span class="badge badge-inverse">10</span>

Dễ dàng thu gọn

Để dễ dàng triển khai, nhãn và huy hiệu sẽ đơn giản thu gọn (thông qua bộ chọn của CSS :empty) khi không có nội dung nào tồn tại bên trong.

Đơn vị anh hùng

Một thành phần nhẹ, linh hoạt để giới thiệu nội dung chính trên trang web của bạn. Nó hoạt động tốt trên các trang web tiếp thị và nội dung nặng.

Chào thế giới!

Đây là một đơn vị anh hùng đơn giản, một thành phần kiểu jumbotron đơn giản để kêu gọi sự chú ý nhiều hơn đến nội dung hoặc thông tin nổi bật.

Tìm hiểu thêm

  1. <div class = "hero-unit" >
  2. <h1> Tiêu đề </h1>
  3. <p> Dòng giới thiệu </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Tìm hiểu thêm
  7. </a>
  8. </p>
  9. </div>

Đầu trang

Một khung đơn giản để h1tạo khoảng cách thích hợp và phân đoạn các phần nội dung trên một trang. Nó có thể sử dụng phần tử h1mặc định của smallcũng như hầu hết các thành phần khác (với các kiểu bổ sung).

  1. <div class = "page-header" >
  2. <h1> Tiêu đề trang mẫu <small> Văn bản phụ cho tiêu đề </small> </h1>
  3. </div>

Hình thu nhỏ mặc định

Theo mặc định, hình thu nhỏ của Bootstrap được thiết kế để hiển thị các hình ảnh được liên kết với đánh dấu bắt buộc tối thiểu.

Có thể tùy chỉnh cao

Với một chút đánh dấu bổ sung, bạn có thể thêm bất kỳ loại nội dung HTML nào như tiêu đề, đoạn văn hoặc nút vào hình thu nhỏ.

  • 300x200

    Nhãn hình thu nhỏ

    Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

    Hoạt động Hoạt động

  • 300x200

    Nhãn hình thu nhỏ

    Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

    Hoạt động Hoạt động

  • 300x200

    Nhãn hình thu nhỏ

    Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

    Hoạt động Hoạt động

Tại sao sử dụng hình thu nhỏ

Hình thu nhỏ (trước đây .media-gridcho đến phiên bản 1.4) rất phù hợp cho lưới ảnh hoặc video, kết quả tìm kiếm hình ảnh, sản phẩm bán lẻ, danh mục đầu tư, v.v. Chúng có thể là liên kết hoặc nội dung tĩnh.

Đánh dấu đơn giản, linh hoạt

Đánh dấu hình thu nhỏ rất đơn giản — ulvới bất kỳ số lượng liphần tử nào là tất cả những gì được yêu cầu. Nó cũng siêu linh hoạt, cho phép bất kỳ loại nội dung nào chỉ cần thêm một chút đánh dấu để gói nội dung của bạn.

Sử dụng kích thước cột lưới

Cuối cùng, thành phần hình thu nhỏ sử dụng các lớp hệ thống lưới hiện có — như .span2hoặc .span3—để kiểm soát kích thước hình thu nhỏ.

Đánh dấu

Như đã đề cập trước đây, đánh dấu bắt buộc cho hình thu nhỏ là nhẹ và đơn giản. Dưới đây là một cái nhìn về thiết lập mặc định cho các hình ảnh được liên kết :

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img data-src = "Holder.js / 300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Đối với nội dung HTML tùy chỉnh trong hình thu nhỏ, đánh dấu sẽ thay đổi một chút. Để cho phép nội dung cấp khối ở bất kỳ đâu, chúng tôi hoán đổi nội dung <a>tương <div>tự như vậy:

  1. <ul class = "thumbnails" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "Holder.js / 300x200" alt = "" >
  5. <h3> Nhãn hình thu nhỏ </h3>
  6. <p> Chú thích hình thu nhỏ ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Các ví dụ khác

Khám phá tất cả các tùy chọn của bạn với các lớp lưới khác nhau có sẵn cho bạn. Bạn cũng có thể trộn và kết hợp các kích cỡ khác nhau.

Cảnh báo mặc định

Gói bất kỳ văn bản nào và một nút loại bỏ tùy chọn .alertcho một thông báo cảnh báo cơ bản.

Cảnh báo! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.
  1. <div class = "alert" >
  2. <button type = "button" class = "close" data-allow = "alert" > & times; </button>
  3. <strong> Cảnh báo! </strong> Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.
  4. </div>

Loại bỏ các nút

Ngoài thuộc tính này, các trình duyệt Mobile Safari và Mobile Opera còn data-dismiss="alert"yêu cầu loại href="#"bỏ cảnh báo khi sử dụng <a>thẻ.

  1. <a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>

Ngoài ra, bạn có thể sử dụng một <button>phần tử có thuộc tính data, mà chúng tôi đã chọn thực hiện cho tài liệu của mình. Khi sử dụng <button>, bạn phải bao gồm type="button"nếu không các biểu mẫu của bạn có thể không gửi.

  1. <button type = "button" class = "close" data-allow = "alert" > & times; </button>

Loại bỏ cảnh báo qua JavaScript

Sử dụng plugin jQuery cảnh báo để loại bỏ cảnh báo nhanh chóng và dễ dàng.


Tùy chọn

Đối với các thư dài hơn, hãy tăng phần đệm ở trên cùng và dưới cùng của trình bao bọc cảnh báo bằng cách thêm .alert-block.

Cảnh báo!

Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn. Nulla vitae elit libero, một loài pharetra augue. Praesent Goodso cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-allow = "alert" > & times; </button>
  3. <h4> Cảnh báo! </h4>
  4. Tốt nhất bạn nên tự kiểm tra, bạn không ...
  5. </div>

Các lựa chọn thay thế theo ngữ cảnh

Thêm các lớp tùy chọn để thay đổi nội hàm của cảnh báo.

Lỗi hoặc nguy hiểm

Oh snap! Thay đổi một số thứ và thử gửi lại.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Thành công

Làm tốt! Bạn đã đọc thành công thông báo cảnh báo quan trọng này.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Thông tin

Đứng lên! Cảnh báo này cần bạn chú ý, nhưng nó không quá quan trọng.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Ví dụ và đánh dấu

Nền tảng

Thanh tiến trình mặc định với một gradient dọc.

  1. <div class = "process" >
  2. <div class = "bar" style = " width : 60 %; " > </div>
  3. </div>

Sọc

Sử dụng gradient để tạo hiệu ứng sọc. Không có sẵn trong IE7-8.

  1. <div class = "process progressive-sọc" >
  2. <div class = "bar" style = " width : 20 %; " > </div>
  3. </div>

Hoạt hình

Thêm vào .activeđể .progress-stripedtạo hiệu ứng cho các sọc từ phải sang trái. Không có sẵn trong tất cả các phiên bản IE.

  1. <div class = "process progressive-sọc active" >
  2. <div class = "bar" style = " width : 40 %; " > </div>
  3. </div>

Xếp chồng lên nhau

Đặt nhiều thanh giống nhau .progressđể xếp chồng lên nhau.

  1. <div class = "process" >
  2. <div class = "bar bar-success" style = " width : 35 %; " > </div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " > </div>
  4. <div class = "bar bar-risk" style = " width : 10 %; " > </div>
  5. </div>

Tùy chọn

Màu bổ sung

Thanh tiến trình sử dụng một số nút và lớp cảnh báo giống nhau cho các kiểu nhất quán.

  1. <div class = "process process-info" >
  2. <div class = "bar" style = " width : 20 % " > </div>
  3. </div>
  4. <div class = "tiến độ thành công" >
  5. <div class = "bar" style = " width : 40 % " > </div>
  6. </div>
  7. <div class = "process process-warning" >
  8. <div class = "bar" style = " width : 60 % " > </div>
  9. </div>
  10. <div class = "tiến độ tiến độ-nguy hiểm" >
  11. <div class = "bar" style = " width : 80 % " > </div>
  12. </div>

Thanh sọc

Tương tự như các màu đồng nhất, chúng tôi có các thanh tiến trình sọc đa dạng.

  1. <div class = "tiến trình tiến trình-thông tin tiến trình-sọc" >
  2. <div class = "bar" style = " width : 20 % " > </div>
  3. </div>
  4. <div class = "tiến độ thành công tiến bộ-sọc" >
  5. <div class = "bar" style = " width : 40 % " > </div>
  6. </div>
  7. <div class = "tiến độ cảnh báo tiến trình tiến trình-sọc" >
  8. <div class = "bar" style = " width : 60 % " > </div>
  9. </div>
  10. <div class = "tiến độ tiến độ-nguy hiểm tiến-sọc" >
  11. <div class = "bar" style = " width : 80 % " > </div>
  12. </div>

Hỗ trợ trình duyệt

Các thanh tiến trình sử dụng các gradient, hiệu ứng chuyển tiếp và hoạt ảnh CSS3 để đạt được tất cả các hiệu ứng của chúng. Các tính năng này không được hỗ trợ trong IE7-9 hoặc các phiên bản Firefox cũ hơn.

Các phiên bản cũ hơn Internet Explorer 10 và Opera 12 không hỗ trợ hoạt ảnh.

Các kiểu đối tượng trừu tượng để xây dựng các loại thành phần khác nhau (như bình luận blog, Tweet, v.v.) có hình ảnh căn trái hoặc phải cùng với nội dung văn bản.

Ví dụ mặc định

Phương tiện mặc định cho phép thả nổi một đối tượng phương tiện (hình ảnh, video, âm thanh) sang trái hoặc phải của một khối nội dung.

64x64

Tiêu đề phương tiện

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
64x64

Tiêu đề phương tiện

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
64x64

Tiêu đề phương tiện

Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#"> _
  3. <img class = "media-object" data-src = "Holder.js / 64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-header" > Tiêu đề phương tiện </h4>
  7. ...
  8.  
  9. <! - Đối tượng phương tiện lồng nhau ->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Danh sách phương tiện

Với một chút đánh dấu bổ sung, bạn có thể sử dụng phương tiện bên trong danh sách (hữu ích cho các chủ đề bình luận hoặc danh sách bài viết).

  • 64x64

    Tiêu đề phương tiện

    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Tiêu đề phương tiện lồng nhau

    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Tiêu đề phương tiện lồng nhau

    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Tiêu đề phương tiện lồng nhau

    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Tiêu đề phương tiện

    Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#"> _
  4. <img class = "media-object" data-src = "Holder.js / 64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-header" > Tiêu đề phương tiện </h4>
  8. ...
  9.  
  10. <! - Đối tượng phương tiện lồng nhau ->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Sử dụng hiệu ứng cũng như hiệu ứng đơn giản trên một phần tử để tạo hiệu ứng lồng ghép cho nó.

Nhìn kìa, tôi đang ở trong một cái giếng!
  1. <div class = "well" >
  2. ...
  3. </div>

Các lớp học tùy chọn

Điều khiển đệm và các góc tròn với hai lớp bổ trợ tùy chọn.

Nhìn kìa, tôi đang ở trong một cái giếng!
  1. <div class = "well well-large" >
  2. ...
  3. </div>
Nhìn kìa, tôi đang ở trong một cái giếng!
  1. <div class = "well-small" >
  2. ...
  3. </div>

Đóng biểu tượng

Sử dụng biểu tượng đóng chung để loại bỏ nội dung như phương thức và cảnh báo.

  1. <button class = "close" > & times; </button>

Các thiết bị iOS yêu cầu href="#"sự kiện cho lần nhấp nếu bạn muốn sử dụng ký tự liên kết.

  1. <a class = "close" href = "#"> & lần ; </a>

Các lớp trợ giúp

Các lớp đơn giản, tập trung để chỉnh sửa màn hình hoặc hành vi nhỏ.

.pull-left

Làm nổi một phần tử sang trái

  1. class = "pull-left"
  1. . kéo - trái {
  2. float : trái ;
  3. }

.pull-right

Làm nổi một phần tử bên phải

  1. class = "pull-right"
  1. . kéo - sang phải {
  2. float : phải ;
  3. }

.mute

Thay đổi màu của một phần tử thành#999

  1. class = "tắt tiếng"
  1. . tắt tiếng {
  2. màu : # 999;
  3. }

.clearfix

Xóa floattrên bất kỳ phần tử nào

  1. class = "clearfix"
  1. . clearfix {
  2. * thu phóng : 1 ;
  3. &: trước đây ,
  4. &: sau {
  5. hiển thị : bảng ;
  6. nội dung : "" ;
  7. }
  8. &: sau {
  9. rõ ràng : cả hai ;
  10. }
  11. }