Giáo trình Thiết kế layout Web với CSS Framework

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.

duAnWeb

css

js

index.html

...

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:

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:

o bootstrap.min.css

o jquery.min.js

o popper.min.js

o bootstrap.min.js

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

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"

></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></scr

ipt>

Đị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.

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

width -->

</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop

-->

</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 class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-

8</div>

</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 <body> 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ả <body>. Để bảo toàn

định dạng, hãy kết thúc tất cả các dòng bằng thẻ <br>.