Hướng dẫn Bootstrap này chỉ cho bạn cách tạo một trang web bằng Bootstrap từng bước. Từ thiết lập các tính năng cơ bản đến nâng cao. Tìm hiểu Bootstrap ngay bây giờ!

Bạn đang xem : cách tạo bootstrap

Bootstrap, là chủ đề của hướng dẫn này, là một khung giao diện người dùng giúp bạn xây dựng các trang web đáp ứng trên thiết bị di động nhiều hơn nhanh chóng và dễ dàng. Được phát triển lần đầu tiên bởi Twitter, nó hiện cung cấp mọi thứ từ các ứng dụng web đến các chủ đề WordPress. Người dùng nổi tiếng bao gồm Spotify, LinkedIn, trong số những người khác. Khung này cũng hoàn toàn miễn phí, linh hoạt và trực quan.

Với Bootstrap, bạn có thể gợi ý các trang web phức tạp từ HTML chuẩn và tùy chỉnh chúng theo nhu cầu của mình. Nó cũng đi kèm với các chức năng bổ sung như băng chuyền, nút, cửa sổ bật lên và hơn thế nữa.

Cuối cùng, nhưng không kém phần quan trọng, Bootstrap cung cấp cho bạn rất nhiều phím tắt để tạo trang web giúp bạn tiết kiệm thời gian và năng lượng. Tất cả những gì bạn cần là hiểu biết cơ bản về HTML và CSS để tạo các trang web đáp ứng, ưu tiên thiết bị di động và tương thích với tất cả các trình duyệt hiện đại.

Tái bút. Mặc dù Bootstrap rất tuyệt vời, nhưng nó không phải là một lựa chọn hoàn hảo cho những người mới bắt đầu hoàn chỉnh. Ngoài ra, nếu bạn hoàn toàn không có kinh nghiệm sử dụng đánh dấu, bạn có thể sử dụng công cụ tạo trang web hoặc WordPress để tạo trang web .

Hướng dẫn sử dụng Boostrap Bước 1: Thiết lập và tổng quan

Để sử dụng Bootstrap, trước tiên bạn cần tích hợp Bootstrap vào môi trường phát triển của bạn, hay còn gọi là trang web. Đối với điều đó, bạn có hai khả năng khác nhau: tải nó từ xa hoặc tải xuống và sử dụng Bootstrap cục bộ. Tuy nhiên, đối với cả hai, trước tiên bạn cần một thứ gì đó để tải nó vào.

1. Tạo trang HTML

Ở bước đầu tiên trong hướng dẫn này, chúng tôi sẽ tạo một mẫu HTML đơn giản làm cơ sở để chúng tôi sử dụng Bootstrap. Đối với điều đó, điều đầu tiên bạn muốn làm là tạo một thư mục trên máy tính hoặc máy chủ của bạn cho các tệp dự án. Trong trường hợp này, chúng tôi sẽ gọi nó là bootstrap. Tại đây, hãy tạo một tệp văn bản mới và gọi nó là index.html. Mở nó bằng một trình soạn thảo văn bản mà bạn chọn (ví dụ: Notepad ++ ) rồi dán mã bên dưới vào đó.

! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
    & lt; đầu & gt;
        & lt; title & gt; Trang Mẫu Hướng dẫn Bootstrap & lt; / title & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
      
& lt; / head & gt;
    
& lt; body & gt;
& lt; / body & gt;

& lt; / html & gt; 

Đừng quên lưu tệp của bạn trước khi tiếp tục.

2a. Tải Bootstrap qua CDN

Như đã giải thích, Bootstrap chủ yếu bao gồm các biểu định kiểu và tập lệnh. Do đó, chúng có thể được tải trong đầu trang và chân trang của trang web của bạn giống như các nội dung khác, chẳng hạn như phông chữ tùy chỉnh. Khung cung cấp đường dẫn truy cập CDN (mạng phân phối nội dung) cho điều đó. Bạn có thể tìm thấy nó trên trang tải xuống Bootstrap khi bạn cuộn xuống.

Để đưa Bootstrap vào trang của bạn, chỉ cần dán mã bên dưới vào phần & lt; head & gt; trong mẫu của bạn.

 & lt; link rel = "stylesheet" href = "https: //cdn.jsdelivr .net / npm / bootstrap @ 4.5.3 / dist / css / bootstrap.min.css "precision =" sha384-TX8t27EcRE3e / ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2 " liên kết từ trang tải xuống để đảm bảo bạn đang sử dụng phiên bản Bootstrap mới nhất. 

Khi bạn lưu tệp bây giờ, bất kỳ trình duyệt nào mở tệp đó sẽ tự động tải nội dung Bootstrap.

< p> Sử dụng phương pháp từ xa là một ý tưởng hay vì nhiều người dùng sẽ có tệp trong bộ nhớ cache của trình duyệt khi tải các trang web dựa trên Bootstrap khác. Nếu đúng như vậy, họ sẽ không phải tải lại khi đến trang web của bạn, dẫn đến thời gian tải trang nhanh hơn. Do đó, đây là phương pháp được khuyến nghị cho các trang web đang hoạt động.

Tuy nhiên, để thử nghiệm và phát triển hoặc nếu bạn muốn độc lập với kết nối Internet, bạn cũng có thể lấy bản sao tệp của riêng mình. Đây là những gì chúng tôi đang làm cho hướng dẫn Bootstrap này vì nó cũng dẫn đến việc chúng tôi cần đăng ít mã hơn.

2b. Lưu trữ Bootstrap cục bộ

Một cách khác để thiết lập Bootstrap là tải nó xuống ổ cứng của bạn và sử dụng các tệp cục bộ. Bạn tìm thấy các tùy chọn tải xuống ở cùng một nơi với các liên kết đến phiên bản từ xa. Đảm bảo lấy các tệp CSS và JS đã biên dịch. Bạn không cần tệp nguồn.

Sau khi bạn hoàn tất việc tải xuống, hãy giải nén tệp và sao chép nội dung của nó vào cùng một thư mục với index.html. Sau đó, bạn có thể tải CSS Bootstrap vào dự án của mình như sau:

 & lt; link rel = "stylesheet" href = "bootstrap / css / bootstrap.min.css" & gt; 

Bạn sẽ nhận thấy rằng điều này bao gồm đường dẫn tệp để tìm tệp Bootstrap. Trong trường hợp của bạn, hãy đảm bảo rằng đường dẫn của bạn tương ứng với thiết lập thực tế của bạn. Ví dụ: tên của các thư mục có thể khác nhau nếu bạn tải xuống một phiên bản Bootstrap khác.

3. Bao gồm jQuery

Để có được đầy đủ chức năng của Bootstrap, bạn cũng cần tải thư viện jQuery . Ở đây, bạn cũng có thể tải nó từ xa hoặc lưu trữ nó cục bộ.

(Lưu ý nhanh: Bootstrap 5 , hiện đang ở trạng thái Beta, sẽ ngừng sử dụng jQuery và thay vào đó sử dụng JavaScript đơn giản . Chúng tôi sẽ giải quyết thay đổi sắp tới bên dưới. Tuy nhiên, đối với phiên bản hiện tại, Bootstrap 4, bạn vẫn cần jQuery, vì vậy hướng dẫn này sẽ bao gồm nó.)

Bạn tìm thấy liên kết đến phiên bản mới nhất của thư viện jQuery tại đây (nhấp vào bất kỳ liên kết để lấy URL từ xa). Bạn có thể sử dụng nó để tải thư viện vào trang của mình bằng cách đặt dòng mã bên dưới ngay trước vị trí có nội dung & lt; / body & gt; trên trang của bạn.

 & lt; script src = "https://code.jquery.com/jquery-3.5.1.min.js" Liem = "sha256-9 / aliU8dGd2tb6OSsuzixeV4y / faTqgFtohetphbbj0 =" crossorigin = "hidden" & gt; & lt; / script & gt ; 

Hoặc, tải xuống jQuery (nhấp chuột phải vào & gt; Lưu Liên kết Dưới dạng…), giải nén và đặt nó vào thư mục dự án. Sau đó, đưa nó vào cùng một vị trí trong tệp của bạn theo cách này:

 & lt; script src = "jquery-3.5.1.min.js" & gt; & lt; / script & gt; 

Một lần nữa, hãy đảm bảo rằng đường dẫn tương ứng với vị trí và phiên bản jQuery của bạn.

4. Tải Bootstrap JavaScript

Bước cuối cùng trong quá trình thiết lập Bootstrap là tải thư viện Bootstrap JavaScript. Nó được bao gồm trong phiên bản đã tải xuống của khung và bạn cũng tìm thấy các liên kết đến các nguồn từ xa ở cùng một nơi như đã đề cập ở trên. Tuy nhiên, chúng tôi sẽ tải nó ở một nơi khác với style sheet. Thay vì đầu trang, nó đi vào chân trang, ngay sau lệnh gọi jQuery.

Bạn có thể gọi nó từ xa như sau:

 & lt; script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" "liêm sỉ =" sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lorigin30WKz0vr / aWKht; ; 

Hoặc cục bộ như vậy:

 & lt; script src = "bootstrap / js / bootstrap.min.js" & gt; & lt; / script & gt;  

5. Đặt tất cả cùng nhau

Nếu bạn đã làm theo đúng các bước ở trên, bạn sẽ nhận được một tệp trông giống như sau cho giải pháp từ xa:

 & lt; ! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
    & lt; đầu & gt;
 
        & lt; title & gt; Trang Mẫu Hướng dẫn Bootstrap & lt; / title & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
        & lt; link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" "liêm sỉ "ẩn danh" & gt;
    
    & lt; / head & gt;
    & lt; body & gt;
& lt; script src = "https://code.jquery.com/jquery-3.5.1.min.js" Liem = "sha256-9 / aliU8dGd2tb6OSsuzixeV4y / faTqgFtohetphbbj0 =" crossorigin = "nặc danh" & gt; & lt; / script & gt;
        & lt; script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" "liêm sỉ & lt; / script & gt;
    & lt; / body & gt;
    
& lt; / html & gt; 

Và đây là những gì bạn nên có cho phiên bản tải cục bộ tất cả nội dung:

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
    & lt; đầu & gt;
 
        & lt; title & gt; Trang Mẫu Hướng dẫn Bootstrap & lt; / title & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
        & lt; link rel = "stylesheet" href = "bootstrap / css / bootstrap.min.css" & gt;
    
    & lt; / head & gt;
    & lt; body & gt;
    
        & lt; script src = "jquery-3.5.1.min.js" & gt; & lt; / script & gt;
        & lt; script src = "bootstrap / js / bootstrap.min.js" & gt; & lt; / script & gt;
        
    & lt; / body & gt;
    
& lt; / html & gt; 

Nếu điều đó giống như những gì trong tệp của bạn và bạn đã lưu công việc của mình, bây giờ bạn đã sẵn sàng chuyển sang bước tiếp theo.

Hướng dẫn Bootstrap Bước 2: Thiết kế Trang Đích của bạn

Được rồi, phải thừa nhận rằng, có rất nhiều công việc chuẩn bị. Tuy nhiên, nó không khó lắm phải không? Ngoài ra, bây giờ niềm vui bắt đầu.

Hiện tại, khi bạn mở trang web mẫu của mình trong trình duyệt, bạn sẽ chỉ thấy một trang trống. Đã đến lúc thay đổi điều đó. Để dạy bạn Bootstrap, trong hướng dẫn này, chúng tôi sẽ xây dựng một trang đích với các phần tử khác nhau để chúng tôi có thể cho bạn thấy nhiều trường hợp sử dụng của front-end framework.

1. Thêm thanh điều hướng

Điều đầu tiên chúng tôi muốn làm là thêm thanh điều hướng vào đầu trang. Làm như vậy cho phép khách truy cập tham quan trang web của bạn và khám phá phần còn lại của các trang.

Vì vậy, chúng tôi sẽ sử dụng lớp navbar . Đây là một trong phần tử mặc định của Bootstrap mà bạn sẽ thấy rất nhiều trong quá trình hướng dẫn này. Nó tạo ra một thanh điều hướng phản hồi theo mặc định và sẽ tự động thu gọn trên các màn hình nhỏ hơn. Nó cũng cung cấp hỗ trợ tích hợp để thêm thương hiệu, phối màu, khoảng cách và các thành phần khác.

Bạn có thể bắt đầu bằng cách đăng nội dung này ngay sau thẻ & lt; body & gt; : < / p>

 & lt; nav class = "navbar navbar-expand-md" & gt;
& lt; a class = "navbar-brand" href = "#" & gt; Biểu trưng & lt; / a & gt;
& lt; button class = "navbar-toggler navbar-dark" type = "button" data-toggle = "sập" data-target = "# main-navigation" & gt;
& lt; span class = "navbar-toggler-icon" & gt; & lt; / span & gt;
& lt; / nút & gt;
& lt; div class = "sập navbar-sập" id = "main-navigation" & gt;
& lt; ul class = "navbar-nav" & gt;
& lt; li class = "nav-item" & gt;
& lt; a class = "nav-link" href = "#" & gt; Trang chủ & lt; / a & gt;
& lt; / li & gt;
& lt; li class = "nav-item" & gt;
& lt; a class = "nav-link" href = "#" & gt; Giới thiệu & lt; / a & gt;
& lt; / li & gt;
& lt; li class = "nav-item" & gt;
& lt; a class = "nav-link" href = "#" & gt; Liên hệ & lt; / a & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt;
& lt; / nav & gt; 

Một số giải thích về mã

Đánh dấu ở trên có thể chứa đầy các lớp CSS không xác định. Đây là ý nghĩa của chúng:

  • navbar-expand-md - Điều này biểu thị tại thời điểm thanh điều hướng mở rộng từ biểu tượng dọc hoặc hamburger sang một thanh ngang kích thước đầy đủ . Trong trường hợp này, chúng tôi đã đặt nó thành màn hình trung bình, trong Bootstrap, màn hình này lớn hơn 768px.
  • navbar-brand - Điều này được sử dụng để xây dựng thương hiệu trang web của bạn. Bạn cũng có thể bao gồm tệp hình ảnh biểu trưng tại đây.
  • navbar-toggler - Biểu thị nút bật tắt cho menu thu gọn. Phần data-toggle = "sập" xác định rằng điều này sẽ chuyển sang menu bánh hamburger, không phải là menu thả xuống, là tùy chọn khác. Điều quan trọng là bạn phải xác định mục tiêu dữ liệu bằng id CSS (được xác định bởi # ) và bọc & lt; div & gt; với cùng tên xung quanh thực tế phần tử navbar .
  • navbar-toggler-icon - Như bạn có thể đoán, điều này tạo ra biểu tượng mà người dùng nhấp vào để mở menu trên màn hình nhỏ hơn.
  • navbar-nav - Lớp cho phần tử danh sách & lt; ul & gt; chứa các mục menu. Cái sau được ký hiệu bằng nav-item nav-link .

Tại sao chúng tôi giải thích điều này quá nhiều?

Bởi vì đó là điểm của Bootstrap. Nó đi kèm với tất cả các tiêu chuẩn này cho phép bạn nhanh chóng tạo các phần tử với một số HTML và CSS. Bạn cũng không phải lo lắng về bố cục, vì mọi thứ đã được thiết lập sẵn trong Bootstrap. Thêm vào đó, tất cả đều có tính năng phản hồi nhanh trên thiết bị di động! Bạn có bắt đầu thấy điều này hữu ích như thế nào không?

Trên đây là đủ để thêm thanh điều hướng vào trang web của bạn. Tuy nhiên, hiện tại, nó trông vẫn còn rất ít.

Đó là vì nó không có nhiều kiểu dáng gắn liền với nó. Mặc dù bạn có thể thêm màu mặc định (ví dụ: bằng cách đặt cho navbar một lớp như bg-dark navbar-dark ), thay vào đó chúng tôi muốn thêm tên riêng của mình.

2. Bao gồm CSS tùy chỉnh

May mắn thay, nếu bạn muốn thay đổi kiểu mặc định, bạn không cần phải lướt qua một thư viện lớn các biểu định kiểu và thực hiện các thay đổi bằng tay. Thay vào đó, giống như với chủ đề con WordPress, bạn có thể thêm các tệp CSS của riêng mình mà bạn có thể sử dụng để ghi đè kiểu hiện có.

Đối với điều đó, chỉ cần tạo một tệp trống bằng trình chỉnh sửa văn bản của bạn và gọi nó main.css. Lưu nó, sau đó thêm nó vào phần đầu của trang web Bootstrap của bạn như sau:

 & lt; link rel = "stylesheet" type = "text / css" href = "main.css "& gt; 

Đây là mã cho biểu định kiểu nằm trong thư mục chính. Nếu bạn quyết định đặt bên trong thư mục css, hãy đảm bảo bao gồm đường dẫn chính xác trong liên kết.

Từ đây, bạn có thể thêm CSS tùy chỉnh vào trang web của mình. Ví dụ: để tạo kiểu cho nền trang cũng như thanh điều hướng và các phần tử của nó, bạn có thể sử dụng đánh dấu như sau:

 body {
    đệm: 0;
    lề: 0;
    nền: # f2f6e9;
}
.navbar {
    nền: # 6ab446;
}
.nav-link,
.navbar-brand {
    màu: #fff;
    con trỏ: con trỏ;
}
.nav-link {
    margin-right: 1em! important;
}
.nav-link: hover {
    màu: # 000;
}
.navbar-sập {
    justify-content: flex-end;
} 

Và đây là kết quả:

Trông đẹp hơn trước phải không?

3. Tạo vùng chứa nội dung trang

Sau thanh điều hướng, điều tiếp theo bạn muốn là vùng chứa cho nội dung trang. Điều này thực sự dễ dàng trong Bootstrap vì tất cả những gì bạn cần là cái này bên dưới thẻ navbar :

 & lt; header class = "page-header header container- chất lỏng "& gt;
& lt; / header & gt; 

Lưu ý đến lớp container-liquid . Đây là một trong những lớp Bootstrap mặc định. Việc áp dụng nó cho phần tử div sẽ tự động áp dụng một loạt CSS cho nó.

Phần -fluid đảm bảo vùng chứa trải dài trên toàn bộ chiều rộng của màn hình. Ngoài ra còn có container , là một lớp có chiều rộng cố định được áp dụng cho nó, vì vậy sẽ luôn có khoảng trống ở cả hai bên của màn hình.

Tuy nhiên, nếu bây giờ bạn tải lại trang, bạn vẫn sẽ không nhìn thấy bất kỳ thứ gì (trừ khi bạn sử dụng các công cụ dành cho nhà phát triển). Đó là bởi vì bạn chỉ tạo một phần tử HTML trống. Điều này sẽ bắt đầu thay đổi ngay bây giờ.

4. Thêm Hình nền và JavaScript tùy chỉnh

Ở bước tiếp theo trong hướng dẫn Bootstrap này, chúng tôi muốn bao gồm hình nền toàn màn hình cho tiêu đề trang đích của mình. Để đạt được điều đó, chúng tôi sẽ phải sử dụng một số jQuery hoặc JavaScript để làm cho hình ảnh trải dài khắp màn hình.

Bạn làm điều đó giống như cách bạn bao gồm CSS tùy chỉnh. Đầu tiên, tạo một tệp văn bản có tên main.js và đặt nó bên trong thư mục trang web của bạn. Sau đó, gọi nó trước thẻ đóng & lt; / body & gt; bên trong index.html.

 & lt; script src = "main.js" & gt; & lt ; / script & gt; 

Sau đó, bạn có thể sao chép và dán đoạn mã jQuery này để làm cho phần tử & lt; header & gt; trải dài trên toàn bộ màn hình:

< pre class = "EnlighterJSRAW"> $ (tài liệu) .ready (function () {
$ ('. header'). height ($ (window) .height ());
})

Tuy nhiên, như đã đề cập, Bootstrap 5 sẽ không còn đi kèm với thư viện jQuery nữa. Do đó, để thay thế và để chứng minh trang web của bạn trong tương lai, bạn có thể đạt được điều tương tự với JavaScript đơn giản như sau:

 var ready = (callback) = & gt; {
    if (document.readyState! = "loading") callback ();
    else document.addEventListener ("DOMContentLoaded", gọi lại);
}
sẵn sàng (() = & gt; {
    document.querySelector (". header"). style.height = window.innerHeight + "px";
}) 

Sau đó, việc duy nhất còn lại là đặt hình nền. Bạn có thể làm như vậy bên trong main.css:

. Header {
    background-image: url ('images / header-background.jpg');
    background-size: bìa;
    background-position: trung tâm;
    chức vụ: thân nhân;
} 

Nếu bạn đặt một hình ảnh có kích thước vừa đủ tại vị trí được chỉ định bởi đường dẫn ở trên, bạn sẽ đạt được kết quả tương tự như sau:

5. Thêm lớp phủ

Để làm cho hình nền thêm phong cách, chúng tôi cũng sẽ thêm lớp phủ. Để làm được điều đó, hãy tạo một div khác bên trong phần tử & lt; header & gt; mà bạn vừa tạo trước đó.

 & lt; div class = "overlay" & gt; & lt; / div & gt; 

Sau đó, bạn có thể thêm phần sau vào tệp CSS tùy chỉnh của mình:

. overlay {
    vị trí: tuyệt đối;
    chiều cao tối thiểu: 100%;
    chiều rộng tối thiểu: 100%;
    trái: 0;
    đầu: 0;
    nền: rgba (0, 0, 0, 0.6);
} 

Thao tác này sẽ tạo lớp phủ đẹp mắt này cho hình ảnh bạn nhập trước đó:

6. Bao gồm Tiêu đề trang và Văn bản nội dung

Trong bước tiếp theo, bạn có thể muốn thêm tiêu đề trang ở dạng tiêu đề cùng với một số văn bản nội dung. Bằng cách đó, khách truy cập của bạn sẽ biết ngay họ đang truy cập trang web nào và họ có thể mong đợi điều gì từ trang web đó.

Để tạo các trang web đó, chỉ cần thêm đoạn mã này vào bên trong vùng chứa bạn đã thiết lập ở bước cuối cùng, bên dưới lớp phủ :

 & lt; div class = "description" & gt;
& lt; h1 & gt; Chào mừng bạn đến với Trang Đích! & lt; / h1 & gt;
& lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, trong pharetra sem ullamcorper. & Lt; / p & gt;
& lt; / div & gt; 

Sau đó, thêm đánh dấu sau vào main.css.

. mô tả {
trái: 50%;
vị trí: tuyệt đối;
top: 45%;
biến đổi: dịch (-50%, -55%);
text-align: center;
}
.description h1 {
màu: # 6ab446;
}
.description p {
màu: #fff;
font-size: 1.3rem;
chiều cao dòng: 1,5;
} 

Khi bạn làm vậy, trang đích bây giờ trông giống như sau:

Nó thực sự bắt đầu kết hợp với nhau, phải không?

7. Tạo nút CTA

Không có trang đích nào hoàn chỉnh mà không có lời kêu gọi hành động, thường ở dạng nút. Vì lý do đó, chúng tôi sẽ không bao gồm cách tạo một nút trong hướng dẫn Bootstrap này.

May mắn thay, khung này cung cấp nhiều công cụ để tạo các nút nhanh chóng và dễ dàng. Bạn có thể tìm thấy rất nhiều ví dụ tại đây . Trong trường hợp của chúng tôi, chúng tôi thêm đánh dấu sau ngay bên dưới nội dung trang bên trong vùng chứa & lt; description & gt; :

 & lt; button class = "btn btn- outline-Secondary btn-lg "& gt; Tell Me More! & lt; / button & gt; 

Ngoài ra, chúng tôi thêm CSS này vào main.css :

. nút mô tả {
    viền: 1px solid # 6ab446;
    nền: # 6ab446;
    bán kính đường viền: 0;
    màu: #fff;
}
.description button: hover {
border: 1px solid #fff;
    nền: #fff;
    màu: # 000;
} 

Sau khi lưu và tải lại, nó trông giống như sau:

8. Thiết lập phần ba cột

Chúng tôi có thể đã khá hài lòng với cách mọi thứ đang hình thành. Tuy nhiên, chúng tôi vẫn chưa thực hiện xong trang này. Tiếp theo, chúng tôi muốn tạo ba cột bên dưới nội dung chính để có thêm thông tin. Đây là một điểm đặc biệt của Bootstrap vì nó phát huy hết sức mạnh của nó, tạo lưới và không có hướng dẫn nào là hoàn chỉnh nếu không có nó. Dưới đây là cách thực hiện điều đó trong trường hợp này:

 & lt; div class = "container features" & gt;
    & lt; div class = "row" & gt;
        & lt; div class = "col-lg-4 col-md-4 col-sm-12" & gt;
            & lt; h3 class = "feature-title" & gt; Lorem ipsum & lt; / h3 & gt;
            & lt; img src = "images / column-1.jpg" class = "img-liquid" & gt;
            & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. & Lt; / p & gt;
        & lt; / div & gt;
        
        & lt; div class = "col-lg-4 col-md-4 col-sm-12" & gt;
            & lt; h3 class = "feature-title" & gt; Lorem ipsum & lt; / h3 & gt;
            & lt; img src = "images / column-2.jpg" class = "img-liquid" & gt;
            & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. & Lt; / p & gt;
        & lt; / div & gt;
        
        & lt; div class = "col-lg-4 col-md-4 col-sm-12" & gt;
        
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt; 

Điều đầu tiên bạn sẽ nhận thấy là phần tử row . Bạn cần điều này bất cứ khi nào tạo các cột để hoạt động như một vùng chứa cho lưới.

Đối với các cột, tất cả chúng đều có một số lớp: col-lg-4 , col -md-4 col-sm-12 . Những điều này biểu thị rằng chúng tôi đang xử lý các cột và kích thước chúng sẽ hiển thị trên các màn hình khác nhau.

Để hiểu điều này, bạn cần biết rằng trong lưới Bootstrap, tất cả các cột trong một hàng luôn cộng lại số mười hai. Vì vậy, việc cung cấp cho chúng các lớp ở trên có nghĩa là chúng sẽ chiếm một phần ba màn hình trên màn hình lớn và trung bình (12/4 = 3) nhưng toàn bộ màn hình trên các thiết bị nhỏ (mười hai trong số mười hai cột).

Thật hợp lý, phải không?

Bạn cũng sẽ nhận thấy rằng chúng tôi đã bao gồm hình ảnh và thêm lớp .image-liquid vào chúng. Điều này là để làm cho chúng phản hồi nhanh để chúng mở rộng cùng với màn hình mà trang được xem.

Ngoài ra, bạn có thể đưa kiểu sau vào vị trí thông thường:

. tính năng {
margin: 4em auto;
đệm lót: 1em;
chức vụ: thân nhân;
}
.feature-title {
màu: # 333;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
text-biến đổi: chữ hoa;
}
.features img {
-webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4);
margin-bottom: 16px;
} 

Khi được thêm vào bên dưới nội dung chính và được lưu, nó trông giống như sau:

Nhân tiện, nếu bạn không muốn đặt bóng hộp theo cách thủ công trên các phần tử của mình thông qua CSS , bạn cũng có thể chỉ định các lớp được thiết lập sẵn của Bootstrap cho việc đó. Đây là .shadow-sm , .shadow .shadow-lg . Thông tin thêm tại đây .

Bạn sẽ nhận thấy rằng một trong các trường mới vẫn còn trống. Đây là mục đích vì chúng tôi muốn thêm một biểu mẫu liên hệ vào đó. Đây là một thực tế rất bình thường đối với các trang đích để cho phép khách truy cập liên hệ.

Tạo biểu mẫu liên hệ trong Bootstrap khá dễ dàng:

 & lt; h3 class = "feature-title" & gt; Liên hệ! & lt; / h3 & gt;
& lt; div class = "form-group" & gt;
& lt; input type = "text" class = "form-control" placeholder = "Name" name = "" & gt;
& lt; / div & gt;
& lt; div class = "form-group" & gt;
    & lt; input type = "email" class = "form-control" placeholder = "Email Address" name = "email" & gt;
& lt; / div & gt;
& lt; div class = "form-group" & gt;
    & lt; textarea class = "form-control" rows = "4" & gt; & lt; / textarea & gt;
& lt; / div & gt;
& lt; input type = "submit" class = "btn btn-Secondary btn-block" value = "Send" name = "" & gt; 

Hãy chú ý đến các lớp CSS này:

  • form-group - Được sử dụng để bao quanh các trường biểu mẫu để định dạng.
  • form-control - Biểu thị các trường biểu mẫu như đầu vào, văn bản khu vực, v.v.

Bạn có thể làm được nhiều điều hơn nữa với biểu mẫu mà bạn có thể tìm hiểu trong tài liệu . Tuy nhiên, đối với mục đích trình diễn, những điều trên là đủ. Đặt nó bên trong cột trống còn lại, sau đó thêm kiểu này vào main.css:

. Features .form-control,
đầu vào .features {
bán kính đường viền: 0;
}
.features .btn {
    màu nền: # 589b37;
    viền: 1px solid # 589b37;
    màu: #fff;
    margin-top: 20px;
}
.features .btn: hover {
    màu nền: # 333;
    viền: 1px solid # 333;
} 

Khi thực hiện, bạn sẽ nhận được một biểu mẫu như sau:

10. Bao gồm Phần nhóm

Bố cục thẻ là một điều khác mà Bootstrap vượt trội. Các lớp CSS tùy chỉnh của nó làm cho việc tạo bố cục giống như Pinterest trở nên dễ dàng. Trong phần tiếp theo, chúng tôi sẽ sử dụng phần này để thiết lập phần nhóm, nơi chúng tôi hiển thị các thành viên trong nhóm và vị trí của họ trong công ty.

Tuy nhiên, chúng tôi muốn làm cho phần này có một màu sắc khác. Vì lý do đó, trước tiên chúng tôi bao gồm một phần tử & lt; div & gt; khác làm nền của nó. Bên trong, có một vùng chứa khác với một lớp tùy chỉnh để có nhiều khả năng tùy chỉnh hơn, theo sau là một hàng.

 & lt; div class = "background" & gt;
    & lt; div class = "container team" & gt;
        & lt; div class = "row" & gt;
            
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt; 

Việc tạo thẻ rất dễ dàng, chỉ cần cung cấp một phần tử là thẻ . Bạn cũng có thể sử dụng các lớp lưới để định kích thước và xác định số lượng thẻ xuất hiện trong một hàng. Ngoài ra, vì chúng tôi muốn tất cả nội dung trong thẻ được căn giữa, chúng tôi cũng sẽ thêm lớp Bootstrap text-center vào nó.

 & lt; div class = "thẻ col-lg-3 col-md-3 col-sm-4 text-center" & gt;
& lt; / div & gt; 

Các thẻ có thể chứa các phần tử khác nhau. Trong trường hợp của chúng tôi, chúng tôi muốn một hình ảnh ở trên cùng, theo sau là tiêu đề (tên của người đó) và mô tả cho biết họ làm gì. Có lẽ không có gì ngạc nhiên khi Bootstrap cung cấp các lớp tùy chỉnh cho tất cả những điều đó.

Đối với hình ảnh, chúng tôi sẽ sử dụng lớp card-img-top để định vị hình ảnh ở phần đầu của lá bài. Chúng tôi cũng sẽ cung cấp cho nó lớp round-circle để làm cho hình ảnh tròn.

Sau đó, chúng tôi tạo một phần tử mới với lớp card-body chứa tiêu đề và đoạn văn có các lớp card-title card-text tương ứng. Dưới đây là tất cả những gì trông giống nhau:

 & lt; div class = "card col-lg-3 col-md-3 col-sm-4 text-center" & gt;
    & lt; img class = "card-img-top round-circle" src = "images / team-image-1.png" alt = "Hình ảnh thẻ" & gt;
    & lt; div class = "card-body" & gt;
        & lt; h4 class = "card-title" & gt; Jane Doe & lt; / h4 & gt;
        & lt; p class = "card-text" & gt; Mô tả Công việc & lt; / p & gt;
    & lt; / div & gt;
& lt; / div & gt; 

Bây giờ, khi chúng tôi đặt nó vào bên trong phần tử hàng, sao chép nó tám lần và đặt các tệp hình ảnh vào các vị trí tương ứng, chúng tôi nhận được kết quả này.

Tất nhiên , để làm cho nó trông như thế này, chúng tôi cũng đã bao gồm một số CSS tùy chỉnh. Đây là đánh dấu bạn có thể thêm vào biểu định kiểu của mình:

. Background {
phông nền: # debec8;
đệm: 4em 0;
}
.đội {
màu: # 5e5e55;
đệm: 0 180px;
}
.team .card-cột {
-webkit-column-count: 4;
-moz-cột-đếm: 4;
số cột: 4;
}
.team .card {
nền: không có;
biên giới: không có;
}
.team .card-title {
font-size: 1.3rem;
margin-bottom: 0;
text-biến đổi: chữ hoa;
} 

Được rồi, chúng ta đang đi đến phần cuối của hướng dẫn Bootstrap. Điều cuối cùng chúng tôi muốn thêm vào trang đích của mình là phần chân trang có hai cột. Giờ đây, điều này sẽ không còn gây khó khăn cho bạn nữa.

 & lt; footer class = "page-footer" & gt;
    & lt; div class = "container" & gt;
        & lt; div class = "row" & gt;
            & lt; div class = "col-lg-8 col-md-8 col-sm-12" & gt;
                & lt; h6 class = "text-uppercase font-weight-bold" & gt; Thông tin bổ sung & lt; / h6 & gt;
                & lt; p & gt; Yêu chính nỗi đau Lâu lâu làm sao hận, ai đầu tư trước tang thi. Nhưng nỗi đau kinh tế, đó là cách trang điểm thông minh, đó là thịt bò mà đường. & Lt; / p & gt;
                & lt; p & gt; Yêu chính nỗi đau Lâu lâu làm sao hận, ai đầu tư trước tang thi. Nhưng nỗi đau kinh tế, đó là cách trang điểm thông minh, đó là thịt bò mà đường. & Lt; / p & gt;
        & lt; / div & gt;
        & lt; div class = "col-lg-4 col-md-4 col-sm-12" & gt;
            & lt; h6 class = "text-uppercase font-weight-bold" & gt; Liên hệ & lt; / h6 & gt;
            & lt; p & gt; 1640 Riverside Drive, Hill Valley, California
            & lt; br / & gt; info@mywebsite.com
            & lt; br / & gt; +01 234 567 88
            & lt; br / & gt; + 01 234 567 89 & lt; / p & gt;
        & lt; / div & gt;
    & lt; div & gt;
    & lt; div class = "footer-copyright text-center" & gt; © 2020 Bản quyền: MyWebsite.com & lt; / div & gt;
& lt; / footer & gt; 

Ngoài cách đánh dấu lưới thông thường, phần này nêu bật một số khả năng sửa đổi kiểu chữ với Bootstrap:

  • text-uppercase
  • font-weight-bold
  • text-center

Nó phải là khá rõ ràng từ tên của các lớp mà chúng làm. Bạn có thể tìm thêm thông tin về Bootstrap và typography tại đây .

Ngoài những cách trên, bạn có thể sử dụng cách tạo kiểu như sau: < / p>

. page-footer {
    màu nền: # 222;
    màu: # 000000;
    đệm: 60px 0 30px;
}
.footer-copyright {
    màu: # 666;
    đệm: 40px 0;
} 

Điều này dẫn đến một chân trang đẹp như sau:

12. Thêm truy vấn phương tiện

Trang về cơ bản đã sẵn sàng cho đến nay. Nó cũng hoàn toàn đáp ứng. Tuy nhiên, trong giao diện di động của trình duyệt, một số phần vẫn chưa xuất hiện đúng như vậy. Ví dụ: đây là hình ảnh tiêu đề trông như thế nào trên thiết bị di động:

Tuy nhiên, đừng lo lắng, bạn có thể sửa điều đó khá dễ dàng với một truy vấn phương tiện đơn giản. Trừ khi bạn đang sử dụng SASS để biên dịch trang Bootstrap của mình, các công cụ này hoạt động giống như trong các trường hợp khác. Bạn chỉ cần ghi nhớ điểm ngắt đặt trước được bao gồm trong Bootstrap.

Do đó, để khắc phục sự cố trên, bạn có thể chỉ cần bao gồm một đoạn mã như sau:

 @ media (max-width: 575,98px) {
    .sự mô tả {
        trái: 0;
        đệm: 0 15px;
        vị trí: tuyệt đối;
        tôp 10%;
        biến đổi: không có;
        text-align: center;
    }
 
    .description h1 {
        cỡ chữ: 2em;
    }
 
    .description p
        kích thước phông chữ: 1.2rem;
    }
 
    .Tính năng, đặc điểm {
        lề: 0;
    }
} 

Sau đó, mọi thứ vẫn như cũ:

Nếu bạn tải xuống các tệp bên dưới, bạn cũng sẽ thấy một số đánh dấu khác trong phần truy vấn phương tiện để tạo kiểu cho một số tệp khác các phần của trang đích trên màn hình nhỏ hơn.

13. Tạo các trang bổ sung

Cho đến nay, chúng tôi chỉ xây dựng một trang duy nhất cho trang web Bootstrap của mình. Tuy nhiên, bạn có thể nhớ rằng, khi thiết lập menu điều hướng, chúng tôi đã bao gồm một số mục menu. Tuy nhiên, hiện tại, các liên kết này không dẫn đến bất kỳ đâu khi bạn nhấp vào chúng.

Nếu bạn muốn thay đổi điều đó và thêm các trang bổ sung vào trang web Bootstrap của mình, không có gì dễ dàng hơn thế. Cách đơn giản nhất là chỉ cần tạo một bản sao của index.html và đặt cho nó một tên khác, thường là tên của trang khác mà bạn muốn tạo.

Vì vậy, ví dụ: chúng tôi có thể đặt tên cho bản sao là about.html . Tuy nhiên, tại sao lại sao chép nó và không bắt đầu lại từ đầu? Bởi vì với một bản sao, bạn có thể sử dụng những phần của trang được giữ nguyên (ví dụ: menu điều hướng) và chỉ xóa hoặc sửa đổi những gì bạn muốn thay đổi. Ví dụ: đây là giao diện của trang Giới thiệu:

Khi bạn có tệp thứ hai, tất cả những gì còn lại cần làm là đảm bảo rằng liên kết trong menu điều hướng thực sự trỏ đến nó như vậy:

 & lt; a class = "nav-link" href = "about.html" & gt; Giới thiệu & lt; / a & gt; 

Lưu ý nhanh: Để điều này hoạt động, about.html phải nằm trong cùng thư mục với index.html . Giả sử, nếu nó nằm trong thư mục con có tên html, bạn sẽ liên kết đến nó như sau:

 & lt; a class = "nav-link" href = "html / about.html" & gt; Giới thiệu & lt; / a & gt; 

Vậy là xong, bây giờ bạn có một trang thứ hai trên trang Bootstrap của mình có thể được truy cập từ menu điều hướng! Chỉ cần đảm bảo rằng bất cứ khi nào bạn thay đổi các liên kết điều hướng hoặc thêm nhiều trang hơn vào trang web của mình, bạn cũng phải cập nhật các liên kết trong tất cả các tệp khác.

14 . Phần thưởng: Tạo phương thức

Như một phần thưởng, chúng tôi cũng sẽ tạo phương thức cho trang web thử nghiệm của mình. Điều này không hoàn toàn cần thiết nhưng đây là cơ hội tuyệt vời để thể hiện thêm một số khả năng của Bootstrap và hoàn thành hướng dẫn này.

Trong trường hợp bạn không quen với thuật ngữ này, modal có nghĩa là một phần tử như cửa sổ bật lên xuất hiện trên đầu trang web. Bạn có thể sử dụng nó cho tất cả các mục đích. Trong trường hợp của chúng tôi, chúng tôi muốn tạo lời nhắc đăng ký nhận bản tin.

Thiết lập Trình kích hoạt phương thức

Như thường lệ, Bootstrap cung cấp đánh dấu của riêng mình để đạt được điều này. Tuy nhiên, trước khi xây dựng phương thức, trước tiên chúng ta muốn tạo trình kích hoạt để nó hiển thị trên trang. Nếu không, chúng tôi sẽ không thấy những gì chúng tôi đang làm.

Để thực hiện việc này, chỉ cần thêm đoạn JavaScript này vào tệp main.js của bạn:

 setTimeout ( hàm số() {
$ ('# demo-modal'). modal ();
}, 500); 

Điều này kích hoạt phương thức hiển thị sau một thời gian xác định như được đặt bởi số ở cuối. Đối với bản demo, chúng tôi đã định thời gian cho nó là 500 mili giây, vì chúng tôi muốn xem phương thức nhanh chóng sau khi tải lại trong khi làm việc với nó. Trên một trang đang hoạt động, bạn sẽ tự nhiên đặt nó thành một khoảng thời gian dài hơn để khách truy cập thấy cửa sổ bật lên sau khi ở trên trang của bạn một lúc.

Ngoài ra, hãy chú ý rằng ở trên vẫn là một hàm jQuery, đó là cách Bootstrap sử dụng các phương thức tại thời điểm này. Như đã thảo luận, điều này sẽ khác trong Bootstrap 5.

Tạo phương thức

Được rồi, hãy bắt đầu với phương thức thực tế. Tất cả bắt đầu với ba phần tử lồng nhau có các lớp modal , modal-hộp thoại modal-content được gán cho chúng tương ứng.

 & lt; div id = "demo-modal" class = "modal fade" & gt;
    & lt; div class = "modal-hộp thoại modal-lg modal-hộp thoại làm trung tâm" & gt;
        & lt; div class = "modal-content" & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt; 

Chúng tạo phương thức trên đầu trang web của bạn và thiết lập cửa sổ phương thức mà bạn có thể điền vào nội dung.

Chúng tôi cũng đã cấp id cho phần tử phương thức. của # demo-modal để làm cho việc nhắm mục tiêu CSS dễ dàng hơn và cũng để nó hoạt động với trình kích hoạt JavaScript. Lớp fade đảm bảo sự xuất hiện và biến mất của nó không đột ngột. Đồng thời, modal-lg xác định kích thước của cửa sổ modal và modal-hộp thoại làm trung tâm căn giữa nó theo chiều dọc trên màn hình.

Tuy nhiên, đặt mã này ở đâu? Đó là một câu hỏi rất hay. Đánh dấu phương thức nằm ngay trước thẻ đóng & lt; / body & gt; và bên dưới lệnh gọi jQuery và bất kỳ tệp JavaScript nào.

Tuy nhiên, ngay cả khi nó nằm trong đánh dấu trang, vì lớp modal , nó sẽ không hiển thị trên trang trừ khi được kích hoạt.

Điền vào nội dung

Được rồi, hãy tiếp tục làm cho nó đẹp hơn. Tiếp theo, chúng tôi muốn tạo một tiêu đề phương thức với một hình ảnh bên trong cũng như nút để đóng cửa sổ bật lên. Bạn có thể thực hiện việc này bằng cách đặt đánh dấu này tại đây bên trong modal-content :

 & lt; div class = "modal-header" & gt;
    & lt; img class = "round-circle mx-auto" src = "images / email-icon.png" alt = "modal image" & gt;
    & lt; button type = "button" class = "close" data-allow = "modal" aria-label = "close" & gt;
        & lt; span & gt; x & lt; / span & gt;
    & lt; / nút & gt;
& lt; / div & gt; 

Lưu ý lớp mx-auto cho hình ảnh. Đó là một lớp tiện ích Bootstrap để căn giữa tất cả các loại phần tử. Thông tin thêm về nó tại đây . Đối với nút đóng, bạn cần bao gồm data-allow = "modal" để nút này thực sự đóng cửa sổ bật lên.

Đây là những gì chúng tôi có cho đến nay:

< p> Bây giờ đến phần nội dung phương thức, mà chúng tôi sẽ đặt bên dưới modal-header và sẽ bao gồm tiêu đề, văn bản và biểu mẫu để bao gồm địa chỉ email của bạn. Đây là đánh dấu:

 & lt; div class = "modal-body text-center" & gt;
    & lt; h4 & gt; Đăng ký nhận bản tin của chúng tôi & lt; / h4 & gt;
    & lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. & Lt; / p & gt;
    & lt; div class = "input-group" & gt;
        & lt; input type = "email" class = "form-control" placeholder = "Nhập địa chỉ email của bạn" name = "email" & gt;
        & lt; div class = "input-group-append" & gt;
            & lt; input type = "submit" class = "btn" value = "Đăng ký" & gt;
        & lt; / div & gt;
    & lt; / div & gt;
& lt; / div & gt; 

Nếu bạn đang làm theo hướng dẫn Bootstrap, thì modal-body text-centerCác lớp nên tự giải thích. Tuy nhiên, hãy lưu ý input-group ở dưới cùng. Đây là lớp Bootstrap cho phép bạn đặt các đầu vào như trường biểu mẫu và các nút bên cạnh nhau.

Lớp input-group-append đặt nút sau trường biểu mẫu. Ngoài ra còn có input-group-prepend , nếu bạn muốn đặt trước bất kỳ thứ gì. Đây là những gì nó xuất hiện:

Được rồi, có vẻ như điều duy nhất còn lại là tạo kiểu. Vì vậy, hãy bao gồm đánh dấu này trong biểu định kiểu main.css của bạn để đạt được giao diện như trên:

 # demo-modal .modal-content {
    bán kính đường viền: 0;
    đệm: 2rem;
}
# demo-modal .modal-header {
    border-bottom: không có;
}
# demo-modal h4 {
    màu: # 000;
    font-size: 30px;
    lề: 0 0 25px;
    font-weight: bold;
    text-biến đổi: viết hoa;
}
# demo-modal .close {
    nền: # c0c3c8;
    bán kính biên giới: 50%;
    màu: #fff;
    font-size: 19px;
    font-weight: bình thường;
    chiều cao: 30px;
    độ mờ: 0,5;
    đệm: 0;
    vị trí: tuyệt đối;
    phải: 26px;
    text-align: center;
    đầu trang: 26px;
    chiều rộng: 30px;
}
# demo-modal .close span {
    chức vụ: thân nhân;
    đầu trang: -3px;
}
# demo-modal .modal-body p {
    màu: # 999;
}
# demo-modal .form-control,
# demo-modal .btn {
    chiều cao tối thiểu: 46px;
}
# demo-modal .btn {
    màu nền: # 1da098;
    biên giới: không có;
    màu: #fff;
    chiều rộng tối thiểu: 150px;
    chuyển tiếp: tất cả 0,4s;
}
# demo-modal .btn: hover,
# demo-modal .btn: focus {
    màu nền: # 12968d;
} 

15. Tải trang web của bạn lên máy chủ lưu trữ web

Nếu bạn đã theo dõi, bây giờ bạn sẽ được thiết lập với một trang web hoàn chỉnh (cộng với phương thức tùy chọn) cũng hoàn toàn đáp ứng.

Tuy nhiên, cho đến nay, không ai ngoài bạn có thể nhìn thấy nó. Để thay đổi điều đó, bạn cần có máy chủ web và miền . Bằng cách đó, mọi người có thể nhập địa chỉ trang web của bạn vào trình duyệt của họ và sau đó truy cập trực tuyến trang web Bootstrap mới được đúc của bạn.

Để cho phép họ làm như vậy, bạn cần tải trang web lên máy chủ của mình. Bạn có thể làm điều đó với một ứng dụng khách FTP như FileZilla . Thu thập địa chỉ máy chủ FTP, tên người dùng và mật khẩu từ nhà cung cấp dịch vụ lưu trữ để kết nối với máy chủ của bạn từ xa. Khi làm như vậy, bạn sẽ có thể xem các tệp và thư mục hiện có trên đó.

Điều hướng đến thư mục mà miền của bạn được trỏ đến (thường là thư mục gốc). Khi bạn đã hoàn thành việc đó, chỉ cần tìm thư mục chứa các tệp Bootstrap trên ổ cứng, đánh dấu tất cả các tệp bên trong, sau đó kéo chúng đến máy chủ để bắt đầu tải lên. Quá trình này sẽ mất một lúc để kết thúc tùy thuộc vào tốc độ kết nối cũng như số lượng và kích thước tệp của bạn.

Tuy nhiên, sau khi hoàn tất, khi truy cập miền của mình, bạn sẽ có thể thấy đã hoàn thành trang web trong cửa sổ trình duyệt của bạn.

Không tệ cho một vài dòng mã, phải không?

Nói về điều này, nếu bạn muốn có toàn bộ mã Bootstrap từ hướng dẫn bao gồm CSS, JavaScript và hình ảnh tùy chỉnh, bạn có thể tải xuống tất cả chúng bên dưới. Với phần này, bạn có tất cả những gì cần thiết để tạo trang đích với Bootstrap.

< h2 id = "h-final-Thinking-bootstrap-beginner-tutorial"> Final Thoughts: Bootstrap Beginner Tutorial

Bootstrap là một khung phát triển front-end mã nguồn mở mà bất kỳ ai cũng có thể sử dụng miễn phí. Nó cho phép bạn nhanh chóng thiết kế nguyên mẫu, tạo trang web và nói chung là bắt đầu chạy.

Như bạn đã thấy trong hướng dẫn Bootstrap dành cho người mới bắt đầu này, nó chỉ cần kiến ​​thức cơ bản về HTML, CSS và một số tùy chọn jQuery và / hoặc JavaScript. Mặc dù không thoải mái như sử dụng WordPress, Bootstrap vẫn là một lựa chọn thay thế hợp lệ để tạo trang web.

Giờ đây, bạn đã biết cách thiết lập và cài đặt Bootstrap và các thành phần của nó, tạo một trang đích đơn giản, bao gồm một số nội dung cơ bản và tạo kiểu cho nó. Bạn có thể tạo menu điều hướng, đặt hình nền, bao gồm các nút, cột và biểu mẫu liên hệ. Bạn thậm chí còn biết cách sử dụng thẻ Bootstrap và chức năng của phương thức.

Tất nhiên, còn nhiều điều cần tìm hiểu.

Nhờ hướng dẫn Bootstrap cơ bản này, bạn đã học đủ để tiếp tục hoạt động tự mình chuyển tiếp. Vì vậy, nếu bạn muốn đi sâu hơn vào khuôn khổ, điểm khởi đầu tốt là W3Schools hoặc phim tài liệu Bootstrap mà chúng tôi đã tham khảo trong suốt bài đăng này. Bạn cũng có thể sử dụng bootstrap cheat sheet dành cho người mới bắt đầu của chúng tôi để tìm hiểu thêm. Nó có thể tải xuống dưới dạng PDF và PNG.

Ngoài ra, chúng tôi hy vọng bạn thích hướng dẫn dành cho người mới bắt đầu này và muốn nghe những suy nghĩ và kinh nghiệm của bạn khi làm việc với Bootstrap.

Bạn có suy nghĩ, câu hỏi hoặc yêu cầu? Hãy cho chúng tôi biết trong phần bình luận bên dưới!


Xem thêm những thông tin liên quan đến chủ đề cách tạo bootstrap

Sử dụng Bootstrap thiết Website cực đẹp trong 5 phút

  • Tác giả: Alias
  • Ngày đăng: 2020-04-18
  • Đánh giá: 4 ⭐ ( 8003 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap css alias
    how to use bootstrap design website
    Trong video này mình hướng dẫn các bạn dùng bootstrap để thiết kế 1 website 1 cách đơn giản nhé. copy code vào là xong
    Link group học code: http://bit.ly/39eFZOi
    Link facebook cá nhân: http://bit.ly/38fi69c
    Link website: http://Alias.vn/
    Link đăng kí kênh để nhận video free: http://bit.ly/2SyBebr
    Đội ngũ Alias chuyên support IT cho các bạn ở đại học FPT Hà Nội - Ngoài ra còn support IT cho các bạn ở đại học Quốc Gia và Bách Khoa...
    Channel hướng dẫn các bạn lập trình C, C, C++, Java, Java desk, Java Web, jsp - servlet, web service, asp.net đồng thời hướng dẫn các bạn các thủ thuật hữu ích giúp cuộc sống đơn giản và dễ dàng hơn.
    Nếu nhạc nền bị gặp vấn đề bản quyền. Mong các bạn gửi mail tới trinhthehoan989@gmail.com. Mình sẽ trả lời lại trong vòng 2h ạ.

Thiết kế giao diện web bằng Bootstrap - Hướng dẫn sử dụng Bootstrap

  • Tác giả: web4s.vn
  • Đánh giá: 4 ⭐ ( 5209 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Web4s tổng hợp và chia sẻ đến bạn đọc cách thiết kế giao diện web bằng Bootstrap, hướng dẫn sử dụng Bootstrap 4 để bạn hiểu rõ hơn về công cụ tạo web hữu ích này

Hướng dẫn thiết kế website bằng bootstrap từ A-Z

  • Tác giả: websolutions.com.vn
  • Đánh giá: 3 ⭐ ( 2571 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap là gì? Cài đặt Bootstrap, web chuẩn responsive

  • Tác giả: wiki.matbao.net
  • Đánh giá: 3 ⭐ ( 3992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.

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

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 3 ⭐ ( 4210 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap là nền tảng framework miễn phí giúp website có thể tự động điều chỉnh kích thước với trình duyệt sử dụng. Vậy cách sử dụng bootstap như thế nào?

Bắt đầu với Bootstrap

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 9470 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một trang web bằng Bootstrap dễ dàng như thế nào.

Sử dụng Bootstrap để tạo giao diện cho trang web hỗ trợ responsive

  • Tác giả: csc.edu.vn
  • Đánh giá: 4 ⭐ ( 7544 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap là một Framework HTML, CSS, và JavaScript cho phép thiết kế phát triên các website hỗ trợ responsive, hiện tại Bootstrap là một trong những thư viện CSS và Javascript được dùng nhiều nhất trên thế giới với nhiều ưu điểm

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tạo danh sách bằng Python - python tạo và thêm vào danh sách

By ads_php