Tạo Bootstrap
Trang web sẽ chứa các thư mục này sau khi được cài đặt thành công:
- Nội dung: bao gồm bootstrap.css
- Các file liên quan:
bootstrap.js
jquery.js.
JQuery được cài đặt vì boostrap.js có sự phụ thuộc vào thư viện JQuery.
Các loại Bootstrap
Để thiết kế web bằng Bootstrap
trên các thiết bị khác nhau chúng ta dựa trên 4 cơ sở kích thước Extra smail , Small, Mediyum, Large dưới đây, và mỗi loại đều được tượng trưng bởi một ký hiệu cụ thể:
- Sử dụng cho các thiết bị có chiều rộng <768px nằm trong danh mục các thiết bị cực nhỏ như thiết bị di động. Bootstrap cung cấp “xs” để đại diện cho các thiết bị này.
- Sử dụng cho thiết bị có chiều rộng >= 768px và <992px đều thuộc danh mục thiết bị nhỏ như thiết bị máy tính bảng. Bootstrap cung cấp “sm” để đại diện cho các thiết bị này.
- Sử dụng cho thiết bị có chiều rộng >= 992px và <1200px đều thuộc danh mục thiết bị trung bình như thiết bị máy tính xách tay. Bootstrap cung cấp “md” để đại diện cho các thiết bị này.
- Sử dụng cho các thiết bị có chiều rộng >= 1200px đều thuộc danh mục thiết bị lớn, chẳng hạn như thiết bị máy tính để bàn lớn. Bootstrap cung cấp biểu tượng “lg” để đại diện cho các thiết bị này.
Cấu trúc của Bootstrap bố trí lưới 12 cột
Thiết kế website với Bootstrap cung cấp cấu trúc bố trí dạng lưới với 12 cột. Bootstrap cơ bản chia chiều rộng thiết bị hoàn chỉnh thành 12 cột. Một số được chỉ định với lớp đại diện cho phần tử chứa lớp đó sẽ lấy số lượng không gian cột tương ứng được chỉ định trong tổng số 12 cột.
Ví dụ: Nếu chúng ta định nghĩa một lớp “.col-sm-6” trên phần tử thì điều này có nghĩa là phần tử này sẽ lấy không gian 6 cột trong tổng số 12 cột dành cho các thiết bị nhỏ.
Tạo bố cục cơ bản
- Thêm một trang HTML Home.html
- Thêm tham chiếu của bootstrap.css trên đầu trang
- Thêm tham chiếu của jQuery-1.9.1.js và bootstrap.js ở dưới cùng của thẻ body.
Lưu ý: mã user-scalable = no định nghĩa rằng người dùng không được phép phóng to trang web trên thiết bị di động.
Điều này sẽ tạo ra phần chứa chính. Thêm lớp .container trên các phần tử đầu trang, chân trang và các phần khác.
Nếu bạn không muốn sử dụng 12 cột độc lập, bạn có thể nhóm các cột lại với nhau để tạo nên những cột rộng hơn. Dưới đây là một ví dụ trang web được chia với tỉ lệ 3:6:3 như sau
Bên trong lớp .row thêm 3 lớp cột để cho Nav, nội dung chính và cho các nội dung liên quan khác. Xác định lớp .col-md-3, col-md-6, col-md-3 tương ứng. Các lớp này sẽ chia tổng cấu trúc 12 cột theo tỷ lệ 3:6:3.
Nghĩa là, điều hướng bên trái sẽ lấy 3 cột đầu tiên, khu vực nội dung chính sẽ lấy 6 cột tiếp theo và các nội dung liên quan khác sẽ chiếm 3 cột cuối cùng.
Thêm mục điều hướng
Thiết kế giao diện web bằng Bootstrap cung cấp thành phần Navbar để hiển thị mục điều hướng. Thanh điều hướng Bootstrap cung cấp nút chuyển đổi để hiển thị và ẩn các mục điều hướng theo định hướng trang web của bạn.
Thành phần Bootstrap Navbar bao gồm 2 phần chính:
có tiêu đề .navbar được hiển thị trên thiết bị di động, nó bao gồm nút chuyển đổi và logo và tên thương hiệu.
với .navbar-collapse bao gồm các liên kết và điều khiển biểu mẫu cho chức năng tìm kiếm.
Lớp .navbar-fixed-top được sử dụng để sửa vị trí của thanh điều hướng trên đầu trang khi cuộn trang. Tương tự, chúng ta có lớp .navbar-fixed-bottom để sửa thanh điều hướng ở cuối trang.
Thêm Glyphicon
Glyphicon là một thư viện sử dụng các ký tự Unicode để hiển thị một biểu tượng. Glyphicon cung cấp các lớp khác nhau để đại diện cho các biểu tượng khác nhau. Tên lớp bắt đầu bằng .glyphicon- *. Tất cả các biểu tượng glyphicon không miễn phí nhưng thiết kế website với Bootstrap, vẫn có một số biểu tượng miễn phí cho phép chúng ta sử dụng.
Để tạo biểu tượng, chúng ta chỉ cần thêm phần tử và cần cung cấp 2 lớp cho nó. Một là .glyphicon và lớp khác là lớp biểu tượng cụ thể .glyphicon- *.
Thêm Panel
Panel là các thành phần chứa và được sử dụng để chứa các nội dung khác. Một bảng điều khiển gồm 3 phần phụ:
- Tiêu đề bảng: Xác định tiêu đề bảng.
- Bảng điều khiển: Chứa nội dung chính.
- Bảng chân trang: Xác định chân trang bảng.
Để tạo một bảng điều khiển, chúng ta cần thêm lớp .panel. Chúng ta có thể sử dụng các lớp theo ngữ cảnh khác như: .panel-default, .panel-success, .panel-error, .panel-information, .panel-alert để tạo các loại bảng khác nhau cùng với lớp .panel.
- Sử dụng lớp .panle-header để tạo tiêu đề bảng và lớp .panel-title để tạo đầu đề cho bảng.
- Sử dụng lớp .panel-body để tạo thân bảng.
- Sử dụng lớp .panle-footer để tạo chân trang bảng điều khiển.
Thêm Jumbotron
Jumbotron được sử dụng để hiển thị văn bản hàng đầu trên trang web. Chúng ta có thể sử dụng jumbotron để làm nổi bật một số thông tin trên trang. Thiết kế web bằng Bootstrap cung cấp lớp .jumbotron để tạo thành phần hiển thị nội dung quan trọng nhất cho trang.
Thêm hình ảnh
Cung cấp lớp .img-responsive để tạo hình ảnh phản hồi. Lớp này hiển thị hình ảnh dưới dạng một thành phần khối và cũng làm cho chúng phản hồi nhanh với các kích thước thiết bị khác nhau.
Bootstrap cơ bản cũng cung cấp các lớp khác cho hình ảnh:
- .img-rounded: tạo hình ảnh góc tròn
- .img-thumbnail: tạo hình ảnh thu nhỏ
- .img-circle: cắt hình ảnh theo hình tròn
Thêm Table
Các bảng được sử dụng để hiển thị dữ liệu có cấu trúc ở dạng hàng và cột. Boostrap cung cấp lớp .table để tạo bảng phản hồi. Lớp .table sẽ xác định bố cục của bảng và đặt đường viền cho bảng. Thêm lớp .table-responsive để tạo bảng phản hồi.
Bootstrap cũng cung cấp các lớp bảng khác nhau:
- .table-striped: Tạo màu khác nhau của các hàng xen kẽ để các hàng của bảng trông giống như các dải.
- .table-condensed: Giảm chiều cao hàng của bảng và làm cho bảng cố định.
- .table-hover: Cung cấp hiệu ứng khi rê chuột.
Nhúng video
Với thiết kế giao diện web bằng Bootstrap, bạn có thể sử dụng thẻ,
Bootstrap cung cấp lớp .embed-responsive và các tỷ lệ khác nhau cho các tỷ lệ khung hình khác nhau:
- .embed-responsive-16by9: Hiển thị tỷ lệ nhúng hoặc video theo tỷ lệ chiều rộng và chiều cao 16:9.
- .embed-responsive-4by3: Hiển thị tỷ lệ nhúng hoặc video theo tỷ lệ chiều rộng và chiều cao 4:3.
