Giáo trình Thiết kế layout web với CSS framework

Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” cácthà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

Trang 1

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:

Trang 2

Kết quả:

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

mã nguồn mở HTML, CSS và Javascript Người dùng cần trang bị kiếnthứ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 ý

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ếtkiệm dung lượng vì không cần tải mã nguồn về máy

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ênnhững sản phẩm với chất lượng tốt nhất

bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diệntrên thiết bị di động hơn Bootstrap có khả năng tự động điều chỉnh kíchthước trang website theo khung browser Mục đích để phù hợp với mànhì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 tinJavaScript, CSS và fonts đã được biên dịch và nén lại Ngoài ra, Bootstrap đượcthiế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 đếnnhiề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ácthà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ảixuống và sử dụng nó tại trang web của khung

Trang 3

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ínhnă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ểutượ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ự ánweb, 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

Trang 4

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

Trang 5

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

css js index.html

duAnWeb

Trang 6

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.html theo cú pháp:

Trang 7

Định dạng file mẫu:

Trang 8

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

Trang 9

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ộidung của nó bên trong một container Container thiết lập thuộc tính width trêntất cả các kích thước được áp dụng vào media query để tương thích với hệ thốnglưới của chúng tôi Lưu ý rằng, do padding và chiều rộng cố định nên containermặ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ềurộ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íchvớ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ươngthí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ácchuỗ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ủaBootstrap 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áchthí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

Trang 10

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ằngpadding Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trongcá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ộngbằ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ủabạn

Media query: Chúng tôi sử dụng các media query sau trong các tập tinLess 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úngtô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ácmedia query này bằng cách thêm thuộc tính max-width

Trang 11

Các tùy chọn của lưới: Hãy xem hệ thống lưới của Bootstrap hoạt độngnhư 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áytí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

Trang 12

</div>

</div>

</div>

</div>

Ví dụ: Fluid container

Trang 13

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-widthbằng cách thay đổi container ngoài cùng thành container-fluid.

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êunhỏ 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ãyxem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động

<! Stack the columns on mobile by making one full-width and the other width >

half-<div class="row">

</div>

<! Columns start at 50% wide on mobile and bump up to 33.3% wide ondesktop >

</div>

Trang 14

<! Columns are always 50% wide, on mobile and desktop >

</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 classdành cho máy tính bảng col-sm-*

<! Optional: clear the XS cols if their content doesn't match in height > <div class="clearfix visible-xs-block"></div>

Trang 15

<! Add the extra clearfix for only the required viewport >

</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 resetoffset, 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-lg-6">.col-sm-6 col-md-5 col-lg-6</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ácclass col-md-offset-* Các class này làm tăng khoảng lề trái (margin-left) củamộ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ộtkhoảng cách bằng 4 lần chiều rộng của một cột

Trang 16

Để 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-.col-md-* đã tồn tại Các hàng nằm bên trong có thể chứa mộttập hợp các cột, tối đa là 12 hoặc ít hơn

Trang 17

Trang 19

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

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 trongvariables.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ụngthẻ <small> để thay đổi kích thước của những text đó bằng 85% so với kíchthước của phần tử cha Các phần tử tiêu đề nhận những font-size của riêng

Trang 20

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>

<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

Trang 21

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

Trang 22

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

Trang 23

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

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

Trang 24

Chi tiết theo hàng ngang: Hãy đặt các thuật ngữ và thông tin đi kèm bêntrong 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

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

Trang 25

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

Trang 26

Class Description

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ớiclass form-control được thiết lập mặc định width: 100%; Bọc các nhãn và cácform-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" placeholde

r="Enter password" id="pwd">

Trang 27

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ệclựa chọn 1 tùy chọn duy nhất

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

Trang 28

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ềutùy chọn cùng một lúc

Trang 29

Các form-control tĩnh: Khi bạn cần đặt một dòng text thuần bên cạnh

.form-control-static trên thẻ <p>

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

<p class= "form-control-static" >email@example.com</p> </div>

</div>

<label for= "inputPassword" class= "col-sm-2

control-label" >Password</label>

<input type= "password" class= "form-control" i

d "inputPassword" placeholder= "Password" >

</div>

</form>

số form-control và sử dụng box-shadow để hiển thị input như đang

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>

Trang 30

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

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

button>

<button type= "button" class= "btn btn-outline-dark" >Dark</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 primary

btn-lg"> Large < /button >

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

< button type="button" class="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ãntheo 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ộtcách dễ dàng

Trang 31

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:

Trang 32

Để 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 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ủahộp kiểm:

.custom-< form >

< div class="custom-control custom-checkbox">

< input type="checkbox" class="custom-control-input" i

< div class="custom-control custom-switch">

< input type="checkbox" class="custom-control-input" i

Định dạng
Số trang	65
Dung lượng	1,21 MB