Tôi sẽ xây dựng một Trang tri ân đơn giản theo yêu cầu của dự án từ FreeCodeCamp bằng Bootstrap 4 với các chức năng tương tự như dự án mẫu của họ, sử dụng lớp từ Bootstrap và hoàn toàn không có css tùy chỉnh Show
Tôi sẽ hướng dẫn cách xây dựng trên Localhost sau đó đưa lên codepen. io Những kiến thức quan trọng đầu tiên cần nắm bắt Trước tiên ta sẽ khởi tạo tệp html với đoạn mã mẫu html lấy từ và sử dụng liên kết CDN
Hiển thị ký tự ẩn xem thô Cấu trúc của trang này được chia thành các phần sau 1. Ban đầu cấu trúc ban đầu 2. dựng bố cục 2. 1 Phần tiêu đề 2. 2 Hình ảnh minh họa và chú thích 2. 3. Phần nhỏ sử dụng chia làm 2 phần nhỏ 2. 3. 1. Dòng thời gian phần 2. 3. 2. Phần trích dẫn 3. Phần chân trang Xây dựng cấu trúc ban đầu cho trang Trước tiên, ta sử dụng lớp chứa và jumbotron để định cấu hình cấu trúc ban đầu cho trang Bố cục của trang Ta sử dụng class row, col-xs-12 để tạo bố cục cho toàn bộ phần body Tiêu đề phần Ta build title cho page bằng 2 thẻ h1 và h2, class text-center Hình ảnh minh họa và chú thích Ta sử dụng hình thu nhỏ của lớp với hình ảnh 1 thẻ và chú thích của lớp Sử dụng phần nhỏ Ta sẽ tạo các khung cho phần dòng thời gian dựa trên 3 tiêu chí. Use for extra small screen (Điện thoại) ta sử dụng col-xs-12. Use for small screen (Ipad) ta used col-sm-10 and col-sm-offset-1. Use for medium mode (Ipad pro) to be used col-md-8 and col-md-offset-2 Với phần blockquote ta sử dụng thẻ blockquote với thẻ p cho phần miêu tả và thẻ chân trang, trích dẫn cho phần ghi chú tên tác giả Bootstrap, là chủ đề của hướng dẫn này, là một khuôn khổ giao diện người dùng 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 lần đầu tiên bởi Twitter, giờ đây nó hỗ trợ mọi thứ từ ứng dụng web đến 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ể tạo 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 mình. Nó cũng đi kèm với chức năng bổ sung như băng chuyền, nút, cửa sổ bật lên, v.v. 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 các 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 phản hồi nhanh, ư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 P. S. 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 người mới bắt đầu. Nếu bạn hoàn toàn không có kinh nghiệm sử dụng đánh dấu, cách khác, bạn có thể sử dụng trình tạo trang web hoặc WordPress để tạo trang web Cách tạo một trang web bằng Bootstrap (Mục lục)
Tổng thời gian để tạo một trang web bằng Bootstrap. 3-4 giờ. Hướng dẫn Bootstrap 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 mình, 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 cái gì đó để tải nó vào 1. Tạo một trang HTMLBước đầu tiên trong hướng dẫn này, chúng ta sẽ tạo một mẫu HTML đơn giản làm cơ sở nơi chúng ta 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, chúng ta sẽ đơn giản gọi nó là bootstrap. Tại đây, tạo một tệp văn bản mới và gọi nó là chỉ mục. html. Mở nó bằng trình soạn thảo văn bản bạn chọn (e. g. Notepad++) rồi dán đoạn mã dưới đây vào !DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>Đừng quên lưu tệp của bạn trước khi tiếp tục 2a. Tải Bootstrap qua CDNNhư đã 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 ở đầ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 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 <script src="jquery-3.5.1.min.js"></script>1 trong mẫu của bạn <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> Đảm bảo lấy liên kết thực 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 Bây giờ khi bạn lưu tệp, bất kỳ trình duyệt nào mở tệp sẽ tự động tải nội dung Bootstrap Sử dụng phương pháp từ xa là một ý tưởng hay vì nhiều người dùng đã có sẵn tệp trong bộ đệm 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 đề 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ể nhận 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 ít mã hơn mà chúng tôi cần đăng 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 các tập tin nguồn Khi bạn đã tải xuống xong, hãy giải nén tệp và sao chép nội dung của nó vào cùng thư mục với chỉ mục. html. Sau đó, bạn có thể tải Bootstrap CSS vào dự án của mình như thế này <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 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 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ó khả năng tải nó từ xa hoặc lưu trữ cục bộ (Sổ tay. 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 dưới đây. 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 nào để 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ó ghi <script src="jquery-3.5.1.min.js"></script>2 trên trang của bạn <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> Ngoài ra, tải xuống jQuery (nhấp chuột phải > 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 <script src="jquery-3.5.1.min.js"></script> Một lần nữa, đảm bảo đường dẫn tương ứng với vị trí và phiên bản jQuery của bạn 4. Tải JavaScript BootstrapBướ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 biểu định kiểu. Thay vì tiêu đề, nó đi vào chân trang, ngay sau lệnh gọi jQuery Bạn có thể gọi nó từ xa như thế này <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> Hoặc tại địa phương như vậy ________số 85. Đặt nó tất cả cùng nhauNếu bạn đã thực hiện đúng các bước trên, bạn sẽ nhận được một tệp giống như thế này cho giải pháp từ xa <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>Và đây là những gì bạn nên có cho phiên bản tải tất cả nội dung cục bộ <script src="jquery-3.5.1.min.js"></script>0 Nếu nó giống với nội dung trong tệp của bạn và bạn đã lưu công việc của mình, thì 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? Hiện tại, khi bạn mở trang web mẫu của mình trong trình duyệt, bạn chỉ thấy một trang trống. Thời gian để thay đổi điều đó. Để dạy cho 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 yếu 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 khung công tác phía trước 1. Thêm 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. Làm như vậy cho phép khách truy cập của bạn khám phá trang web của bạn và khám phá phần còn lại của các trang của bạn Đối với điều đó, chúng tôi sẽ sử dụng lớp <script src="jquery-3.5.1.min.js"></script>3. Đây là một trong những thành phần mặc định của Bootstrap, mà bạn sẽ thấy rất nhiều trong hướng dẫn này. Nó tạo 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 bài này ngay sau thẻ <script src="jquery-3.5.1.min.js"></script>4 <script src="jquery-3.5.1.min.js"></script>3 Một số giải thích về mãPhần đá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
Tại sao chúng tôi giải thích điều này rất 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. Ngoài ra, tất cả đều đáp ứng trên thiết bị di động. Bạn đang bắt đầu thấy điều này hữu ích như thế nào? Ở trên là đủ để thêm một thanh điều hướng vào trang web của bạn. Tuy nhiên, tại thời điểm này, có vẻ như vẫn còn rất ít  Đó là bởi vì nó không có nhiều kiểu dáng đi kèm. Mặc dù bạn có thể thêm các màu mặc định (ví dụ: bằng cách đặt cho <script src="jquery-3.5.1.min.js"></script>3 một lớp như <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>8), thay vào đó, chúng tôi muốn thêm màu của riêng mình 2. Bao gồm CSS tùy chỉnhMay mắn thay, nếu bạn muốn thay đổi kiểu dáng mặc định, bạn không cần phải lội 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 một 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 bằng trình soạn thảo văn bản của bạn và gọi nó là tệp chính. css. Lưu nó, sau đó thêm nó vào phần đầu của trang Bootstrap của bạn như thế này <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">0 Đâ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 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 thành phần của nó, bạn có thể sử dụng đánh dấu như thế này <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">1 và đây là kết quả Có vẻ tốt hơn trước, phải không? 3. Tạo vùng chứa nội dung trangSau thanh điều hướng, điều tiếp theo bạn muốn là vùng chứa 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à cái này bên dưới thẻ <script src="jquery-3.5.1.min.js"></script>3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">2 Lưu ý lớp <script src="bootstrap/js/bootstrap.min.js"></script>0. Đây là một trong những lớp Bootstrap mặc định đó. Áp dụng nó cho phần tử div sẽ tự động áp dụng một loạt CSS cho nó Phần <script src="bootstrap/js/bootstrap.min.js"></script>1 đả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. Cũng chỉ có <script src="bootstrap/js/bootstrap.min.js"></script>2, là 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 màn hình Tuy nhiên, nếu bây giờ bạn tải lại trang, bạn vẫn không thấy 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ỉnhLà bước tiếp theo trong hướng dẫn Bootstrap này, chúng tôi muốn bao gồm một hình nền toàn màn hình cho tiêu đề trang đích của chúng tôi. Cuối cùng, chúng ta 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 chính. js và đặt nó trong thư mục trang web của bạn. Sau đó, gọi nó trước thẻ đóng <script src="jquery-3.5.1.min.js"></script>2 bên trong chỉ mục. html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">3 Sau đó, bạn có thể sao chép và dán đoạn mã jQuery này để làm cho phần tử <script src="bootstrap/js/bootstrap.min.js"></script>4 trải dài trên toàn bộ màn hình <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">4 Tuy nhiên, như đã đề cập, Bootstrap 5 sẽ không còn đi kèm thư viện jQuery nữa. Do đó, như một giải pháp 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ư vậy <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">5 Sau đó, điều duy nhất còn lại là đặt hình nền. Bạn có thể làm điều này như vậy bên trong chính. css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">6 Nếu bạn đặt một hình ảnh đủ 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ư thế này 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ủ. Để làm được điều đó, hãy tạo một div khác bên trong phần tử <script src="bootstrap/js/bootstrap.min.js"></script>4 mà bạn vừa tạo trước đó <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">7 Sau đó, bạn có thể thêm phần sau vào tệp CSS tùy chỉnh của mình <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">8 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 dungBướ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 chúng, chỉ cần thêm đoạn mã này vào trong vùng chứa mà bạn đã thiết lập ở bước cuối cùng, bên dưới lớp phủ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">9 Sau đó, thêm đánh dấu sau vào chính. css <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">0 Khi bạn làm như vậy, trang đích bây giờ trông như thế này Nó thực sự bắt đầu đến với nhau, phải không? 7. Tạo nút CTAKhông có trang đích nào hoàn chỉnh nếu 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ẽ thiếu sót nếu không bao gồm cách tạo một cái trong hướng dẫn Bootstrap này May mắn thay, khung 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 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 <script src="bootstrap/js/bootstrap.min.js"></script>6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">1 Ngoài ra, chúng tôi thêm CSS này vào <script src="bootstrap/js/bootstrap.min.js"></script>7 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">2 Sau khi lưu và tải lại thì nó như thế này 8. Thiết lập một phần ba cộtChúng ta đã 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 hoàn thành với trang. 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 điểm đặc biệt của Bootstrap vì nó phát huy hết sức mạnh của nó, tạo ra một lưới và không có hướng dẫn nào hoàn chỉnh nếu không có nó. Đây là cách để làm điều đó trong trường hợp này <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">3 Điều đầu tiên bạn sẽ chú ý là phần tử <script src="bootstrap/js/bootstrap.min.js"></script>8. Bạn cần điều này bất cứ khi nào tạo 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. <script src="bootstrap/js/bootstrap.min.js"></script>9, <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>0 và <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>1. 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ẽ 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 có tổng bằng số mười hai. Vì vậy, cung cấp cho họ các lớp trên có nghĩa là họ 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 thiết bị nhỏ (mười hai trong số mười hai cột) Nó có ý nghĩa, phải không? Bạn cũng sẽ nhận thấy rằng chúng tôi đã bao gồm các hình ảnh và thêm lớp <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>2 cho chúng. Điều này là để làm cho chúng phản hồi để chúng mở rộng cùng với màn hình mà trang được xem trên đóNgoài ra, bạn có thể bao gồm kiểu dáng sau ở vị trí thông thường <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">4 Khi thêm vào bên dưới nội dung chính và lưu lại thì nó như thế này Nhân tiện, nếu bạn không muốn đặt bóng hộp trên các phần tử của mình theo cách thủ công thông qua CSS, bạn cũng có thể chỉ định các lớp thiết lập sẵn của Bootstrap cho điều đó. Đây là <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>3, <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>4 và <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>5. Thêm thông tin tại đây9. Thêm một biểu mẫu liên hệBạn sẽ nhận thấy rằng một trong những trường mới vẫn còn trống. Điều này là có chủ đí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 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">5 Hãy chú ý đến các lớp CSS này
Bạn có thể làm nhiều hơn nữa 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, với mục đích trình diễn, những điều trên là đủ. Đặt nó vào trong cột trống còn lại và sau đó thêm kiểu dáng này vào chính. css <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">6 Khi bạn làm, bạn nhận được một hình thức như thế này 10. Bao gồm một phần nhómBố cục thẻ là một thứ khác mà Bootstrap vượt trội. Các lớp CSS tùy chỉnh của nó giúp việc tạo bố cục giống như Pinterest trở nên dễ dàng. Sau đây, chúng tôi sẽ sử dụng điều này để thiết lập một 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àu khác. Vì lý do đó, trước tiên chúng tôi bao gồm một phần tử <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>0 khác làm nền của nó. Bên trong, có một vùng chứa khác với lớp tùy chỉnh để có thể tùy chỉnh nhiều hơn, theo sau là một hàng <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">7 Tạo thẻ rất dễ dàng, chỉ cần đặt lớp <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>9 cho một phần tử. Bạn cũng có thể sử dụng các lớp lưới để định 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, nên chúng tôi cũng sẽ thêm lớp Bootstrap <script src="jquery-3.5.1.min.js"></script>00 vào đó <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">8 Thẻ có thể chứa các yếu tố khác nhau. Trong trường hợp của chúng tôi, chúng tôi muốn có 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, 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 <script src="jquery-3.5.1.min.js"></script>01 để định vị hình ảnh ở trên cùng của thẻ. Chúng tôi cũng sẽ cung cấp cho nó lớp <script src="jquery-3.5.1.min.js"></script>02 để làm tròn hình ảnh Sau đó, chúng ta tạo một phần tử mới với lớp <script src="jquery-3.5.1.min.js"></script>03 chứa tiêu đề và đoạn văn với lớp <script src="jquery-3.5.1.min.js"></script>04 và <script src="jquery-3.5.1.min.js"></script>05 tương ứng. Đây là những gì nó trông giống như tất cả cùng nhau <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">9 Bây giờ khi chúng ta đặt nó 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 ta sẽ 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 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>0 11. Tạo chân trang hai cộtĐượ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. Đến bây giờ, điều này không còn gây ra nhiều vấn đề cho bạn nữa <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>1 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
Nó sẽ 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à kiểu chữ tại đây Ngoài cách trên, bạn có thể sử dụng kiểu dáng như thế này <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>2 Điều này dẫn đến một footer đẹp trông giống như vậy 12. Thêm truy vấn phương tiệnHiện tại trang này về cơ bản đã sẵn sàng. Nó cũng đáp ứng đầy đủ. 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 hoàn toàn. 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 lỗi đó khá dễ dàng bằng 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, chúng sẽ hoạt động giống như trong các trường hợp khác. Bạn chỉ cần ghi nhớ những gì có trong Bootstrap Do đó, để khắc phục sự cố trên, bạn chỉ cần thêm một đoạn mã như thế này <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>3 Sau đó, mọi thứ vẫn như nó phải thế 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ố phần khác của trang đích trên màn hình nhỏ hơn 13. Tạo các trang bổ sungCho đế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 cứ đâ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 <script src="jquery-3.5.1.min.js"></script>09 và đặt cho nó một tên khác, điển hình là tên của trang khác mà bạn muốn tạo Vì vậy, ví dụ, chúng ta có thể đặt tên cho bản sao là <script src="jquery-3.5.1.min.js"></script>30. Tuy nhiên, tại sao sao chép nó và không bắt đầu từ đầu? . g. menu điều hướng) và chỉ xóa hoặc sửa đổi những gì bạn muốn thay đổi. Chẳng hạn, đây là trang Giới thiệu có thể trông như thế nào Khi bạn có tệp thứ hai, tất cả những gì còn lại phải làm là đảm bảo liên kết trong menu điều hướng thực sự trỏ đến nó như vậy <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>4 Sổ tay. Để điều này hoạt động, <script src="jquery-3.5.1.min.js"></script>30 phải ở cùng thư mục với <script src="jquery-3.5.1.min.js"></script>09. Nếu nó nằm trong một thư mục con có tên là html, bạn sẽ liên kết với nó như sau <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>5 Thế 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 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 luôn phải cập nhật liên kết trong tất cả các tệp khác 14. Thưởng. Tạo một phương thứcNhư một phần thưởng, chúng tôi cũng sẽ tạo một phương thức cho trang web thử nghiệm của mình. Điều này không thực sự 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 thiện hướng dẫn này Trong trường hợp bạn không quen thuộc với thuật ngữ này, phương thức có nghĩa là một yếu tố giống 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ứcNhư 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 tôi 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 Để làm điều này, chỉ cần thêm đoạn JavaScript này vào trang chính của bạn. tập tin js <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>6 Đ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 đã đặt thời gian cho nó là 500 mili giây, vì chúng tôi muốn xem nhanh phương thức 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 khoảng thời gian dài hơn để khách truy cập của bạn nhìn 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 <script src="jquery-3.5.1.min.js"></script>33, <script src="jquery-3.5.1.min.js"></script>34 và <script src="jquery-3.5.1.min.js"></script>35 được gán cho chúng tương ứng <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>7 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 nội dung Chúng tôi cũng đã đặt id cho phần tử phương thức là <script src="jquery-3.5.1.min.js"></script>36 để giúp nhắm mục tiêu CSS dễ dàng hơn và cũng để phần tử này hoạt động với trình kích hoạt JavaScript. Lớp <script src="jquery-3.5.1.min.js"></script>37 đảm bảo rằng sự xuất hiện và biến mất của nó không đột ngột. Đồng thời, <script src="jquery-3.5.1.min.js"></script>38 xác định kích thước của cửa sổ phương thức và <script src="jquery-3.5.1.min.js"></script>39 căn giữa nó theo chiều dọc trên màn hình Tuy nhiên, nơi để đặt mã này? . Đánh dấu phương thức nằm ngay trước thẻ đóng <script src="jquery-3.5.1.min.js"></script>2 và bên dưới lệnh gọi jQuery và bất kỳ tệp JavaScript nào Tuy nhiên, mặc dù nó nằm trong phần đánh dấu trang, nhưng do lớp <script src="jquery-3.5.1.min.js"></script>33, nó sẽ không hiển thị trên trang trừ khi được kích hoạt Điền nó với nội dungĐược rồi, để làm cho nó đẹp hơn. Tiếp theo, chúng tôi muốn tạo tiêu đề phương thức có hình ảnh bên trong cũng như nút để đóng cửa sổ bật lên. Bạn có thể làm điều này bằng cách đặt đánh dấu này ở đây bên trong <script src="jquery-3.5.1.min.js"></script>35 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>8 Lưu ý lớp <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">03 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êm về nó. Đối với nút đóng, bạn cần bao gồm <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">04 để nó thực sự đóng cửa sổ bật lên Đây là những gì chúng ta có cho đến nay Bây giờ chuyển sang nội dung phương thức, chúng tôi sẽ đặt bên dưới <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">05 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 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>9 Nếu bạn đã làm theo hướng dẫn Bootstrap, các lớp <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">06 và <script src="jquery-3.5.1.min.js"></script>00 sẽ tự giải thích. Tuy nhiên, lưu ý <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">08 ở phía dưới. Đây là một lớp Bootstrap cho phép bạn đặt các đầu vào như các trường biểu mẫu và các nút cạnh nhau Lớp <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">09 đặt nút sau trường biểu mẫu. Ngoài ra còn có <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">10, nếu bạn muốn đặt bất cứ thứ gì trước nó. Đâ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à phong cách. Vì vậy, bao gồm đánh dấu này trong chính của bạn. biểu định kiểu css để đạt được giao diện ở trên <script src="jquery-3.5.1.min.js"></script>0 15. Tải trang web của bạn lên máy chủ lưu trữ webNế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 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ủ lưu trữ 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 trình duyệt của họ và sau đó truy cập trực tuyến trang web Bootstrap mới được tạo 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 ứ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ữ 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ể xem các tệp và thư mục hiện có trên đó Điều hướng đến thư mục mà tên miền của bạn được trỏ tới (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 của bạn, đánh dấu tất cả các tệp bên trong, sau đó kéo chúng vào máy chủ để bắt đầu tải lên. Quá trình sẽ mất một lúc để hoàn tất 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 bạn truy cập miền của mình, bạn sẽ có thể xem 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ã 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ả bên dưới. 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 Nhấp vào nút để tải xuống các tập tin Suy nghĩ cuối cùng. Hướng dẫn dành cho người mới bắt đầu BootstrapBootstrap là một khung phát triển giao diện người dùng, mã nguồn 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 các 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 giải pháp thay thế hợp lệ để tạo một trang web Đến 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ệ. Bạn thậm chí còn biết cách sử dụng thẻ Bootstrap và chức năng phương thức Tất nhiên, còn nhiều điều phải học Nhờ hướng dẫn Bootstrap cơ bản này, bạn đã học đủ để tự mình tiếp tục tiến về phía trước. Vì vậy, nếu bạn muốn tìm hiểu sâu hơn về khuôn khổ, điểm khởi đầu tốt là W3Schools hoặc 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 bảng cheat bootstrap 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 Bên cạnh đó, 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à rất muốn nghe những suy nghĩ và kinh nghiệm của bạn khi làm việc với Bootstrap |
