Đeo giày của bạn,
và chúng ta hãy bắt đầu với Bootstrap.
Tôi chắc rằng ngón tay của bạn đang ngứa để có được bàn tay của bạn xung quanh Bootstrap.
Vì vậy, bước đầu tiên, đi đến
các hướng dẫn tập thể dục mà theo dõi video này
trong trang khóa học Bootstrap của bạn trên Coursera.
Và sau đó trong hướng dẫn,
bạn sẽ thấy một liên kết đến tập tin này Bootstrap4-starter.zip.
Tải tệp zip xuống máy tính của bạn.
Ngoài ra, các hướng dẫn từng bước được minh họa trong video này
cũng sẽ được đưa ra trong hướng dẫn tập thể dục theo dõi video này.
Ở đó, bạn sẽ có quyền truy cập vào bất kỳ đoạn mã mà bạn cần cho bài tập này.
Đây sẽ là trường hợp cho tất cả các bài tập trong tương lai, quá.
Vì vậy, nếu bạn cần phải có được giữ của các đoạn mã,
đó là nơi bạn sẽ tìm thấy chúng.
Sau khi bạn tải xuống tệp zip,
di chuyển tệp zip đó đến một vị trí thuận tiện trên máy tính của bạn.
Vì vậy, ở đây, tôi đã chuyển nó vào một thư mục có tên là Coursera trên máy tính của tôi,
và sau đó tôi có tập tin zip với tên dài này ở đó.
Chỉ cần giải nén tập tin.
Một khi bạn giải nén tập tin,
bạn sẽ tìm thấy một thư mục tên Bootstrap4 được tạo ra trong máy tính của bạn.
Bên trong thư mục Bootstrap4,
bạn sẽ thấy một thư mục khác có tên Confect, ở đó.
Đi vào thư mục Confect và bạn sẽ thấy hai tập tin ở đó,
index.html và tập tin package.json.
Bây giờ, mở một cửa sổ lệnh hoặc
một thiết bị đầu cuối và sau đó di chuyển đến thư mục này trong cửa sổ lệnh hoặc thiết bị đầu cuối của bạn.
Tại dấu nhắc lệnh, gõ npm install.
Lưu ý rằng tôi đã có tập tin package.json trong đó.
Vì vậy, tập tin package.json được cấu hình sao cho
sự phụ thuộc phát triển lite-server sẽ được cài đặt nếu tôi gõ npm cài đặt.
Vì vậy, một khi bạn gõ npm install,
bạn sẽ thấy rằng lite-server sẽ được cài đặt trong thư mục node_modules của bạn mỗi.
Sau khi hoàn tất việc này, hãy
mở thư mục này trong trình soạn thảo yêu thích của bạn.
Một khi bạn đã mở thư mục trong trình soạn thảo của bạn,
tạo tệp.gitignore và
sau đó đặt node_modules vào tệp gitignore và lưu.
Vì vậy, điều này là để đảm bảo rằng khi bạn thực hiện một gitcommit,
thư mục node_modules sẽ không được cam kết.
Sau đó, đó là thời gian để đi và lấy Bootstrap để sử dụng trong dự án của chúng tôi.
Trước khi chúng tôi lấy Bootstrap, chúng
ta hãy thực hiện một cam kết của trạng thái hiện tại của tập tin.
Vì vậy, làm git init và khởi tạo kho lưu trữ git của bạn.
Sau đó, bạn có thể kiểm tra trạng thái git,
và bạn sẽ thấy rằng các tập tin này cần phải được cam kết,
thêm tất cả các tập tin,
gitcommit -m “Initial Setup”.
Vì vậy, đây là điểm khởi đầu của thư mục của bạn tại thời điểm này.
Vì vậy, với điều này, điểm khởi đầu của dự án web của bạn đã được cam kết với git.
Bây giờ bạn có thể thiết lập git này để đồng bộ hóa với một kho lưu trữ trực tuyến,
giống như chúng ta đã nói về trong các bài tập git.
Vì vậy, bạn có thể thiết lập một kho lưu trữ hoặc trên Bitbucket hoặc trên Github và sau đó
đồng bộ hóa dự án này với kho git đó.
Bước tiếp theo của chúng tôi là đi và lấy Bootstrap.
Để làm điều đó, thêm kiểu nhắc npm cài đặt bootstrap @4 .0.0 và cũng —save,
và để Bootstrap được cài đặt.
Một khi Bootstrap được cài đặt,
chúng tôi nhận ra rằng chúng tôi cũng cần phải cài đặt ngang hàng của nó,
đó là jQuery cũng như Popper.js.
Vì vậy, chúng ta hãy đi trước và cài đặt cả jQuery và Popper.js vào thư mục dự án này.
Vì vậy, để làm điều đó, thêm dấu nhắc loại npm cài đặt
jquery @3 .3.1
và Popper.js @1 .12.9 —save.
Bây giờ, bất cứ khi nào tôi cài đặt bất kỳ gói npm nào,
tôi rõ ràng chỉ định phiên bản của gói mà bạn nên cài đặt.
Lý do cho điều này là tôi muốn đảm bảo rằng khi bạn trải qua bài tập này,
tất cả các bước sẽ hoạt động chính xác.
Vì vậy, tôi chỉ định phiên bản chính xác của các mô-đun npm được cài đặt.
Vì vậy, ở đây, chúng tôi đang cài đặt jQuery phiên bản 3.3.1 và Popper.js phiên bản 1.12.9.
Sau đó, tôi cũng sẽ chỉ định các phiên bản chính xác của các mô-đun được cài đặt.
Vì vậy, chúng ta hãy đi trước và cài đặt những điều này.
Và một khi chúng được cài đặt,
chúng ta có thể đi đến bước tiếp theo.
Quay trở lại thư mục dự án của chúng tôi,
bạn sẽ thấy rằng nếu bạn đi vào node_modules,
bạn sẽ thấy một thư mục trong đó có tên Bootstrap.
Và bên trong thư mục có tên Bootstrap,
bạn sẽ tìm thấy một thư mục có tên dist.
Vì vậy, bên trong thư mục dist,
bạn sẽ tìm thấy hai thư mục con tên CSS và js.
Nếu bạn đi vào thư mục CSS,
bạn sẽ tìm thấy một loạt các tập tin CSS được biên dịch sẵn ở đây.
Một trong đó là quan tâm đến chúng tôi ngay từ đầu là Bootstrap min.css.
Đó là tập tin mà chúng tôi sẽ đưa vào
tập tin index.html của chúng tôi để sử dụng Bootstrap trong dự án của chúng tôi.
Tương tự như vậy, đi đến thư mục js,
bạn sẽ thấy rằng có một tập tin Bootstrap min.js.
Chúng tôi sẽ bao gồm điều đó cũng vào index.htm của chúng tôi.
Vì vậy, đó sẽ là bước tiếp theo mà bạn sẽ thấy tôi đang làm.
Trước khi chúng tôi đi đến bước tiếp theo, chúng ta
hãy khởi động máy chủ lite-server của chúng tôi để chúng ta có thể thấy những thay đổi mà chúng tôi thực hiện đối với
index.html ngay lập tức phản ánh vào trang web của chúng tôi trong thời gian thực.
Vì vậy, chúng ta hãy khởi động máy chủ lite-server.
Vì vậy, gõ dấu nhắc loại npm bắt đầu,
và sau đó sẽ khởi động máy chủ lite-server của bạn.
Bây giờ bạn có thể thấy, trên màn hình,
trình soạn thảo của tôi ở bên trái và phiên bản hiện tại của trang index.html ở bên phải.
Vì vậy, như bạn có thể thấy,
tôi đã cấu hình trang index.html với một số nội dung.
Trang web này trông giống như trang web điển hình của một giáo sư khoa học máy tính.
Bây giờ hãy mở trang index.html trong trình soạn thảo của chúng tôi.
Và sau đó trong phần đầu của trang index.html,
ngay trước tiêu đề,
tôi sẽ dán một chút mã.
Đoạn mã này được cung cấp cho bạn trong hướng dẫn.
Vì vậy, bạn có thể chỉ cần sao chép và dán đoạn mã này,
và tôi sẽ hướng dẫn bạn qua những gì đoạn mã này đang cố gắng để làm.
Bạn sẽ nhận thấy rằng tôi có ba thẻ meta ở đây.
Người đầu tiên nói charset="utf-8".
Vì vậy, đây là unicode sẽ được sử dụng.
Dòng thứ hai nói meta name="viewport”,
tôi sẽ trở lại và giải thích dòng cụ thể này cho
bạn trong bài học tiếp theo khi chúng ta sẽ xem xét thiết kế web đáp ứng.
Bây giờ, hãy để tôi thu hút sự chú ý của bạn đến dòng cụ thể này mà
nói liên kết rel="stylesheet”, và sau đó href.
Lưu ý rằng tôi chỉ định href là “node_modules/bootstrap/dist/css/bootstrap.min.css”.
Vì vậy, những gì tôi đang chỉ định là tập tin bootstrap.min.css,
trong đó có các lớp CSS tương ứng với Bootstrap mà chúng tôi đã
tải về bằng cách sử dụng NPM vào thư mục node_modules của chúng
tôi, tôi sẽ đưa vào đầu trang index.html của tôi.
Vì vậy, bạn cần phải bao gồm các lớp CSS được cung cấp bởi Bootstrap.
Bạn cũng cần phải bao gồm các lớp học JavaScript được cung cấp bởi Bootstrap,
mà chúng tôi sẽ làm ở dưới cùng của trang này.
Đi đến cuối trang này, lưu ý,
ngay trước khi thẻ cơ thể đóng,
tôi sẽ dán vào mã để bao gồm tất cả các kịch bản ở đó.
Vì vậy, để làm điều đó,
tôi chỉ cần dán trong ba dòng cho kịch bản để bao gồm jQuery,
Popper.js, và cũng Bootstrap min.js.
Và lưu ý thứ tự mà tôi đã bao gồm điều này.
Vì vậy, Bootstrap là ở phía dưới.
Sau đó, kể từ khi Bootstrap phụ thuộc vào cả jQuery và Popper theo thứ tự đó,
vì vậy tôi sẽ đầu tiên nhập jQuery.
Và sau đó, chúng tôi nhập Popper, và sau đó cuối cùng,
Bootstrap min.js ở dưới cùng của tập tin index.html.
Bây giờ, điều này được bao gồm ở cuối trang.
Bởi vì khi bạn đang tải trang từ một máy chủ web,
bạn muốn các lớp CSS được tải ngay lập tức để khi trang bắt đầu hiển thị,
khi JavaScript được lấy,
JavaScript cần phải thực hiện để thực hiện thay đổi
trang của bạn với mã JavaScript,
và sẽ mất một chút thời gian.
Vì vậy, bạn không muốn người dùng chờ đợi cho
toàn bộ trang được tải trước khi họ nhìn thấy một cái gì đó trong cửa sổ trình duyệt của họ.
Vì vậy, đó là lý do tại sao chúng tôi thường tải các lớp JavaScript
về phía cuối trang html của chúng tôi ngay trước khi công nghệ cơ thể.
Sau khi thực hiện những thay đổi này,
hãy lưu tệp.
Bây giờ, lý do tại sao tôi hiển thị các
tập tin index.html trong trình soạn thảo của tôi và cũng là trình duyệt ngay bên cạnh nó là,
thời điểm bạn lưu những thay đổi mà bạn đã thực hiện cho các tập tin index.html,
lưu ý làm thế nào trình duyệt hiển thị của tập tin đó
ngay lập tức cập nhật và xem Bootstrap đã hoạt động trên trang.
Ngay bây giờ, bạn sẽ thấy rằng trang của bạn đang sử dụng Times New Roman để hiển thị tất cả nội dung.
Thời điểm tôi lưu trang web,
bạn nhận thấy rằng các phông chữ đang được sử dụng trên trang web của bạn đã thay đổi.
Bây giờ, trang web của bạn được thiết lập để sử dụng các lớp Bootstrap,
và nó sử dụng Bootstraps mặc định typography để hiển thị tất cả nội dung.
Bootstrap theo mặc định sử dụng Helvetica Neue cho phông chữ.
Bạn có thể thay đổi phông chữ mặc định cho bootstrap và như vậy,
nhưng điều đó sẽ vượt quá phạm vi thảo luận của chúng tôi ngay bây giờ.
Vì vậy, một khi bạn thiết lập trang index.html của bạn và lưu nó,
bạn sẽ ngay lập tức thấy Bootstrap đi vào hành động trong trang web của chúng tôi.
Vì vậy, đây là cách tôi sẽ tiếp tục minh họa,
khi chúng ta thêm khác nhau bootstraps, CSS class,
và các thành phần vào trang web của chúng tôi,
làm thế nào render của nó trong trình duyệt của chúng tôi sẽ tiếp tục thay đổi.
Bây giờ, rõ ràng, việc hiển thị trang trong trình duyệt của chúng tôi vẫn còn khủng khiếp.
Nó tốt hơn so với trang web giáo sư khoa học máy tính điển hình,
nhưng chắc chắn không thể đọc được.
Bây giờ chúng ta cần phải đưa vào hành động các lớp CSS khác nhau và
các thành phần JavaScript mà
khung giao diện người dùng web Bootstrap của chúng tôi cung cấp để thiết kế trang web của chúng tôi.
Vì vậy, chúng tôi sẽ làm điều đó từng bước khi chúng tôi đi qua bài tập này.
Đây có thể là một thời gian thuận tiện để bạn thực hiện một git cam kết
các thay đổi mà bạn đã thực hiện để vào cuối bài tập này,
trạng thái của thư mục dự án của bạn sẽ được lưu vào kho git của bạn.
Đi đến thư mục Confance của tôi trong một tab khác của cửa sổ thiết bị đầu cuối của
tôi, nếu
tôi gõ trạng thái git, bây giờ tôi thấy rằng tệp index.html của tôi và gói tệp JSON đã được sửa đổi.
Vì vậy, tôi sẽ thực hiện một cam kết.
Vì vậy, bây giờ, tình trạng
của tôi về thư mục ở phần cuối của bài tập này đã được cam kết để kho lưu trữ git của tôi.
Bạn có thể đồng bộ hóa nó với kho lưu trữ trực tuyến
của bạn để trạng thái của dự án của bạn sẽ được lưu tại thời điểm này.
Với điều này, chúng tôi hoàn thành bài tập Bootstrap đầu tiên của chúng tôi.
Bây giờ bạn đã thấy làm thế nào chúng tôi có thể cấu hình Bootstrap để được sử dụng trong dự án web của chúng tôi.
Khi chúng tôi tiến hành các bài tập tiếp theo,
chúng tôi sẽ nhân viên các lớp Bootstrap để thiết kế các trang web của chúng tôi.