BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK

1. Giới thiệu Bootstrap Framework

Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap.

Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị khác như máy tính bảng, laptop,….

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Bản bootstrap mới nhất bây giờ là bootstrap 4.

Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí và tự do sử dụng.

Ví dụ: Muốn tạo 1 nút (Button)

Kết quả:

Sử dụng Bootstrap:

Kết quả:

* Tại sao nên sử dụng Bootstrap:

Dễ dàng thao tác: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến thức cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.
Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm dung lượng vì không cần tải mã nguồn về máy.
Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất.
Độ tương thích cao: Bootstrap tương thích với mọi trình duyệt và nền tảng bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích thước trang website theo khung browser. Mục đích để phù hợp với màn hình của máy tính để bàn, tablet hay laptop.

Cấu trúc và tính năng của Bootstrap: Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại. Ngoài ra, Bootstrap được thiết kế dưới dạng các mô-đun. Do đó, dễ dàng tích hợp với hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng nổi bật.

Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các thành tố dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography, form, table, grid…

Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống và sử dụng nó tại trang web của khung.

Tái sử dụng các thành phần lặp đi lặp lại trên trang web.

Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính năng trong quá trình lập trình web của bạn.

Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải trang..

2. Download và sử dụng Bootstrap

Có hai cách phổ biến để tải Bootstrap về web của bạn:

Tải trực tiếp từ trang cung cấp Bootstrap: Sau khi tải và nhúng vào dự án web, không cần có kết nối internet để hiển thị trang web bình thường

Thông qua CDN (Content Delivery Network) Bootstrap: Luôn cần kết nối đến CDN

Cách 1: Tải trực tiếp từ trang cung cấp Bootstrap:

Bước 1: Truy cập trang web https://getbootstrap.com/

Bước 2: Chọn Download

Bước 3: Chọn Download trong nhóm Compiled CSS and JS

Bước 4: Giải nén file tải về, trong đó chứa 2 thư mục css và js

Bước 5: Tạo thư mục chứa dự án web rồi copy 2 thư mục css và js vào thư mục của dự án.

Bước 6: Tải thư viện jQuery:

Truy cập https://jquery.com/download/

Click chuột phải vào link tải jQuery chọn Save link As

Lưu file nhận được vào thư mục js của dự án web, khi đó trong thư mục js ta có:

Bước 7: Nhúng css và js vào file index. theo cú pháp:

Cách 2: Nhúng Bootstrap từ CDN:

Để sử dụng Bootstrap 4, các bạn cần nhúng các file thư viện sau:

bootstrap.min.css
jquery.min.js
popper.min.js
bootstrap.min.js

Các link nhúng Boostrap từ CDN thường dùng

Định dạng file mẫu:

Lưu ý: Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text:

Bootstrap autocomplete
Bootstrap Snipets

Cách cài đặt:

Preferences/Package Control/Install Package

Lần lượt chọn Bootstrap autocomplete và Bootstrap Snipets để cài đặt

BÀI 2: CSS TRONG BOOTSTRAP

1. Hệ thống lưới

Containers: Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một .container. Container thiết lập thuộc tính width trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container mặc định không thể bị lồng.

Sử dụng class .container cho một container responsive có chiều rộng cố định.

Sử dụng class .container-fluid cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn.

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

Giới thiệu

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

Các hàng được đặt bên trong một .container (fixed-width) hoặc .container-fluid (full-width) để căn chỉnh và thiết lập padding một cách thích hợp.

Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.

Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.

Các class được định nghĩa trước như .row và .col-xs-4 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa.

Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng padding. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các .row.

Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class .col-xs-4.

Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn.

Media query: Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi.

Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính max-width.

Các tùy chọn của lưới: Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.

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

Sử dụng một tập hợp các class .col-md-*, bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các .row.

</div>

</div>

</div>

</div>

Ví dụ: Fluid container

Chuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi .container ngoài cùng thành .container-fluid.

...

</div>

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

Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm .col-xs-* .col-md-* vào các cột của bạn. Hãy xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.

</div>

</div>

</div>

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

Bạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng .col-sm-*.

</div>

</div>

Reset cột responsive

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

</div>

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

<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>

</div>

<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>

</div>

Di chuyển cột: Di chuyển cột sang phía bên phải bằng cách sử dụng các class .col-md-offset-*. Các class này làm tăng khoảng lề trái (margin-left) của một cột lên bằng * cột. Ví dụ, .col-md-offset-4 dịch .col-md-4 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cột.

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

</div>

<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

</div>

<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

</div>

Các cột lồng nhau

Để tạo ra các cột lồng nhau, Hãy thêm một .row mới và một tập các cột .col-md-* bên trong cột .col-md-* đã tồn tại. Các hàng nằm bên trong có thể chứa một tập hợp các cột, tối đa là 12 hoặc ít hơn.

Level 1: .col-md-9

Level 2: .col-md-6

</div>

Level 2: .col-md-6

</div>

Thứ tự cột

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

</div>

2. Định dạng (typography)

Tiêu đề

Tất cả các thẻ tiêu đề của HTML, từ thẻ <h1> tới <h6>, đều sẵn có. Các class từ .h1 tới .h6 được sử dụng khi bạn muốn style các thẻ tiêu đề nhưng vẫn muốn text của bạn hiển thị trên cùng dòng.

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

Bạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ <small> hoặc class .small.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body

font-size mặc định của Bootstrap là 14px, với line-height có tỷ lệ 1.428. Các thuộc tính này được áp dụng cho phần <div> và tất cả các đoạn văn. Hơn nữa, <p> (các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px).

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

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

Xây dựng với Less

Tỉ lệ typograghy trong Bootstrap dựa trên 2 biến trong Less trong variables.less: @font-size-base và @line-height-base. Biến thứ nhất là font-size cơ sở được sử dụng rất phổ biến, còn biến thứ hai là line-height cơ sở. Chúng tôi sử dụng những biến này và một số phép toán cơ bản để tạo ra margin, padding và line-height. Tùy biến chúng và Bootstrap sẽ tự động điều chỉnh.

Text có kích thước nhỏ

Để giảm tính nhấn mạnh cho các đoạn text hoặc khối text, hãy sử dụng thẻ <small> để thay đổi kích thước của những text đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những font-size của riêng chúng khi nằm trong thẻ <small>. Bạn cũng có thể sử dụng một phần tử có class .small trên cùng dòng thay vì <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

In đậm

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

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

In nghiêng

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

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Các phần tử thay thế

Bạn có thể tự do sử dụng các thẻ <b> và <i> in HTML5. Thẻ <b> được sử dụng để in đậm một từ hoặc cụm từ trong khi thẻ <i> được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,...

Các class căn chỉnh

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

<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-justify">Justified text.</p>

Tên viết tắt

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

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

Sử dụng thuộc tính title có giá trị là tên đầy đủ của tên viết tắt trên thẻ <abbr>

An abbreviation of the word attribute is attr.

Initialism

Thêm class .initialism vào thẻ <abbr> để thiết lập font-size nhỏ hơn một chút.

HTML is the best thing since sliced bread.

Địa chỉ

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

<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<a href="mailto:#">[email protected]</a>

</address>

Khối trích dẫn

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

Khối trích dẫn mặc định

Hãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ <blockquote>. ưu tiên sử dụng thẻ <p> bên trong <blockquote>.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

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

Bạn có thể tùy chọn thay đổi nội dung và style của khối <blockquote>.

Đặt tên một nguồn

Hãy thêm một <footer> để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ <cite>.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>

Các dạng hiển thị thay thế

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

...

</blockquote>

Danh sách

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

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

<ul>

</ul>

Danh sách có thứ tự

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

<ol>

</ol>

Danh sách không được style

Loại bỏ thuộc tính list-style mặc định của danh sách và khoảng căn lề trái (margin-left) trên tất cả các hạng mục của danh sách. Lưu ý rằng, việc này chỉ áp dụng cho các thẻ <li> là con trực tiếp của <ul> hoặc <ol>, điều đó có nghĩa là bạn có thể sẽ cần thêm class cho các danh sách khác nằm sâu bên trong.

</ul>

Danh sách cùng dòng

Đặt tất cả các hạng mục trong danh sách trên cùng một dòng bằng cách sử dụng thuộc tính display: inline-block; cùng thuộc tính padding có giá trị nhỏ.

</ul>

Thông tin chi tiết: Một danh sách các thuật ngữ với thông tin đi kèm.

<dl>

</dl>

Chi tiết theo hàng ngang: Hãy đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ <dl> nằm sát nhau. Bình thường bạn chỉ cần sử dụng những thẻ <dl> mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng <dl> dạng này.

</dl>

Tự động cắt ngắn

Danh sách các thông tin theo hàng ngang sẽ tự động cắt ngắn các thuật ngữ quá dài để nằm vừa vặn trong cột bên trái bằng cách sử dụng thuộc tính text-overflow. Để tương thích với các khung nhìn hẹp, chúng sẽ thay đổi về dạng xếp chồng mặc định.

3. Tạo bảng biểu

Ví dụ cơ bản: Đối với các style đơn giản —chỉ cần các dòng kẻ phân chia giữa các dòng—bạn chỉ cần thêm class cơ sở .table vào bất kỳ thẻ <table> mà bạn muốn sử dụng. Điều này dường như là thừa thãi, tuy nhiên để có thể sử dụng rộng rãi bảng cho các plugin khác như calendar và date pickers, chúng tôi đã lựa chọn để tách biệt với các style tùy biến của bảng.

...

</table>

Bảng có dòng kẻ sọc

Hãy sử dụng class .table-striped để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.

<table class="table table-striped">

...

</table>

Bảng có viền: Thêm class .table-bordered để hiển thị đường viền cho bảng và các ô trong bảng.

<table class="table table-bordered">

...

</table>

Bảng có dòng đổi màu khi hover: Thêm class .table-hover để kích hoạt trạng thái hover trên các dòng của bảng bên trong thẻ <tdiv>.

<table class="table table-hover">

...

</table>

Các class theo ngữ cảnh

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

Class	Description
.active	Áp dụng màu hover cho một dòng hoặc một ô trong bảng
.success	Biểu thị sự thành công hoặc một hành động tích cực
.info	Biểu thị sự thay đổi và hành động mang tính thông báo
.warning	Biểu thị sự cảnh báo hoặc nhắc nhở
.danger	Biểu thị sự nguy hiểm hoặc một hành động mang tính tiêu cực

4. Sử dụng Form

Ví dụ cơ bản: Các thành phần của form (form-control) tự động nhận một số style chung. Toàn bộ các form-control <input>, <textarea>, và <select> với class .form-control được thiết lập mặc định width: 100%;. Bọc các nhãn và các form-control bằng một thẻ có class .form-group để tối ưu hóa khoảng trắng.

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Các control được hỗ trợ: Sau đây là ví dụ về các form control được hỗ trợ trên cùng một layout.

Input: Input là form-control dựa text phổ biến nhất, bao gồm toàn bộ các kiểu input của HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, và color.

Textarea: Textarea là một dạng form-control hỗ trợ nhiều dòng text. Khi cần thiết, hãy thay đổi thuộc tính rows.

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

Mặc định (xếp chồng)

Checkbox trên cùng dòng: Hãy sử dụng class .checkbox-inline hoặc .radio-inline để hiển thị danh sách các checkbox/radio trên cùng một dòng.

Select: Sử dụng tùy chọn mặc định hoặc thêm multiple để hiển thị nhiều tùy chọn cùng một lúc.

</select>

</select>

Các form-control tĩnh: Khi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class .form-control-static trên thẻ <p>.

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">[email protected]</p>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

</div>

</form>

Input đang được focus: Chúng tôi loại bỏ outline mặc định trên một số form-control và sử dụng box-shadow để hiển thị input như đang được :focus.

5. Sử dụng nút lệnh

Bootstrap 4 cung cấp các nút khác nhau:

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-light">Light</button>

Nút có thể sử dụng trong các thẻ <a>, <button>, hoặc <input>:

<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>

Viền của nút:

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-light text-dark">Light</button>

Kích thước nút: Sử dụng lớp .btn-lg để tạo nút to hoặc lớp .btn-sm cho nút nhỏ:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

6. Sử dụng ảnh

Ảnh responsive: Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di động bằng cách sử dụng class .img-responsive class. Class này sẽ thiết lập max-width: 100%; và height: auto; lên ảnh để chúng có thể co giãn theo tỷ lệ tương đối với phần tử cha của chúng.

Các hình dạng của ảnh: Thêm các class vào thẻ <img> để style ảnh một cách dễ dàng.

BÀI 3: CÁC THÀNH PHẦN TRONG BOOTSTRAP

1. Các thành phần trong form

Bootstrap 4 đi kèm với tùy chỉnh biểu mẫu phần, có nghĩa là để thay thế các định nghĩa của trình duyệt:

Để tạo hộp kiểm tùy chỉnh, hãy bọc một phần tử vùng chứa, như <div>, bằng một lớp .custom-control và .custom-checkbox xung quanh hộp kiểm. Sau đó, thêm .custom-control-input vào đầu vào có hộp kiểm type = "".

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm lớp .custom-control-label vào nó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của hộp kiểm:

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>
</form>

Công tắc tùy chỉnh: Để tạo một "công tắc bật tắt" tùy chỉnh, hãy bọc một phần tử vùng chứa, chẳng hạn như <div>, với một lớp .custom-control và .custom-switch xung quanh một hộp kiểm. Sau đó, thêm lớp .custom-control-input vào hộp kiểm:

Ví dụ:

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

Các nút Radio tùy chỉnh: Để tạo một nút radio tùy chỉnh, hãy bọc một phần tử vùng chứa, chẳng hạn như <div>, với một lớp .custom-control và .custom-radio xung quanh nút radio. Sau đó, thêm .custom-control-input vào đầu vào có type = "radio".

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm lớp .custom-control-label vào nó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của radio:

Ví dụ:

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div>
</form>

Kiểm soát biểu mẫu tùy chỉnh nội tuyến: Nếu bạn muốn các điều khiển biểu mẫu tùy chỉnh nằm cạnh nhau (nội dòng), hãy thêm .custom-control-inline vào wrapper/container:

Ví dụ:

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
  </div>
</form>

Menu lựa chọn tùy chỉnh: Để tạo menu chọn tùy chỉnh, hãy thêm lớp .custom-select vào phần tử <select>:

Ví dụ:

<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Kích thước menu lựa chọn tùy chỉnh: Sử dụng lớp .custom-select-sm để tạo một menu chọn nhỏ và lớp .custom-select-lg cho một menu lớn:

Ví dụ:

<form>
  
  <select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  
  <select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Tùy chỉnh range: Để tạo menu phạm vi tùy chỉnh, hãy thêm lớp .custom-range vào đầu vào có type = "<range>":

Ví dụ:

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

Tùy chỉnh File Upload: Để tạo File Upload tùy chỉnh, hãy bọc phần tử vùng chứa bằng lớp .custom-file xung quanh đầu vào có type = "file". Sau đó thêm .custom-file-input vào nó.

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm lớp nhãn .custom-file-label vào nó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của hộp kiểm:

Ví dụ:

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").(fileName);
});
</script>

2. Các thành phần điều hướng

Thanh điều hướng - Navigation Bar hay còn gọi là thanh menu, ví dụ:

Đây là vùng chứa tập hợp các liên kết (link) dẫn đến các trang chính trên website, giúp cho người dùng nhanh chóng đi đến các trang chính trên website.

Navigation Bar thường được đặt ở đầu trang web, giúp website trở nên rõ ràng cũng như giúp người dùng dễ dàng tương tác.

* Các lớp sử dụng khi tạo thanh điều hướng

- Để sử dụng Bootstrap tạo thanh điều hướng cơ bản ta sử dụng nhóm thẻ <nav>, đi kèm là các lớp .navbar; .navbar-nav; .nav-item và .nav-link. Trong đó:

TT	Tên thẻ	Tên lớp cần khai báo
1	<nav>	.navbar
2	<ul>	.navbar-nav
3	<li>	.nav-item
4	<a>	.nav-link

Ví dụ:

<a class="nav-link" href="#">Trang 1</a>

</li>

<a class="nav-link" href="#">Trang 2</a>

</li>

<a class="nav-link" href="#">Trang 3</a>

</li>

</ul>

</nav>

Khi đó ta sẽ tạo được thanh điều hướng mặc theo chiều dọc (mặc định):

* Phương hướng hiển thị của thanh điều hướng.

- Để tạo thanh điều hướng theo phương ngang và chỉ xoay dọc theo kích thước màn hình hiển thị định sẵn, ta khai báo thêm lớp . navbar-expand-* cho thẻ <nav>, trong đó dấu * là chỉ định kích thước màn hình muốn thanh điều hướng hiển thị theo chiều dọc.

.navbar-expand-sm: Tạo thanh điều hướng dọc trên vùng hiển thị có kích thước nhỏ hơn 576px.
.navbar-expand-md: Tạo thanh điều hướng dọc trên vùng hiển thị có kích thước nhỏ hơn 768px.
.navbar-expand-lg: Tạo thanh điều hướng dọc trên vùng hiển thị có kích thước nhỏ hơn 992px.
.navbar-expand-xl: Tạo thanh điều hướng dọc trên vùng hiển thị có kích thước nhỏ hơn 1200px.

Ví dụ sau đây sẽ tạo thanh điều hướng theo chiều ngang, chỉ xoay dọc khi kích thước màn hình nhỏ hơn 576px (ví dụ như các loại điện thoại di động phổ biến):

<a class="nav-link" href="#">Trang 1</a>

</li>

<a class="nav-link" href="#">Trang 2</a>

</li>

<a class="nav-link" href="#">Trang 3</a>

</li>

</ul>

</nav>

Kết quả thu được:

Kích thước hiển thị dưới 576px Kích thước hiển thị lớn hơn hoặc bằng 576px

* Các lớp và thuộc tính khác.

- Để tối ưu hiển thị cho nút bấm, đem lại sự thuận tiện cho người sử dụng, khi tạo thanh điều hướng thường sử dụng kết hợp với 1 số thuộc tính nhằm tạo thanh điều hướng có thể thu gọn bằng nút bấm.

Để tạo thanh điều hướng thu gọn, ta tạo 1 thẻ <div> bao toàn bộ nội dung liên kết muốn thu gọn, thêm 1 thẻ <button> dùng làm nút bấm.

Yêu cầu:

+ Thẻ <div> có khai báo:

</li>

</li>

</li>

</ul>

</div>

+ Nút có các khai báo:

</button>

Lưu ý: Giá trị thuộc tính data-target của thẻ <button> trùng với giá trị thuộc tính id của thẻ <div>.

- Để trang trí màu sắc cho các đối tượng trong thanh điều hướng, thư viện Bootstrap cung cấp 2 lớp màu:

+ Lớp .navbar-dark: Dùng khi tạo đối tượng có màu sáng.

+ Lớp .navbar-light: Dùng khi tạo đối tượng có màu tối.

3. Đối tượng đa phương tiện

Bootstrap cung cấp một cách dễ dàng để căn chỉnh các đối tượng phương tiện (như hình ảnh hoặc video) cùng với nội dung. Các đối tượng phương tiện thường được sử dụng để hiển thị các bình luận blog, tweet, v.v.

Đối tượng media cơ bản: Để tạo một đối tượng media, hãy thêm lớp .media vào phần tử vùng chứa và đặt nội dung phương tiện bên trong vùng chứa con với lớp .media-div. Thêm đệm và lề nếu cần, với các tiện ích giãn cách:

Ví dụ:

<div class="media border p-3">
  <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-div">
    <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

Đối tượng phương tiện lồng nhau: Các đối tượng media cũng có thể được lồng vào nhau (một đối tượng media bên trong một đối tượng media): Để lồng các đối tượng phương tiện, hãy đặt một vùng chứa .media mới bên trong vùng chứa .media-div:

Ví dụ:

<div class="media border p-3">
  <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-div">
    <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
    <p>Lorem ipsum...</p>
    <div class="media p-3">
      <img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-div">
        <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
        <p>Lorem ipsum...</p>
      </div>
    </div>
  </div>
</div>

Để căn phải hình ảnh phương tiện, hãy thêm hình ảnh sau vùng chứa .media-div:

Ví dụ:

<div class="media border p-3">
  <div class="media-div">
    <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
  <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>

Sử dụng các tiện ích flex, các lớp align-self- * để đặt đối tượng media ở trên cùng, giữa hoặc ở dưới cùng. Ví dụ:

<div class="media">
  <img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-div">
    <h4>Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>


<div class="media">
  <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-div">
    <h4>Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>


<div class="media">
  <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-div">
    <h4>Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

4. Nhóm danh sách

Để tạo một nhóm danh sách cơ bản, hãy sử dụng phần tử <ul> với lớp .list-group và phần tử <li> với lớp .list-group-item:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Sử dụng lớp .active để đánh dấu mục hiện tại:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Để tạo nhóm danh sách với các mục được liên kết, hãy sử dụng <div> thay vì <ul> và <a> thay vì <li>. Theo tùy chọn, hãy thêm lớp .list-group-item-action nếu bạn muốn có màu nền xám khi di chuột:

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Lớp .disabled thêm màu văn bản sáng hơn vào mục đã tắt. Và khi được sử dụng trên các liên kết, nó sẽ loại bỏ hiệu ứng di chuột:

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Sử dụng lớp .list-group-flush để loại bỏ một số đường viền và các góc tròn:

Ví dụ:

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Nếu bạn muốn các mục trong danh sách hiển thị theo chiều ngang thay vì theo chiều dọc (cạnh nhau thay vì chồng lên nhau), hãy thêm lớp .list-group-ngang vào .list-group:

Ví dụ:

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Các lớp để tô màu danh sách-mục là: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-item-nguy hiểm , .list-group-item-primary, list-group-item-dark và list-group-item-light ,:

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Kết hợp các lớp .badge với các lớp tiện ích / trợ giúp để thêm huy hiệu bên trong nhóm danh sách:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>

5. Các panels

Hãy sử dụng thành phần panel khi bạn muốn đặt nội dung của bạn vào bên trong một chiếc hộp.

Ví dụ cơ bản: Theo mặc định, toàn bộ những gì .panel làm là thiết lập một số đường viền cơ bản và padding để chứa nội dung của bạn.

Basic panel example

</div>

Panel có tiêu đề: Bạn có thể thêm tiêu đề cho panel bằng cách sử dụng .panel-heading. Bạn cũng có thể sử dụng các thẻ từ <h1> tới <h6> cùng với class .panel-title để style thêm cho tiêu đề.

Ví dụ:

<div class="panel-heading">Panel heading without title</div>

Panel content

</div>

<h3 class="panel-title">Panel title</h3>

</div>

Panel content

</div>

Biến thể theo ngữ cảnh: Tương tự như các thành phần khác, bạn có thể dễ dàng tạo ra các panel theo ngữ cảnh cụ thể bằng cách sử dụng các class trạng thái theo ngữ cảnh.

Ví dụ:

6. Nhúng responsive

Thành phần nhúng responsive: Thành phần này cho phép các trình duyệt xác định kích thước của video hoặc slideshow dựa trên chiều rộng của block chứa chúng bằng cách tạo ra một tỷ lệ mà có thể thay đổi một cách thích hợp trên các loại thiết bị khác nhau.

Các quy tắc được áp dụng trực tiếp trên các phần tử <iframe>, <embed>, và <object>; Khi bạn muốn ghép style cho các thuộc tính khác, hãy sử dụng class .embed-responsive-item.

Ví dụ:

7. Các thành phần khác

Bootstrap 4: Nhóm Input

Lớp .input-group là vùng chứa để nâng cao Input bằng cách thêm biểu tượng, văn bản hoặc nút vào phía trước hoặc phía sau trường nhập dưới dạng "văn bản trợ giúp".

Sử dụng .input-group-append để thêm văn bản trợ giúp vào trước Input và .input-group-append để thêm văn bản đó vào sau Input.

Ví dụ:

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>

Nhiều input: Thêm nhiều input hoặc phần bổ trợ:

Ví dụ:

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Person</span>
    </div>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
</form>


<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

Nhóm input với checkbox và radio. Bạn cũng có thể sử dụng checkbox và radio thay vì văn bản:

Ví dụ:

Input Group Buttons

Ví dụ:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-danger" type="button">Cancel</button>
  </div>
</div>

Input Group với Dropdown Button

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

Input Group Labels

Ví dụ:

<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

BÀI 4: JAVASCRIPT TRONG BOOTSTRAP

Thành phần modal là một hộp thoại/cửa sổ bật lên được hiển thị trên đầu trang hiện tại:

Ví dụ:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>


<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      
      <div class="modal-div">
        Modal div..
      </div>

      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Thêm hiệu ứng: Sử dụng lớp .fade để thêm hiệu ứng mờ dần khi mở và đóng modal:

Ví dụ:

<div class="modal fade"></div>


<div class="modal"></div>

Kích thước modal:

Thay đổi kích thước của modal bằng cách thêm lớp .modal-sm cho modal nhỏ, lớp .modal-lg cho modal lớn hoặc .modal-xl cho modal cực lớn.

Thêm lớp kích thước vào phần tử <div> với hộp thoại .modal-class:

Mặc định modal có kích thước trung bình.

Căn giữa modal theo chiều dọc và chiều ngang trong trang, với lớp .modal-hộp thoại làm trung tâm:

Khi bạn có nhiều nội dung bên trong modal, một thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó:

Tuy nhiên, có thể chỉ cuộn bên trong modal, thay vì chính trang, bằng cách thêm .modal-hộp thoại-cuộn được vào .modal-hộp thoại:

Menu thả xuống là một menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước:

Ví dụ:

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

Giải thích ví dụ

Lớp .dropdown chỉ ra một menu thả xuống.

Để mở menu thả xuống, hãy sử dụng nút hoặc liên kết có lớp .dropdown-toggle và thuộc tính data-toggle = "dropdown".

Thêm lớp .dropdown-menu vào phần tử <div> để thực sự tạo menu thả xuống. Sau đó, thêm lớp .dropdown-item vào từng phần tử (liên kết hoặc nút) bên trong menu thả xuống.

Dải phân cách thả xuống

Lớp .dropdown-divider được sử dụng để phân tách các liên kết bên trong menu thả xuống bằng đường viền ngang mỏng:

Kết quả ví dụ:

Tiêu đề menu thả xuống: Lớp .dropdown-header được sử dụng để thêm tiêu đề bên trong menu thả xuống:

Dropdown button

</button>

<h5 class="dropdown-header">Dropdown header</h5>

<h5 class="dropdown-header">Dropdown header</h5>

<a class="dropdown-item" href="#">Another link</a>

</div>

Kết quả:

Đánh dấu một mục thả xuống cụ thể với lớp .active (thêm màu nền xanh lam).

Để tắt một mục trong menu thả xuống, hãy sử dụng lớp .disabled (có màu văn bản xám nhạt và biểu tượng "biển báo cấm đỗ" khi di chuột):

Dropdown button

</button>

<a class="dropdown-item" href="#">Normal</a>

<a class="dropdown-item active" href="#">Active</a>

<a class="dropdown-item disabled" href="#">Disabled</a>

</div>

Grouped Buttons with a Dropdown. Ví dụ:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

Split Button Dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
  </div>
</div>

3. Tooltips (chú giải)

Thành phần tooltip là hộp bật lên nhỏ xuất hiện khi người dùng di chuyển con trỏ chuột qua một phần tử:

Để tạo chú giải công cụ, hãy thêm thuộc tính data-toggle = "tooltip" vào một phần tử.

Sử dụng thuộc tính title để chỉ định văn bản sẽ được hiển thị bên trong chú giải công cụ:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Theo mặc định, chú giải công cụ sẽ xuất hiện trên đầu phần tử.

Sử dụng thuộc tính vị trí dữ liệu để đặt vị trí của chú giải công cụ ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Thành phần Popover tương tự như chú giải công cụ; nó là một hộp bật lên xuất hiện khi người dùng nhấp vào một phần tử. Sự khác biệt là cửa sổ bật lên có thể chứa nhiều nội dung hơn.

Để tạo một cửa sổ bật lên, hãy thêm thuộc tính data-toggle = "cửa sổ bật lên" vào một phần tử.

Sử dụng thuộc tính title để chỉ định văn bản tiêu đề của popover và sử dụng thuộc tính data-content để chỉ định văn bản sẽ được hiển thị bên trong nội dung của popover:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Theo mặc định, cửa sổ bật lên sẽ xuất hiện ở phía bên phải của phần tử.

Sử dụng thuộc tính data-position để đặt vị trí của cửa sổ bật lên ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử:

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

5. Alert

Bootstrap 4 cung cấp một cách dễ dàng để tạo các thông báo cảnh báo được xác định trước:

Cảnh báo được tạo bằng lớp .alert, theo sau là một trong các lớp theo ngữ cảnh .alert-success, .alert-info, .alert-warning, .alert-risk, .alert-primary, .alert-Secondary, .alert-light hoặc .alert-dark:

Ví dụ:

<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Liên kết cảnh báo: Thêm lớp liên kết cảnh báo vào bất kỳ liên kết nào bên trong hộp cảnh báo để tạo "liên kết màu phù hợp":

Ví dụ:

<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

6. Collapse

Collapsibles hữu ích khi bạn muốn ẩn và hiển thị một lượng lớn nội dung:

Ví dụ:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">

Lorem ipsum dolor text....
</div>

Giải thích ví dụ

Lớp .collapse chỉ ra một phần tử có thể thu gọn (một <div> trong ví dụ của chúng ta); đây là nội dung sẽ được hiển thị hoặc ẩn bằng một cú nhấp chuột.

Để kiểm soát (hiển thị / ẩn) nội dung có thể thu gọn, hãy thêm thuộc tính data-toggle = "sập" vào phần tử <a> hoặc <button>. Sau đó, thêm thuộc tính data-target = "# id" để kết nối nút với nội dung có thể thu gọn (<div id = "demo">).

Lưu ý: Đối với các phần tử <a>, bạn có thể sử dụng thuộc tính href thay vì thuộc tính data-target:

<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">

Lorem ipsum dolor text....
</div>

Theo mặc định, nội dung thu gọn được ẩn. Tuy nhiên, bạn có thể thêm lớp .show để hiển thị nội dung theo mặc định:

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

Nhóm collapse:

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-div">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-div">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-div">
        Lorem ipsum..
      </div>
    </div>
  </div>
</div>

7. Carousel

Carousel là một trình chiếu để đi vòng qua các phần tử.

Cách tạo Carousel. Ví dụ sau cho thấy cách tạo băng chuyền cơ bản với các chỉ báo và điều khiển:

Hỏi đáp

MÔN HỌC

Thiet ke layout web voi CSS Framework

Nội dung tài liệu

Các tài liệu liên quan

Có thể bạn quan tâm

Thông tin tài liệu

BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK

1. Giới thiệu Bootstrap Framework

2. Download và sử dụng Bootstrap

BÀI 2: CSS TRONG BOOTSTRAP

1. Hệ thống lưới

2. Định dạng (typography)

3. Tạo bảng biểu

4. Sử dụng Form

5. Sử dụng nút lệnh

6. Sử dụng ảnh

BÀI 3: CÁC THÀNH PHẦN TRONG BOOTSTRAP

1. Các thành phần trong form

2. Các thành phần điều hướng

3. Đối tượng đa phương tiện

4. Nhóm danh sách

5. Các panels

6. Nhúng responsive

7. Các thành phần khác

BÀI 4: JAVASCRIPT TRONG BOOTSTRAP

3. Tooltips (chú giải)

4. Popover

5. Alert

6. Collapse

7. Carousel

Thiet ke layout web voi CSS Framework

Nội dung tài liệu

Các tài liệu liên quan

Có thể bạn quan tâm

Thông tin tài liệu

BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK

1. Giới thiệu Bootstrap Framework

2. Download và sử dụng Bootstrap

BÀI 2: CSS TRONG BOOTSTRAP

1. Hệ thống lưới

2. Định dạng (typography)

3. Tạo bảng biểu

4. Sử dụng Form

5. Sử dụng nút lệnh

6. Sử dụng ảnh

BÀI 3: CÁC THÀNH PHẦN TRONG BOOTSTRAP

1. Các thành phần trong form

2. Các thành phần điều hướng

3. Đối tượng đa phương tiện

4. Nhóm danh sách

5. Các panels

6. Nhúng responsive

7. Các thành phần khác

BÀI 4: JAVASCRIPT TRONG BOOTSTRAP

1. Hiệu ứng Modal

2. Dropdown

3. Tooltips (chú giải)

4. Popover

5. Alert

6. Collapse

7. Carousel