Hàng chục thành phần có thể tái sử dụng được tích hợp trong Bootstrap để cung cấp điều hướng, cảnh báo, cửa sổ bật lên và hơn thế nữa.
Phân trang cực kỳ đơn giản và được tạo kiểu tối thiểu 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.
Các liên kết có thể tùy chỉnh và hoạt động trong một số trường hợp với đúng lớp. .disabled
cho các liên kết không thể nhấp vào và .active
cho trang hiện tại.
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
và .pagination-right
.
Thành phần phân trang mặc định linh hoạt và hoạt động trong một số biến thể.
Được bao bọc trong a <div>
, phân trang chỉ là a <ul>
.
- <div class = "pagination" >
- <ul>
- <li> <a href = "#"> Trước đó </a> </li>
- <li class = "active" >
- <a href = "#"> 1 </a> _
- </li>
- <li> <a href = "#"> 2 </a> </li>
- <li> <a href = "#"> 3 </a> </li>
- <li> <a href = "#"> 4 </a> </li>
- <li> <a href = "#"> Tiếp theo </a> </li>
- </ul>
- </div>
Thành phần máy nhắn tin là một tập hợp các liên kết để phân trang đơn giản với đánh dấu nhẹ và thậm chí là các kiểu nhẹ hơn. Nó tuyệt vời cho các trang web đơn giản như blog hoặc tạp chí.
Theo mặc định, các trung tâm máy nhắn tin liên kết.
- <ul class = "pager" >
- <li>
- <a href = "#"> Trước đó </a>
- </li>
- <li>
- <a href = "#"> Tiếp theo </a>
- </li>
- </ul>
Ngoài ra, bạn có thể căn chỉnh từng liên kết sang các bên:
- <ul class = "pager" >
- <li class = "trước" >
- <a href = "#"> & larr ; Cũ hơn </a>
- </li>
- <li class = "tiếp theo" >
- <a href = "#"> Mới hơn & rarr ; </a>
- </li>
- </ul>
Nhãn | Đánh dấu |
---|---|
Mặc định | <span class="label">Default</span> |
Mới | <span class="label label-success">New</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> |
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.
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ỏ.
Hình thu nhỏ (trước đây .media-grid
cho đế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 hình thu nhỏ rất đơn giản — ul
với bất kỳ số lượng li
phầ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.
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ư .span2
hoặc .span3
—để kiểm soát kích thước hình thu nhỏ.
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 :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Nhãn hình thu nhỏ </h5>
- <p> Chú thích hình thu nhỏ ngay tại đây ... </p>
- </div>
- </li>
- ...
- </ul>
Với Bootstrap 2, chúng tôi đã đơn giản hóa lớp cơ sở: .alert
thay vì .alert-message
. Chúng tôi cũng đã giảm mức đánh dấu bắt buộc tối thiểu — không <p>
bắt buộc theo mặc định, chỉ là bên ngoài <div>
.
Để có một thành phần bền hơn với ít mã hơn, chúng tôi đã loại bỏ giao diện phân biệt cho các cảnh báo khối, các thông báo có nhiều khoảng đệm hơn và thường là nhiều văn bản hơn. Lớp học cũng đã thay đổi thành .alert-block
.
Bootstrap đi kèm với một plugin jQuery tuyệt vời hỗ trợ các thông báo cảnh báo, giúp loại bỏ chúng nhanh chóng và dễ dàng.
Gói tin nhắn của bạn và một biểu tượng đóng tùy chọn trong một div với lớp đơn giản.
- <div class = "alert" >
- <a class = "close"> × </a> _
- <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.
- </div>
Dễ dàng mở rộng thông báo cảnh báo tiêu chuẩn với hai lớp tùy chọn: .alert-block
để có thêm các điều khiển đệm và văn bản và .alert-heading
cho một tiêu đề phù hợp.
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.
- <div class = "alert alert-block" >
- <a class = "close"> × </a> _
- <h4 class = "alert-header" > Cảnh báo! </h4>
- Tốt nhất bạn nên tự kiểm tra, bạn không ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Thanh tiến trình mặc định với một gradient dọc.
- <div class = "process" >
- <div class = "bar"
- style = " width : 60 %; " > </div>
- </div>
Sử dụng gradient để tạo hiệu ứng sọc.
- <div class = "tiến độ-thông tin tiến trình
- sọc tiến trình " >
- <div class = "bar"
- style = " width : 20 %; " > </div>
- </div>
Lấy ví dụ sọc và làm động nó.
- <div class = "tiến độ tiến độ-nguy hiểm
- tiến trình sọc hoạt động " >
- <div class = "bar"
- style = " width : 40 %; " > </div>
- </div>
Thanh tiến trình sử dụng một số tên lớp giống nhau làm nút và cảnh báo để tạo kiểu tương tự.
.progress-info
.progress-success
.progress-danger
Ngoài ra, bạn có thể tùy chỉnh các tệp LESS và cuộn các màu và kích thước của riêng bạn.
Thanh tiến trình sử dụng chuyển tiếp CSS3, vì vậy nếu bạn điều chỉnh động chiều rộng thông qua javascript, nó sẽ thay đổi kích thước một cách trơn tru.
Nếu bạn sử dụng .active
lớp này, .progress-striped
thanh tiến trình của bạn sẽ tạo hoạt ảnh cho các sọc từ trái sang phải.
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-8 hoặc các phiên bản Firefox cũ hơn.
Opera không hỗ trợ hoạt ảnh tại thời điểm này.
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ó.
- <div class = "well" >
- ...
- </div>
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.
- <a class = "close"> & lần ; </a>