Làm cách nào để làm cho trang web bootstrap 5 của tôi phản hồi nhanh?

Trong bài viết này, chúng tôi sẽ xây dựng một trang web Bootstrap đáp ứng từ đầu. Đến cuối bài viết này, bạn sẽ đủ quen thuộc với phiên bản mới nhất của khung CSS phổ biến này để có thể xây dựng các biến thể của nó theo nhu cầu của dự án.

Xây dựng các trang web đáp ứng là phải hiện nay. Mọi người truy cập trang web từ tất cả các loại thiết bị và Google đã nhấn mạnh tầm quan trọng của thiết kế web đáp ứng khi chỉ định xếp hạng trong kết quả trang web

Thiết kế các trang web đáp ứng từ đầu có thể gây khó khăn cho người mới bắt đầu, mặc dù các thông số kỹ thuật Flexbox và CSS Grid mới nhất giúp đạt được kết quả tuyệt vời trong lĩnh vực này dễ dàng hơn nhiều so với trước đây.

Tuy nhiên, đối với những người chưa sẵn sàng xử lý các kỹ thuật bố cục tiên tiến, lưới Bootstrap vẫn cung cấp một giải pháp thay thế tuyệt vời

“Trang web Bootstrap đáp ứng” nghĩa là gì

Điều đầu tiên xuất hiện trong đầu khi chúng tôi sử dụng từ “Thiết kế đáp ứng” là các trang web phải tương thích với tất cả các loại thiết bị và kích thước màn hình. Có một nhu cầu liên tục trong ngành để làm cho mọi trang web phản hồi nhanh hơn để có thể đọc nội dung trực tuyến tốt hơn trong các môi trường khác nhau

Với sự trợ giúp của CSS3 và chắc chắn là HTML5, đây hiện là xu hướng hợp nhất. Nhưng nếu bạn là nhà phát triển chứ không phải nhà thiết kế thì sao?

Chà, bạn không phải lo lắng nữa. Vì Bootstrap là siêu anh hùng trong lĩnh vực khung CSS, nên bạn sẽ có thể xử lý thiết kế web đáp ứng với sự trợ giúp của nó ngay lập tức

Đang cài đặt

Việc đảm bảo bạn có được một trang web Bootstrap đáp ứng cũng đơn giản như việc đặt đúng thẻ meta vào phần đầu trang web của bạn

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Về bản chất, thẻ meta ở trên khá dễ hiểu. Chúng tôi đang đặt chiều rộng của trang thành chiều rộng của thiết bị và ban đầu chia tỷ lệ thành 1 — kích thước mặc định của nó

Ngoài ra, bạn tốt để đi. Bootstrap đáp ứng theo mặc định

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

Đây là bản demo của trang chúng tôi sẽ xây dựng

Xem Pen Building Responsive Websites Sử dụng Bootstrap của SitePoint (@SitePoint) trên CodePen

Hãy bắt đầu xây dựng trang web Bootstrap đáp ứng của chúng tôi

Tôi đã chia trang web phản hồi ở trên thành các danh mục khác nhau và chúng ta sẽ xem cách xây dựng chi tiết từng danh mục.

1. điều hướng đáp ứng
2. khu vực tiếp thị
3. phần nội dung
4. thanh bên phải
5. chân trang

Điều hướng đáp ứng

Hãy xây dựng thanh điều hướng của trang web. Nó sẽ chứa tiêu đề của trang web và một số mục liên kết menu được căn phải. Điều này sẽ được cố định ở đầu trang web, như bạn đã thấy trong trang demo. Vì vậy, đây là đánh dấu cho điều này

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

Lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

0 dùng để hiển thị phần điều hướng. Một lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

1 bổ sung giúp nó xuất hiện ở đầu trang. Các lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

2 và

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

3 lần lượt kiểm soát màu văn bản và màu nền của thanh điều hướng. Khá rõ ràng

Hãy tiếp tục và chèn thêm một số mã vào đó

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

4 được sử dụng để chứa mọi thứ bên trong thanh điều hướng dưới dạng trình bao bọc

Cho đến bây giờ, bất cứ điều gì chúng tôi đã thêm chỉ là cấu trúc cơ bản của thanh điều hướng của chúng tôi. Hãy xem những thứ kỳ diệu thực sự giúp điều hướng phản hồi nhanh

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Responsive Websitea>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      
      <ul class="navbar-nav mr-auto">

        
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)span>
          a>
        li>

        
        <li class="nav-item">
          <a class="nav-link" href="#">Abouta>
        li>

        

      ul>

      
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Logina>
        li>
      ul>
    div>
  div>
nav>

Việc xây dựng thương hiệu và các mục menu là tự giải thích. Rõ ràng là việc thêm lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

5 sẽ mang lại cho tiêu đề một cái nhìn rõ ràng và được sử dụng cho tên của trang web. Các mục

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

6 được bao bọc bên trong một

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

7 bổ sung với các lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

8, được sử dụng để làm cho menu trông giống như một ngăn xếp khi xem trong các trình duyệt nhỏ hơn

Ngay bên dưới nhãn hiệu, bạn có thể thấy một liên kết bổ sung với lớp

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

9 bao bọc một khoảng

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

0. Liên kết này chỉ hiển thị trên màn hình nhỏ hơn có biểu tượng danh sách. Ngoài ra, hãy xem chúng tôi đã sử dụng

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

1 mà Bootstrap sử dụng để ẩn/hiện các mục menu trong các cửa sổ nhỏ hơn.

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

2 được sử dụng để xác định menu nào sẽ ẩn/hiện

Khu vực tiếp thị

Khu vực tiếp thị sẽ được tạo bằng cách sử dụng

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

7 với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

4. Bên trong nó, thêm

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

5 với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

6, một đoạn văn và liên kết với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

7. Lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

6 làm nổi bật tiêu đề chung. Điều tương tự cũng xảy ra với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

9 trên thẻ

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

0. Mã sẽ giống như dưới đây

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

6

Phần nội dung

Đối với phần nội dung, chúng tôi sẽ sử dụng hệ thống lưới Bootstrap dựa trên Flexbox mới. Chúng tôi bắt đầu bằng cách chia trang thành hai cột, một cột rộng hơn và một cột nhỏ hơn. Vì vậy, đánh dấu ban đầu diễn ra như thế này

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">

7

Lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

1 chỉ ra rằng bố cục hai cột sẽ chỉ được kích hoạt từ màn hình cỡ trung bình trở lên. Màn hình nhỏ hơn sẽ có cả hai cột xếp chồng lên nhau. Ngoài ra, hãy chú ý đến những con số ở cuối lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

1. Tổng của chúng là 12, là tổng số cột trong lưới Bootstrap. 8 + 4 = 12. Lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

3 là một trong nhiều lớp tiện ích mà Bootstrap cung cấp. Cái cụ thể này là một phần của các lớp tiện ích giãn cách và được sử dụng để tạo một số lề ở dưới cùng của mỗi cột

Bootstrap cho phép bạn dễ dàng lồng các cột bằng cách thêm một phần tử

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

7 khác với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

5 bên trong cột chứa. Bạn không thể có tổng cộng nhiều hơn 12 cột nhưng chắc chắn bạn có thể có ít hơn 12 cột nếu muốn. Bản trình diễn của chúng tôi sẽ có ba cột lồng vào nhau có độ dài bằng nhau. Bên trong cột rộng hơn, thêm đoạn mã sau

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

3

Để biết thêm chi tiết, hãy truy cập tài liệu Lưới của Bootstrap, tài liệu này thực sự thân thiện với người dùng và chứa nhiều thông tin tuyệt vời

Thanh bên phải

Thanh bên phải sẽ chứa danh sách điều hướng dọc. Bên trong cột lồng nhau nhỏ hơn, bao gồm đánh dấu cho danh sách không có thứ tự

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

4

Bootstrap thêm một số điều thú vị vào danh sách không có thứ tự đơn giản với lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

6. Thêm lớp

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

7 đảm bảo danh sách hiển thị theo chiều dọc

Xây dựng chân trang

Chân trang của chúng tôi sẽ là một vùng chứa một cột đơn giản với thông tin bản quyền. Nhưng bây giờ bạn đã biết cách lưới Bootstrap hoạt động, bạn có thể tiếp tục và làm cho nó phức tạp như bạn muốn

Vì vậy, mã cho chân trang ở đây

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

7

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

8 là một lớp tiện ích tiện dụng để căn chỉnh văn bản, trong khi đó,

<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    

  div>
nav>

9 là một lớp tiện ích giãn cách khác giúp tạo một số lề trên cùng cho chân trang

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

7

Hãy xem lại kết quả cuối cùng

Xem Pen Building Responsive Websites Sử dụng Bootstrap của SitePoint (@SitePoint) trên CodePen

Sự kết luận

Chúng tôi thực sự đã đi đến cuối bài viết. Chúc mừng bạn đã xây dựng trang web đáp ứng đầu tiên của mình. Hãy thử thay đổi kích thước cửa sổ hoặc mở trang demo trên nhiều thiết bị khác để xem bản chất phản hồi thực tế

Thực sự không có giới hạn cho những gì bạn có thể làm với Bootstrap. Bạn có thể tùy chỉnh hoàn toàn để làm cho nó trông cá nhân hơn, bằng cách sử dụng tài liệu biểu định kiểu tùy chỉnh của bạn hoặc bằng cách sử dụng các biến Sass và bản đồ Sass của nó

Tôi hy vọng bạn đã vui vẻ đọc bài viết này. Cảm ơn bạn

Nếu bạn đã nghe nói về Bootstrap nhưng đã ngừng học nó vì nó có vẻ quá phức tạp, thì hãy xem qua khóa học Giới thiệu về Bootstrap 4 của chúng tôi để được giới thiệu nhanh chóng và thú vị về sức mạnh của Bootstrap

Chia sẻ bài viết này

Syed Fazle Rahman

Nhà thiết kế web với hơn 6 năm kinh nghiệm, bao gồm trải nghiệm người dùng và phát triển giao diện người dùng. Hiện tại, Giám đốc điều hành và Đồng sáng lập Hashnode, một mạng lưới các nhà phát triển phần mềm. Đã xuất bản hai cuốn sách. Jump Start Bootstrap và Jump Start Foundation cho SitePoint Premium

Bootstrap 5 có đáp ứng không?

HTML5 có đáp ứng không?