Bootstrap - Hướng dẫn nhanh
Twitter Bootstrap là gì?
Bootstrap là một front-end framework đẹp, trực quan và mạnh mẽ, dành cho thiết bị di động để phát triển web nhanh hơn và dễ dàng hơn. Nó sử dụng HTML, CSS và Javascript.
Lịch sử
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter . Nó được phát hành dưới dạng một sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub.
Tại sao sử dụng Bootstrap?
Mobile first approach - Bootstrap 3, khung công tác bao gồm các kiểu di động đầu tiên trong toàn bộ thư viện thay vì chúng trong các tệp riêng biệt.
Browser Support - Nó được hỗ trợ bởi tất cả các trình duyệt phổ biến.
Easy to get started- Chỉ cần có kiến thức về HTML và CSS, bất kỳ ai cũng có thể bắt đầu với Bootstrap. Ngoài ra, trang web chính thức của Bootstrap có một tài liệu tốt.
Responsive design- CSS đáp ứng của Bootstrap điều chỉnh cho Máy tính để bàn, Máy tính bảng và Điện thoại di động. Thông tin thêm về thiết kế đáp ứng có trong chương Bootstrap Thiết kế đáp ứng.
Cung cấp giải pháp sạch sẽ và thống nhất để xây dựng giao diện cho các nhà phát triển.
Nó chứa các thành phần tích hợp đẹp mắt và chức năng dễ dàng tùy chỉnh.
Nó cũng cung cấp tùy chỉnh dựa trên web.
Và trên hết nó là một mã nguồn mở.
Gói Bootstrap bao gồm những gì?
Scaffolding- Bootstrap cung cấp một cấu trúc cơ bản với Hệ thống lưới, các kiểu liên kết và nền. Điều này được đề cập chi tiết trong phầnBootstrap Basic Structure
CSS- Bootstrap đi kèm với tính năng cài đặt CSS toàn cầu, các phần tử HTML cơ bản được tạo kiểu và nâng cao với các lớp có thể mở rộng và hệ thống lưới nâng cao. Điều này được đề cập chi tiết trong phầnBootstrap with CSS.
Components- Bootstrap chứa hơn một tá thành phần có thể tái sử dụng được xây dựng để cung cấp biểu tượng, danh sách thả xuống, điều hướng, cảnh báo, cửa sổ bật lên và hơn thế nữa. Điều này được đề cập chi tiết trong phầnLayout Components.
JavaScript Plugins- Bootstrap chứa hơn một tá plugin jQuery tùy chỉnh. Bạn có thể dễ dàng bao gồm tất cả hoặc từng cái một. Điều này được đề cập chi tiết trong phầnBootstrap Plugins.
Customize - Bạn có thể tùy chỉnh các thành phần của Bootstrap, biến LESS và các plugin jQuery để có được phiên bản của riêng bạn.
Nó rất dễ dàng để thiết lập và bắt đầu sử dụng Bootstrap. Chương này sẽ giải thích cách tải xuống và thiết lập Bootstrap. Chúng tôi cũng sẽ thảo luận về cấu trúc tệp Bootstrap và chứng minh cách sử dụng của nó bằng một ví dụ.
Tải xuống Bootstrap
Bạn có thể tải xuống phiên bản Bootstrap mới nhất từ https://getbootstrap.com/. Khi bạn nhấp vào liên kết này, bạn sẽ thấy một màn hình như dưới đây:
Ở đây bạn có thể thấy hai nút -
Download Bootstrap- Nhấp vào đây, bạn có thể tải xuống các phiên bản được biên dịch trước và rút gọn của Bootstrap CSS, JavaScript và phông chữ. Không có tài liệu hoặc tệp mã nguồn gốc nào được bao gồm.
Download Source - Nhấp vào đây, bạn có thể lấy mã nguồn Bootstrap LESS và JavaScript mới nhất trực tiếp từ GitHub.
Nếu bạn làm việc với mã nguồn không biên dịch của Bootstrap, bạn cần biên dịch các tệp LESS để tạo ra các tệp CSS có thể sử dụng được. Để biên dịch file LESS vào CSS, Bootstrap chính thức hỗ trợ chỉ Recess , đó là Hinter CSS Twitter dựa trên less.js .
Để hiểu rõ hơn và dễ sử dụng, chúng tôi sẽ sử dụng phiên bản Bootstrap được biên dịch sẵn trong suốt hướng dẫn. Khi các tệp được tuân thủ và giảm thiểu, bạn không phải bận tâm mỗi khi bao gồm các tệp riêng biệt cho chức năng riêng lẻ. Tại thời điểm viết bài này, phiên bản mới nhất (Bootstrap 3) đã được tải xuống.
Cấu trúc tệp
Bootstrap được biên dịch trước
Khi phiên bản đã biên dịch Bootstrap được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp / thư mục sau:
Như bạn có thể thấy, có CSS và JS đã biên dịch (bootstrap. *), Cũng như CSS và JS được biên dịch và rút gọn (bootstrap.min. *). Phông chữ từ Glyphicons được bao gồm, vì nó là chủ đề Bootstrap tùy chọn.
Mã nguồn Bootstrap
Nếu bạn đã tải xuống mã nguồn Bootstrap thì cấu trúc tệp sẽ như sau:
Các tệp dưới ít / , js / và phông chữ / là mã nguồn cho Bootstrap CSS, JS và phông chữ biểu tượng (tương ứng).
Các dist / thư mục bao gồm tất cả mọi thứ được liệt kê trong phần tải về biên dịch sẵn ở trên.
docs-asset / , amples / và tất cả các tệp * .html là tài liệu Bootstrap.
Mẫu HTML
Một mẫu HTML cơ bản sử dụng Bootstrap sẽ trông như thế này:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>Ở đây bạn có thể thấy jquery.js, bootstrap.min.js và bootstrap.min.csscác tệp được bao gồm để tạo tệp HTM bình thường cho Mẫu khởi động. Chỉ cần đảm bảo bao gồm thư viện jQuery trước khi bạn bao gồm thư viện Bootstrap.
Chi tiết hơn về từng phần tử trong đoạn mã trên sẽ được thảo luận trong chương Tổng quan về CSS Bootstrap .
Thí dụ
Bây giờ chúng ta hãy thử một ví dụ bằng cách sử dụng mẫu trên. Hãy thử ví dụ sau bằng cách sử dụng tùy chọn Live Demo có sẵn ở góc trên cùng bên phải của hộp mã mẫu bên dưới trên trang web của chúng tôi -
<h1>Hello, world!</h1>Trong tất cả các chương tiếp theo, chúng tôi đã sử dụng văn bản giả từ trang web https://www.lipsum.com/.
Trong chương này, chúng ta sẽ thảo luận về Hệ thống lưới Bootstrap.
Grid là gì?
Theo wikepedia -
Trong thiết kế đồ họa, lưới là một cấu trúc (thường là hai chiều) được tạo thành từ một loạt các đường thẳng (dọc, ngang) giao nhau được sử dụng để cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố cục và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo một bố cục nhất quán một cách nhanh chóng và hiệu quả bằng cách sử dụng HTML và CSS.
Nói một cách dễ hiểu, các lưới trong thiết kế web tổ chức và cấu trúc nội dung, giúp các trang web dễ dàng quét và giảm tải nhận thức cho người dùng.
Hệ thống lưới Bootstrap là gì?
Theo tài liệu chính thức của Bootstrap cho hệ thống lưới -
Bootstrap bao gồm một hệ thống lưới linh hoạt đầu tiên đáp ứng, di động có thể điều chỉnh tỷ lệ thích hợp lên đến 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên. Nó bao gồm các lớp được xác định trước cho các tùy chọn bố cục dễ dàng, cũng như các mixin mạnh mẽ để tạo nhiều bố cục ngữ nghĩa hơn.
Hãy để chúng tôi hiểu câu nói trên. Bootstrap 3 trước tiên là di động theo nghĩa là mã cho Bootstrap bây giờ bắt đầu bằng cách nhắm mục tiêu các màn hình nhỏ hơn như thiết bị di động, máy tính bảng, sau đó “mở rộng” các thành phần và lưới cho các màn hình lớn hơn như máy tính xách tay, máy tính để bàn.
Chiến lược đầu tiên trên thiết bị di động
Content
- Xác định điều gì là quan trọng nhất.
Layout
- Thiết kế chiều rộng nhỏ hơn trước.
- CSS cơ sở địa chỉ thiết bị di động đầu tiên; địa chỉ truy vấn phương tiện cho máy tính bảng, máy tính để bàn.
Progressive Enhancement
- Thêm các phần tử khi kích thước màn hình tăng lên.
Hoạt động của hệ thống lưới Bootstrap
Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn. Đây là cách hệ thống lưới Bootstrap hoạt động -
Các hàng phải được đặt trong một .container lớp để căn chỉnh và đệm thích hợp.
Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Các lớp lưới được xác định trước như .row and .col-xs-4có sẵn để nhanh chóng tạo bố cục lưới. LESS mixin cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên.rows.
Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: ba cột bằng nhau sẽ sử dụng ba.col-xs-4.
Truy vấn phương tiện truyền thông
Truy vấn phương tiện là một thuật ngữ thực sự ưa thích cho "quy tắc CSS có điều kiện". Nó chỉ đơn giản là áp dụng một số CSS, dựa trên các điều kiện nhất định được đặt ra. Nếu các điều kiện đó được đáp ứng, kiểu được áp dụng.
Media Queries trong Bootstrap cho phép bạn di chuyển, hiển thị và ẩn nội dung dựa trên kích thước khung nhìn. Các truy vấn phương tiện sau được sử dụng trong các tệp LESS để tạo các điểm ngắt chính trong hệ thống lưới Bootstrap.
/* 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) { ... }Đôi khi chúng được mở rộng để bao gồm max-width để giới hạn CSS cho một nhóm thiết bị hẹp hơn.
@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) { ... }Truy vấn phương tiện có hai phần, đặc điểm kỹ thuật thiết bị và sau đó là quy tắc kích thước. Trong trường hợp trên, quy tắc sau được đặt:
Hãy để chúng tôi xem xét dòng này -
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }Đối với tất cả các thiết bị không có vấn đề gì với chiều rộng tối thiểu: @ screen-sm-min nếu chiều rộng của màn hình nhỏ hơn @ screen-sm-max , thì hãy làm gì đó .
Tùy chọn lưới
Bảng sau đây tóm tắt các khía cạnh về cách hệ thống lưới Bootstrap hoạt động trên nhiều thiết bị:
| 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 | Ngang mọi lúc | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt |
| Chiều rộng vùng chứa tối đa | Không có (tự động) | 750px | 970px | 1170px |
| Tiền tố lớp | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # cột | 12 | 12 | 12 | 12 |
| Chiều rộng cột tối đa | Tự động | 60px | 78px | 95px |
| Chiều rộng máng xối | 30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
| Lồng được | Đúng | Đúng | Đúng | Đúng |
| Bù đắp | Đúng | Đúng | Đúng | Đúng |
| Thứ tự cột | Đúng | Đúng | Đúng | Đúng |
Cấu trúc lưới cơ bản
Sau đây là cấu trúc cơ bản của lưới Bootstrap:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>Hãy để chúng tôi xem một số ví dụ đơn giản về lưới -
Ví dụ - Xếp chồng lên nhau
Ví dụ - Thiết bị vừa và lớn
Ví dụ - Điện thoại di động, máy tính bảng, máy tính để bàn
Đặt lại cột đáp ứng
Với bốn tầng lưới có sẵn, bạn nhất định gặp phải các vấn đề trong đó tại một số điểm ngắt nhất định, các cột không rõ ràng hoàn toàn vì cột này cao hơn cột kia. Để khắc phục điều đó, hãy sử dụng kết hợp một lớp.clearfixvà các lớp tiện ích đáp ứng như trong ví dụ sau:
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
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 để có kết quả mong muốn của ví dụ này.
Cột bù đắp
Offsets là một tính năng hữu ích cho các bố cục chuyên biệt hơn. Chúng có thể được sử dụng để đẩy các cột lên để có thêm khoảng cách, (ví dụ). Các.col-xs = * các lớp không hỗ trợ hiệu số, nhưng chúng dễ dàng được sao chép bằng cách sử dụng một ô trống.
Để sử dụng hiệu số trên màn hình lớn, hãy sử dụng .col-md-offset-*các lớp học. Các lớp này tăng lề trái của cột bằng* cột ở đâu * phạm vi từ 1 đến 11.
Trong ví dụ sau, chúng ta có <div class = "col-md-6"> .. </div>, Chúng ta sẽ căn giữa điều này bằng cách sử dụng lớp .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Lồng các cột
Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .row và tập hợp .col-md-* cột trong một .col-md-*cột. Các hàng lồng nhau phải bao gồm một tập hợp các cột lên đến 12.
Trong ví dụ sau, bố cục có hai cột, với cột thứ hai được chia thành bốn hộp trên hai hàng.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Thứ tự cột
Một tính năng thú vị khác của hệ thống lưới Bootstrap là bạn có thể dễ dàng viết các cột theo thứ tự và hiển thị chúng theo một thứ tự khác. Bạn có thể dễ dàng thay đổi thứ tự của các cột lưới tích hợp với.col-md-push-* và .col-md-pull-* các lớp bổ nghĩa nơi * phạm vi từ 1 đến 11.
Trong ví dụ sau, chúng ta có bố cục hai cột với cột bên trái là hẹp nhất và hoạt động như một thanh bên. Chúng tôi sẽ hoán đổi thứ tự của các cột này bằng cách sử dụng.col-md-push-* và .col-md-pull-* các lớp học.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Chương này cung cấp tổng quan về các phần chính trong cơ sở hạ tầng của Bootstrap, bao gồm cả cách tiếp cận của Bootstrap để phát triển web tốt hơn, nhanh hơn, mạnh mẽ hơn.
Loại tài liệu HTML5
Bootstrap sử dụng các phần tử HTML nhất định và các thuộc tính CSS yêu cầu sử dụng loại tài liệu HTML5. Do đó, hãy bao gồm đoạn mã dưới đây cho loại tài liệu HTML5 ở đầu tất cả các dự án của bạn bằng Bootstrap.
<!DOCTYPE html>
<html>
....
</html>Di động đầu tiên
Kể từ khi Bootstrap 3 ra mắt, Bootstrap đã trở thành thiết bị di động đầu tiên. Nó có nghĩa là các kiểu 'di động đầu tiên' có thể được tìm thấy trong toàn bộ thư viện thay vì chúng trong các tệp riêng biệt. Bạn cần thêmviewport meta tag đến <head> , để đảm bảo kết xuất phù hợp và phóng to chạm trên thiết bị di động.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">thuộc tính width kiểm soát chiều rộng của thiết bị. Đặt nó thành chiều rộng thiết bị sẽ đảm bảo rằng nó được hiển thị trên các thiết bị khác nhau (điện thoại di động, máy tính để bàn, máy tính bảng ...) đúng cách.
ban đầu-scale = 1.0 đảm bảo rằng khi được tải, trang web của bạn sẽ được hiển thị ở tỷ lệ 1: 1 và không áp dụng tính năng phóng to ra khỏi hộp.
Thêm vào user-scalable = no đến contentđể tắt khả năng phóng to trên thiết bị di động như hình dưới đây. Người dùng chỉ có thể cuộn chứ không thể thu phóng với thay đổi này và dẫn đến trang web của bạn giống một ứng dụng gốc hơn một chút.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">Thông thường , quy mô tối đa = 1,0 được sử dụng cùng với quy mô người dùng = không . Như được đề cập ở trênuser-scalable = no có thể mang đến cho người dùng trải nghiệm giống như một ứng dụng gốc hơn, do đó Bootstrap không khuyên bạn nên sử dụng thuộc tính này.
Hình ảnh đáp ứng
Bootstrap 3 cho phép bạn làm cho hình ảnh đáp ứng bằng cách thêm một lớp .img-responsive đến <img>nhãn. Lớp này áp dụngmax-width: 100%; và height: auto; vào hình ảnh để nó có tỷ lệ phù hợp với phần tử mẹ.
<img src = "..." class = "img-responsive" alt = "Responsive image">Kiểu chữ và Liên kết
Bootstrap thiết lập một kiểu hiển thị chung (nền), kiểu chữ và liên kết cơ bản -
Basic Global display- Đặt màu nền: #fff; trên phần tử <body> .
Typography- Sử dụng các thuộc tính @ font-family-base , @ font-size-base và @ line-height-base làm cơ sở đánh máy.
Link styles- Đặt màu liên kết toàn cục thông qua thuộc tính @ link-color và chỉ áp dụng gạch dưới liên kết trên : hover .
Nếu bạn có ý định sử dụng mã LESS, bạn có thể tìm thấy tất cả những điều này trong giàn giáo.less .
Bình thường hóa
Bootstrap sử dụng Normalize để thiết lập tính nhất quán giữa các trình duyệt.
Normalize.css là một giải pháp thay thế hiện đại, sẵn sàng cho HTML5 để đặt lại CSS. Đây là một tệp CSS nhỏ cung cấp tính nhất quán trên nhiều trình duyệt tốt hơn trong kiểu mặc định của các phần tử HTML.
Hộp đựng
Sử dụng lớp học .container để bao bọc nội dung của một trang và dễ dàng căn giữa nội dung như hình dưới đây.
<div class = "container">
...
</div>Hãy nhìn vào .containerlớp trong tệp bootstrap.css -
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Lưu ý rằng, do đệm và độ rộng cố định, các vùng chứa không thể lồng vào nhau theo mặc định.
Hãy xem tệp bootstrap.css -
@media (min-width: 768px) {
.container {
width: 750px;
}
}Ở đây, bạn có thể thấy CSS có các truy vấn phương tiện cho các vùng chứa với width. Điều này giúp cho việc áp dụng khả năng đáp ứng và trong các lớp đó, lớp vùng chứa được sửa đổi cho phù hợp để hiển thị hệ thống lưới đúng cách.
Bootstrap sử dụng Helvetica Neue, Helvetica, Arial và sans-serif trong ngăn xếp phông chữ mặc định của nó. Sử dụng tính năng typography của Bootstrap, bạn có thể tạo các tiêu đề, đoạn văn, danh sách và các phần tử nội dòng khác. Hãy xem tìm hiểu từng điều này trong các phần sau.
Đề mục
Tất cả các tiêu đề HTML (h1 đến h6) đều được tạo kiểu trong Bootstrap. Một ví dụ được hiển thị bên dưới -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Đoạn mã trên với Bootstrap sẽ tạo ra kết quả sau:
Tiêu đề phụ nội tuyến
Để thêm tiêu đề phụ nội dòng vào bất kỳ tiêu đề nào, chỉ cần thêm <small> xung quanh bất kỳ phần tử nào hoặc thêm .small lớp và bạn sẽ nhận được văn bản nhỏ hơn với màu sáng hơn như trong ví dụ dưới đây -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Đoạn mã trên với Bootstrap sẽ tạo ra kết quả sau:
Bản sao thân chì
Để thêm một số điểm nhấn cho một đoạn văn, hãy thêm class = "lead". Điều này sẽ cung cấp cho bạn kích thước phông chữ lớn hơn, trọng lượng nhẹ hơn và chiều cao dòng cao hơn như trong ví dụ sau:
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Nhấn mạnh
Các thẻ nhấn mạnh mặc định của HTML, chẳng hạn như <small> đặt văn bản bằng 85% kích thước của thẻ gốc, <strong> nhấn mạnh văn bản có trọng lượng phông chữ nặng hơn và <em> nhấn mạnh văn bản in nghiêng.
Bootstrap cung cấp một vài lớp có thể được sử dụng để nhấn mạnh vào văn bản như được thấy trong ví dụ sau:
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Các từ viết tắt
Phần tử HTML <abbr> cung cấp đánh dấu cho các từ viết tắt hoặc từ viết tắt, như WWW hoặc HTTP. Bootstrap tạo kiểu các phần tử <abbr> với đường viền chấm sáng dọc theo phía dưới và hiển thị toàn bộ văn bản khi di chuột (miễn là bạn thêm văn bản đó vào thuộc tính tiêu đề <abbr>). Để có kích thước phông chữ nhỏ hơn một chút, hãy thêm .initialism vào <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Địa chỉ
Sử dụng thẻ <address>, bạn có thể hiển thị thông tin liên hệ trên trang web của mình. Vì <address> mặc định hiển thị: block; bạn sẽ cần sử dụng
Thẻ để thêm ngắt dòng vào văn bản địa chỉ kèm theo.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Những câu chuyện cổ tích
Bạn có thể sử dụng <blockquote> mặc định xung quanh bất kỳ văn bản HTML nào. Các tùy chọn khác bao gồm, thêm thẻ <small> để xác định nguồn trích dẫn và căn chỉnh ngay khối trích dẫn bằng cách sử dụng lớp .pull-right . Ví dụ sau minh họa tất cả các tính năng này:
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Danh sách
Bootstrap hỗ trợ danh sách có thứ tự, danh sách không có thứ tự và danh sách định nghĩa.
Ordered lists - Danh sách có thứ tự là danh sách sắp xếp theo thứ tự tuần tự nào đó và được bắt đầu bằng số.
Unordered lists- Danh sách không có thứ tự là danh sách không có bất kỳ thứ tự cụ thể nào và được tạo kiểu truyền thống với các dấu đầu dòng. Nếu bạn không muốn các dấu đầu dòng xuất hiện, thì bạn có thể xóa kiểu bằng cách sử dụng lớp .list-unstyled . Bạn cũng có thể đặt tất cả các mục trong danh sách trên một dòng bằng cách sử dụng lớp .list-inline .
Definition lists- Trong kiểu danh sách này, mỗi mục danh sách có thể bao gồm cả phần tử <dt> và <dd>. <dt> là viết tắt của thuật ngữ định nghĩa , và giống như từ điển, đây là thuật ngữ (hoặc cụm từ) đang được định nghĩa. Sau đó, <dd> là định nghĩa của <dt>. Bạn có thể tạo các thuật ngữ và mô tả trong <dl> xếp cạnh nhau bằng cách sử dụng lớp dl-ngang .
Ví dụ sau minh họa từng loại sau:
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>Bootstrap cho phép bạn hiển thị mã bằng hai cách chính khác nhau -
Đầu tiên là thẻ <code>. Nếu bạn sắp hiển thị mã nội dòng, bạn nên sử dụng thẻ <code>.
Thứ hai là thẻ <pre>. Nếu mã cần được hiển thị như một phần tử khối độc lập hoặc nếu nó có nhiều dòng, thì bạn nên sử dụng thẻ <pre>.
Đảm bảo rằng khi bạn sử dụng thẻ <pre> và <code>, bạn sử dụng các biến thể unicode cho thẻ mở và thẻ đóng - < và >.
Hãy cho chúng tôi xem một ví dụ bên dưới -
<p><code><header></code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use <pre> tag as:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>Bootstrap cung cấp một bố cục gọn gàng để xây dựng bảng. Một số phần tử bảng được Bootstrap hỗ trợ là:
| Sr.No. | Thẻ & Mô tả |
|---|---|
| 1 | <table> Phần tử bao bọc để hiển thị dữ liệu ở định dạng bảng |
| 2 | <thead> Phần tử vùng chứa cho các hàng tiêu đề bảng (<tr>) để gắn nhãn các cột trong bảng. |
| 3 | <tbody> Phần tử vùng chứa cho các hàng của bảng (<tr>) trong phần nội dung của bảng. |
| 4 | <tr> Phần tử vùng chứa cho một tập hợp các ô trong bảng (<td> hoặc <th>) xuất hiện trên một hàng. |
| 5 | <td> Ô bảng mặc định. |
| 6 | <th> Ô bảng đặc biệt cho các nhãn cột (hoặc hàng, tùy thuộc vào phạm vi và vị trí). Phải được sử dụng trong <thead> |
| 7 | <caption> Mô tả hoặc tóm tắt về những gì bảng chứa. |
Bảng cơ bản
Nếu bạn muốn có một kiểu bảng cơ bản, đẹp mắt chỉ với một số đệm nhẹ và các đường chia ngang, hãy thêm lớp cơ sở của .table vào bất kỳ bảng nào như được hiển thị trong ví dụ sau:
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Các loại bảng tùy chọn
Cùng với đánh dấu bảng cơ sở và lớp .table, có một số lớp bổ sung mà bạn có thể sử dụng để tạo kiểu đánh dấu. Các phần tiếp theo sẽ cung cấp cho bạn một cái nhìn sơ lược về tất cả các lớp này.
Bàn sọc
Bằng cách thêm lớp .table-sọc , bạn sẽ nhận được các sọc trên các hàng trong <tbody> như trong ví dụ sau:
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng có viền
Bằng cách thêm lớp .table-borderered , bạn sẽ nhận được các đường viền bao quanh mọi phần tử và các góc được làm tròn xung quanh toàn bộ bảng như trong ví dụ sau:
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng di chuột
Bằng cách thêm lớp .table-hover , nền màu xám nhạt sẽ được thêm vào các hàng trong khi con trỏ di chuột qua chúng, như trong ví dụ sau:
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng cô đọng
Bằng cách thêm lớp được cô đặc .table , phần đệm hàng được cắt làm đôi để cô đặc bảng. như trong ví dụ sau. Điều này rất hữu ích nếu bạn muốn có bất kỳ thông tin nào dày đặc hơn.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Các lớp theo ngữ cảnh
Các lớp theo ngữ cảnh được hiển thị trong bảng sau sẽ cho phép bạn thay đổi màu nền của các hàng trong bảng hoặc các ô riêng lẻ.
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | .active Áp dụng màu di chuột cho một hàng hoặc ô cụ thể |
| 2 | .success Cho biết một hành động thành công hoặc tích cực |
| 3 | .warning Cho biết một cảnh báo có thể cần chú ý |
| 4 | .danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực |
Các lớp này có thể được áp dụng cho <tr>, <td> hoặc <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Bảng đáp ứng
Bằng cách gói bất kỳ .table nào trong lớp .table-responsive , bạn sẽ làm cho bảng cuộn theo chiều ngang tới các thiết bị nhỏ (dưới 768px). Khi xem trên bất kỳ thứ gì có chiều rộng lớn hơn 768px, bạn sẽ không thấy bất kỳ sự khác biệt nào trong các bảng này.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu dễ dàng bằng Bootstrap. Bootstrap làm cho nó dễ dàng với đánh dấu HTML đơn giản và các lớp mở rộng cho các kiểu biểu mẫu khác nhau. Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu dễ dàng bằng Bootstrap.
Bố cục biểu mẫu
Bootstrap cung cấp cho bạn các loại bố cục biểu mẫu sau:
- Dạng dọc (mặc định)
- Mẫu nội tuyến
- Dạng ngang
Dạng dọc hoặc dạng cơ bản
Cấu trúc biểu mẫu cơ bản đi kèm với Bootstrap; các điều khiển biểu mẫu riêng lẻ tự động nhận một số kiểu chung. Để tạo một biểu mẫu cơ bản, hãy làm như sau:
Thêm một biểu mẫu vai trò vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group . Điều này là cần thiết để có khoảng cách tối ưu.
Thêm một lớp .form-control vào tất cả các phần tử <input>, < textareosystem và <select> văn bản.
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Mẫu nội tuyến
Để tạo một biểu mẫu trong đó tất cả các phần tử đều nằm trong dòng, căn trái và các nhãn nằm dọc, hãy thêm lớp .form-inline vào thẻ <form>.
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Theo mặc định các đầu vào, lựa chọn và vùng văn bản có 100% chiều rộng trong Bootstrap. Bạn cần đặt chiều rộng trên các điều khiển biểu mẫu khi sử dụng biểu mẫu nội tuyến.
Sử dụng lớp .sr-only, bạn có thể ẩn nhãn của các biểu mẫu nội tuyến.
Dạng ngang
Biểu mẫu nằm ngang khác biệt so với những biểu mẫu khác không chỉ ở số lượng đánh dấu mà còn ở cách trình bày biểu mẫu. Để tạo biểu mẫu sử dụng bố cục ngang, hãy làm như sau:
Thêm một lớp .form-ngang vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group .
Thêm một lớp .control-label vào các nhãn.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>Kiểm soát biểu mẫu được hỗ trợ
Bootstrap nguyên bản hỗ trợ các điều khiển biểu mẫu phổ biến nhất chủ yếu là đầu vào, vùng văn bản, hộp kiểm, radio và chọn.
Đầu vào
Trường văn bản biểu mẫu phổ biến nhất là trường đầu vào. Đây là nơi người dùng sẽ nhập hầu hết các dữ liệu biểu mẫu cần thiết. Bootstrap cung cấp hỗ trợ cho tất cả các loại đầu vào HTML5 gốc: văn bản, mật khẩu, ngày giờ, ngày giờ cục bộ, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, số điện thoại và màu sắc . Cần phải khai báo kiểu thích hợp để làm cho Đầu vào có kiểu dáng đầy đủ.
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>Textarea
Vùng văn bản được sử dụng khi bạn cần nhiều dòng nhập liệu. Thay đổi thuộc tính hàng nếu cần (ít hàng hơn = hộp nhỏ hơn, nhiều hàng hơn = hộp lớn hơn).
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>CheckBoxes và Radio Buttons
Hộp kiểm và nút radio rất tuyệt khi bạn muốn người dùng chọn từ danh sách các tùy chọn đặt trước.
Khi xây dựng biểu mẫu, hãy sử dụng hộp kiểm nếu bạn muốn người dùng chọn bất kỳ số tùy chọn nào từ danh sách. Sử dụng radio nếu bạn muốn giới hạn người dùng chỉ trong một lựa chọn.
Sử dụng lớp .checkbox-inline hoặc .radio-inline cho một loạt các hộp kiểm hoặc radio cho các điều khiển xuất hiện trên cùng một dòng.
Ví dụ sau minh họa cả hai loại (mặc định và nội tuyến):
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>Lựa chọn
Lựa chọn được sử dụng khi bạn muốn cho phép người dùng chọn từ nhiều tùy chọn, nhưng theo mặc định, nó chỉ cho phép một tùy chọn.
Sử dụng <select> cho các tùy chọn danh sách mà người dùng quen thuộc, chẳng hạn như trạng thái hoặc số.
Sử dụng nhiều = "nhiều" để cho phép người dùng chọn nhiều tùy chọn.
Ví dụ sau minh họa cả hai loại (chọn và nhiều) -
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>Kiểm soát tĩnh
Sử dụng lớp .form-control-static trên <p> khi bạn cần đặt văn bản thuần túy bên cạnh nhãn biểu mẫu trong biểu mẫu nằm ngang.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>Trạng thái kiểm soát biểu mẫu
Ngoài trạng thái : focus (tức là người dùng nhấp vào đầu vào hoặc các tab vào đó), Bootstrap cung cấp kiểu cho các đầu vào và lớp bị vô hiệu hóa để xác thực biểu mẫu.
Tiêu điểm đầu vào
Khi đầu vào nhận được : tiêu điểm , đường viền của đầu vào sẽ bị xóa và áp dụng bóng hộp .
Đầu vào bị vô hiệu hóa
Nếu bạn cần vô hiệu hóa một đầu vào, chỉ cần thêm thuộc tính bị vô hiệu hóa sẽ không chỉ vô hiệu hóa nó; nó cũng sẽ thay đổi kiểu và con trỏ chuột khi con trỏ di chuột qua phần tử.
Bộ trường bị vô hiệu hóa
Thêm thuộc tính đã tắt vào <fieldset> để tắt tất cả các điều khiển trong <fieldset> cùng một lúc.
Các trạng thái xác thực
Bootstrap bao gồm các kiểu xác nhận lỗi, cảnh báo và thông báo thành công. Để sử dụng, chỉ cần thêm lớp thích hợp ( .has-warning, .has-error hoặc .has-success ) vào phần tử mẹ.
Ví dụ sau minh họa tất cả các trạng thái điều khiển biểu mẫu:
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>Kiểm soát kích thước biểu mẫu
Bạn có thể đặt chiều cao và chiều rộng của biểu mẫu bằng cách sử dụng các lớp như .input-lg và .col-lg- * tương ứng. Ví dụ sau đây chứng minh điều này -
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>Văn bản trợ giúp
Các điều khiển biểu mẫu Bootstrap có thể có văn bản trợ giúp ở mức khối chạy với các đầu vào. Để thêm một khối nội dung có chiều rộng đầy đủ, hãy sử dụng .help-block sau <input>. Ví dụ sau đây chứng minh điều này -
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>Chương này bao gồm tuổi sử dụng của nút Bootstrap với các ví dụ. Bất cứ thứ gì được phân loại.btnsẽ kế thừa giao diện mặc định của một nút màu xám với các góc được bo tròn. Tuy nhiên, Bootstrap cung cấp một số tùy chọn để tạo kiểu cho các nút, được tóm tắt trong bảng sau:
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | btn Nút mặc định / tiêu chuẩn. |
| 2 | btn-primary Cung cấp thêm trọng lượng trực quan và xác định hành động chính trong một tập hợp các nút. |
| 3 | btn-success Cho biết một hành động thành công hoặc tích cực. |
| 4 | btn-info Nút theo ngữ cảnh cho các thông báo cảnh báo thông tin. |
| 5 | btn-warning Cho biết cần thận trọng với hành động này. |
| 6 | btn-danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực. |
| 7 | btn-link Nhấn mạnh nút bằng cách làm cho nó trông giống như một liên kết trong khi vẫn duy trì hành vi của nút. |
Ví dụ sau minh họa tất cả các lớp nút ở trên:
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Kích thước nút
Bảng sau đây tóm tắt các lớp được sử dụng để lấy các nút có kích thước khác nhau:
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | .btn-lg Điều này làm cho kích thước nút lớn. |
| 2 | .btn-sm Điều này làm cho kích thước nút nhỏ. |
| 3 | .btn-xs Điều này làm cho kích thước nút cực nhỏ. |
| 4 | .btn-block Điều này tạo ra các nút cấp độ khối — những nút này kéo dài toàn bộ chiều rộng của nút chính. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>Trạng thái nút
Bootstrap cung cấp các lớp cho phép bạn thay đổi trạng thái của các nút như đang hoạt động, bị vô hiệu hóa, v.v. mỗi lớp sẽ được thảo luận trong các phần sau.
Trạng thái hoạt động
Các nút sẽ xuất hiện được nhấn (với nền tối hơn, đường viền tối hơn và bóng chìm) khi hoạt động. Bảng sau đây tóm tắt các lớp được sử dụng để làm cho các phần tử nút và phần tử neo hoạt động:
| Thành phần | Lớp học |
|---|---|
| Phần tử nút | Sử dụng .active lớp để cho thấy rằng nó đã được kích hoạt. |
| Phần tử neo | Sử dụng .active lớp thành các nút <a> để cho biết nó đã được kích hoạt. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>Trạng thái tàn tật
Khi bạn tắt một nút, nó sẽ mờ đi 50% màu và mất gradient.
Bảng sau đây tóm tắt các lớp được sử dụng để tắt phần tử nút và phần tử neo:
| Thành phần | Lớp học |
|---|---|
| Phần tử nút | Thêm disabled thuộc tính cho các nút <button>. |
| Phần tử neo | Thêm disabled lớp đến các nút <a>. Note- Lớp này sẽ chỉ thay đổi giao diện của <a> chứ không phải chức năng của nó. Bạn cần sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết tại đây. |
Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Thẻ nút
Bạn có thể sử dụng các lớp nút với phần tử <a>, <button> hoặc <input>. Nhưng chúng tôi khuyên bạn nên sử dụng nó với các phần tử <button> để tránh các vấn đề không nhất quán giữa các trình duyệt.
Ví dụ sau đây chứng minh điều này -
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">Chương này bao gồm hỗ trợ Bootstrap cho hình ảnh. Bootstrap cung cấp ba lớp có thể được sử dụng để áp dụng một số kiểu đơn giản cho hình ảnh -
.img-rounded- thêm border-radius: 6px để cung cấp cho hình ảnh các góc tròn.
.img-circle- làm cho toàn bộ hình ảnh tròn bằng cách thêm border-radius: 500px .
.img-thumbnail - thêm một chút đệm và đường viền màu xám -
Ví dụ sau đây chứng minh điều này -
<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">Chương này thảo luận về một số lớp trợ giúp trong Bootstrap có thể hữu ích.
Đó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. Sử dụng lớp họcclose để lấy biểu tượng đóng.
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>Carets
Sử dụng dấu mũ để biểu thị chức năng và hướng thả xuống. Để có được chức năng này, hãy sử dụng lớpcaret với một phần tử <span>.
<p>Caret Example<span class = "caret"></span></p>Phao nhanh
Bạn có thể thả nổi một phần tử sang trái hoặc phải với lớp pull-left hoặc là pull-right tương ứng, ví dụ sau đây chứng minh điều này.
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>Để căn 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 .navbar-left hoặc là .navbar-rightthay thế. Xem chương điều hướng để biết chi tiết.
Khối nội dung trung tâm
Sử dụng lớp học center-block để đặt một phần tử ở giữa.
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>Clearfix
Để xóa float của bất kỳ phần tử nào, hãy sử dụng .clearfix lớp học.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>Hiển thị và Ẩn Nội dung
Bạn có thể buộc hiển thị hoặc ẩn một phần tử (kể cả đối với trình đọc màn hình) bằng cách sử dụng các lớp .show và .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>Nội dung trình đọc màn hình
Bạn có thể ẩn một phần tử cho tất cả các thiết bị ngoại trừ trình đọc màn hình với lớp .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>Ở đây, chúng ta có thể thấy rằng nhãn của cả hai kiểu đầu vào được gán cho lớp sr-only, do đó nhãn sẽ chỉ hiển thị với trình đọc màn hình.
Bootstrap cung cấp một số lớp trợ giúp hữu ích để phát triển thân thiện với thiết bị di động nhanh hơn. Chúng có thể được sử dụng để hiển thị và ẩn nội dung theo thiết bị thông qua truy vấn phương tiện, kết hợp với các thiết bị lớn, nhỏ và vừa.
Sử dụng những thứ này một cách tiết kiệm và tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web. Responsive utilities are currently only available for block and table toggling.
| Các lớp học | Thiết bị |
|---|---|
| .visible-xs | Cực nhỏ (dưới 768px) hiển thị |
| .visible-sm | Nhỏ (lên đến 768 px) hiển thị |
| .visible-md | Trung bình (768 px đến 991 px) hiển thị |
| .visible-lg | Lớn hơn (992 px trở lên) hiển thị |
| .hides-xs | Cực nhỏ (nhỏ hơn 768px) bị ẩn |
| .hides-sm | Nhỏ (lên đến 768 px) ẩn |
| .hides-md | Trung bình (768 px đến 991 px) ẩn |
| .hides-lg | Lớn hơn (992 px trở lên) bị ẩn |
In lớp học
Bảng sau liệt kê các lớp in. Sử dụng chúng để chuyển đổi nội dung cho bản in.
| Các lớp học | In |
|---|---|
| .visible-print | Có Hiển thị |
| .hides-print | Chỉ hiển thị đối với trình duyệt không in. |
Thí dụ
Ví dụ sau minh họa việc sử dụng các lớp trợ giúp được liệt kê ở trên. Thay đổi kích thước trình duyệt của bạn hoặc tải ví dụ trên các thiết bị khác nhau để kiểm tra các lớp tiện ích đáp ứng.
<div class = "container" style = "padding: 40px;">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-xs">Extra small</span>
<span class = "visible-xs">✔ Visible on x-small</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-sm">Small</span>
<span class = "visible-sm">✔ Visible on small</span>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-md">Medium</span>
<span class = "visible-md">✔ Visible on medium</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-lg">Large</span>
<span class = "visible-lg">✔ Visible on large</span>
</div>
</div>
</div>Checkmarks cho biết rằng phần tử hiển thị trong khung nhìn hiện tại của bạn.
Chương này sẽ thảo luận về Glyphicons, cách sử dụng và một số ví dụ. Bootstrap gói 200 glyph ở định dạng phông chữ. Bây giờ chúng ta hãy hiểu Glyphicons là gì.
Glyphicons là gì?
Glyphicons là phông chữ biểu tượng mà bạn có thể sử dụng trong các dự án web của mình. Glyphicons Halflings không miễn phí và yêu cầu cấp phép, tuy nhiên tác giả của chúng đã cung cấp chúng cho các dự án Bootstrap miễn phí.
"Chúng tôi đề nghị, như một lời cảm ơn, chúng tôi yêu cầu bạn bao gồm một liên kết tùy chọn quay lại GLYPHICONS bất cứ khi nào thực tế". - Tài liệu Bootstrap
Tìm Glyphicons ở đâu?
Bây giờ chúng ta đã tải xuống phiên bản Bootstrap 3.x và hiểu cấu trúc thư mục của nó từ chương Thiết lập môi trường , các glyphicons có thể được tìm thấy trong thư mục phông chữ . Điều này chứa các tệp sau:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Các quy tắc CSS được liên kết có trong các tệp bootstrap.css và bootstrap-min.css trong thư mục css của thư mục dist . Bạn có thể xem các glyphicon có sẵn tại liên kết GLYPHICONS này .
Sử dụng
Để sử dụng các biểu tượng, chỉ cần sử dụng đoạn mã sau ở bất kỳ vị trí nào trong mã của bạn. Để một khoảng trống giữa biểu tượng và văn bản để có phần đệm thích hợp.
<span class = "glyphicon glyphicon-search"></span>Ví dụ sau đây chứng minh điều này -
<p>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type = "button" class = "btn btn-default btn-lg">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type ="button" class = "btn btn-default btn-xs">
<span class = "glyphicon glyphicon-user"></span>
User
</button>Chương này sẽ giới thiệu về các menu thả xuống của Bootstrap. Menu thả xuống là menu ngữ cảnh, có thể chuyển đổi để hiển thị các liên kết ở định dạng danh sách. Điều này có thể được thực hiện tương tác với plugin JavaScript thả xuống .
Để sử dụng menu thả xuống, chỉ cần bọc menu thả xuống trong lớp .dropdownVí dụ sau minh họa một menu thả xuống cơ bản:
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Tùy chọn
Căn chỉnh
Căn chỉnh menu thả xuống sang phải bằng cách thêm lớp .pull-right đến .dropdown-menu. Ví dụ sau đây chứng minh điều này -
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Tiêu đề
Bạn có thể thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào bằng cách sử dụng lớp dropdown-header. Ví dụ sau đây chứng minh điều này -
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>Các nhóm nút cho phép nhiều nút được xếp chồng lên nhau trên một dòng. Điều này rất hữu ích khi bạn muốn đặt các mục như nút căn chỉnh với nhau. Bạn có thể thêm hành vi kiểu hộp kiểm và radio JavaScript tùy chọn bằng Plugin nút Bootstrap .
Bảng sau đây tóm tắt các lớp quan trọng mà Bootstrap cung cấp để sử dụng các nhóm nút:
| Lớp học | Sự miêu tả | Mẫu mã |
|---|---|---|
| .btn-group | Lớp này được sử dụng cho một nhóm nút cơ bản. Bọc một loạt các nút với lớp.btn trong .btn-group. | |
| .btn-thanh công cụ | Điều này giúp kết hợp các bộ <div class = "btn-group"> thành một <div class = "btn-toolbar"> cho các thành phần phức tạp hơn. | |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | Các lớp này có thể được áp dụng cho nhóm nút thay vì thay đổi kích thước từng nút. | |
| .btn-group-vertical | Lớp này làm cho một tập hợp các nút xuất hiện được xếp chồng lên nhau theo chiều dọc chứ không phải theo chiều ngang. | |
Nhóm nút cơ bản
Ví dụ sau minh họa việc sử dụng lớp .btn-group đã thảo luận trong bảng trên -
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>Thanh công cụ Nút
Ví dụ sau minh họa việc sử dụng lớp .btn-toolbar đã thảo luận trong bảng trên -
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
</div>Kích thước nút
Ví dụ sau minh họa việc sử dụng lớp .btn-group-* đã thảo luận trong bảng trên -
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>Làm tổ
Bạn có thể lồng các nhóm nút trong một nhóm nút khác, tức là đặt một .btn-group trong cái khác .btn-group . Điều này được thực hiện khi bạn muốn các menu thả xuống trộn lẫn với một loạt các nút.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>Nhóm mông dọc
Ví dụ sau minh họa việc sử dụng lớp .btn-group-vertical đã thảo luận trong bảng trên -
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>Chương này sẽ thảo luận về cách thêm trình đơn thả xuống vào các nút bằng cách sử dụng các lớp Bootstrap. Để thêm trình đơn thả xuống vào một nút, chỉ cần bọc nút và trình đơn thả xuống trong.btn-group. Bạn cũng có thể sử dụng <span class = "caret"> </span> để hoạt động như một chỉ báo rằng nút là một trình đơn thả xuống.
Ví dụ sau minh họa một nút đơn thả xuống cơ bản:
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Trình đơn thả xuống Nút tách
Trình đơn thả xuống của nút tách sử dụng cùng một kiểu chung như nút thả xuống nhưng thêm một hành động chính cùng với trình đơn thả xuống. Các nút tách có tác vụ chính ở bên trái và nút chuyển đổi ở bên phải hiển thị menu thả xuống.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Default</button>
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Kích thước thả xuống của nút
Bạn có thể sử dụng trình đơn thả xuống với bất kỳ kích thước nút nào - .btn-large, .btn-sm, hoặc là .btn-xs.
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
Success
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>Biến thể Dropup
Menu cũng có thể được xây dựng để thả lên chứ không phải xuống. Để đạt được điều này, chỉ cần thêm.dropup cho cha mẹ .btn-group thùng đựng hàng.
<div class = "row" style = "margin-left:50px; margin-top:200px">
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
</div>Chương này giải thích về một tính năng nữa mà Bootstrap hỗ trợ, Nhóm đầu vào. Nhóm đầu vào là các Điều khiển biểu mẫu mở rộng . Sử dụng các nhóm đầu vào, bạn có thể dễ dàng thêm trước và nối văn bản hoặc các nút vào các đầu vào dựa trên văn bản.
Bằng cách thêm nội dung được thêm vào và nối thêm vào trường đầu vào, bạn có thể thêm các phần tử phổ biến vào đầu vào của người dùng. Ví dụ: bạn có thể thêm biểu tượng đô la, @ cho tên người dùng Twitter hoặc bất kỳ thứ gì khác có thể phổ biến cho giao diện ứng dụng của bạn.
Để thêm trước hoặc nối các phần tử vào .form-control-
Gói nó trong một <div> với lớp .input-group
Bước tiếp theo, trong cùng <div> đó, hãy đặt nội dung bổ sung của bạn bên trong <span> với lớp .input-group-addon.
Bây giờ, hãy đặt <span> này trước hoặc sau phần tử <input>.
Để tương thích với nhiều trình duyệt, hãy tránh sử dụng các phần tử <select> ở đây vì chúng không thể được tạo kiểu hoàn chỉnh trong trình duyệt WebKit. Cũng không áp dụng các lớp nhóm đầu vào trực tiếp để tạo thành nhóm. Nhóm đầu vào là một thành phần biệt lập.
Nhóm đầu vào cơ bản
Ví dụ sau minh họa nhóm đầu vào cơ bản:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>Nhập kích thước nhóm
Bạn có thể thay đổi kích thước của các nhóm đầu vào, bằng cách thêm các lớp định cỡ biểu mẫu tương đối như .input-group-lg, input-group-sm, input-group-xs đến .input-groupchinh no. Nội dung bên trong sẽ tự động thay đổi kích thước.
Các ví dụ sau đây chứng minh điều này -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>Hộp kiểm và Trình bổ sung Radio
Bạn có thể đăng ký trước hoặc nối thêm các nút radio và hộp kiểm thay vì văn bản như được minh họa trong ví dụ sau:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Nút bổ trợ
Bạn thậm chí có thể chắp thêm hoặc nối thêm các nút trong các nhóm đầu vào. Thay vì.input-group-addon lớp học, bạn sẽ cần sử dụng lớp học .input-group-btnđể quấn các nút. Điều này là bắt buộc do không thể ghi đè các kiểu trình duyệt mặc định. Các ví dụ sau đây chứng minh điều này -
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Các nút có thả xuống
Việc thêm các nút với menu thả xuống trong các nhóm đầu vào có thể được thực hiện bằng cách chỉ cần gói nút và menu thả xuống trong một .input-group-btn lớp như được minh họa trong ví dụ sau:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Các nút được phân đoạn
Để phân đoạn menu thả xuống của nút trong các nhóm đầu vào, hãy sử dụng cùng một kiểu chung như nút thả xuống, nhưng thêm một hành động chính cùng với menu thả xuống như có thể thấy trong ví dụ sau:
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu cho các phần tử điều hướng. Tất cả chúng đều có chung lớp đánh dấu và lớp cơ sở,.nav. Bootstrap cũng cung cấp một lớp trợ giúp, để chia sẻ đánh dấu và trạng thái. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.
Điều hướng dạng bảng hoặc Tab
Để tạo menu điều hướng theo tab -
Bắt đầu với một danh sách không có thứ tự cơ bản với lớp cơ sở là .nav
Thêm lớp học .nav-tabs.
Ví dụ sau đây chứng minh điều này -
<p>Tabs Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Điều hướng thuốc
Thuốc cơ bản
Để biến các tab thành viên thuốc, hãy làm theo các bước tương tự như trên, sử dụng lớp .nav-pills thay vì .nav-tabs.
Ví dụ sau đây chứng minh điều này -
<p>Pills Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Thuốc dọc
Bạn có thể xếp các viên thuốc theo chiều dọc bằng cách sử dụng lớp .nav-stacked cùng với các lớp - .nav, .nav-pills.
Ví dụ sau đây chứng minh điều này -
<p>Vertical Pills Example</p>
<ul class = "nav nav-pills nav-stacked">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Điều hướng hợp lý
Bạn có thể tạo các tab hoặc viên thuốc có chiều rộng bằng nhau như tab gốc của chúng ở màn hình rộng hơn 768px bằng cách sử dụng class .nav-justified cùng với .nav, .nav-tabs hoặc là .nav, .nav-pillstương ứng. Trên màn hình nhỏ hơn, các liên kết điều hướng được xếp chồng lên nhau.
Ví dụ sau đây chứng minh điều này -
<p>Justified Nav Elements Example</p>
<ul class = "nav nav-pills nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<br>
<ul class = "nav nav-tabs nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Liên kết bị vô hiệu hóa
Đối với mỗi .nav các lớp học, nếu bạn thêm .disabled lớp, nó sẽ tạo ra một liên kết màu xám cũng vô hiệu hóa :hover trạng thái như trong ví dụ sau:
<p>Disabled Link Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Lớp này sẽ chỉ thay đổi giao diện của <a> chứ không phải chức năng của nó. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết tại đây.
Trình đơn thả xuống
Menu điều hướng chia sẻ cú pháp tương tự với menu thả xuống. Theo mặc định, bạn có một mục danh sách có một liên kết hoạt động kết hợp với một số thuộc tính dữ liệu để kích hoạt một danh sách không có thứ tự với.dropdown-menu lớp học.
Tab có menu thả xuống
Để thêm danh sách thả xuống vào tab -
Bắt đầu với một danh sách không có thứ tự cơ bản với lớp cơ sở là .nav
Thêm lớp học .nav-tabs.
Bây giờ, hãy thêm một danh sách không có thứ tự với .dropdown-menu lớp học.
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>Thuốc có thả xuống
Để làm điều tương tự với thuốc, chỉ cần hoán đổi .nav-tabs lớp học với .nav-pills như thể hiện trong ví dụ sau.
<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java <span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>Thanh điều hướng là một trong những tính năng nổi bật của các trang Bootstrap. Thanh điều hướng là các thành phần 'meta' đáp ứng đóng vai trò là tiêu đề điều hướng cho ứng dụng hoặc trang web của bạn. Các thanh điều hướng thu gọn trong các chế độ xem trên thiết bị di động và nằm ngang khi chiều rộng của chế độ xem khả dụng tăng lên. Về cốt lõi, thanh điều hướng bao gồm việc tạo kiểu cho tên trang web và điều hướng cơ bản.
Thanh điều hướng mặc định
Để tạo một thanh điều hướng mặc định -
Thêm các lớp học .navbar, .navbar-default vào thẻ <nav>.
Thêm vào role = "navigation" vào phần tử trên, để trợ giúp khả năng tiếp cận.
Thêm một lớp tiêu đề .navbar-headervào phần tử <div>. Bao gồm một phần tử <a> với lớpnavbar-brand. Điều này sẽ làm cho văn bản có kích thước lớn hơn một chút.
Để thêm liên kết vào thanh điều hướng, chỉ cần thêm một danh sách không có thứ tự với các lớp của .nav, .navbar-nav.
Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Thanh điều hướng đáp ứng
Để thêm các tính năng đáp ứng vào thanh điều hướng, nội dung bạn muốn thu gọn cần được bao bọc trong <div> với các lớp .collapse, .navbar-collapse. Bản chất thu gọn được vấp bởi một nút có lớp.navbar-togglevà sau đó có hai phần tử dữ liệu. Đầu tiên,data-toggle, được sử dụng để cho JavaScript biết phải làm gì với nút và thứ hai, data-target, cho biết phần tử nào cần chuyển đổi. Sau đó
Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Biểu mẫu trong Navbar
Thay vì sử dụng các biểu mẫu dựa trên lớp mặc định từ Biểu mẫu Bootstrap Chương , biểu mẫu nằm trong thanh điều hướng, hãy sử dụng.navbar-formlớp học. Điều này đảm bảo rằng căn chỉnh theo chiều dọc thích hợp của biểu mẫu và hành vi thu gọn trong các cửa sổ xem hẹp. Sử dụng các tùy chọn căn chỉnh (được giải thích trong phần Căn chỉnh thành phần) để quyết định vị trí của nó trong nội dung thanh điều hướng.
Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>Các nút trong Navbar
Bạn có thể thêm các nút bằng cách sử dụng lớp .navbar-btn đến các phần tử <button> không nằm trong một <form> để căn giữa chúng theo chiều dọc trong thanh điều hướng. .navbar-btn có thể được sử dụng trên các phần tử <a> và <input>.
Không được dùng .navbar-btncũng không phải các lớp nút tiêu chuẩn trên <a> các phần tử bên trong .navbar-nav.
Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Văn bản trong Navbar
Để bọc các chuỗi văn bản trong một phần tử, hãy sử dụng lớp .navbar-text. Điều này thường được sử dụng với thẻ <p> để dẫn đầu và màu sắc phù hợp. Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>Liên kết không điều hướng
Nếu bạn muốn sử dụng các liên kết chuẩn không nằm trong thành phần điều hướng thanh điều hướng thông thường, thì hãy sử dụng lớp navbar-link để thêm màu thích hợp cho các tùy chọn thanh điều hướng mặc định và nghịch đảo như được hiển thị trong ví dụ sau:
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>Căn chỉnh thành phần
Bạn có thể căn chỉnh các thành phần như liên kết điều hướng, biểu mẫu, nút hoặc văn bản sang trái hoặc phải trong thanh điều hướng bằng cách sử dụng các lớp tiện ích.navbar-left hoặc là .navbar-right. Cả hai lớp sẽ thêm một CSS float theo hướng được chỉ định. Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>Cố định lên hàng đầu
Thanh điều hướng Bootstrap có thể linh hoạt trong vị trí của nó. Theo mặc định, nó là một phần tử cấp khối có vị trí dựa trên vị trí của nó trong HTML. Với một vài lớp trợ giúp, bạn có thể đặt nó ở đầu hoặc cuối trang, hoặc bạn có thể làm cho nó cuộn tĩnh theo trang.
Nếu bạn muốn thanh điều hướng được cố định ở trên cùng, hãy thêm lớp .navbar-fixed-top đến .navbar class. Ví dụ sau đây chứng minh điều này -
Để ngăn thanh điều hướng nằm trên nội dung khác trong nội dung trang, hãy thêm ít nhất 50 pixel đệm vào thẻ <body> hoặc thử các giá trị của riêng bạn.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Đã sửa thành Bottom
Nếu bạn muốn thanh điều hướng được cố định ở cuối trang, hãy thêm lớp .navbar-fixed-bottom đến .navbar class. Ví dụ sau đây chứng minh điều này -
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Tĩnh trên cùng
Để tạo thanh điều hướng cuộn với trang, hãy thêm .navbar-static-toplớp học. Lớp này không yêu cầu thêm phần đệm vào <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Thanh điều hướng đảo ngược
Để tạo thanh điều hướng ngược với nền đen và văn bản màu trắng, chỉ cần thêm .navbar-inverse lớp học .navbar lớp như được minh họa trong ví dụ sau:
Để ngăn thanh điều hướng nằm trên nội dung khác trong nội dung trang, hãy thêm ít nhất 50 pixel đệm vào thẻ <body> hoặc thử các giá trị của riêng bạn.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Breadcrumbs là một cách tuyệt vời để hiển thị thông tin dựa trên thứ bậc cho một trang web. Trong trường hợp blog, breadcrumbs có thể hiển thị ngày xuất bản, danh mục hoặc thẻ. Chúng chỉ ra vị trí của trang hiện tại trong một hệ thống phân cấp điều hướng.
Một breadcrumb trong Bootstrap chỉ đơn giản là một danh sách không có thứ tự với một lớp .breadcrumb. Dấu phân tách được CSS (bootstrap.min.css) thêm tự động thông qua lớp sau:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}Ví dụ sau minh họa breadcrumbs -
<ol class = "breadcrumb">
<li><a href = "#">Home</a></li>
<li><a href = "#">2013</a></li>
<li class = "active">November</li>
</ol>Chương này thảo luận về tính năng phân trang mà Bootstrap hỗ trợ. Việc phân trang, một danh sách không có thứ tự được Bootstrap xử lý giống như nhiều phần tử giao diện khác.
Phân trang
Bảng sau liệt kê các lớp mà Bootstrap cung cấp để xử lý phân trang.
| Lớp học | Sự miêu tả | Mã mẫu |
|---|---|---|
| .pagination | Thêm lớp này để phân trang trên trang của bạn. | |
| .disabled, .active | Bạn có thể tùy chỉnh các liên kết bằng cách sử dụng .disabled cho các liên kết không thể nhấp vào và .active để chỉ ra trang hiện tại. | |
| .pagination-lg, .pagination-sm | Sử dụng các lớp này để nhận các vật phẩm có kích thước khác nhau. | |
Phân trang mặc định
Ví dụ sau minh họa việc sử dụng lớp .pagination đã thảo luận trong bảng trên -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Những trạng thái
Ví dụ sau minh họa việc sử dụng lớp .disabled, .active đã thảo luận trong bảng trên -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Định cỡ
Ví dụ sau minh họa việc sử dụng các lớp để định cỡ, .pagination-* đã thảo luận trong bảng trên -
<ul class = "pagination pagination-lg">
<li><a href = "#">«</a></li>
<li><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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
<li><a href = "#">«</a></li>
<li><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 = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>Máy nhắn tin
Nếu bạn cần tạo các liên kết phân trang đơn giản vượt ra ngoài văn bản, máy nhắn tin có thể hoạt động khá tốt. Giống như các liên kết phân trang, máy nhắn tin là một danh sách không có thứ tự. Theo mặc định, các liên kết được căn giữa. Bảng sau liệt kê các lớp mà Bootstrap cung cấp cho máy nhắn tin.
| Lớp học | Sự miêu tả | Mã mẫu |
|---|---|---|
| .pager | Thêm lớp này để nhận các liên kết máy nhắn tin. | |
| .Trước Sau | Sử dụng lớp học .previous căn trái và .next để căn chỉnh các liên kết. | |
| .tàn tật | Thêm lớp này để có được cái nhìn bị tắt tiếng. | |
Máy nhắn tin mặc định
Ví dụ sau minh họa việc sử dụng lớp .pager đã thảo luận trong bảng trên -
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>Các liên kết được căn chỉnh
Ví dụ sau minh họa việc sử dụng các lớp để căn chỉnh, .previous, .next đã thảo luận trong bảng trên -
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>Những trạng thái
Ví dụ sau minh họa việc sử dụng lớp .disabled đã thảo luận trong bảng trên -
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>Chương này bao gồm các nhãn Bootstrap. Nhãn rất phù hợp để cung cấp số lượng, mẹo hoặc đánh dấu khác cho các trang. Sử dụng lớp học.label để hiển thị các nhãn như trong ví dụ sau:
<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>Bạn có thể sửa đổi giao diện của các nhãn bằng cách sử dụng các lớp bổ trợ, chẳng hạn như, label-default, label-primary, label-success, label-info, label-warning, label-danger như thể hiện trong ví dụ sau:
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>Chương này sẽ thảo luận về huy hiệu Bootstrap. Phù hiệu tương tự như nhãn; sự khác biệt chính là các góc được làm tròn hơn.
Huy hiệu chủ yếu được sử dụng để đánh dấu các mục mới hoặc chưa đọc. Để sử dụng huy hiệu chỉ cần thêm<span class = "badge"> đến liên kết, nav Bootstrap, v.v.
Ví dụ sau đây chứng minh điều này -
<a href = "#">Mailbox <span class = "badge">50</span></a>Khi không có mục mới hoặc chưa đọc, huy hiệu sẽ đơn giản thu gọn thông qua CSS :empty bộ chọn, miễn là không có nội dung nào tồn tại bên trong.
Hải quân đang hoạt động
Bạn có thể đặt huy hiệu ở trạng thái hoạt động của máy tính bảng và điều hướng danh sách. Bạn có thể đạt được điều này bằng cách đặt<span class = "badge"> đến các liên kết đang hoạt động, như được minh họa trong ví dụ sau:
<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
<li class = "active">
<a href = "#">
<span class = "badge pull-right">42</span>
Home
</a>
</li>
<li><a href = "#">Profile</a></li>
<li>
<a href = "#">
<span class = "badge pull-right">3</span>
Messages
</a>
</li>
</ul>Chương này sẽ thảo luận về một tính năng nữa mà Bootstrap hỗ trợ, Jumbotron. Như tên gợi ý, thành phần này có thể tùy chọn tăng kích thước của tiêu đề và thêm nhiều lề cho nội dung trang đích. Để sử dụng Jumbotron -
Tạo một vùng chứa <div> với lớp .jumbotron.
Ngoài <h1> lớn hơn, font-weight được giảm xuống 200px.
Ví dụ sau đây chứng minh điều này -
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>Để có được một jumbotron có chiều rộng đầy đủ và không có góc tròn, hãy sử dụng .jumbotron lớp học bên ngoài tất cả .container các lớp học và thay vào đó thêm một .container bên trong, như được hiển thị trong ví dụ sau:
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>Tiêu đề trang là một tính năng nhỏ hay để thêm khoảng cách thích hợp xung quanh các tiêu đề trên một trang. Điều này đặc biệt hữu ích trên một trang web mà bạn có thể có một số tiêu đề bài đăng và cần một cách để tạo sự khác biệt cho từng tiêu đề đó. Để sử dụng tiêu đề trang, hãy bọc tiêu đề của bạn trong <div> với một lớp.page-header -
<div class = "page-header">
<h1>
Example page header
<small>Subtext for header</small>
</h1>
</div>
<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>Chương này thảo luận về hình thu nhỏ Bootstrap. Rất nhiều trang web cần một cách để bố trí hình ảnh, video, văn bản, v.v., trong một lưới và Bootstrap có một cách dễ dàng để làm điều này với hình thu nhỏ. Để tạo hình thu nhỏ bằng Bootstrap -
Thêm thẻ <a> với lớp .thumbnail xung quanh một hình ảnh.
Điều này thêm bốn pixel đệm và một đường viền màu xám.
Khi di chuột, một ánh sáng động sẽ phác thảo hình ảnh.
Ví dụ sau minh họa một hình thu nhỏ mặc định:
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>Thêm nội dung tùy chỉnh
Bây giờ chúng ta đã có một hình thu nhỏ cơ bản, 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ỏ. Làm theo các bước bên dưới -
Thay đổi thẻ <a> có loại .thumbnail thành một <div>.
Bên trong <div> đó, bạn có thể thêm bất cứ thứ gì bạn cần. Vì đây là <div>, chúng ta có thể sử dụng quy ước đặt tên dựa trên nhịp mặc định để định kích thước.
Nếu bạn muốn nhóm nhiều hình ảnh, hãy đặt chúng vào một danh sách không có thứ tự và mỗi mục danh sách sẽ được chuyển sang bên trái.
Ví dụ sau đây chứng minh điều này -
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role =" button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>Chương này sẽ thảo luận về các cảnh báo và các lớp mà Bootstrap cung cấp cho các cảnh báo. Cảnh báo cung cấp một cách để tạo kiểu thông báo cho người dùng. Chúng cung cấp các thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng.
Bạn có thể thêm một biểu tượng đóng tùy chọn để cảnh báo. Để loại bỏ nội tuyến, hãy sử dụng plugin Alerts jQuery .
Bạn có thể thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger). Ví dụ sau đây chứng minh điều này -
<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>Cảnh báo loại bỏ
Để tạo cảnh báo sa thải -
Thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger)
Cũng thêm tùy chọn .alert-dismissable vào lớp <div> ở trên.
Thêm một nút đóng.
Ví dụ sau đây chứng minh điều này -
<div class = "alert alert-success alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Error ! Change few things.
</div>Đảm bảo sử dụng phần tử <button> với thuộc tính dữ liệu data -miss = "alert" .
Liên kết trong cảnh báo
Để nhận liên kết trong cảnh báo -
Thêm một cảnh báo cơ bản bằng cách tạo một trình bao bọc <div> và thêm một lớp .alert và một trong bốn lớp ngữ cảnh (ví dụ: .alert-success, .alert-info, .alert-warning, .alert-danger)
Sử dụng .alert-link lớp tiện ích để nhanh chóng cung cấp các liên kết màu phù hợp trong bất kỳ cảnh báo nào.
<div class = "alert alert-success">
<a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
<a href = "#" class = "alert-link">Info! take this info.</a>
</div>
<div class = "alert alert-warning">
<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
<a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>Chương này thảo luận về các thanh tiến trình Bootstrap. Mục đích của thanh tiến trình là để hiển thị rằng nội dung đang tải, đang được xử lý hoặc có hành động đang diễn ra liên quan đến các phần tử trên trang.
Thanh tiến trình sử dụng chuyển tiếp CSS3 và hoạt ảnh để đạt được một số hiệu ứng của chúng. Các tính năng này không được hỗ trợ trong Internet Explorer 9 trở xuống hoặc các phiên bản Firefox cũ hơn. Opera 12 không hỗ trợ hoạt ảnh.
Thanh tiến trình mặc định
Để tạo một thanh tiến trình cơ bản -
Thêm một <div> với một lớp .progress.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.
Hãy cho chúng tôi xem một ví dụ bên dưới -
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Thanh tiến trình thay thế
Để tạo thanh tiến trình với các kiểu khác nhau -
Thêm một <div> với một lớp .progress.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar và lớp học progress-bar-* * có thể ở đâu success, info, warning, danger.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.
Hãy cho chúng tôi xem một ví dụ bên dưới -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Thanh tiến trình có sọc
Để tạo thanh tiến trình sọc -
Thêm một <div> với một lớp .progress và .progress-striped.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar và lớp học progress-bar-* * có thể ở đâu success, info, warning, danger.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.
Hãy cho chúng tôi xem một ví dụ bên dưới -
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Thanh tiến trình hoạt ảnh
Để tạo một thanh tiến trình động -
Thêm một <div> với một lớp .progress và .progress-striped. Cũng thêm lớp.active đến .progress-striped.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với một lớp .progress-bar.
Thêm thuộc tính kiểu với chiều rộng được biểu thị dưới dạng phần trăm. Ví dụ: style = "60%"; cho biết rằng thanh tiến trình ở mức 60%.
Thao tác này sẽ làm sinh động các sọc từ phải sang trái.
Hãy cho chúng tôi xem một ví dụ bên dưới -
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Thanh tiến trình xếp chồng
Bạn thậm chí có thể xếp chồng nhiều thanh tiến trình. Đặt nhiều thanh tiến trình vào cùng một.progress để xếp chúng như được thấy trong ví dụ sau:
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>Chương này thảo luận về đối tượng Media. Đây là 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ư nhận xét blog, Tweet, v.v.) có hình ảnh căn trái hoặc căn phải cùng với nội dung văn bản. Mục tiêu của đối tượng media là làm cho mã phát triển các khối thông tin này ngắn hơn đáng kể.
Mục tiêu của các đối tượng phương tiện (đánh dấu nhẹ, khả năng mở rộng dễ dàng) đạt được bằng cách áp dụng các lớp cho một số đánh dấu đơn giản. Đối tượng media có hai dạng:
.media - Lớp này cho phép thả nổi một đối tượng media (hình ảnh, video và âm thanh) sang trái hoặc phải của một khối nội dung.
.media-list- Nếu bạn đang chuẩn bị một danh sách trong đó các mục sẽ là một phần của danh sách không có thứ tự, hãy sử dụng một lớp. hữu ích cho các chủ đề bình luận hoặc danh sách bài viết.
Hãy để chúng tôi xem một ví dụ bên dưới về đối tượng phương tiện mặc định -
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>Hãy để chúng tôi xem một ví dụ về danh sách phương tiện -
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>Mục đích của thành phần nhóm danh sách là hiển thị nội dung phức tạp và tùy chỉnh trong danh sách. Để có một nhóm danh sách cơ bản -
Thêm lớp học .list-group thành phần tử <ul>.
Thêm lớp học .list-group-item đến <li>.
Ví dụ sau đây chứng minh điều này -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>Thêm huy hiệu vào nhóm danh sách
Chúng tôi có thể thêm thành phần huy hiệu vào bất kỳ mục nhóm danh sách nào và nó sẽ tự động được định vị ở bên phải. Chỉ cần thêm<span class = "badge">trong phần tử <li>. Ví dụ sau đây chứng minh điều này -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>Liên kết các mục trong nhóm danh sách
Bằng cách sử dụng các thẻ liên kết thay vì các mục danh sách, chúng ta có thể liên kết các nhóm danh sách. Chúng ta cần sử dụng <div> thay cho phần tử <ul>. Ví dụ sau đây chứng minh điều này -
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>Thêm nội dung tùy chỉnh vào nhóm danh sách
Chúng tôi có thể thêm bất kỳ nội dung HTML nào vào các nhóm danh sách liên kết ở trên. Ví dụ sau đây chứng minh điều này -
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>Chương này sẽ thảo luận về bảng Bootstrap. Thành phần bảng điều khiển được sử dụng khi bạn muốn đặt thành phần DOM của mình vào một hộp. Để có bảng điều khiển cơ bản, chỉ cần thêm lớp.panelvào phần tử <div>. Cũng thêm lớp.panel-default cho phần tử này như được hiển thị trong ví dụ sau:
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>Bảng điều khiển có tiêu đề
Có hai cách để thêm tiêu đề bảng điều khiển -
Sử dụng .panel-heading để dễ dàng thêm một vùng chứa tiêu đề vào bảng điều khiển của bạn.
Sử dụng bất kỳ <h1> - <h6> nào với .panel-title lớp để thêm một tiêu đề được tạo kiểu trước.
Ví dụ sau minh họa cả hai cách:
<div class = "panel panel-default">
<div class = "panel-heading">
Panel heading without title
</div>
<div class = "panel-body">
Panel content
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>Bảng điều khiển có chân trang
Bạn có thể thêm chân trang vào bảng điều khiển, bằng cách gói các nút hoặc văn bản phụ trong một lớp chứa <div> .panel-footer. Ví dụ sau đây chứng minh điều này.
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">Panel footer</div>
</div>Chân trang bảng điều khiển không kế thừa màu sắc và đường viền khi sử dụng các biến thể theo ngữ cảnh vì chúng không có nghĩa là ở nền trước.
Bảng điều khiển thay thế theo ngữ cảnh
Sử dụng các lớp trạng thái theo ngữ cảnh như, panel-primary, panel-success, panel-info, panel-warning, panel-danger, để làm cho một bảng có ý nghĩa hơn đối với một ngữ cảnh cụ thể.
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>Bảng điều khiển có bảng
Để có một bảng không có đường viền trong một bảng điều khiển, hãy sử dụng lớp .tabletrong bảng điều khiển. Giả sử có một <div> chứa.panel-body, chúng tôi thêm một đường viền phụ vào đầu bảng để phân tách. Nếu không có <div> chứa.panel-body, sau đó thành phần di chuyển từ tiêu đề bảng sang bảng mà không bị gián đoạn.
Ví dụ sau đây chứng minh điều này -
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>Bảng điều khiển có nhóm Danh sách
Bạn có thể bao gồm các nhóm danh sách trong bất kỳ bảng nào. Tạo bảng điều khiển bằng cách thêm lớp.panelvào phần tử <div>. Cũng thêm lớp.panel-defaultcho phần tử này. Bây giờ trong bảng điều khiển này bao gồm các nhóm danh sách của bạn. Bạn có thể học cách tạo một nhóm danh sách từ chương Danh sách nhóm .
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>Giếng là một vùng chứa trong <div> làm cho nội dung có vẻ chìm hoặc hiệu ứng chèn trên trang. Để tạo giếng, chỉ cần bọc nội dung mà bạn muốn xuất hiện trong giếng bằng một <div> chứa lớp.well. Ví dụ sau đây cho thấy một giếng mặc định:
<div class = "well">Hi, am in well !!</div>Định cỡ
Bạn có thể thay đổi kích thước của giếng bằng cách sử dụng các lớp tùy chọn như, well-lg hoặc là well-lg. Các lớp này được sử dụng cùng với.welllớp học. Những điều này ảnh hưởng đến lớp đệm, làm cho giếng lớn hơn hoặc nhỏ hơn tùy thuộc vào lớp.
<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>Các thành phần được thảo luận trong các chương trước dưới Layout Componentschỉ là sự khởi đầu. Bootstrap đi kèm với 12 plugin jQuery giúp mở rộng các tính năng và có thể thêm nhiều tương tác hơn vào trang web của bạn. Để bắt đầu với các plugin JavaScript của Bootstrap, bạn không cần phải là một nhà phát triển JavaScript nâng cao. Bằng cách sử dụng Bootstrap Data API, hầu hết các plugin có thể được kích hoạt mà không cần viết một dòng mã nào.
Các plugin Bootstrap có thể được đưa vào trang web của bạn ở hai dạng:
Individually- Sử dụng các tệp * .js riêng lẻ của Bootstrap . Một số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu.
Hoặc là compiled (all at once)- Sử dụng bootstrap.js hoặc minified bootstrap.min.js . Đừng cố gắng bao gồm cả hai, vì cả bootstrap.js và bootstrap.min.js đều chứa tất cả các plugin trong một tệp duy nhất.
Tất cả các plugin phụ thuộc vào jQuery. Vì vậy, jQuery phải được bao gồm trước các tệp plugin. Kiểm tra bower.json để xem phiên bản jQuery nào được hỗ trợ.
Thuộc tính dữ liệu
Tất cả các plugin Bootstrap đều có thể truy cập được bằng API dữ liệu đi kèm. Do đó, bạn không cần phải bao gồm một dòng JavaScript để gọi bất kỳ tính năng plugin nào.
Trong một số trường hợp, bạn có thể muốn tắt chức năng này của API dữ liệu. Nếu bạn cần tắt API dữ liệu, bạn có thể hủy liên kết các thuộc tính bằng cách thêm dòng JavaScript sau:
$(document).off('.data-api')Để tắt một plugin cụ thể / đơn lẻ, chỉ cần bao gồm tên của plugin làm vùng tên cùng với vùng tên data-api như thế này -
$(document).off('.alert.data-api')API có lập trình
Các nhà phát triển của Bootstrap tin rằng bạn có thể sử dụng tất cả các plugin hoàn toàn thông qua API JavaScript. Tất cả các API công khai đều là các phương thức đơn lẻ, có thể điều khiển được và trả về bộ sưu tập được thực hiện theo ví dụ:
$(".btn.danger").button("toggle").addClass("fat")Tất cả các phương thức đều chấp nhận một đối tượng tùy chọn tùy chọn, một chuỗi nhắm mục tiêu đến một phương thức cụ thể hoặc không có gì (khởi tạo một plugin với hành vi mặc định) như được hiển thị bên dưới -
// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')Mỗi plugin cũng hiển thị hàm tạo thô của nó trên Constructorthuộc tính: $ .fn.popover.Constructor . Nếu bạn muốn nhận một phiên bản plugin cụ thể, hãy truy xuất nó trực tiếp từ một phần tử -
$('[rel = popover]').data('popover').No Conflict
Bootstrap plugins can sometimes be used with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. To overcome this call .noConflict on the plugin you wish to revert the value of.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButtonEvents
Bootstrap provides custom events for most plugin's unique actions. Generally, these events come in two forms −
Infinitive form − This is triggered at the start of an event. E.g. show. Infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})Past participle form − This is triggered on the completion of an action. E.g. shown.
The transition plugin provides a simple transition effects.
If you want to include this plugin functionality individually, then you will need transition.js once alongside the other JS files. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It is used by the other plugins to check for CSS transition support and to catch hanging transitions.
Use Cases
A few examples of the transition plugin are −
Sliding or fading in modals. You can find an example in the chapter Bootstrap Modal Plugin.
Fading out tabs. You can find an example in the chapter Bootstrap Tab Plugin.
Fading out alerts. You can find an example in the chapter Bootstrap Alerts.
Sliding carousel panes. You can find an example in the chapter Bootstrap Carousel Plugin.
A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.
If you want to include this plugin functionality individually, then you will need modal.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can toggle the modal plugin's hidden content −
Via data attributes − Set attribute data-toggle = "modal" on a controller element, like a button or link, along with a data-target = "#identifier" or href = "#identifier" to target a specific modal (with the id = "identifier") to toggle.
Via JavaScript − Using this technique you can call a modal with id = "identifier" with a single line of JavaScript −
$('#identifier').modal(options)Example
A static modal window example is shown in the following example −
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Add some text here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Details of the preceding code −
To invoke the modal window, you need to have some kind of a trigger. You can use a button or a link. Here we have used a button.
If you look in the code above, you will see that in the <button> tag, the data-target = "#myModal" is the target of the modal that you want to load on the page. This code allows you to create multiple modals on the page and then have different triggers for each of them. Now, to be clear, you don’t load multiple modals at the same time, but you can create many on the pages to be loaded at different times.
There are two classes to take note of in the modal −
The first is .modal, which is simply identifying the content of the <div> as a modal.
And second is the .fade class. When the modal is toggled, it will cause the content to fade in and out.
aria-labelledby = "myModalLabel", attribute reference the modal title.
The attribute aria-hidden = "true" is used to keep the Modal Window invisible till a trigger comes (like a click on the associated button).
<div class = "modal-header">, modal-header is the class to define style for the header of the modal window.
class = "close", is a CSS class close that sets style for the Close button of the modal window.
data-dismiss = "modal", is a custom HTML5 data attribute. Here it is used to close the modal window.
class = "modal-body", is a CSS class of Bootstrap CSS to set style for body of the modal window.
class = "modal-footer", is a CSS class of Bootstrap CSS to set style for footer of the modal window.
data-toggle = "modal", HTML5 custom data attribute data-toggle is used to open the modal window.
Options
There are certain options which can be passed via data attributes or JavaScript to customize the look and feel of the Modal Window. Following table lists the options −
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| backdrop | boolean or the string 'static' Default: true | data-backdrop | Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal. |
| keyboard | boolean Default: true | data-keyboard | Closes the modal when escape key is pressed; set to false to disable. |
| show | boolean Default: true | data-show | Shows the modal when initialized. |
| remote | path Default: false | data-remote | Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below − |
Methods
Here are some useful methods that can be used with modal().
| Method | Description | Example |
|---|---|---|
| Options − .modal(options) | Activates your content as a modal. Accepts an optional options object. | |
| Toggle − .modal('toggle') | Manually toggles a modal. | |
| Show − .modal('show') | Manually opens a modal. | |
| Hide − .modal('hide') | Manually hides a modal. | |
Example
The following example demonstrates the usage of methods −
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>Just click the Esc button and the modal window exits.
Events
Following table lists the events to work with modal. These events may be used to hook into the function.
| Event | Description | Example |
|---|---|---|
| show.bs.modal | Fired after the show method is called. | |
| shown.bs.modal | Fired when the modal has been made visible to the user (will wait for CSS transitions to complete). | |
| hide.bs.modal | Fired when the hide instance method has been called. | |
| hidden.bs.modal | Fired when the modal has finished being hidden from the user. | |
Example
The following example demonstrates the usage of events −
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Click on close button to check Event functionality.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
alert('Hey, I heard you like modals...');})
});
</script>As seen in the above screen, if you click on the Close button i.e hide event, an alert message is displayed.
Using Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills and buttons.
If you want to include this plugin functionality individually, then you will need dropdown.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can toggle the dropdown plugin's hidden content −
Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href = "#"−
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −
$('.dropdown-toggle').dropdown()Example
Within Navbar
The following example demonstrates the usage of dropdown menu within a navbar −
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Within Tabs
The following example demonstrates the usage of dropdown menu within tabs −
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>Options
There are no options.
Methods
The dropdown toggle has a simple method to show or hide the dropdown.
$().dropdown('toggle')Example
The following example demonstrates the usage of dropdown plugin method.
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div id = "myexample">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a id = "action-1" href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>The Scroll spy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.
If you want to include this plugin functionality individually, then you will need scrollspy.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can add scrollspy behavior to your topbar navigation −
Via data attributes − add data-spy = "scroll" to the element you want to spy on (typically the body). Then add attribute data-target with the ID or class of the parent element of any Bootstrap .nav component. For this to work, you must have elements in the body of the page that have matching IDs of the links that you are spying on.
<body data-spy = "scroll" data-target = ".navbar-example">
...
<div class = "navbar-example">
<ul class = "nav nav-tabs">
...
</ul>
</div>
...
</body>Via JavaScript − You can invoke the scrollspy with JavaScript instead of using the data attributes, by selecting the element to spy on, and then invoking the .scrollspy() function −
$('body').scrollspy({ target: '.navbar-example' })Example
The following example shows the use of scrollspy plugin via data attributes −
<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<h4 id = "ios">iOS</h4>
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
<h4 id = "svn">SVN</h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but now it
is developed as a project of the Apache Software Foundation, and as
such is part of a rich community of developers and users.</p>
<h4 id = "jmeter">jMeter</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for building
highly scalable and robust enterprise level applications to be deployed
on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>Options
Options can be passed via data attributes or JavaScript. Following table lists the options −
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| offset | number Default: 10 | data-offset | Pixels to offset from top when calculating position of scroll. |
Methods
.scrollspy('refresh') − When calling the scrollspy via the JavaScript method, you need to call the .refresh method to update the DOM. This is helpful if any elements of the DOM have changed i.e if you have added or removed some elements. Following would be the syntax to use this method.
$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})Example
The following example demonstrates the use of .scrollspy('refresh') method −
<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<div class = "section">
<h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "section">
<h4 id = "svn">SVN<small></small></h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but
now it is developed as a project of the Apache Software Foundation,
and as such is part of a rich community of developers and users.</p>
</div>
<div class = "section">
<h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "section">
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications
to be deployed on J2EE compliant Application Server such as
JBOSS, Web Logic etc.</p>
</div>
<div class = "section">
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>
</div>
<script type = "text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>Events
The following table lists the events to work with scrollspy. This event may be used to hook into the function.
| Event | Description | Example |
|---|---|---|
| activate.bs.scrollspy | This event fires whenever a new item becomes activated by the scrollspy. | |
Example
The following example demonstrates the use of activate.bs.scrollspy event −
<html>
<head>
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
<script src = "bootstrap/scripts/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
// The event is fired when an item gets actived with the scrollspy
$("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
$("#spyevent").html("Current Item being viewed >> " + currentSection);
})
});
</script>
<style>
.scroll-box {
height: 250px;
position: relative;
overflow: auto;
font-size:2em;
}
</style>
</head>
<body>
<div class = "container">
<nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
<!-- Nav Bar -->
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#navbarCollapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorials Point</a>
</div>
<!-- Links and Sublinks -->
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#subject-1">Subject 1</a></li>
<li><a href = "#subject-2">Subject 2</a></li>
<li class = "dropdown"><a href = "#" class = "dropdown-toggle"
data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#subject-3-1">Subject 3.1</a></li>
<li><a href = "#subject-3-2">Subject 3.2</a></li>
<li><a href = "#subject-3-3">Subject 3.3</a></li>
</ul>
</li>
<li><a href = "#subject-4">Subject 4</a></li>
</ul>
</div>
</nav>
<div class = "scroll-box" data-spy = "scroll" data-offset = "0">
<div class = "subject">
<h3 id = "subject-1">Subject 1
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-2">Subject 2
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-3">Subject 3
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
</div>
<hr>
<div class = "subject">
<h4 id = "subject-3-1">Subject 3.1
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-2">Subject 3.2
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-3">Subject 3.3
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-4">Subject 4
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<h4 id = "spyevent" class = "text-info"></h4>
</div>
</body>
</html>Các tab đã được giới thiệu trong chương Phần tử điều hướng Bootstrap . Bằng cách kết hợp một vài thuộc tính dữ liệu, bạn có thể dễ dàng tạo giao diện theo thẻ. Với plug-in này, bạn có thể chuyển đổi qua các ngăn nội dung cục bộ trong các tab hoặc viên thuốc, thậm chí thông qua menu thả xuống.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần tab.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .
Sử dụng
Bạn có thể bật tab theo hai cách sau:
Via data attributes - bạn cần thêm data-toggle = "tab" hoặc là data-toggle = "pill" đến các mỏ neo.
Thêm nav và nav-tabs các lớp vào tab ulsẽ áp dụng kiểu tab Bootstrap , trong khi thêmnav và nav-pillscác lớp sẽ áp dụng kiểu viên thuốc .
<ul class = "nav nav-tabs">
<li><a href = "#identifier" data-toggle = "tab">Home</a></li>
...
</ul>Via JavaScript - bạn có thể bật các tab bằng Javscript như bên dưới -
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})Dưới đây là một ví dụ về các cách khác nhau để kích hoạt các tab riêng lẻ -
// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show')
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')Hiệu ứng mờ dần
Để có hiệu ứng mờ dần cho các tab, hãy thêm .fade cho mỗi .tab-pane. Ngăn tab đầu tiên cũng phải có.in để làm mờ dần nội dung ban đầu -
<div class = "tab-content">
<div class = "tab-pane fade in active" id = "home">...</div>
<div class = "tab-pane fade" id = "svn">...</div>
<div class = "tab-pane fade" id = "ios">...</div>
<div class = "tab-pane fade" id = "java">...</div>
</div>Thí dụ
Ví dụ về plugin tab sử dụng thuộc tính dữ liệu và hiệu ứng mờ dần như được hiển thị trong ví dụ sau:
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed
by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
and Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the OS X
operating system used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>Phương pháp
.$().tab- Phương thức này kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có mộtdata-target hoặc một href nhắm mục tiêu một nút vùng chứa trong DOM.
<ul class = "nav nav-tabs" id = "myTab">
<li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
.....
</ul>
<div class = "tab-content">
<div class = "tab-pane active" id = "home">...</div>
.....
</div>
<script>
$(function () { $('#myTab a:last').tab('show')
})
</script>Thí dụ
Ví dụ sau cho thấy việc sử dụng phương pháp plugin tab .tab. Ở đây trong ví dụ, tab thứ hai iOS được kích hoạt -
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
jmeter
</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">
ejb
</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS,
Web Logic etc.</p>
</div>
</div>
<script>
$(function () { $('#myTab li:eq(1) a').tab('show');
});
</script>Sự kiện
Bảng sau liệt kê các sự kiện để làm việc với plugin tab. Sự kiện này có thể được sử dụng để nối vào hàm.
| Biến cố | Sự miêu tả | Thí dụ |
|---|---|---|
| show.bs.tab | Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụngevent.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. | |
| show.bs.tab | Sự kiện này kích hoạt trên hiển thị tab sau khi một tab được hiển thị. Sử dụngevent.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. | |
Thí dụ
Ví dụ sau cho thấy việc sử dụng các sự kiện plugin tab. Ở đây trong ví dụ, chúng tôi sẽ hiển thị các tab đã truy cập hiện tại và trước đó -
<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>
<script>
$(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
});
});
</script>Chú giải công cụ hữu ích khi bạn cần mô tả một liên kết. Plugin được lấy cảm hứng từ plugin jQuery.tipsy được viết bởi Jason Frame . Các chú giải công cụ kể từ đó đã được cập nhật để hoạt động mà không cần hình ảnh, tạo hoạt ảnh bằng hoạt ảnh CSS và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần tooltip.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .
Sử dụng
Plugin chú giải công cụ tạo nội dung và đánh dấu theo yêu cầu và theo mặc định đặt chú giải công cụ sau phần tử kích hoạt của chúng. Bạn có thể thêm chú giải công cụ theo hai cách sau:
Via data attributes - Để thêm chú giải công cụ, hãy thêm data-toggle = "tooltip"vào một thẻ liên kết. Tiêu đề của anchor sẽ là văn bản của chú giải công cụ. Theo mặc định, chú giải công cụ được plugin đặt ở trên cùng.
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>Via JavaScript - Kích hoạt chú giải công cụ qua JavaScript -
$('#identifier').tooltip(options)Plugin chú giải công cụ KHÔNG phải là plugin duy nhất của css như trình đơn thả xuống hoặc các plugin khác được thảo luận trong các chương trước. Để sử dụng plugin này, bạn PHẢI kích hoạt nó bằng jquery (đọc javascript). Để bật tất cả các chú giải công cụ trên trang của bạn, chỉ cần sử dụng tập lệnh này -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
Thí dụ
Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>Tùy chọn
Có một số tùy chọn có thể được thêm vào qua API dữ liệu Bootstrap hoặc được gọi qua JavaScript. Bảng sau liệt kê các tùy chọn -
| Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
|---|---|---|---|
| hoạt hình | boolean Mặc định: true | dữ liệu-hoạt ảnh | Áp dụng chuyển đổi mờ dần CSS cho chú giải công cụ. |
| html | boolean Mặc định: false | data-html | Chèn HTML vào chú giải công cụ. Nếu sai, phương thức văn bản của jQuery sẽ được sử dụng để chèn nội dung vào dom. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. |
| vị trí | string | function Mặc định: top | vị trí dữ liệu | Chỉ định cách định vị chú giải công cụ (tức là trên cùng | dưới cùng | trái | phải | tự động). Khi tự động được chỉ định, nó sẽ tự động định hướng lại chú giải công cụ. Ví dụ: nếu vị trí là "tự động bên trái", chú giải công cụ sẽ hiển thị bên trái khi có thể, nếu không, nó sẽ hiển thị bên phải. |
| bộ chọn | string Mặc định: false | bộ chọn dữ liệu | Nếu một bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu được chỉ định. |
| tiêu đề | chuỗi | chức năng Mặc định: " | data-title | Tùy chọn tiêu đề là giá trị tiêu đề mặc định nếu thuộc tính tiêu đề không có. |
| Kích hoạt | string Mặc định: 'di chuột tiêu điểm' | kích hoạt dữ liệu | Xác định cách chú giải công cụ được kích hoạt: click| hover | focus | manual. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng. |
| Nội dung | chuỗi | chức năng Mặc định: '' | dữ liệu-nội dung | Giá trị nội dung mặc định nếu thuộc tính data-content không có |
| sự chậm trễ | số | đối tượng Mặc định: 0 | dữ liệu chậm trễ | Độ trễ hiển thị và ẩn chú giải công cụ tính bằng mili giây - không áp dụng cho loại kích hoạt thủ công. Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện. Cấu trúc đối tượng là - |
| thùng đựng hàng | chuỗi | false Mặc định: false | vùng chứa dữ liệu | Thêm chú giải công cụ vào một phần tử cụ thể. Ví dụ: container: 'body' |
Phương pháp
Sau đây là một số phương pháp hữu ích cho chú giải công cụ -
| phương pháp | Sự miêu tả | Thí dụ |
|---|---|---|
Options - .tooltip (tùy chọn) |
Đính kèm trình xử lý chú giải công cụ vào tập hợp phần tử. | |
Toggle - .tooltip ('chuyển đổi') |
Chuyển đổi chú giải công cụ của phần tử. | |
Show - .tooltip ('hiển thị') |
Tiết lộ chú giải công cụ của phần tử. | |
Hide - .tooltip ('ẩn') |
Ẩn chú giải công cụ của phần tử. | |
Destroy - .tooltip ('tiêu diệt') |
Ẩn và hủy chú giải công cụ của phần tử. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>Sự kiện
Bảng sau liệt kê các sự kiện để làm việc với plugin chú giải công cụ. Sự kiện này có thể được sử dụng để nối vào hàm.
| Biến cố | Sự miêu tả | Thí dụ |
|---|---|---|
| show.bs.tooltip | Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. | |
| show.bs.tooltip | Sự kiện này được kích hoạt khi chú giải công cụ hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). | |
| hide.bs.tooltip | Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi. | |
| hidden.bs.tooltip | Sự kiện này được kích hoạt khi chú giải công cụ hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). | |
Thí dụ
Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>Cửa sổ bật lên tương tự như chú giải công cụ, cung cấp một chế độ xem mở rộng hoàn chỉnh với một tiêu đề. Để kích hoạt cửa sổ bật lên, người dùng chỉ cần di con trỏ qua phần tử. Nội dung của cửa sổ bật lên có thể được điền hoàn toàn bằng API dữ liệu Bootstrap. Phương pháp này yêu cầu một chú giải công cụ.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần popover.jsvà nó có sự phụ thuộc của plugin chú giải công cụ . Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .
Sử dụng
Plugin bật lên tạo ra nội dung và đánh dấu theo yêu cầu và theo mặc định đặt cửa sổ bật lên sau phần tử kích hoạt của chúng. Bạn có thể thêm cửa sổ bật lên theo hai cách sau:
Via data attributes - Để thêm cửa sổ bật lên, hãy thêm data-toggle = "popover"vào thẻ neo / nút. Tiêu đề của anchor sẽ là văn bản của popover. Theo mặc định, cửa sổ bật lên được plugin đặt ở trên cùng.
<a href = "#" data-toggle = "popover" title = "Example popover">
Hover over me
</a>Via JavaScript - Bật popover qua JavaScript bằng cú pháp sau:
$('#identifier').popover(options)Plugin bật lên KHÔNG phải là plugin duy nhất của css như trình đơn thả xuống hoặc các plugin khác đã được thảo luận trong các chương trước. Để sử dụng plugin này, bạn PHẢI kích hoạt nó bằng jquery (đọc javascript). Để bật tất cả các cửa sổ bật lên trên trang của bạn, chỉ cần sử dụng tập lệnh này -
$(function () { $("[data-toggle = 'popover']").popover(); });
Thí dụ
Ví dụ sau minh họa việc sử dụng plugin popover thông qua các thuộc tính dữ liệu.
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover on left">
Popover on left
</button>
<button type = "button" class = "btn btn-primary" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover on top">
Popover on top
</button>
<button type = "button" class = "btn btn-success" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover on bottom">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Some content in Popover on right">
Popover on right
</button>
</div>
<script>
$(function (){
$("[data-toggle = 'popover']").popover();
});
</script>Tùy chọn
Có một số tùy chọn có thể được thêm vào qua API dữ liệu Bootstrap hoặc được gọi qua JavaScript. Bảng sau liệt kê các tùy chọn -
| Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
|---|---|---|---|
| hoạt hình | boolean Mặc định - true | dữ liệu-hoạt ảnh | Áp dụng chuyển đổi mờ dần CSS cho cửa sổ bật lên. |
| html | boolean Mặc định - false | data-html | Chèn HTML vào cửa sổ bật lên. Nếu sai, phương thức văn bản của jQuery sẽ được sử dụng để chèn nội dung vào dom. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. |
| vị trí | string | function Mặc định - trên cùng | vị trí dữ liệu | Chỉ định cách định vị cửa sổ bật lên (tức là trên cùng | dưới cùng | trái | phải | tự động). Khi tự động được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên. Ví dụ: nếu vị trí là "tự động bên trái", cửa sổ bật lên sẽ hiển thị bên trái khi có thể, nếu không, nó sẽ hiển thị bên phải. |
| bộ chọn | string Mặc định - false | bộ chọn dữ liệu | Nếu một bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu được chỉ định. |
| tiêu đề | chuỗi | chức năng Mặc định - " | data-title | Tùy chọn tiêu đề là giá trị tiêu đề mặc định nếu thuộc tính tiêu đề không có. |
| Kích hoạt | string Mặc định - 'tiêu điểm di chuột' | kích hoạt dữ liệu | Xác định cách cửa sổ bật lên được kích hoạt - click| hover | focus | manual. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng. |
| sự chậm trễ | số | đối tượng Mặc định - 0 | dữ liệu chậm trễ | Độ trễ hiển thị và ẩn cửa sổ bật lên tính bằng mili giây - không áp dụng cho loại trình kích hoạt thủ công. Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện. Cấu trúc đối tượng là - |
| thùng đựng hàng | string | false Default − false | data-container | Appends the popover to a specific element. Example: container: 'body' |
Methods
The following are some useful methods for popover −
| Method | Description | Example |
|---|---|---|
Options − .popover(options) |
Attaches a popover handler to an element collection. | |
Toggle − .popover('toggle') |
Toggles an element's popover. | |
Show − .popover('show') |
Reveals an element's popover. | |
Hide − .popover('hide') |
Hides an element's popover. | |
Destroy − .popover('destroy') |
Hides and destroys an element's popover. | |
Example
The following example demonstrates the popover plugin methods −
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default popover-show"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover with show method">
Popover on left
</button>
<button type = "button" class = "btn btn-primary popover-hide"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-hide method">
Popover on top
</button>
<button type = "button" class = "btn btn-success popover-destroy"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover-destroy method">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning popover-toggle"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-toggle method">
Popover on right
</button>
<br><br><br><br><br><br>
<p class = "popover-options">
<a href = "#" type = "button" class = "btn btn-warning"
title = "<h2>Title</h2>" data-container = "body"
data-toggle = "popover" data-content = "
<h4>Some content in Popover-options method</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>Events
Following table lists the events to work with the popover plugin. This event may be used to hook into the function.
| Event | Description | Example |
|---|---|---|
| show.bs.popover | This event fires immediately when the show instance method is called. | |
| shown.bs.popover | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | |
| hide.bs.popover | This event is fired immediately when the hide instance method has been called. | |
| hidden.bs.popover | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | |
Example
The following example demonstrates the Popover plugin events −
<div clas = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-primary popover-show"
title = "Popover title" data-container = "body" data-toggle = "popover"
data-content = "Some content in Popover with show method">
Popover on left
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("Alert message on show");
})});
</script>Alert messages are mostly used to display information such as warning or confirmation messages to the end users. Using alert message plugin you can add dismiss functionality to all alert messages.
If you want to include this plugin functionality individually, then you will need the alert.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.min.js.
Usage
You can enable dismissal of an alert in the following two ways −
Via data attributes − To dismiss via Data API just add data-dismiss = "alert" to your close button to automatically give an alert close functionality.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>Via JavaScript − To dismiss via JavaScript use the following syntax −
$(".alert").alert()Example
The following example demonstrates the use of alert plugin via data attributes.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>Options
There are no options here.
Methods
The following are some useful methods for alert plugin −
| Method | Description | Example |
|---|---|---|
| .alert() | This method wraps all alerts with close functionality. | |
Close Method .alert('close') |
To enable all alerts to be closed, add this method. | |
To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them.
Example
The following example demonstrates the use of .alert() method −
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){ $("#myAlert").alert();
});
});
</script>The following example demonstrates the use of .alert('close') method −
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){ $(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>Try this code using the Try it editor. You can see that the close functionality is applied to all the alert messages i.e. close any alert message, rest of the alert messages also gets closed.
Events
Following table lists the events to work with alert plugin. This event may be used to hook into the alert function.
| Event | Description | Example |
|---|---|---|
| close.bs.alert | This event fires immediately when the close instance method is called. | |
| closed.bs.alert | This event is fired when the alert has been closed (will wait for CSS transitions to complete). | |
Example
The following example demonstrates the alert plugin events −
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>Buttons were explained in chapter Bootstrap Buttons. With this plugin you can add in some interaction such as control button states or create groups of buttons for more components like toolbars.
If you want to include this plugin functionality individually, then you will need the button.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified the bootstrap.min.js.
Loading State
To add a loading state to a button, simply add the data-loading-text = "Loading..." as an attribute to the button element as shown in the following example −
<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>When you click on the button the output would be as seen in the following image −
Single toggle
To activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button, add the data-toggle = "button" as an attribute to the button element as shown in the following example −
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>Checkbox
You can create group of checkboxes and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 3
</label>
</div>Radio
Similarly you can create a group of radio inputs and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "radio" name =" options" id = "option1"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3"> Option 3
</label>
</div>Usage
You can enable buttons plugin via JavaScript as shown below −
$('.btn').button()Options
There are no options.
Methods
Given below are some of the useful methods for buttons plugin −
| Method | Description | Example |
|---|---|---|
button('toggle') |
Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute. |
|
.button('loading') |
When loading, the button is disabled and the text is changed to the option from the data-loading-text attribute of button element |
|
.button('reset') |
Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state |
|
.button(string) |
String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method. |
|
Example
The following example demonstrates the use of the above methods −
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(function () { $("#myButtons1 .btn").click(function(){
$(this).button('toggle'); }); }); $(function() {
$("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() { $("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
});
});
});
$(function() { $("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
});
});
});
</script>The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build an accordion navigation or content boxes, it allows for a lot of content options.
If you want to include this plugin functionality individually, then you will need the collapse.js. This also requires the Transition Plugin to be included in your version of Bootstrap. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.min.js.
You can use the collapse plugin −
To create collapsible groups or accordion. This can be created as in the sample example below −
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse.Section 1
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse.Section 2
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse.Section 3
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>data-toggle = "collapse" được thêm vào liên kết mà bạn nhấp vào để mở rộng hoặc thu gọn thành phần.
href hoặc một data-targetthuộc tính được thêm vào thành phần mẹ, có giá trị là id của thành phần con.
data-parent thuộc tính được thêm vào để tạo hiệu ứng giống đàn accordion.
Để tạo có thể thu gọn đơn giản mà không cần đánh dấu đàn accordion - Có thể tạo điều này như trong ví dụ mẫu bên dưới -
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
simple collapsible
</button>
<div id = "demo" class = "collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>Như bạn có thể thấy trong ví dụ, chúng tôi đã tạo một thành phần có thể thu gọn đơn giản, không giống như đàn accordion, chúng tôi chưa thêm thuộc tính data-parent.
Sử dụng
Bảng sau liệt kê các lớp mà plugin thu gọn sử dụng để xử lý công việc nặng nhọc -
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | .collapse Ẩn nội dung. |
| 2 | .collapse.in Hiển thị nội dung. |
| 3 | .collapsing Được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi kết thúc. |
Bạn có thể sử dụng plugin thu gọn theo hai cách:
Via data attributes - Thêm data-toggle = "collapse" và một data-targetcho phần tử để tự động gán quyền kiểm soát phần tử có thể thu gọn. Cácdata-targetthuộc tính sẽ chấp nhận một bộ chọn CSS để áp dụng tính năng thu gọn. Hãy chắc chắn thêm lớp.collapseđến phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy bao gồm lớp bổ sung.in.
Để thêm quản lý nhóm giống như đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent = "#selector".
Via JavaScript - Phương thức thu gọn có thể được kích hoạt bằng JavaScript như hình dưới đây -
$('.collapse').collapse()Tùy chọn
Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript được liệt kê trong bảng sau:
| Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
|---|---|---|---|
| cha mẹ | bộ chọn Mặc định - sai | dữ liệu-gốc | Nếu bộ chọn là sai, thì tất cả các phần tử có thể thu gọn dưới phần tử gốc được chỉ định sẽ bị đóng (tương tự như hành vi của đàn accordion truyền thống - điều này phụ thuộc vào lớp nhóm accordion). |
| chuyển đổi | boolean Mặc định - true | chuyển đổi dữ liệu | Chuyển đổi phần tử có thể thu gọn khi gọi. |
Phương pháp
Dưới đây là danh sách một số phương pháp hữu ích được sử dụng với các phần tử có thể thu gọn.
| phương pháp | Sự miêu tả | Thí dụ |
|---|---|---|
Options - .collapse (tùy chọn) |
Kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn. Chấp nhận một đối tượng tùy chọn tùy chọn. | |
Toggle - .collapse ('chuyển đổi') |
Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn. | |
Show - .collapse ('hiển thị') |
Hiển thị một phần tử có thể thu gọn. | |
Hide - .collapse ('ẩn') |
Ẩn một phần tử có thể thu gọn. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các phương thức:
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse. Section 1--hide method
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse. Section 2--show method
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse. Section 3--toggle method
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
Click me to expand. Click me again to collapse. Section 4--options method
</a>
</h4>
</div>
<div id = "collapseFour" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>Sự kiện
Bảng sau liệt kê một số sự kiện có thể được sử dụng với chức năng thu gọn.
| Biến cố | Sự miêu tả | Thí dụ |
|---|---|---|
| show.bs.collapse | Kích hoạt sau khi phương thức hiển thị được gọi. | |
| show.bs.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). | |
| hide.bs.collapse | Kích hoạt khi phương thức ẩn đối tượng đã được gọi. | |
| hidden.bs.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các sự kiện:
<div class = "panel-group" id = "accordion">
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
Click me to expand. Click me again to collapse. Section --shown event
</a>
</h4>
</div>
<div id = "collapseexample" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this alert shows up when you expand it');
})
});
</script>Băng chuyền Bootstrap là một cách linh hoạt, đáp ứng để thêm thanh trượt vào trang web của bạn. Ngoài khả năng đáp ứng, nội dung còn đủ linh hoạt để cho phép hình ảnh, khung nội tuyến, video hoặc bất kỳ loại nội dung nào bạn có thể muốn.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần carousel.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể bao gồm các bootstrap.js hoặc minified bootstrap.min.js .
Thí dụ
Trình chiếu đơn giản bên dưới hiển thị một thành phần chung để xoay vòng qua các phần tử như băng chuyền, bằng cách sử dụng plugin băng chuyền Bootstrap. Để triển khai băng chuyền, bạn chỉ cần thêm mã có đánh dấu. Không cần thuộc tính dữ liệu, chỉ cần phát triển dựa trên lớp đơn giản.
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>Phụ đề tùy chọn
Bạn có thể thêm chú thích vào trang trình bày của mình một cách dễ dàng với .carousel-caption phần tử trong bất kỳ .item. Chỉ đặt khoảng bất kỳ HTML tùy chọn nào trong đó và nó sẽ được căn chỉnh và định dạng tự động. Ví dụ sau đây chứng minh điều này -
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
<div class = "carousel-caption">This Caption 1</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
<div class = "carousel-caption">This Caption 2</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
<div class = "carousel-caption">This Caption 3</div>
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+
</div>Sử dụng
Via data attributes - Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền.
Thuộc tính data-slidechấp nhận các từ khóa trước hoặc tiếp theo , điều này làm thay đổi vị trí trang chiếu so với vị trí hiện tại của nó.
Sử dụng data-slide-to để chuyển một chỉ mục trang trình bày thô vào băng chuyền data-slide-to = "2", chuyển vị trí trang chiếu sang một chỉ mục cụ thể bắt đầu bằng 0.
Các data-ride = "carousel" thuộc tính được sử dụng để đánh dấu băng chuyền là hoạt ảnh bắt đầu khi tải trang.
Via JavaScript - Băng chuyền có thể được gọi theo cách thủ công bằng JavaScript như bên dưới -
$('.carousel').carousel()Tùy chọn
Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript được liệt kê trong bảng sau:
| Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
|---|---|---|---|
| khoảng thời gian | số Mặc định - 5000 | khoảng thời gian dữ liệu | Khoảng thời gian để trì hoãn giữa việc tự động quay một mục. Nếu sai, băng chuyền sẽ không tự động xoay vòng. |
| tạm ngừng | string Mặc định - "hover" | tạm dừng dữ liệu | Tạm dừng vòng quay của băng chuyền trên mouseenter và tiếp tục quay vòng của băng chuyền trên mouseleave. |
| bọc lại | boolean Mặc định - true | bọc dữ liệu | Liệu băng chuyền có nên quay vòng liên tục hay có các điểm dừng khó. |
Phương pháp
Dưới đây là danh sách các phương pháp hữu ích có thể được sử dụng với mã băng chuyền.
| phương pháp | Sự miêu tả | Thí dụ |
|---|---|---|
| .carousel (tùy chọn) | Khởi tạo băng chuyền với một đối tượng tùy chọn tùy chọn và bắt đầu quay vòng qua các mục. | |
| .carousel ('chu kỳ') | Xoay qua các mục băng chuyền từ trái sang phải. | |
| .carousel ('tạm dừng') | Ngăn băng chuyền di chuyển qua các mục. | |
| .carousel (số) | Xoay băng chuyền thành một khung cụ thể (dựa trên 0, tương tự như một mảng). | |
| .carousel ('trước') | Chuyển sang mục trước. | |
| .carousel ('tiếp theo') | Chuyển sang mục tiếp theo. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các phương thức:
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
<!-- Controls buttons -->
<div style = "text-align:center;">
<input type = "button" class = "btn prev-slide" value = "Previous Slide">
<input type = "button" class = "btn next-slide" value = "Next Slide">
<input type = "button" class = "btn slide-one" value = "Slide 1">
<input type = "button" class = "btn slide-two" value = "Slide 2">
<input type = "button" class = "btn slide-three" value = "Slide 3">
</div>
</div>
<script>
$(function() { // Cycles to the previous item $(".prev-slide").click(function() {
$("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
$("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
$("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
$("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
$("#myCarousel").carousel(2);
});
});
</script>Sự kiện
Lớp băng chuyền của Bootstrap cho thấy hai sự kiện để nối vào chức năng băng chuyền được liệt kê trong bảng sau.
| Biến cố | Sự miêu tả | Thí dụ |
|---|---|---|
| slide.bs.carousel | Sự kiện này kích hoạt ngay lập tức khi phương thức phiên bản slide được gọi. | |
| slid.bs.carousel | Sự kiện này được kích hoạt khi băng chuyền đã hoàn thành quá trình chuyển đổi trang chiếu của nó. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các sự kiện:
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>
<script>
$(function() {
$('#myCarousel').on('slide.bs.carousel', function () {
alert("This event fires immediately when the slide instance method" +"is invoked.");
});
});
</script>Plugin liên kết cho phép một <div> được gắn vào một vị trí trên trang. Bạn cũng có thể bật và tắt tính năng ghim bằng plugin này. Một ví dụ phổ biến về điều này là các biểu tượng xã hội. Chúng sẽ bắt đầu ở một vị trí, nhưng khi trang đạt đến một điểm nhất định, <div> sẽ bị khóa tại chỗ và sẽ ngừng cuộn với phần còn lại của trang.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần affix.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể bao gồm các bootstrap.js hoặc minified bootstrap.min.js .
Sử dụng
Bạn có thể sử dụng plugin đính kèm thông qua thuộc tính dữ liệu hoặc theo cách thủ công với JavaScript của riêng bạn như được thảo luận bên dưới.
Via data attributes - Để dễ dàng thêm hành vi liên kết vào bất kỳ phần tử nào, chỉ cần thêm data-spy = "affix"vào phần tử bạn muốn theo dõi. Sử dụng hiệu số để xác định thời điểm chuyển đổi ghim của một phần tử.
Thí dụ
Ví dụ sau minh họa việc sử dụng thông qua các thuộc tính dữ liệu:
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div id = "myNav" data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum
id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet
elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
eu, tristique eget risus. Integer aliquet quam ut elit suscipit,
id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis
dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed
fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at
facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit
amet mauris. </p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante
id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
turpis at accumsan tincidunt. Phasellus risus risus,
volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,
tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis
pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id
vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>Via JavaScript - Bạn có thể gắn một phần tử theo cách thủ công bằng JavaScript như hình dưới đây
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})Thí dụ
Ví dụ sau minh họa việc sử dụng thông qua các thuộc tính dữ liệu:
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div>
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio
in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique
eget risus. Integer aliquet quam ut elit suscipit, id interdum
neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor.
Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris
quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor.
Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum
ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna.
Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam.
Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
dolor nisl semper tortor, vel sagittis lacus est consequat eros.
Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,
tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
tincidunt fringilla massa. Etiam hendrerit dolor eget ante
rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum
ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#myNav').affix({
offset: {
top: 60
}
});
});
</script>Định vị qua CSS
Trong cả hai trường hợp trên, bạn phải cung cấp CSS để định vị nội dung của mình. Plugin liên kết chuyển đổi giữa ba lớp, mỗi lớp đại diện cho một trạng thái cụ thể - .affix, .affix-top và .affix-bottom . Làm theo các bước dưới đây để đặt CSS của bạn cho một trong các tùy chọn sử dụng ở trên.
Để bắt đầu, plugin thêm .affix-topđể cho biết phần tử đang ở vị trí cao nhất của nó. Tại thời điểm này, không cần định vị CSS.
Cuộn qua phần tử bạn muốn gắn sẽ kích hoạt việc dán thực tế. Đây là đâu.affix thay thế .affix-top và bộ position: fixed; (được cung cấp bởi mã CSS của Bootstrap).
Nếu độ lệch đáy được xác định, hãy cuộn qua đó sẽ thay thế .affix với .affix-bottom. Vì hiệu số là tùy chọn, cài đặt một yêu cầu bạn đặt CSS thích hợp. Trong trường hợp này, hãy thêmposition: absolute; khi cần thiết.
Tùy chọn
Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript như được liệt kê trong bảng sau:
| Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
|---|---|---|---|
| bù lại | số | chức năng | đối tượng Mặc định: 10 | bù đắp dữ liệu | Điểm ảnh để bù trừ khỏi màn hình khi tính toán vị trí của cuộn. Nếu một số được cung cấp, phần bù sẽ được áp dụng theo cả hướng trên và dưới. Để cung cấp bù đắp duy nhất, dưới cùng và trên cùng, chỉ cần cung cấp một đối tượng bù: {top: 10} hoặc offset: {top: 10, bottom: 5}. Sử dụng một hàm khi bạn cần tính toán động một phần bù. |
Grid là gì?
Trong thiết kế đồ họa, lưới là một cấu trúc (thường là hai chiều) được tạo thành từ một loạt các đường thẳng (dọc, ngang) giao nhau được sử dụng để cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố cục và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo một bố cục nhất quán một cách nhanh chóng và hiệu quả bằng cách sử dụng HTML và CSS.
Hoạt động của hệ thống lưới Bootstrap
Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn. Đây là cách hệ thống lưới Bootstrap hoạt động -
Các hàng phải được đặt trong một .container lớp để căn chỉnh và đệm thích hợp.
Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Các lớp lưới được xác định trước như .row and .col-xs-4có sẵn để nhanh chóng tạo bố cục lưới. LESS mixin cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên.rows.
Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: ba cột bằng nhau sẽ sử dụng ba.col-xs-4.
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Lưới | Ví dụ này chỉ ra về cấu trúc lưới trong Bootstrap. | Tải xuống |
Bootstrap cung cấp một bố cục gọn gàng để xây dựng bảng. Một số phần tử bảng được Bootstrap hỗ trợ là:
| Sr.No. | Thẻ & Mô tả |
|---|---|
| 1 | <table> Phần tử bao bọc để hiển thị dữ liệu ở định dạng bảng |
| 2 | <thead> Phần tử vùng chứa cho các hàng tiêu đề bảng (<tr>) để gắn nhãn các cột trong bảng. |
| 3 | <tbody> Phần tử vùng chứa cho các hàng của bảng (<tr>) trong phần nội dung của bảng. |
| 4 | <tr> Phần tử vùng chứa cho một tập hợp các ô trong bảng (<td> hoặc <th>) xuất hiện trên một hàng. |
| 5 | <td> Ô bảng mặc định. |
| 6 | <th> Ô bảng đặc biệt cho các nhãn cột (hoặc hàng, tùy thuộc vào phạm vi và vị trí). Phải được sử dụng trong <thead> |
| 7 | <caption> Mô tả hoặc tóm tắt về những gì bảng chứa. |
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Mua bàn | Ví dụ này chỉ ra về cấu trúc bảng mua trong Bootstrap. | Tải xuống |
| Bảng kế hoạch | Ví dụ này chỉ ra về cấu trúc bảng Plan trong Bootstrap. | Tải xuống |
| Bàn có thư viện | Ví dụ này chỉ ra về cấu trúc bảng thư viện trong Bootstrap. | Tải xuống |
Bố cục biểu mẫu
Bootstrap cung cấp cho bạn các loại bố cục biểu mẫu sau:
- Dạng dọc (mặc định)
- Mẫu nội tuyến
- Dạng ngang
Dạng dọc hoặc dạng cơ bản
Cấu trúc biểu mẫu cơ bản đi kèm với Bootstrap; các điều khiển biểu mẫu riêng lẻ tự động nhận một số kiểu chung. Để tạo một biểu mẫu cơ bản, hãy làm như sau:
Thêm một biểu mẫu vai trò vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group . Điều này là cần thiết để có khoảng cách tối ưu.
Thêm một lớp .form-control vào tất cả các phần tử <input>, < textareosystem và <select> văn bản.
Mẫu nội tuyến
Để tạo một biểu mẫu trong đó tất cả các phần tử đều nằm trong dòng, căn trái và các nhãn nằm dọc, hãy thêm lớp .form-inline vào thẻ <form>.
Dạng ngang
Biểu mẫu nằm ngang khác biệt so với những biểu mẫu khác không chỉ ở số lượng đánh dấu mà còn ở cách trình bày biểu mẫu. Để tạo biểu mẫu sử dụng bố cục ngang, hãy làm như sau:
Thêm một lớp .form-ngang vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group .
Thêm một lớp .control-label vào các nhãn.
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Trang đăng nhập | Ví dụ này cho biết về cấu trúc trang đăng nhập trong Bootstrap | Tải xuống |
| Trang liên lạc | Ví dụ này chỉ ra về cấu trúc trang Liên hệ trong Bootstrap | Tải xuống |
| Trang đăng ký | Ví dụ này chỉ ra về cấu trúc trang Đăng ký trong Bootstrap | Tải xuống |
Bootstrap cung cấp một số tùy chọn để tạo kiểu cho các nút, được tóm tắt trong bảng sau:
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | btn Nút mặc định / tiêu chuẩn. |
| 2 | btn-primary Cung cấp thêm trọng lượng trực quan và xác định hành động chính trong một tập hợp các nút. |
| 3 | btn-success Cho biết một hành động thành công hoặc tích cực. |
| 4 | btn-info Nút theo ngữ cảnh cho các thông báo cảnh báo thông tin. |
| 5 | btn-warning Cho biết cần thận trọng với hành động này. |
| 6 | btn-danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực. |
| 7 | btn-link Nhấn mạnh nút bằng cách làm cho nó trông giống như một liên kết trong khi vẫn duy trì hành vi của nút. |
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Các nút iOS | Ví dụ này chỉ ra về cấu trúc nút trong Bootstrap | Tải xuống |
| Các nút hình ảnh | Ví dụ này cho biết về cấu trúc nút Hình ảnh trong Bootstrap | Tải xuống |
| Các nút bóng | Ví dụ này chỉ ra về cấu trúc nút Shadow trong Bootstrap | Tải xuống |
| Các nút đăng ký | Ví dụ này chỉ ra về cấu trúc nút Đăng ký trong Bootstrap | Tải xuống |
Bootstrap cung cấp ba lớp có thể được sử dụng để áp dụng một số kiểu đơn giản cho hình ảnh -
.img-round - thêm border-radius: 6px để cung cấp cho hình ảnh các góc tròn.
.img-circle - làm cho toàn bộ hình ảnh tròn bằng cách thêm border-radius: 500px .
.img-thumbnail - thêm một chút đệm và đường viền màu xám:
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| thư viện hình ảnh | Ví dụ này chỉ ra về cấu trúc thư viện hình ảnh trong Bootstrap | Tải xuống |
| Thu phóng hình ảnh | Ví dụ này chỉ ra về cấu trúc Zoom hình ảnh trong Bootstrap | Tải xuống |
| Thư viện Hình ảnh Đội | Ví dụ này chỉ ra về cấu trúc hình ảnh lưới trong Bootstrap | Tải xuống |
| Hình nền | Ví dụ này chỉ ra về cấu trúc Hình nền trong Bootstrap | Tải xuống |
| Hình ảnh trong bảng điều khiển | Ví dụ này chỉ ra về cấu trúc hình ảnh trong Bootstrap | Tải xuống |
Bootstrap cung cấp một số lớp trợ giúp hữu ích để phát triển thân thiện với thiết bị di động nhanh hơn. Chúng có thể được sử dụng để hiển thị và ẩn nội dung theo thiết bị thông qua truy vấn phương tiện, kết hợp với các thiết bị lớn, nhỏ và vừa.
Sử dụng những thứ này một cách tiết kiệm và tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web. Responsive utilities are currently only available for block and table toggling.
| Các lớp học | Thiết bị |
|---|---|
| .visible-xs | Cực nhỏ (dưới 768px) hiển thị |
| .visible-sm | Nhỏ (lên đến 768 px) hiển thị |
| .visible-md | Trung bình (768 px đến 991 px) hiển thị |
| .visible-lg | Lớn hơn (992 px trở lên) hiển thị |
| .hides-xs | Cực nhỏ (nhỏ hơn 768px) bị ẩn |
| .hides-sm | Nhỏ (lên đến 768 px) ẩn |
| .hides-md | Trung bình (768 px đến 991 px) ẩn |
| .hides-lg | Lớn hơn (992 px trở lên) bị ẩn |
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Thẻ đáp ứng | Ví dụ này chỉ ra về cấu trúc thẻ trong Bootstrap | Tải xuống |
| Lời chứng thực đơn giản | Ví dụ này chỉ ra về cấu trúc Lời chứng thực trong Bootstrap | Tải xuống |
| Lưới video | Ví dụ này chỉ ra về cấu trúc Grid Video trong Bootstrap | Tải xuống |
| Hình ảnh biểu ngữ | Ví dụ này cho biết về cấu trúc Banner Image trong Bootstrap | Tải xuống |
| Băng chuyền với các chỉ báo khuôn mặt | Ví dụ này cho biết về Carousel với cấu trúc chỉ báo khuôn mặt trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu cho các phần tử điều hướng. Tất cả chúng đều có chung lớp đánh dấu và lớp cơ sở, .nav. Bootstrap cũng cung cấp một lớp trợ giúp, để chia sẻ đánh dấu và trạng thái. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Demo điều hướng | Ví dụ này chỉ ra về cấu trúc điều hướng trong Bootstrap | Tải xuống |
| Thanh điều hướng hình ảnh | Ví dụ này chỉ ra về cấu trúc Thanh điều hướng hình ảnh trong Bootstrap | Tải xuống |
| Các nút Findcon | Ví dụ này chỉ ra về cấu trúc nút findcon trong Bootstrap | Tải xuống |
| Thanh điều hướng nhỏ | Ví dụ này chỉ ra về cấu trúc Tiny Navbar trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu cho Blog. Một số thành phần blog như Hộp bình luận, bài đăng blog, chân trang blog, v.v.
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Bản trình diễn Hộp nhận xét | Ví dụ này chỉ ra về cấu trúc Hộp nhận xét trong Bootstrap | Tải xuống |
| Bài đăng trên blog có hình ảnh | Ví dụ này cho biết về cấu trúc phần tử Bài đăng trên blog có hình ảnh trong Bootstrap | Tải xuống |
| Chân trang blog | Ví dụ này chỉ ra về cấu trúc Chân trang blog trong Bootstrap | Tải xuống |
| Hình thu nhỏ | Ví dụ này chỉ ra về cấu trúc Hình thu nhỏ trong Bootstrap | Tải xuống |
Material Design là gì
Material design là hướng dẫn toàn diện cho thiết kế hình ảnh, chuyển động và tương tác trên các nền tảng
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Demo hộp vật liệu | Ví dụ này chỉ ra về cấu trúc thẻ Materiel trong Bootstrap. | Tải xuống |
| Thẻ vật liệu | Ví dụ này chỉ ra về cấu trúc thẻ Materiel trong Bootstrap. | Tải xuống |
| Điều hướng vật liệu | Ví dụ này chỉ ra về cấu trúc Điều hướng Materiel trong Bootstrap. | Tải xuống |
| Điều hướng Hộp thư đến | Ví dụ này chỉ ra về cấu trúc Điều hướng Hộp thư đến trong Bootstrap. | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu cho thanh trượt Điều hướng. Một số ví dụ như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Trượt menu qua | Ví dụ này chỉ ra về cấu trúc Menu Slider trong Bootstrap | Tải xuống |
| Menu phụ | Ví dụ này chỉ ra về cấu trúc Menu phụ của Slider trong Bootstrap | Tải xuống |
| Thanh bên có tab | Ví dụ này chỉ ra về cấu trúc Slider With Tabs trong Bootstrap | Tải xuống |
| Các tab | Ví dụ này chỉ ra về cấu trúc Tab trong Bootstrap | Tải xuống |
Bootstrap cung cấp một số tùy chọn khác nhau để tạo kiểu Dòng thời gian. Một số ví dụ như hình dưới đây:
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Trình diễn dòng thời gian | Ví dụ này chỉ ra về cấu trúc Dòng thời gian trong Bootstrap | Tải xuống |
| Cột đơn Dòng thời gian có dấu chấm | Ví dụ này chỉ ra về cấu trúc chấm một cột Dòng thời gian trong Bootstrap | Tải xuống |
| Cột đơn TimeLine | Ví dụ này chỉ ra về cấu trúc cột đơn TimeLine trong Bootstrap | Tải xuống |
| Dòng thời gian - có dấu chấm | Ví dụ này chỉ ra về Dòng thời gian - cấu trúc chấm trong Bootstrap | Tải xuống |
Cảnh báo cung cấp một cách để tạo kiểu thông báo cho người dùng. Chúng cung cấp các thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng. Một số ví dụ cảnh báo như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Cảnh báo trang | Ví dụ này chỉ ra về cấu trúc Page Alert trong Bootstrap | Tải xuống |
| Thông báo cảnh báo | Ví dụ này chỉ ra về cấu trúc Thông báo cảnh báo trong Bootstrap | Tải xuống |
| Ưu đãi nhỏ với màu sắc và bán kính | Ví dụ này cho biết về các ưu đãi Nhỏ với màu sắc và cấu trúc bán kính trong Bootstrap | Tải xuống |
| Hộp trạng thái | Ví dụ này chỉ ra về cấu trúc Hộp trạng thái trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu giao diện quản trị. Một số giao diện quản trị như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Soạn thư và hộp thư đến phản hồi | Ví dụ này chỉ ra về cấu trúc Hộp thư đến và Soạn thư đáp ứng trong Bootstrap | Tải xuống |
| Quản trị viên đơn giản | Ví dụ này chỉ ra về cấu trúc giao diện quản trị đơn giản trong Bootstrap | Tải xuống |
| Bootstrap cho Datatable | Ví dụ này chỉ ra về Bootstrap cho cấu trúc Datatable trong Bootstrap | Tải xuống |
| Giao diện Email | Ví dụ này chỉ ra về cấu trúc Giao diện Email trong Bootstrap | Tải xuống |
Ajax được sử dụng để giao tiếp với các trang web và máy chủ web. Một số ví dụ dựa trên ajax và bootstrap như được hiển thị bên dưới:
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Hình thức thanh toán | Ví dụ này cho biết về Hình thức thanh toán Ajax trong Bootstrap | Tải xuống |
| Trình hướng dẫn AJAX / DIV | Ví dụ này cho biết về Ajax AJAX / DIV Wizard trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho thanh trượt. Thanh trượt theo tab như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Thanh trượt theo tab | Ví dụ này chỉ ra về Tabbed Slider trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho phụ đề. Hiệu ứng Di chuột của Chú thích Hình thu nhỏ như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Chú thích Di chuột | Ví dụ này cho biết về Chú thích trên hình ảnh trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho bản đồ. ví dụ mẫu của bản đồ như được hiển thị bên dưới -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Bản đồ | Ví dụ này cho biết về Bản đồ trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho lịch. ví dụ mẫu về lịch như hình dưới đây -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Trình phân trang ngày phản hồi | Ví dụ này cho biết về lịch trong Bootstrap | Tải xuống |
| Chương trình nghị sự | Ví dụ này cho biết về Lịch làm việc trong Bootstrap | Tải xuống |
| Người chọn ngày đơn giản | Ví dụ này cho biết về Bộ chọn ngày trong Bootstrap | Tải xuống |
| Lịch | Ví dụ này cho biết về Lịch trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho các biểu tượng Xã hội. các ví dụ mẫu về biểu tượng Xã hội như được hiển thị bên dưới -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Quay các biểu tượng xã hội | Ví dụ này cho biết về cấu trúc Spinning Social Icons trong Bootstrap | Tải xuống |
| Biểu tượng xã hội với FontAwesome | Ví dụ này cho biết về biểu tượng Xã hội với phông chữ Awesome trong Bootstrap | Tải xuống |
| Thu phóng Biểu tượng xã hội Hover Animation | Ví dụ này cho biết về Zoom Biểu tượng xã hội Hover Animation trong Bootstrap | Tải xuống |
| Nút chia sẻ | Ví dụ này cho biết về Nút Chia sẻ trong Bootstrap | Tải xuống |
Bootstrap cung cấp một vài tùy chọn khác nhau cho các biểu tượng dưới dạng phông chữ. ví dụ mẫu về các biểu tượng như được hiển thị bên dưới -
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Huy hiệu biểu tượng tròn | Ví dụ này cho biết về Huy hiệu Biểu tượng tròn trong Bootstrap | Tải xuống |
| Xoay và lật | Ví dụ này cho biết về các biểu tượng có hoạt ảnh trong Bootstrap | Tải xuống |
| Ui-Kit-Metro Like Nav | Ví dụ này cho biết về các biểu tượng có hoạt ảnh giao diện người dùng trong Bootstrap | Tải xuống |
| Nút màu xanh lam béo và phẳng | Ví dụ này cho biết về nút Fat và Flat màu xanh lam trong Bootstrap | Tải xuống |
Bootstrap cung cấp một số tùy chọn khác nhau để tạo kiểu Bootstrap Elements. Một số phần tử bootstrap như được hiển thị bên dưới:
| Thí dụ | Sự miêu tả | Liên kết tải xuống |
|---|---|---|
| Material Design Switch | Ví dụ này chỉ ra về cấu trúc Material Design Switch trong Bootstrap | Tải xuống |
| Phương thức Bootstrap Windows 8 | Ví dụ này chỉ ra về cấu trúc Phương thức Bootstrap của Windows 8 trong Bootstrap | Tải xuống |
| Các nút ruy-băng | Ví dụ này chỉ ra về cấu trúc Ribbon Buttons trong Bootstrap | Tải xuống |
| Chú thích - Kêu gọi hành động | Ví dụ này chỉ ra về cấu trúc Chú thích - Gọi hành động trong Bootstrap | Tải xuống |
| Báo cáo lỗi | Ví dụ này cho biết về cấu trúc Báo cáo lỗi trong Bootstrap | Tải xuống |
| Băng chuyền có chú thích di chuột | Ví dụ này cho biết về cấu trúc Carousel với Hover Captions trong Bootstrap | Tải xuống |
| Tường Facebook | Ví dụ này cho biết về cấu trúc Tường Facebook trong Bootstrap | Tải xuống |
| Cảnh báo di động | Ví dụ này cho biết về cấu trúc Cảnh báo di động trong Bootstrap | Tải xuống |
| Phân trang làm tròn | Ví dụ này chỉ ra về Phân trang làm tròn trong Bootstrap | Tải xuống |
| Hình thu nhỏ danh sách video | Ví dụ này cho biết về hình thu nhỏ danh sách Video trong Bootstrap | Tải xuống |
| Các nút điều khiển phương tiện | Ví dụ này cho biết về Nút điều khiển phương tiện trong Bootstrap | Tải xuống |
| Tab dọc đơn giản | Ví dụ này cho biết về Tab dọc đơn giản trong Bootstrap | Tải xuống |