thiết kế giao diện website sử dụng bootstrap

Thiết kế website để tạo sự hiện diện mới của doanh nghiệp/cánhân trên internet, để khách hàng tiềm năng tiếp xúc với những sản phẩm ngườidùng muốn quảng bá.Lợi ích mà thiết kế website đe

MỞ ĐẦU

Ngày nay, website đã trở thành công cụ không thể thiếu cho các cá nhân, tổ chức,doanh nghiệp hoạt động trên mặt bằng nền tảng số Website là thương hiệu củacông ty/cá nhân, công cụ hiệu quả để tiến hành các chiến dịch quảng cáo vàmarketing online Thiết kế website để tạo sự hiện diện mới của doanh nghiệp/cánhân trên internet, để khách hàng tiềm năng tiếp xúc với những sản phẩm ngườidùng muốn quảng bá.

Lợi ích mà thiết kế website đem lại cho các tổ chức/cá nhân:

- Website giúp cho thương hiệu của tổ chức/cá nhân có thể tiếp cận được thị trườngthế giới.

- Cung cấp thông tin đầy đủ, nhanh chóng và hàng loạt thông tin về sản phẩm,thương hiệu cho khách hàng.

- Các tổ chức có thể hoạt động kinh doanh thoải mái, không kể đến vị trí, đốitượng…

- Dễ dàng theo dõi, kiểm soát, tìm kiếm và làm khách hàng hài lòng Từ đó, tổ chứcdễ dàng tìm hiểu về suy nghĩ và nhu cầu của khách tiềm năng, nâng cao danh tiếngcủa bản thân.

- Tiết kiệm nhiều chi phí cần thiết trong các chiến dịch Marketing cũng như các chiphí quảng bá thương hiệu khác.

Khi thiết kế website, các lập trình viên luôn ưu tiên lựa chọn Bootstrap để sử dụng,bởi những lý do sau:

thể sử dụng Bootstrap Các tệp của nó được biên dịch để dễ dàng truy cập và chỉyêu cầu kiến thức cơ bản về HTML, CSS và JS để sửa đổi chúng.

Để tăng thời gian tải trang của trang web, Bootstrap giảm thiểu các tệp CSS vàJavaScript Ngoài ra, Bootstrap duy trì sự nhất quán về cú pháp giữa các trang webvà nhà phát triển, điều này rất thích hợp cho các dự án nhóm.

thể kết hợp nó với mã hiện có và bổ sung các chức năng của nhau

Bạn cũng có thể tạo phiên bản tùy chỉnh của Bootstrap thông qua trang tùy chỉnhcủa nó Để làm điều này, bạn phải loại trừ tất cả các thành phần và plugin mà bạnkhông cần trước khi tải xuống tệp Bootstrap Ngoài ra, có một phần nơi bạn có thểthay đổi các giá trị biến, do đó cho phép bạn tạo các mẫu của riêng mình.

nhà phát triển này với nhà phát triển khác Do đó, bạn có thể duy trì sự ổn định củacác yếu tố dự án của mình bất kể ai đang giải quyết chúng

Bootstrap tương thích trên hầu hết các trình duyệt như Chrome, Firefox, InternetExplorer, Safari và Opera, v.v

responsive Bootstrap hoạt động theo xu hướng mobile first – tức là hệ thống sẽ tựđộng ưu tiên giao diện trên mobile trước, nên điều này giúp cải thiện hiệu suất trangweb khi người dùng truy cập bằng mobile.

Bạn không cần phải mất khoản chi phí nào để mua bản quyền, mà đồng thời cònđược tự do thay đổi nó theo cách mà mình mong muốn.

Bootstrap là một lựa chọn hoàn hảo dành cho những ai đang có nhu cầu phát triểntrang web hay ứng dụng trên web trong một thời gian ngắn Bạn chỉ cần chọn mộtmẫu website với chủ đề bất kì, việc còn lại cần làm đó chính là thêm màu sắc hìnhảnh và video là bạn đã có ngay một giao diện đẹp và phù hợp

2

Chương 1 GIỚI THIỆU BOOTSTRAP

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạora một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵnnhư kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sảnphẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trongquá trình thiết kế giao diện website.

1.2 Lịch sử của Bootstrap

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter Nó được xuấtbản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub Tên gọi ban đầu làTwitter Blueprint.

Bootstrap phiên bản 2 đã được phát hành ngày 31/1/2012 Bootstrap 2 được bổ sungbố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước.Bootstrap 3 ra đời vào ngày 19/8/2013 với giao diện tương thích với smartphone.Tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển.Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015.Phiên bản mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap4.3.1 Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế websitecó lượng người dùng “khủng” nhất.

1.3 Các file chính của Bootstrap

Bootstrap có 3 file chính giúp quản lý các chức năng của Website và giao diệnngười dùng: Bootstrap.CSS, Bootstrap.JS, Glyphicons.

* Bootstrap.CSS:

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các trangWeb HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý bố cục củaWebsite Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thực hiện được hànhđộng cụ thể.

* Bootstrap.JS:

Chứa các File JavaScript chịu trách nhiệm cho việc tương tác của Website Để tiếtkiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sẽ sử dụng jQuery.

Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn thêm nhiều chứcnăng vào trang Web.

* Glyphicons:

Trong giao diện trang Web, phần không thể thiếu chính là Icons Chúng thườngđược liên kết với các dữ liệu nhất định và các hành động trong giao diện ngườidùng.

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa bộ HalflingsGlyphicons để bạn sử dụng miễn phí Tại bản miễn phí, tuy chỉ có giao diện chuẩnnhưng phù hợp với các chức năng thiết yếu.

1.4 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ợpvới hầu hết các mã nguồn mở như WordPress, Joomla, Magento,…

Bootstrap có 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 trongquá 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.

1.5 Một số điểm mới của Bootstrap 4

- Dung lượng File Bootstrap.min.CSS giảm đi đáng kể, từ 121KB chỉ còn 88KB.- Sử dụng Sass thay thế LESS để giúp bạn sử dụng đồng thời nhiều khả năng tùybiến hơn.

- Không còn hỗ trợ IE8: Đa phần các nhà làm Web sẽ gặp hiển thị lỗi trên IE8 Vìvậy mà phần mềm này đã đổi từ đơn vị px sang đơn vị EM hoặc REM Nó sẽ giúpcho các thành phần trong Website có thể đổi kích thước tương ứng mà không làmảnh hưởng đến cấu trúc.

- Hỗ trợ Flexbox: Giúp các nhà phát triển Web có thể sắp xếp các phần tử trênWebsite một cách linh hoạt Chỉ với vài dòng lệnh đơn giản là các phần tử củaWebsite đã được sắp xếp theo đúng ý đồ.

- Bổ sung thêm các Class tiện ích.

4

Chương 2 Hướng dẫn sử dụng Bootstrap

- Tải Bootstrap từ trang chủ https://getbootstrap.com/ (hoặc từ nguồn trang riêng)

- Sau khi tải về, giải nén sẽ nhận được cấu trúc gồm hai thư mục JS và CSS:

- Nhúng các file bootstrap.min.css và bootstrap.min.js vào tài liệu HTML: <!DOCTYPE html>

<meta charset="UTF-8"><title>Bootstrap example</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" type="text/css"href="css/bootstrap.min.css">

<h1>Learning Bootstrap</h1> <script

src="https://code.jquery.com/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script></body>

6

Sử dụng CDN Bootstrap:

Nếu không muốn tải xuống và lưu trữ Bootstrap trên thiết bị thì có thể nhúngBootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội dung).Đây là cách mà đa số lập trình viên sử dụng để nhúng Bootstrap vì tiết kiệm băngthông cũng như tích hợp JavaScript, CSS, thư viện jQuerry mang đến nhiều tínhnăng cho website và nâng cao trải nghiệm người dùng hơn.

<! Nhúng CSS >

<!—Chèn thư viện jquery >

<! Nhúng JavaScript >

Lưu ý: Bootstrap yêu cầu sử dụng loại tài liệu HTML5:

2.2 Hướng dẫn sử dụng Bootstrap2.2.1 Bootstrap containers

Container dùng để bọc tất cả các thành phần của web vào trong nó Nó giống nhưmột cái khung trong đó ta chứa đựng các thành phần của web.

Khi sử dụng trên webiste của riêng mình, người dùng cần bọc toàn bộ nội dungtrong webiste bằng thẻ container class container ( hoặc container-fluid) Trongđó:

Container class cung cấp một container với chiều rộng tương thích (responsivefixed width container).

Container-fluid class cung cấp một container có chiều rộng đầy đủ, trải rộng toànbộ chiều rộng của khung nhìn (full width container).

Cấu hình padding cho container:

Mặc định các container trong bootstrap có padding left và right là 15px Nó khôngcó padding top và bottom Chúng ta có thể thêm các class:

+ pt-*: để container có padding top;

+pb-*: để container có padding bottom;+ p-*: để container có thêm padding;Cấu hình border và color cho container:

Sử dụng class border thiết lập đường viền cho container.

Sử dụng các class về mầu sắc (chữ và nền) để thiết lập color cho container

Cấu hình Responsive kích thước cho container:

Chúng ta có thể sử dụng container-sm|md|lg|xl để tạo chức năng responsive chowebsite hiển thị trên các thiết bị khác nhau Ứng với mỗi sm, md, lg, xl tương ứngvới độ rộng theo px như sau:

Màn hình cực nhỏ (<576px)

Màn hình nhỏ (>=576px)

Màn hình vừa (>= 768px)

Màn hình lớn (>=992px)

Màn hình cực lớn

2.2.2 Lưới Bootstrap (Bootstrap Grid System)

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 trong một classrow 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ượngkhông gian cột tương ứng được chỉ định trong tổng số 12 cột.

Nếu chúng ta định nghĩa một class “.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ỏ.Các quy tác khi sử dụng hệ thống lưới trong Bootstrap:

- Các hàng phải đặt trong một class container hoặc container-liquid.- Sử dụng các hàng để tạo nhóm cột ngang.

- Các cột là con của các hàng, nội dung nên đặt trong cột.- Tạo khoảng cách giữa các cột thông qua padding.

- Cột được tạo ra băng cách chỉ định số lượng cột trong tổng số 12 cột.

- Độ rộng của cột được tính theo tỷ lệ % để linh hoạt và kích thước tương ứng vớiphần tử cha.

- Bootstrap 4 được hỗ trợ flexbox nên các cột nếu không được chỉ định chiều rộngsẽ tự động bố cục thành các cột có chiều rộng và chiều cao bằng nhau.

Ví dụ:

- Ta có 1 dòng gồm có 2 div trong đó, chia tỉ lệ là div 1 chiếm 3 cột và div 2 chiếm9 cột như sau.

- Nếu như chúng ta để cho bootstrap tự quản lý layout thì ta không cần thêm sốlượng cột vào Lúc này bootstrap sẽ tự chia các div với kích thước bằng nhau.

+ Bootstrap sẽ lấy 100% chia cho 3 div Như vậy mỗi div sẽ có khoảng cách bằngnhau và chiếm 33.33%.

2.2.3 Phân loại thiết bị

Thiết kế web bằng Bootstrap phân loại các thiết bị khác nhau dựa trên 4 cơ sở kíchthước dưới đây, và mỗi loại đều được tượng trưng bởi một ký hiệu cụ thể:

Hệ thống lưới Bootstrap 4 có 5 class:

.col- (extra small devices – chiều rộng màn hình < 576px).col-sm- (small devices – chiều rộng màn hình >= 576px).col-md- (medium devices – chiều rộng màn hình >= 768px).col-lg- (large devices – chiều rộng màn hình >= 992px).col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)2.2.4 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 đầutrang (thẻ <head>) Thêm tham chiếu của jQuery.js và bootstrap.js ở dưới cùng củathẻ body.

Thêm class container trên các phần tử header, footer 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.

Ví dụ trang web được chia với tỉ lệ 3:6:3 như sau:- Thêm một class row.

- Bên trong class row thêm 3 class col-md-3, col-md-6, col-md-3 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 6cộ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.

2.2.5 Thêm thực đơn (menu) điều hướng

10

Sử dụng class nav trong Bootstrap để tạo ra các kiểu menu nằm ngang hay nằmdọc.

Menu nằm ngang:

- Sử dụng class nav trong các thẻ Và theo sau đó là các class ul nav-item trongcác thẻ li Nếu trong menu có thêm link tới một website khác thì dùng class nav-link

- Để canh giữa thì chúng ta sử dụng class justify-content-center lúc này thanhmenu sẽ nằm giữa màn hình

- Nếu muốn thanh menu mà nằm bên trái thì dùng class justify-content-end.- Dùng class navbar-fixed-top được sử dụng để sửa vị trí của thanh menu trên đầutrang khi cuộn trang Tương tự, chúng ta có lớp navbar-fixed-bottom để sửa thanhmenu ở cuối trang.

Menu nằm dọc:

Có thể làm các thanh menu nằm dọc bằng cách thêm class là flex-column cho thẻul

* Tab trong Bootstrap:

Sử dụng thêm class nav-tab cho thẻ và class ul active để tạo các tab.

2.2.6 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 class khác nhau để đại diện cho các biểu tượng khác nhau.Tên class bắt đầu bằng glyphicon-* Tất cả các biểu tượng glyphicon không miễnphí nhưng thiết kế website với Bootstrap, vẫn có một số biểu tượng miễn phí chophé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à khai báo 2 class cho nó Một là.glyphicon và lớp khác là lớp biểu tượng cụ thể glyphicon-*.

- Ví dụ:+ Đoạn code:

12

+ Kết quả:

2.2.7 Hình ảnh trong bootstrap

Bootstrap 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ớicá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

2.2.8 Table trong bootstrap

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

Để tạo được list trong web thì chúng ta sử dụng thẻ ul và class list-group như sau:

Để làm highlight một phần tử trong list ta sử dụng class active như sau:

Ta có thể tạo ra một list (danh sách) và mỗi phần tử trong danh sách sẽ link tới mộtđịa chỉ URL Ta sẽ sử dụng thẻ div thay cho thẻ ul.

Disable các phần tử trong list: ta có thể làm mờ đi các phần tử trong list không chongười dùng bấm vào bằng cách sử dụng class disabled.

20

Xóa border xung quanh các phần tử trong list: sử dụng class list-group-flush.

Hiển thị danh sách list theo chiều ngang: sử dụng class .list-group-horizontaltrong list-group như sau:

Thêm màu sắc cho các phần tử: sử dụng các class để tạo màu sắc cho các phần tửtrong list như: list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary,list-group-item-dark và list-group-item-light.

Thêm badges cho các phần tử:

Sử dụng class badge và các class định dạng * (primary, secondary ) để tạo ra một Badge Thường sử dụng badge cho các phần tử hiện thịdạng inline như a, span Nếu muốn các badge góc bo tròn hơn nữa thì thêmvào badge-pill.

.badge-Khi sử dụng badge cho các link (phần tử <a>) thì các link đó có hiệu ứng khi hovercho biết đang focus trên nó.

1Badge là các đối tượng hiển thị giống như các nhãn, các tag, một hộp nhỏ chứa nội dung để người dùng chúý Ví dụ sau tiêu đề bài viết có một dòng chữ thông báo là bài viết mới, bên cạnh giỏ hàng hiện thị số lượngsản phẩm,

22