Tự học Bootstrap - Cơ bản - bài 32 – Menu cố định Affix

Công cụ Affix

Cộng cụ Affix cho phép 01 phần tử bị khóa lại ở 01 khu vực nào đó trong trang web. Ta thường sử dụng hiệu ứng này với menu điều hướng hoặc các nút biểu tượng mạng xã hội , làm cho chúng "dính" ở 01 vị trí định sẵn trong khi cuộn lên hay cuộn xuống.

Ta có thể bật tắt công cụ này bằng cách thay đổi giá trị CSS position từ static thành fixed), tùy thuộc vào vị trí cuộn.

Ví dụ 1: Thanh điều hướng ngang cố định

Ví dụ 2: Thanh menu dọc cố định

Với công cụ Affix, khi bạn cuộn trang lên hoặc xuống , menu luôn hiện ra và cố định tại 01 vị trí.

---

Cách tạo 01 menu điều hướng dạng ngang

Ví dụ sau cho thấy cách tạo 01 menu điều hướng cố định nằm ngang:

Tự học Bootstrap - Cơ bản - bài 31 – Scrollspy

Công cụ Scrollspy

Công cụ Scrollspy dùng để tự động cập nhật liên kết dựa vào vị trí thanh cuộn

---

Cách tạo Scrollspy

Ví dụ sau cho thấy cách tạo 01 scrollspy:

Tự học Bootstrap - Cơ bản - bài 30 – Popover

Công cụ Popover

Popover là 01 cách đơn giản để tạo chú thích; nó là 01 hộp pop-up xuất hiện khi người dùng nhấp chuột lên 01 đối tượng. Sự khác biệt ở chỗ popover có thể chứa những thứ khác ngoài nội dung.

Mẹo: Công cụ có thể được cài đặt riêng (sử dụng file "popover.js" trong bộ nguồn Bootstrap's), hoặc tất cả trong 01 file "bootstrap.js" hoặc "bootstrap.min.js").

---

Cách tạo 01 Popover

Để tạo 01 popover, thêm thuộc tính data-toggle="popover" vào phần tử HTML.

Tự học Bootstrap - Cơ bản - bài 29 – Tooltip

Công cụ Tooltip

Tooltip chính là hộp pop-up nhỏ xuất hiện khi ta rê chuột lên 01 đối tượng .

Mẹo: công cụ này có thể được tích hợp độc lập trong 01 file (trong Bootstrap chính là file "tooltip.js"), hoặc tất cả trong 01 (khi dùng "bootstrap.js" hoặc "bootstrap.min.js").

---

Cách tạo 01 Tooltip

Để tạo 01 tooltip, ta thêm thuộc tính data-toggle="tooltip" vào 01 đối tượng.

Sử dụng thuộc tính title để xác định dòng văn bản hiển thị trong tooltip:

Tự học Bootstrap - Cơ bản - bài 28 – Popup Modal

Popup Modal Plugin

Popup Modal là 01 hộp thoại hiển thị trong phần trên cùng của trang hiện hành.

Mẹo: Plugins này có thể đi kèm với 01 file (nếu là Bootstrap's thì là file "modal.js" file), hoặc tất cả trong 01 (nếu dùng "bootstrap.js" hoặc "bootstrap.min.js").

---

Cách tạo 01 popup Modal

Ví dụ sau hiển thị 01 popup modal cơ bản.

Tự học Bootstrap - Cơ bản - bài 27 – Bộ ảnh trượt

Plugin ảnh trượt Carousel Plugin

Plugin Carousel là 01 công cụ dùng để tạo bộ ảnh trượt (slideshow).

Mẹp: Plugins có thể tích hợp riêng biệt (sử dụng file của Bootstrap "carousel.js"), hoặc tất cả trong 01 file "bootstrap.js" hoặc "bootstrap.min.js").

---

Ví dụ:

Ghi chú: Plugin Carousels không hỗ trợ chính xác trên Internet Explorer 9 và các phiên bản cũ hơn (bởi vì chúng hoạt động nhờ hiệu ứng CSS3 transitions và các hiệu ứng động để tạo ra hiệu ứng trượt).

---

Cách tạo 01 bộ ảnh trượt

Tự học Bootstrap - Cơ bản - bài 26 - Đối tượng Media

Các đối tượng Media

Bootstrap cung cấp 01 cách canh lề các đối tượng media (như hình ảnh hoặc videos) ở bên trái hay bên phải nội dung. Thường được dùng để hiển thị bình luận trong blog , tweets...

Đối tượng Media cơ bản

Canh trái

Tự học Bootstrap - Cơ bản - bài 25 - Định dạng kích cỡ thẻ Input

Định kích cỡ ô nhập liệu trong Forms

Dùng các lớp như .input-lg và .input-sm.

Thiết lập chiều rộng của các phần tử sử dụng các lớp cột lưới như .col-lg-* và .col-sm-*.

---

Định chiều cao

Ví dụ sau cho thấy các ô nhập liệu với chiều cao khác nhau.

<form>
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

Bạn có thể nhanh chóng định kích cỡ các nhãn và điều khiển trong form bên trong 01 Form ngang bằng cách thêm phần .form-group-* vào thẻ <div class="form-group">

Ví dụ:

Tự học Bootstrap - Cơ bản - bài 24 - Định dạng thẻ Input phần 2

Static Control

Nếu bạn cần chèn văn bản thuần kế bên 01 nhãn nằm trong 01 form ngang , dùng lớp .form-control-static trong 01 thẻ <p>

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@Ví dụ:.com</p>
    </div>
  </div>
</form>

---

Nhóm input trong Bootstrap

Lớp .input-group là 01 lớp chứa khoảng trống để thêm vào 01 biểu tượng ,văn bản, hoặc nút bấm trước hoặc sau đổi tượng input.

Lớp .input-group-addon đính với 01 biểu tượng hoặc chú thích kế bên trường input.

Ví dụ:

Tự học Bootstrap - Cơ bản - bài 23 - Định dạng thẻ Input

Các loại điều khiển được hỗ trợ

Bootstrap hỗ trợ các điều khiển sau:

• input
• textarea
• checkbox
• radio
• select

---

Bootstrap Input

Bootstrap hỗ trợ tất cả các dạng input chuẩn HTML5: văn bản, mật khẩu, ngày giờ, múi giờ, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, số điện thoại, và màu sắc.

Ghi chú: các ô nhập liệu sẽ KHÔNG được định dạng đầy đủ nếu không khai báo loại rõ ràng!

Ví dụ sau chứa 02 ô nhập liệu ; 01 là văn bản thuần và 01 là mật khẩu.

Tự học Bootstrap - Cơ bản - bài 22 - Định dạng Form

Các thiết lập mặc định của Bootstrap

Các điều khiển trong Form tự động nhận 01 vài định dạng chung của Bootstrap:

Tất cả các phần tử nhập liệu <input>, <textarea>, và <select> nếu dùng lớp .form-control sẽ có bề rộng 100%.

---

Định dạng form Bootstrap

Bootstrap cung cấp 03 loại form layouts:

• Dọc (mặc định).
• Ngang.
• Trên cùng 01 hàng.

Các quy tắc cơ bản của 03 dạng form layouts này:

• Bao bọc các labels và các điều khiển là thẻ <div class="form-group"> (cần thiết để tối ưu khoảng trống)
• Thêm lớp .form-control vào tất cả các thẻ nhập liệu <input>, <textarea>, và <select>

---

Định dạng form Bootstrap theo chiều dọc (mặc định)

Tự học Bootstrap - Cơ bản - bài 21 - Menu điều hướng

Các thanh điều hướng

01 thanh điều hướng là 01 thanh được gắn ở phần top của trang.

Với Bootstrap, 01 thanh điều hướng có thể thu phóng theo kích thước màn hình.

01 thanh điều hướng được tạo bởi lớp <nav class="navbar navbar-default">.

Ví dụ sau thêm 01 thanh điều hướng vào phần top của trang web:

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
...

Tự học Bootstrap - Cơ bản - bài 20 - Menu TAB và Menu Pill

Menus

Hầu hết các trang web đều có 01 loại menu nào đó.

Trong HTML, 01 menu thường được xác định bằng thẻ <ul> như thế này:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Nếu bạn muốn tạo 01 menu ngang thêm lớp .list-inline vào thẻ <ul>:

<ul class="list-inline">

Hoặc bạn có thể hiển thị menu trên bằng Bootstraps' Tabs và Pills (xem bên dưới).

Tự học Bootstrap - Cơ bản - bài 19 – Menu Collapse

Collapsible cơ bản là gì?

Collapsibles hữu ích khi bạn muốn ẩn/hiện 01 lượng lớn nội dung.

Ví dụ:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lớp học vi tính.COM....</div>

Giải thích ví dụ:

Tự học Bootstrap - Cơ bản - bài 18 - Menu dropdown

Menu Dropdown cơ bản

01 menu dropdown là 01 menu có thể dãn ra/thu lại cho phép người dùng chọn 01 giá trị từ danh sách xác định trước.

Ví dụ:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ Dropdown:
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Giải thích

Tự học Bootstrap - Cơ bản - bài 17 - Thanh panel

Panels là gì

Trong bootstrap, panel là 01 hộp có đường viền với các lùi dòng bao quanh nội dung.

Panels được tạo ra bởi lớp .panel, và nội dung bên trong panel dùng lớp .panel-body

Ví dụ:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Lớp .panel-default được dùng để định dạng màu sắc của. Sẽ được đề cập ở cuối bài.

---

Panel Heading

Lớp .panel-heading thêm phần tiêu đề vào panel.

Tự học Bootstrap - Cơ bản - bài 16 – Các nhóm danh sách

Các nhóm danh sách cơ bản

Nhóm danh sách cơ bản nhất là danh sách k có thứ tự với các đề mục.

Để tạo ra 01 danh sách cơ bản, dùng thẻ <ul> với lớp .list-group, và thẻ <li> với lớp .list-group-item

<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>

---

Danh sách với nhãn số

Bạn cũng có thể thêm nhãn số vào 01 danh sách. Nhãn số sẽ xuất hiện bên phải danh sách.

Để tạo nhãn số , tạo 01 thẻ <span> với lớp .badge bên trong thẻ <li>

Tự học Bootstrap - Cơ bản - bài 15 – Pager – LÙI - TIẾN

Pager là gì?

Pager cũng là 01 hình thức phân trang.

Pager cung cấp nút LÙI và TIẾN (liên kết).

Để tạo nút LÙI/TIẾN , thêm lớp .pager vào thẻ <ul>

Ví dụ:

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Kết quả:

Canh lề các nút bấm

Dùng lớp .previous và .next để canh lề mỗi nút về mỗi hướng của trang web.

Ví dụ:

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Kết quả:

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48