báo cáo bài tập lớn thực hành dự án 1inf52117 đề tài tìm hiểu công cụ bootstrap

Trang 1 TRƯỜNG ĐẠI HỌC HẢI PHÒNGKHOA CÔNG NGHỆ THÔNG TIN--- --- BÁO CÁO BÀI TẬP LỚN HỌC PHẦN: THỰC HÀNH DỰ ÁN 1INF52117ĐỀ TÀI:TÌM HIỂU CƠNG CỤ BOOTSTRAP HỌ VÀ TÊN SINH VIÊN: Phạm Tiến

TRƯỜNG ĐẠI HỌC HẢI PHÒNG

KHOA CÔNG NGHỆ THÔNG TIN -   -

BÁO CÁO BÀI TẬP LỚN

HỌC PHẦN: THỰC HÀNH DỰ ÁN 1(INF52117)

ĐỀ TÀI:

TÌM HIỂU CÔNG CỤ BOOTSTRAP

HỌ VÀ TÊN SINH VIÊN: Phạm Tiến Huy

Đinh Thị Hồng Nhung Phạm Thị Thanh Huyền Nguyễn Trọng Nghĩa Lớp: Công nghệ thông tin 1.K22

GIẢNG VIÊN HƯỚNG DẪN: TS.ĐÀO THỊ HƯỜNG

Hải Phòng 2023

DANH SÁCH PHÂN CÔNG NHIỆM VỤ

1 Phạm Tiến Huy Tìm hiểu về côngcụ Bootstrap

2 Đinh Thị Hồng Nhung Tìm hiểu về công

LỜI CẢM ƠN

Trước hết, em xin bày tỏ lòng biết ơn sâu sắc tới cô Đào Thị Hường, người

đã trực tiếp hướng dẫn và tận tình giúp đỡ em hoàn thành báo cáo này

Em xin chân thành cảm ơn sự giúp đỡ của toàn thể các Giảng viên Khoacông nghệ thông tin của trường Đại học Hải Phòng đã dìu dắt, dạy dỗ em cả vềkiến thức chuyên môn và tinh thần học tập độc lập, sáng tạo để em có đượckiến thức thực hiện báo cáo thực tập của mình

Cuối cùng, em xin bày tỏ lòng biết ơn sâu đậm của mình tới gia đình, bạn

bè những người luôn sát cánh bên em, tạo mọi điều kiện tốt nhất để em có thểthực hiện báo cáo thực tập của mình

Trong quá trình thực hiện làm đề tài báo cáo thực tập, mặc dù đã cố gắnghết sức song do thời gian và khả năng có hạn nên em không thể tránh khỏinhững thiếu sót Vì vậy, em rất mong nhận được sự thông cảm, chỉ bảo và giúp

đỡ của các thầy giáo, cô giáo và các bạn

Một lần nữa em xin chân thành cảmơn

MỤC LỤC

MỤC LỤC 1

DANH MỤC HÌNH ẢNH 3

LỜI MỞ ĐẦU 4

I.GIỚI THIỆU VỀ CÔNG CỤ BOOTSTRAP 5

1 Bootstrap là gì? 5

2 Lịch sử của Bootstrap 5

3 Ba file chính của Bootstrap 5

3.1 Bootstrap CSS 5

3.2 Bootstrap.JS 6

3.3 Glyphicons 7

4 Tại sao nên dùng Bootstrap? 7

4.1 Dễ dàng thao tác 8

4.2 Tùy chỉnh dễ dàng 8

4.3 Chất lượng sản phẩm đầu ra hoàn hảo 8

4.4 Độ tương thích cao 8

5 Cấu trúc và tính năng của Bootstrap là gì? 8

6 Cách cài đặt Bootstrap 9

6.1 Tải về từ trang Bootstrap 9

6.2 Bootstrap từ CDN 11

7 Bootstrap 4 có gì mới? 11

8 Hướng dẫn sử dụng Bootstrap 4 cơ bản 12

8.1 Thêm HTML5 doctype 12

8.2 Bootstrap4 mobile-first là gì? 13

8.3 Bootstrap 4 containers là gì? 13

8.4 Ví dụ trang Bootstrap 4 cơ bản 14

8.5 Bootstrap 4 Grid System là gì? 14

8.5.1 Bootstrap 4 Grid System có 5 lớp 15

8.5.2 Cấu trúc Bootstrap 4 Grid System 15

9 Cách nhúng Bootstrap vào HTML 16

9.1 Nhúng từ liên kết của Bootstrap 16

9.2 Nhúng Bootstrap vào HTML bằng cách tự Host 16

II CÀI ĐẶT VÀ THỰC NGHIỆM 18

10 Web tạo bằng Bootstrap 18

11 Phần mềm cài đặt 18

DANH MỤC HÌNH ẢNH

Hình ảnh 2: Lịch sử của Bootstrap 5

Hình ảnh 3.2: Bootstrap JS 6

Hình ảnh 4: Bootstrap 7

Hình ảnh 5: Cấu trúc và tính năng của Bootstrap 9

Hình ảnh 6.1: Cách cài đặt Bootstrap 10

Hình ảnh 6.1.1: Sử dụng Bootstrap để thiết kế 10

Hình ảnh 6.2: Bootstrap từ CDN 11

Hình ảnh 6.2.1: Nhúng Bootstrap 11

Hình ảnh 8: Sử dụng Bootstrap 4 cơ bản 12

Hình ảnh 8.1: Thêm HTML5 doctype 13

Hình ảnh 8.2: Bootstrap4 mobile-first 13

Hình ảnh 8.3: Bootstrap 4 containers 14

Hình ảnh 8.4: Ví dụ về Bootstrap 4 14

Hình ảnh 8.5: Mô hình Grid System Của Bootstrap 4 Grid System 15

Hình ảnh 8.5.2: Cấu trúc Bootstrap 4 Grid System 15

Hình ảnh 9.1: Nhúng từ liên kết của Bootstrap 16

Hình ảnh 9.2: Nhúng Bootstrap vào HTML bằng cách tự Host 17

Hình ảnh 10: Web tạo bằng Bootstrap 18

Hình ảnh 11: Phần mềm cài đặt 18

LỜI MỞ ĐẦU

Bootstrap là một framework front-end quan trọng trong phát triển web,giúp nhà phát triển IT xây dựng trang web nhanh chóng với giao diện linh hoạt,đẹp mắt và tương thích di động Nó cung cấp các thành phần UI đã thiết kếtrước, hệ thống grid linh hoạt, và hỗ trợ JavaScript, giảm độ phức tạp trong quátrình phát triển và đồng thời đảm bảo tính nhất quán trên nhiều nền tảng và trìnhduyệt Điểm mạnh của Bootstrap còn nằm ở khả năng tương thích di động, tíchhợp JavaScript và plugin, giúp cải thiện trải nghiệm người dùng và tối ưu hóahiệu suất trang web

Bootstrap không chỉ giúp tạo ra giao diện người dùng thuận tiện mà còncung cấp một cộng đồng lớn, động viên sự chia sẻ và tái sử dụng mã nguồn mở.Điều này mang lại lợi ích từ các dự án đã được xây dựng và kiểm tra một cáchrộng rãi, giảm rủi ro lỗi và tăng khả năng bảo trì

Ngoài ra, Bootstrap hỗ trợ tùy chỉnh thông qua biến và CSS, cho phépnhà phát triển cá nhân hóa giao diện theo yêu cầu cụ thể của dự án Hệ thốnggrid của nó cung cấp khả năng linh hoạt trong việc điều chỉnh bố cục trang web

để đáp ứng nhu cầu động của người dùng và thiết bị

Tóm lại, Bootstrap không chỉ là một công cụ linh hoạt và mạnh mẽ cho việc phát triển web mà còn là một cộng đồng và môi trường hỗ trợ tích cực cho các nhà phát triển IT

I.GIỚI THIỆU VỀ CÔNG CỤ 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ạo ra 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ẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sángtạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc vớiframework này trong quá trình thiết kế giao diện website

2 Lịch sử của Bootstrap

Hình ảnh 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ất bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub Têngọi ban đầu là Twitter Blueprint

3 Ba file chính của Bootstrap

Bootstrap.CSS

Bootstrap.JS

3.1 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 trang Web 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ủa Website 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ể

Giờ bạn sẽ không phải tốn thời gian để chỉnh sửa thủ công chỉ để thay đổi một thiết kế nhỏ Thay vào đó, bạn có thể dùng CSS để tạo giao diện thống nhất trên nhiều Website mà không bị giới hạn

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng, bố cục hình Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và bộ chọn

3.2 Bootstrap.JS

Hình ảnh 3.2: Bootstrap JS

Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tương tác của Website Để tiết kiệ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ức năng vào trang Web

Theo kinh nghiệm của tôi, jQuery sẽ thực hiện một số chức năng như:

 Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt.

 Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript

 jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS

 Thêm một số tính năng động cho nội dung các trang Web của bạn

3.3 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 độngtrong giao diện người dùng

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở

khóa bộ Halflings Glyphicons để bạn sử dụng miễn phí Tại bản miễnphí, tuy chỉ có giao diện chuẩn nhưng phù hợp với các chức năng thiếtyếu

Nếu như bạn muốn có các Icon phong cách hơn thì có thể mua bộ

bộ Icon Premium khác nhau Chắc chắn các Icon tại Glyphicons sẽ giúpcho trang Web của bạn trông đẹp và nổi bật hơn

4 Tại sao nên dùng Bootstrap?

Hình ảnh 4: Bootstrap

Bootstrap có những đặc điểm nổi bật sau:

● Dễ dàng thao tác

● Tùy chỉnh dễ dàng

● Chất lượng sản phẩm đầu ra hoàn hảo

● Độ tương thích cao

4.1 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àymớ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 ý

4.2 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ạthơ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ầntải mã nguồn về máy

4.3 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 tranhiều lần trước khi đưa vào sử dụng Do đó, khi chọn Bootstrap, bạn có thể tinrằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất

4.4 Độ tương thích cao

Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trìnhduyệt và nền tảng Đây là một điều cực kì quan trọng và cần thiết trong trảinghiệm người dùng Sử dụng Grid System cùng với hai bộ tiền xử lý Less vàSass, Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trênthiết bị di động hơn Bootstrap có khả năng tự động điều chỉnh kích thước trangwebsite 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

5 Cấu trúc và tính năng của Bootstrap là gì?

Hình ảnh 5: 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êndị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ổibậ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ướckhi 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áccá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 ảnhlàm biểu tượng và tăng tốc độ tải trang

6 Cách cài đặt Bootstrap

Có hai cách phổ biến để tải Bootstrap về web hosting của bạn:

● Tải trực tiếp từ trang cung cấp Bootstrap

● Thông qua CDN Bootstrap

6.1 Tải về từ trang Bootstrap

Hình ảnh 6.1: Cách cài đặt Bootstrap

Có thể tải Bootstrap từ trang chủ https://getbootstrap.com/ Sau khi tải về,bạn sẽ nhận được cấu trúc gồm hai thư mục JS và CSS Cần giải nén và cài đặtvào web hosting thông qua giao thức FTP Có thể xem bài viết “FTP là gì?” đểbiết cách sử dụng giao thức FTP trao đổi dữ liệu giữa máy cá nhân và webhosting

Chỉ với những bước đơn giản trên, người dùng đã có thể sử dụngBootstrap cho việc thiết kế ngay lập tức Vì đây là phiên bản được biên dịch sẵnnên quá trình tải về và nhúng Bootstrap vào website diễn ra vô cùng nhanhchóng Ví dụ như dưới đây:

6.2 Bootstrap từ CDN

Hình ảnh 6.2: Bootstrap từ CDN

Nếu không muốn tải xuống và lưu trữ Bootstrap trên thiết bị Có thểnhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phốinộ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ăng thông cũng như tích hợp JavaScript, CSS, thư viện jQuerry mangđến nhiều tính năng cho website và nâng cao trải nghiệm người dùng hơn

Hình ảnh 6.2.1: Nhúng Bootstrap

7 Bootstrap 4 có gì mới?

Một số đặc điểm mới của Bootstrap 4 gồm:

● 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ùy biế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ỗitrên IE8 Vì vậy mà phần mềm này đã đổi từ đơn vị px sang đơn vị EM hoặcREM Nó sẽ giúp cho 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ên Website 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ủa Website đã được sắp xếp theo đúng ý đồ

● Bổ sung các Class mới: Một điểm cộng nữa là so với các phiên bản cũ,

nó đã được bổ sung thêm các Class tiện ích

8 Hướng dẫn sử dụng Bootstrap 4 cơ bản

Hình ảnh 8.1: Thêm HTML5 doctype

8.2 Bootstrap4 mobile-first là gì?

Bootstrap 4 được thiết kế để đáp ứng cho các thiết bị di động Mobile-firstIndex là một phần cốt lõi của Bootstrap 4 Để đảm bảo hiển thị đúng và thuphóng khung của website linh hoạt với khung browser, hãy thêm thẻ <meta>sau vào bên trong phần tử <head>:

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ộidung trong 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(responsive fixed width container)

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

Hình ảnh 8.3: Bootstrap 4 containers

8.4 Ví dụ trang Bootstrap 4 cơ bản

Đây là ví dụ Bootstrap 4 sử dụng Container-fluid class Responsive (

fixed width container):

Hình ảnh 8.4: Ví dụ về Bootstrap 4

8.5 Bootstrap 4 Grid System là gì?

Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện(web responsive) của Bootstrap Khi khởi động Bootstrap, giao diện của nó sẽhiển thị dưới dạng lưới (grid) Bootstrap được chia thành 12 cột đặt trong mộtclass row Trong đó, mỗi cột sẽ bao gồm các Padding tương ứng với từng độphân giải của mỗi thiết bị (điện thoại, tablet, máy tính)

Hình ảnh 8.5: Mô hình Grid System Của Bootstrap 4 Grid System

8.5.1 Bootstrap 4 Grid System có 5 lớp

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

8.5.2 Cấu trúc Bootstrap 4 Grid System

Dưới đây là cấu trúc đơn giản nhất của Bootstrap 4 Grid System

Hình ảnh 8.5.2: Cấu trúc Bootstrap 4 Grid System

Với:

 Tạo dòng: <div class=”row”>

 Sau đó, thêm số lượng cột mong muốn (tags phù hợp cho lớp col-*-* ).Với (*) đầu tiên bạn xem lại các lớp của Grid System để đảm bảo sựchính xác (sm, md, lg hay xl) Dấu (*) thứ 2 đại diện cho số khung bạnmuốn chia từ 1 – 12

 Thay vì thêm số cho từng col, bootstrap có thể giúp bạn chia nhanh chónghơn Ví dụ muốn chia 2 “col” bạn có thể thêm thuộc tính width = 50%.Tương tự với 3 “col” bạn sẽ có width = 33.33% Để làm điều này bạncần có hiểu biết về CSS

 Để tiết kiệm thời gian bạn nên dùng col-sm|md|lg|xl để nó tương thích dễhơn

9 Cách nhúng Bootstrap vào HTML

9.1 Nhúng từ liên kết của Bootstrap

Phần mềm này cung cấp cho bạn các đường Link để nhúng trực tiếp vàoWebsite của mình Tuy nhiên, nó khá hạn chế vì phải tải liên kết từ bên ngoàinên khiến Website bị chậm lại.

Để thực hiện, bạn có thể tham khảo ví dụ của tôi về cú pháp như sau:

Hình ảnh 9.1: Nhúng từ liên kết của Bootstrap

9.2 Nhúng Bootstrap vào HTML bằng cách tự Host

Cách thực hiện khá đơn giản, bạn mở tập tin Index.html ra và bố trí cấu trúc như sau:

Hình ảnh 9.2: Nhúng Bootstrap vào HTML bằng cách tự Host

II CÀI ĐẶT VÀ THỰC NGHIỆM

10 Web tạo bằng Bootstrap

Hình ảnh 10: Web tạo bằng Bootstrap

11 Phần mềm cài đặt

Hình ảnh 11: Phần mềm cài đặt

KẾT LUẬN

Công cụ Bootstrap là một bộ công cụ miễn phí và nguồn mở để phát triểncác trang web và ứng dụng web đáp ứng Nó bao gồm các thành phần HTML,CSS và JavaScript được thiết kế để tạo ra các bố cục, biểu mẫu, nút và cácthành phần giao diện người dùng khác một cách dễ dàng và nhanh chóng.Bootstrap được sử dụng rộng rãi trong phát triển web và được ưa chuộngbởi nhiều nhà phát triển vì nhiều lý do:

Miễn phí và nguồn mở: Bootstrap có thể được sử dụng miễn phí và mãnguồn của nó có thể được sửa đổi theo nhu cầu của nhà phát triển

Dễ sử dụng: Bootstrap rất dễ học và sử dụng Nó có nhiều thành phần

được thiết kế sẵn có thể được sử dụng để tạo ra các trang web và ứng dụng webmột cách nhanh chóng và dễ dàng

Phản hồi: Bootstrap được thiết kế để tạo ra các trang web và ứng dụng

web đáp ứng Điều này có nghĩa là các trang web và ứng dụng web được tạo rabằng Bootstrap sẽ trông đẹp mắt trên mọi thiết bị, bất kể kích thước màn hình

Nhiều tính năng: Bootstrap có nhiều tính năng hữu ích, chẳng hạn như

hệ thống lưới, biểu mẫu, nút, thanh điều hướng và carousel Các tính năng nàygiúp việc phát triển các trang web và ứng dụng web trở nên dễ dàng và nhanhchóng hơn

Một số ví dụ về các trang web và ứng dụng web được phát triển bằngBootstrap:

Website của Google: Trang web của Google được phát triển bằng

Bootstrap và là một ví dụ điển hình về cách Bootstrap có thể được sử dụng đểtạo ra các trang web đáp ứng, dễ sử dụng và đẹp mắt

Ứng dụng web của Facebook: Ứng dụng web của Facebook được phát

triển bằng Bootstrap và là một ví dụ điển hình về cách Bootstrap có thể được sửdụng để tạo ra các ứng dụng web đáp ứng, dễ sử dụng và đẹp mắt

Website của Microsoft: Trang web của Microsoft được phát triển bằng

Bootstrap và là một ví dụ điển hình về cách Bootstrap có thể được sử dụng đểtạo ra các trang web đáp ứng, dễ sử dụng và đẹp mắt