Bạn có phải là front end developer, người đang mệt mỏi với công việc viết đi viết lại cú pháp CSS không? . Bài viết này sẽ giải thích Bootstrap là gì và đề cập đến lợi ích của việc sử dụng web framework, cũng như cách nhúng nó vào dự án của bạn hợp lý
- Bootstrap là gì?
- 3 file main của Bootstrap
- Cách sử dụng Bootstrap
- Kết luận
Bootstrap là gì?
You could have Quen thuộc với chức năng của framework là gì. Nó tập hợp các cú pháp dành riêng cho nhiệm vụ nào đó trong một bộ sưu tập để giúp các nhà phát triển web xây dựng trang web nhanh hơn nhiều, vì họ không cần phải lo lắng về các lệnh và chức năng cơ bản
Mặc dù vậy, vẫn thiếu hệ thống nhất do công việc các thư viện được sử dụng quá nhiều, cần phải thay đổi liên tục. Bootstrap là câu trả lời cho vấn đề này
Khung giao diện người dùng là mã nguồn mở, ban đầu được xây dựng bởi Mark Otto và Jacob Thornton để thiết lập giao diện người dùng web nhanh hơn và dễ dàng hơn
Nó chứa tất cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như điều hướng, hệ thống lưới, băng góc ảnh và các nút
Mặc dù Bootstrap giúp tiết kiệm thời gian tiết kiệm thời gian của nhà phát triển từ việc phải quản lý các mẫu nhiều lần, nhưng mục tiêu chính của nó là tạo ra các trang web đáp ứng. Nó cho phép giao diện người dùng của trang web có thể hoạt động ở mức ưu tiên tối đa trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn
Do đó, các nhà phát triển không cần xây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa
Do sự phổ biến của nó, ngày càng có nhiều cộng đồng Bootstrap xuất hiện. Đó là nơi tuyệt vời để các nhà phát triển và nhà thiết kế trao đổi kiến thức và thảo luận về các bản vá framework mới nhất
3 file main của Bootstrap
Vì Bootstrap bao gồm một tập hợp các cú pháp thực hiện các chức năng cụ thể, điều đó chỉ có lý khi khung có các loại tệp khác nhau trong đó. Dưới đây là ba tập tin chính quản lý giao diện người dùng và chức năng của trang web
Bootstrap. css
Bootstrap. css là CSS khung sắp xếp và quản lý bố cục cục bộ của trang web. Trong khi HTML quản lý nội dung và cấu trúc của trang web, CSS xử lý bố cục cục bộ của trang web. Vì lý do đó, cả hai cấu trúc cần phải cùng tồn tại để thực hiện một hành động cụ thể
Do các chức năng của nó, CSS cho phép bạn tạo giao diện hệ thống tốt nhất trên bao nhiêu trang web tùy chọn. Giờ thì bạn có thể nói lời tạm biệt với công việc phải ngồi hàng giờ để chỉnh sửa thủ công chỉ nhằm thay đổi độ rộng của đường viền
Với CSS, tất cả những gì bạn cần làm là giới thiệu các trang web đến tệp CSS. Bất kỳ thay đổi nào cũng cần thiết có thể được thực hiện trong tệp đó một mình
CSS hàm không chỉ giới hạn ở các kiểu văn bản vì chúng có thể được sử dụng để định dạng các khía cạnh khác của trang web như bảng và bố cục hình ảnh
Do CSS có rất nhiều khai báo và bộ chọn nên việc ghi nhớ tất cả những cái đó có thể mất đi một chút thời gian
Bootstrap. js
Tệp này là phần cốt lõi của Bootstrap. Nó bao gồm các tệp JavaScript chịu trách nhiệm cho công việc tương tác của trang web
Để tiết kiệm thời gian khi viết cú pháp JavaScript nhiều lần, các nhà phát triển có xu hướng sử dụng jQuery. Nó có một thư viện JavaScript đa nền tảng, mã nguồn mở phổ biến cho phép bạn thêm các chức năng khác nhau vào một trang web
Dưới đây là một vài ví dụ về những gì jQuery có thể làm
- Thực hiện các yêu cầu Ajax như loại dữ liệu từ một vị trí khác một cách linh hoạt
- Tạo tiện ích bằng bộ sưu tập plugin JavaScript
- Tạo tùy chỉnh cấu hình bằng các thuộc tính CSS
- Thêm tính năng cho nội dung trang web
Mặc dù Bootstrap với các thuộc tính CSS và phần tử HTML có thể hoạt động tốt, nhưng nó cần jQuery để tạo thiết kế đáp ứng. Nếu không, bạn chỉ có thể sử dụng các phần tĩnh của CSS
Bạn cần thêm thông tin?
Glyphicons
Các biểu tượng là một phần không thể thiếu của giao diện trang web. Chúng thường được liên kết với các hành động và dữ liệu được xác định rõ nhất trong giao diện người dùng. Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó
Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở từ khóa để sử dụng miễn phí. Phiên bản miễn phí có giao diện tiêu chuẩn nhưng phù hợp với các chức năng thiết yếu
Nếu bạn muốn tìm biểu tượng có phong cách hơn, Glyphicons cũng bán các bộ biểu tượng cao cấp khác nhau, chắc chắn sẽ trông đẹp hơn trên từng trang web cụ thể
Bạn có thể tải các biểu tượng riêng biệt và theo chủ đề xuống miễn phí trên các trang web khác nhau như Flaticon, GlyphSearch và Icons8
Một số biểu tượng có thể bị ảnh hưởng bởi CSS để thay đổi giao diện trong khi các biểu tượng khác thì mặc định. Hãy sử dụng các biểu tượng phù hợp nhất với trang web bạn cần
Cách sử dụng Bootstrap
Để hiểu cách sử dụng bootstrap, hãy xem ví dụ dưới đây
html lang="en"> Bootstrap 101 TemplateHello, world!
Mã hóa ký tự cho tài liệu HTML. Trong trường hợp này, UTF-8 đề cập đến Unicode
meta charset="utf-8"
Cho biết bộ ký tự được sử dụng để viết trang web
meta http-equiv="X-UA-Compatible"
Specify the version of Internet Explorer will show page. Sử dụng chế độ Edge, nó được cài đặt để sử dụng chế độ cao nhất hiện có
meta name="viewport"
Bảo đảm rằng trang có tỷ lệ 1. 1 with look size
link href="css/bootstrap.min.css" rel="stylesheet"
Đây là phần chúng tôi bổ sung Bootstrap core CSS
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
Tải jQuery thông qua Google CDN. Sẽ tốt hơn nếu bạn tải nó từ CDN qua HTTP vì tệp có thể được lưu trong bộ nhớ cache trong một năm
src="js/bootstrap.min.js
Add JavaScript Core Bootstrap. Cú pháp này phải luôn nằm dưới cú pháp jQuery để hoạt động đúng. Quá trình bổ sung có thể được thực hiện thông qua URL của Google hoặc tải xuống thủ công
Kết luận
Bootstrap là front-end framework miễn phí ngày càng phổ biến hơn trong số các nhà phát triển front-end. Các nhà phát triển có thể dễ dàng sử dụng và tiết kiệm rất nhiều thời gian khi phải viết mã thủ công
Framework này cũng rất linh hoạt và có thể đáp ứng hầu hết mọi nhu cầu phát triển web front end. Các khả năng tốt nhất của nó bao gồm, nhưng không giới hạn tính năng web đáp ứng tối ưu trên tất cả các kích thước màn hình
Nếu bạn là nhà phát triển giao diện người dùng, bạn cần biết Bootstrap là gì và đây là thời điểm hoàn hảo để bạn bắt đầu sử dụng Bootstrap
Tác giả
Hải G
Hải G. là chuyên gia quản lý vận tải, điều hành các trang web dịch vụ. Anh có nhiều năm kinh nghiệm về VPS, Hosting, kỹ thuật SEO, CMS. Đặc biệt yêu thích WordPress và đã sử dụng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho các bạn khởi nghiệp