Anonim

Nếu bạn chưa bao giờ nghe về Bootstrap, một khung được phát triển bởi Twitter để tạo ra các trang web đẹp, thì bạn đã bỏ lỡ! Bootstrap giúp thiết kế một trang web khá nhanh chóng và dễ dàng mà không cần nhiều kiến ​​thức về CSS (Cascading Style Sheets). Nếu bạn chưa quen với lập trình cho web, bạn không cần biết một điều gì về CSS để bắt đầu tìm hiểu cách thức hoạt động của Bootstrap; tất cả những gì bạn cần là một tài liệu HTML. Chúng tôi sẽ xem xét Bootstrap, cho bạn biết tất cả những gì về nó, cách thức hoạt động và nếu đó là một lựa chọn tốt cho mọi trang web bạn xây dựng.

Chèn API Bootstrap vào tệp HTML của bạn

Bạn có một vài tùy chọn để chèn Bootstrap vào tệp dự án chính của bạn. Tùy chọn đầu tiên là chèn tất cả các tệp Bootstrap cần thiết vào dự án của bạn. Bạn có thể làm điều này bằng cách tải gói và tải nó lên thư mục dự án của bạn. Tất nhiên, bạn sẽ phải liên kết tệp CSS Bootstrap chính với tài liệu của mình. Trang web chính thức của Bootstrap có hướng dẫn từng bước về cách thực hiện việc này.

Tùy chọn khác là bỏ qua việc tải xuống gói và sử dụng Mạng phân phối nội dung (CDN). CDN cho phép bạn liên kết các tệp Bootstrap chính với tài liệu HTML của mình mà không cần tải xuống. Tất nhiên, điều này không phải lúc nào cũng là một điều tốt cho các trang web chuyên nghiệp, vì tôi sẽ không quá nhanh chóng rời khỏi trang kinh doanh hoặc danh mục đầu tư của mình để định mệnh nếu máy chủ đó bị sập. Tốt nhất là có các tệp trong dự án của bạn, nhưng với mục đích học tập, CDN sẽ làm tốt.

Để chèn Bootstrap vào tài liệu HTML của bạn, bạn chỉ cần đặt đoạn mã sau vào bên trong thẻ trong tài liệu HTML của bạn:

Khi các liên kết đó được chèn vào thẻ head đó, bạn sẽ được thiết lập để bắt đầu sử dụng các lớp Bootstrap. Tài liệu của bạn sẽ trông giống như thế này:

Bootstrap và các lớp học

Các phần tử bootstrap được chia thành các lớp, chúng chỉ là một bó CSS ​​được viết sẵn mà bạn có thể chèn vào phần đánh dấu của mình. Việc chèn các lớp vào đánh dấu của bạn rất dễ dàng, bạn chỉ cần biết tên của lớp bạn muốn sử dụng và sau đó áp dụng nó cho một trong các thành phần HTML của bạn bằng cách sử dụng giá trị class = Biệt lớp tên, như đã thảo luận trong bài viết trước.

Phần khó khăn là tìm ra cách tất cả những thứ đó phối hợp với nhau để tạo ra một cái gì đó đẹp. Bạn có thể kiểm tra tất cả các lớp khác nhau có sẵn trong Bootstrap ngay từ tài liệu chính thức. Bây giờ, thành thạo Bootstrap là một câu chuyện khác. Đó không phải là điều mà chúng tôi hoặc bất cứ ai khác có thể dạy cho bạn. Bạn có thể xem hướng dẫn sau khi hướng dẫn, nhưng để sử dụng tốt khung công tác, đi kèm với rất nhiều thử nghiệm và lỗi. Và, điều đó đòi hỏi bạn phải thực hành với nó trong các dự án của riêng bạn.

Với ý nghĩ đó, tôi khuyên bạn nên bắt đầu dự án HTML của riêng mình trên máy tính bằng cách sử dụng Atom hoặc một số trình soạn thảo văn bản khác, xem lại tất cả các lớp HTML và CSS, sau đó bắt đầu chơi xung quanh với Bootstrap. Và nếu bạn biết đủ đánh dấu, thậm chí có thể tạo trang web danh mục đầu tư của riêng bạn như một bài tập thử nghiệm.

Bootstrap là một lựa chọn khả thi cho mọi trang web?

Bootstrap là một khung công tác tuyệt vời, nhưng nó có phải là một lựa chọn khả thi cho mọi trang web bạn tạo không? Nó thực sự phụ thuộc vào nhà phát triển cũng như các yêu cầu của dự án. Trong nhiều môi trường chuyên nghiệp, bạn sẽ không thực sự có lựa chọn về những công nghệ bạn đang sử dụng, vì điều đó phần lớn sẽ phụ thuộc vào Trình quản lý dự án. Nếu nói Project Manager chọn sử dụng Bootstrap, thì bạn cũng sẽ kết hợp nó với một tấn CSS tùy chỉnh. Đây là những gì thường làm cho trang web của bạn trở nên độc đáo và khác biệt so với các trang web khác sử dụng Bootstrap.

Cá nhân tôi không thấy Bootstrap là một lựa chọn tuyệt vời cho mọi trang web. Chắc chắn, nó có thể giúp và cung cấp một số phím tắt, nhưng cuối cùng tôi đã thấy rằng thiết kế từ nền tảng với CSS là con đường tốt nhất phần lớn là do sự kiểm soát mà bạn có đối với nó. Nhưng một lần nữa, nếu bạn mới bắt đầu lập trình web, việc sử dụng Bootstrap hoàn toàn không phải là một điều xấu, nhưng đừng dựa vào nó cho sự nghiệp của bạn.

Điều đáng chú ý là nếu bạn là nhà phát triển mới bắt đầu, bạn không nên sử dụng Bootstrap cho tất cả các dự án trong danh mục đầu tư của mình. Bạn có thể thấy rằng bạn có thể thành thạo API, nhưng bạn hoàn toàn không biết cách của mình xung quanh CSS. Điều đó nói rằng, thật tốt khi có một hỗn hợp tốt cả hai trong danh mục đầu tư của bạn (hoặc thậm chí là độc quyền CSS, vì nó dễ dàng để lấy Bootstrap).

Đóng cửa

Đó là tất cả những gì Bootstrap nói ngắn gọn. Như tôi đã đề cập trước đó, tôi khuyến khích bạn bắt đầu dự án HTML của riêng bạn và thêm một số lớp khác nhau vào các thành phần để bắt đầu chơi xung quanh với khung. Bạn có thể tìm thấy tất cả các thành phần khác nhau mà Bootstrap cung cấp với các giải thích và ví dụ mã ở đây.

Bootstrap thực sự là một công cụ gọn gàng, nhưng hãy nhớ đừng chỉ dựa vào nó! Thật tốt khi làm quen với nó và biết cách của bạn xung quanh khuôn khổ, nhưng cũng đảm bảo rằng bạn đi sâu vào CSS để thực sự hiểu những gì đang diễn ra ở hậu trường. Không chỉ vậy, nhưng kiến ​​thức vững chắc về CSS khen ngợi Bootstrap rất nhiều, cho phép bạn thực sự tạo ra một số trang web độc đáo và đẹp mắt với tùy chỉnh của riêng bạn.

Cách bạn có thể sử dụng bootstrap để tạo một trang web đẹp