Bootstrap là một khung công tác mặt trước giúp bạn xây dựng các trang web đáp ứng di động nhanh chóng và dễ dàng hơn. Được phát triển đầu tiên bởi Twitter, Bootstrap hiện được sử dụng cho mọi thứ từ phát triển ứng dụng web đến chủ đề WordPress. Nó cũng hoàn toàn miễn phí, đa năng và trực quan.

Với Bootstrap, bạn có thể gợi ý các trang web phức tạp từ HTML tiêu chuẩn và tùy chỉnh chúng theo nhu cầu của bạn. Bootstrap cũng đi kèm với một số plugin jQuery có thể cung cấp các chức năng bổ sung như băng chuyền, nút, chú giải công cụ và hơn thế nữa.

Cuối cùng, nhưng không kém phần quan trọng, nó cung cấp cho bạn rất nhiều phím tắt để tạo các trang web sẽ 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à một sự hiểu biết cơ bản về HTML và CSS để tạo ra phản ứng nhanh, đầu tiên trê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.

P.S. Bootstrap không phải là một lựa chọn hoàn hảo cho người mới bắt đầu hoàn thành. Một số kiến ​​thức về HTML và CSS sẽ hữu ích. Ngoài ra, bạn có thể sử dụng trình tạo trang web hoặc WordPress để tạo trang web.

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 nó vào môi trường phát triển của bạn, 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 cái gì đó để tải nó vào.,

1. Tạo một trang HTML

Bước đầu tiên, chúng tôi sẽ tạo một mẫu HTML đơn giản làm cơ sở nơi chúng tôi sẽ 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, tôi sẽ chỉ gọi nó bootstrap. Tại đây, tạo một tệp văn bản mới và gọi nó index.html. Mở nó bằng trình soạn thảo văn bản bạn chọn (ví dụ:. Sổ tay++) và sau đó dán mã dưới đây vào nó.

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

2a. Tải Bootstrap qua CDN

Như đã giải thích, Bootstrap bao gồm chủ yếu là các biểu định kiểu và tập lệnh. Như vậy, chúng có thể được tải trong phần đầu trang và chân trang của trang web của bạn giống như các tài sản khác như phông chữ tùy chỉnh. Khung này 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 về Bootstrap, xa hơn bên dưới.

Để tải Bootstrap vào trang của bạn, chỉ cần dán mã bên dưới vào phần của mẫu của bạn.

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

Sử dụng phương thức từ xa là một ý tưởng tốt vì nhiều người dùng sẽ có khung trong bộ đệm của trình duyệt của họ. Nếu đó là trường hợp, họ đã giành chiến thắng để tải lại nó 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 đề xuất cho các trang web trực tiếp.

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 Bootstrap của riêng mình. Đây là những gì tôi đang làm cho hướng dẫn này vì nó cũng dẫn đến ít mã hơn để đăng.

2b. Máy chủ 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. Ở đây, hãy chắc chắn để có được các tệp CSS và JS được biên dịch. Bạn không cần tập tin nguồn.

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

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, đảm bảo đườ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 chức năng đầy đủ của Bootstrap, bạn cũng cần tải thư viện jQuery. Ở đây cũng vậy, bạn phải có khả năng tải nó từ xa hoặc lưu trữ cục bộ.

Trong trường hợp đầu tiên, bạn tìm thấy liên kết đến phiên bản mới nhất của jQuery đây. 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 khi nó nói trên trang của bạn.

Hoặc, tải xuống jQuery (nhấp chuột phải> Lưu liên kết như…), giải nén và đưa nó vào thư mục dự án. Sau đó, bao gồm nó ở cùng một nơi với tệp của bạn theo cách này:

Một lần nữa, đảm bảo đường dẫn tương ứng với thiết lập của bạn.

4. Tải JavaScript Bootstrap

Bước cuối cùng trong việc thiết lập Bootstrap là tải thư viện JavaScript Bootstrap. Chúng đượ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ư trước đây. Tuy nhiên, chúng tôi sẽ tải nó ở một nơi khác với bảng kiểu. Thay vì tiêu đề, nó đi vào phần chân trang, ngay sau lệnh gọi jQuery.

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

Hoặc địa phương như vậy:

5. Đặt tất cả lại với nhau

Nếu bạn đã thực hiện đúng các bước trên, bạn sẽ kết thúc với một tệp trông như thế này cho giải pháp từ xa:

Ngoài ra, nếu bạn đang lưu trữ cục bộ, mẫu trang của bạn sẽ giống với mã bên dưới:

Nếu đó là những gì bạn có 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.

Bước 2: Thiết kế trang đích của bạn

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

Hiện tại, khi bạn điều hướng đến trang web mẫu của mình, bạn chỉ cần nhìn thấy một trang trống. Đã đến lúc thay đổi điều đó.

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

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

Vì vậy, chúng tôi sẽ sử dụng thanh điều hướng lớp học. Đây là một trong những yếu tố mặc định của Bootstrap. Nó tạo ra một yếu tố điều hướng đáp ứng 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 nhãn hiệu, bảng màu, khoảng cách và các thành phần khác.

Chúng tôi sẽ sử dụng nó như dưới đây và đăng nó ngay bên dưới nhãn:

 Logo    
 
 
 Trang Chủ 
 
 Trong khoảng 
 
 Tiếp xúc 
 
 
 

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

• thanh điều hướng-mở rộng-md – Điều này biểu thị tại điểm mà thanh điều hướng mở rộng từ biểu tượng dọc hoặc hamburger sang 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, có kích thước lớn hơn 768px.
• nhãn hiệu – Điều này được sử dụng cho thương hiệu trang web của bạn. Bạn cũng có thể bao gồm một tập tin hình ảnh logo ở đây.
• thanh điều hướng – Biểu thị nút chuyển đổi cho menu bị thu gọn. Mảnh dữ liệu chuyển đổi = "sụp đổ" định nghĩa rằng điều này sẽ chuyển sang một menu hamburger, không thả xuống, đó là tùy chọn khác. Điều quan trọng là bạn xác định một mục tiêu dữ liệu với id CSS (được xác định bởi #) và bọc một div có cùng tên xung quanh thực tế thanh điều hướng thành phần.
• navbar-toggler-icon – Như bạn có thể đoán, điều này tạo ra biểu tượng người dùng nhấp vào để mở menu trên màn hình nhỏ hơn.
• hải quân – Lớp học cho
  danh sách các yếu tố giữ các mục menu. Cái sau được ký hiệu là hàng hải và liên kết điều hướng.

  Tại sao tôi lại giải thích điều này rất nhiều?

  Bởi vì đó là điểm của Bootstrap. Bạn có tất cả các tiêu chuẩn này cho phép bạn tạo các phần tử với một số lớp HTML và CSS một cách nhanh chóng. Bạn không phải viết bất kỳ CSS nào để cung cấp kiểu dáng, mọi thứ đã được thiết lập trong Bootstrap. Thêm vào đó, tất cả mọi thứ là điện thoại di động đáp ứng ra khỏi hộp! Bạn có bắt đầu thấy điều này hữu ích như thế nào không?

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

  

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

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

  May mắn thay, nếu bạn muốn thay đổi kiểu dáng mặc định, bạn không phải lội qua một thư viện lớn các tờ mẫ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 đè lên kiểu dáng hiện có.

  Đối với điều đó, chỉ cần tạo một tệp trống với trình soạn thảo 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ư thế này:

  Đây là mã cho một biểu định kiểu nằm trong thư mục chính. Nếu bạn quyết định đặt bên trong của bạn css thư mục, hãy chắc chắn 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ụ: để định kiểu thanh điều hướng và các thành phần của nó, bạn có thể sử dụng đánh dấu như thế này:

  thân hình { đệm: 0; lề: 0; nền: # f2f6e9; } /*--- thanh điều hướng ---*/ .thanh điều hướng { nền: # 6ab446; } .liên kết điều hướng, .nhãn hiệu điều hướng { màu: #fff; con trỏ: con trỏ; } .liên kết điều hướng { lề phải: 1em! quan trọng; } .điều hướng liên kết: hover { màu: # 000; } .điều hướng sụp đổ { justify-content: flex-end; }

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

  

  Có vẻ tốt hơn trước, không phải là nó?

  3. Tạo một thùng chứa nội dung trang

  Sau thanh điều hướng, điều tiếp theo bạn muốn là một thù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 cho nó là bên dưới thẻ điều hướng:

  Lưu ý chất lỏng chứa lớp học. Đây là một trong những lớp Bootstrap mặc định. Áp dụng nó cho div phần tử tự động áp dụng một loạt CSS cho nó.

  Các -dịch một phần đảm bảo thùng chứa trải dài trên toàn bộ chiều rộng của màn hình. Ở đó cũng chỉ có một thùng đựng hàng, có độ 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ẽ thấy bất cứ điều gì (trừ khi bạn sử dụng các công cụ dành cho nhà phát triển). Điều đó vì bạn chỉ tạo ra 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 một hình ảnh nền và JavaScript tùy chỉnh

  Là 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 chúng tôi. Vì thế, chúng ta sẽ phải sử dụng một số jQuery để 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ủa tên main.js và đặt nó trong thư mục trang web của bạn. Sau đó, gọi nó trước khi kết thúc gắn thẻ bên trong index.html.

  Sau đó, bạn có thể sao chép và dán đoạn mã này để thực hiện

  yếu tố trải dài trên toàn bộ màn hình:

  $ (tài liệu). yet (function () { $ ('. tiêu đề'). height ($ (window) .height ()); })

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

  .tiêu đề { hình nền: url ('hình ảnh / tiêu đề-nền.jpg'); kích thước nền: bìa; vị trí nền: trung tâm; vị trí: tương đối; }

  Nếu bạn đặt một hình ảnh có kích thước đủ 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 một lớp phủ. Vì thế, bạn sẽ tạo một phần tử div khác bên trong phần tử bạn vừa đưa vào trước đó.

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

  .lớp phủ { 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 trang: 0; nền: rgba (0, 0, 0, 0,6); }

  Điều này sẽ tạo lớp phủ đẹp này cho hình ảnh bạn nhập trước đó:

  

  6. Bao gồm một tiêu đề trang và văn bản cơ thể

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

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

   
  Chào mừng đến với trang đích!
   
  Lorem ipsum dolor ngồi amet, consitetur 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.
   

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

  .sự miêu tả { trái: 50%; vị trí: tuyệt đối; hàng đầu: 45%; biến đổi: dịch (-50%, -55%); văn bản-align: trung tâm; } .mô tả h1 { màu: # 6ab446; } .mô tả p { màu: #fff; cỡ chữ: 1,3rem; chiều cao dòng: 1,5; }

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

  

  Nó thật sự bắt đầu đến với nhau?

  7. Tạo nút CTA

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

  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ụ đây. Trong trường hợp của tôi, tôi thêm đánh dấu sau ngay bên dưới nội dung trang bên trong thùng đựng hàng:

  Nói cho tôi biết thêm!

  Ngoài ra, 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; } .nút mô tả: hover { viền: 1px solid #fff; nền: #fff; màu: # 000; }

  Sau khi lưu và tải lại, nó trông như thế này:

  

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

  Tôi đã khá hài lòng với cách mọi thứ đang hình thành. Tuy nhiên, chúng tôi chưa hoàn thành với 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 để biết thêm thông tin. Đây là một đặc sản của Bootstrap vì nó phát huy thế mạnh của nó: tạo lưới. Đây là cách để làm điều đó trong trường hợp này:

   
   
   
  Lorem ipsum
    
  Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id Vulputate quam iaculis.
   
   
   
  Lorem ipsum
    
  Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id Vulputate quam iaculis.
   
   
   
   
   

  Điều đầu tiên bạn sẽ nhận thấy là hàng thành phần. Bạn cần điều này bất cứ khi nào tạo cột để hoạt động như một thù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 và col-sm-12. Chúng biểu thị rằng chúng ta đang xử lý các cột và kích thước chúng sẽ có 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 luôn cộng với số 12. Vì vậy, 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 cả lớn và vừa màn hình (12 chia cho 3 là 4) nhưng toàn bộ màn hình trên các thiết bị nhỏ (12 trong số 12 cột).

  Nó có ý nghĩa, không phải là nó?

  Bạn cũng sẽ nhận thấy rằng tôi đã bao gồm hình ảnh và thêm .chất lỏng hình ảnh Lớp học với họ. Đ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ó kiểu dáng sau bao gồm ở nơi thông thường:

  .đặc trưng { lề: tự động 4em; đệm: 1em; vị trí: tương đối; } .tiêu đề tính năng { màu: # 333; cỡ chữ: 1,3rem; trọng lượng phông chữ: 700; lề dưới: 20px; biến đổi văn bản: chữ hoa; } .tính năng img { -webkit-box-bóng: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-bóng: 1px 1px 4px rgba (0, 0, 0, 0.4); hộp bóng: 1px 1px 4px rgba (0, 0, 0, 0.4); lề dưới: 16px; }

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

  

  9. Thêm một hình thức liên lạc

  Bạn sẽ nhận thấy rằng một trong các trường mới vẫn trống. Đây là mục đích vì chúng tôi muốn thêm một hình thức liên lạc với nó. Đâ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 lạc.

  Tạo một hình thức liên lạc trong Bootstrap khá dễ dàng:

  Liên lạc!
   
    
   
    
   
    
   

  Đến giờ, tôi không nên giải thích việc đánh dấu để tạo cột nữa. Đây là những gì phần còn lại của đánh dấu có nghĩa là:

  • nhóm hình thức – Được sử dụng để bao quanh các trường mẫu để định dạng.
  • kiểm soát hình thức – Biểu thị các trường biểu mẫu như đầu vào, vùng văn bản, v.v..

  Có rất nhiều điều bạn có thể làm với các 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, ở trên là đủ. Đặt nó bên trong cột trống còn lại và sau đó thêm kiểu dáng này vào main.css:

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

  Khi bạn làm, bạn nhận được một hình thức như thế này:

  

  10. Tạo chân trang hai cột

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

  Bên cạnh đá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:

  • chữ hoa
  • phông chữ đậm
  • trung tâm văn bản

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

  Ngoài những điều trên, bạn có thể sử dụng kiểu dáng như thế này:

  .cuối trang { màu nền: # 222; màu: #ccc; đệm: 60px 0 30px; } .chân trang-bản quyền { màu: # 666; phần đệm: 40px 0; }

  Điều này dẫn đến một footer đẹp trông giống như vậy:

  

  11. Thêm truy vấn phương tiện truyền thông

  Trang này về cơ bản đã sẵn sàng. Nó cũng hoàn toàn chịu trách nhiệm. Tuy nhiên, trong giao diện di động của trình duyệt, phần trên không xuất hiện hoàn toàn đúng.

  

  Tuy nhiên, không phải lo lắng, bạn có thể sửa nó 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 web Bootstrap của mình, những cái 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 dừng đặt trước bao gồm trong Bootstrap.

  Kết quả là, để khắc phục vấn đề trên, bạn chỉ cần bao gồm một đoạn mã như thế này:

  @media (chiều rộng tối đa: 575,98px) { .sự miêu tả { trái: 0; đệm: 0 15px; vị trí: tuyệt đối; tôp 10%; biến đổi: không có; văn bản-align: trung tâm; } .mô tả h1 { cỡ chữ: 2em; } .mô tả p { cỡ chữ: 1,2rem; } .đặc trưng { lề: 0; } }

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

  

  12. Tải trang web của bạn lên máy chủ 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 thành cũng trên thiết bị di động và 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 một máy chủ web và tên miền. Bằng cách đó, mọi người có thể nhập địa chỉ trang web của bạn vào thanh trình duyệt của họ và sau đó truy cập trang web Bootstrap mới được đúc trực tuyến 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 máy 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ữ của bạn để kết nối với máy chủ của bạn từ xa. Khi bạn làm như vậy, bạn sẽ có thể thấy các tập tin và thư mục hiện có trên đó.

  

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

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

  

  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ã cho trang bao gồm CSS và JavaScript tùy chỉnh, bạn có thể tải xuống tất cả chúng ở đây. Với điều này, bạn có tất cả những gì bạn cần để tạo một trang đích với Bootstrap.

  Phần kết luận

  Bootstrap là một khung phát triển front-end mã nguồn mở, bất cứ 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 các trang web và thường chạy nhanh.

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

  Đến bây giờ, 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ệ.

  Tất nhiên, có nhiều thứ để học.

  Nhờ hướng dẫn Bootstrap cơ bản này, giờ bạn đã biết đủ để tiếp tục tiến về phía trước. Nếu bạn muốn đi sâu hơn vào khuôn khổ, một điểm khởi đầu tốt là Trường W3. Bên cạnh đó, chúng tôi hy vọng bạn thích hướng dẫn cho người mới bắt đầu này và muốn nghe suy nghĩ và kinh nghiệm của bạn về nó.

  Cập nhật: Chúng tôi cũng đã tạo một bảng cheat bootstrap cho người mới bắt đầu trong các phiên bản .pdf và .png.

  Bạn có suy nghĩ gì về hướng dẫn Bootstrap ở trên không? Câu hỏi, ý kiến, yêu cầu? Cho chúng tôi biết trong phần ý kiến ​​dưới đây!

  

  Jeffrey Wilson Administrator

  Sorry! The Author has not filled his profile.

  follow me