Hướng dẫn cài package Bootstrap 4 Snippets cho Sublime Text 3

Demo: Mình sẽ update sau.

Cài Bootstrap 4 Snippets cho Sublime Text 3
Cài Bootstrap 4 Snippets cho Sublime Text 3

Đối với một Web Developer, đặc biệt là Front End Developer thì việc dựng 1 giao diện web phải thật chuẩn nhưng cũng phải nhanh để kịp tiến độ dự án. Cho đến thời điểm hiện giờ thì có nhiều Front End Frameworks hỗ trợ, điển hình là UIKit, Bootstrap, Foundation… và các code editor để ta có thể thao tác (coding) trên đó như Atom, Sublime Text 3, Visual Code Studio… Trong đó, Sublime Text 3 là nhẹ nhất và đem lại hiệu quả không hề kém so với các code editor còn lại.

Để đẩy nhanh việc code khi dùng Bootstrap thì có 1 package ra đời đó là Boostrap Snippets. Tác dụng là thay vì phải viết hay copy 1 đoạn code khá dài liên quan đến menu, button, template… hay thậm chí là bất cứ thứ gì trong Bootstrap thì ta chỉ cần gõ vài từ khóa rồi ấn Enter hay Tab cái nó đã ra hết rồi. Phiên bản hiện giờ là Bootstrap 4 nên mình sẽ hướng dẫn cài package Bootstrap 4 Snippets cho Sublime Text 3 nhé.

Cài package Bootstrap 4 Snippets cho Sublime Text 3

Bước 1: Mở Sublime Text 3, tìm và cài package Bootstrap 4 Snippets theo 1 trong 2 cách sau:

  • Preferences – Package Control – gõ Install Package và ấn Enter để truy cập vào toàn bộ package đang hỗ trợ Sublime Text. Tiếp đến gõ và tìm Bootstrap 4 Snippets, tìm thấy thì cài đặt (đợi vài giây quá trình cài đặt sẽ xong)
  • Ấn tổ hợp phím Ctrl + Shift + P để mở Package Control và làm tiếp theo bước trên.

Trong trường hợp Sublime Text của bạn không có Package Control thì hãy khắc phục theo bài viết tại https://packagecontrol.io/installation#st3 là được nhé.

Bước 2: Sau khi cài đặt xong package thì hãy clone repository hay tải file .zip của package này về tại https://github.com/degouville/sublime-bootstrap4 và chọn mục Clone or download.

Bước 3: Cuối cùng, hãy giải nén file .zip (mới tải về) và copy hết thư mục mới giải nén đó vào thư mục package của Sublime Text 3. Để tìm thư mục này 1 cách nhanh chóng nhất thì ngay tại Sublime bạn vào PreferencesBrowse Packages là ra. Như vậy là hoàn thành xong phần cài đặt package.

Cách sử dụng

Bây giờ, vào Sublime Text 3, tạo 1 file .html và thao tác với nó. Bạn thử ấn b4navbartoggler (gõ liền luôn không có dấu cách cũng không có dấu hai chấm nhé) để tạo 1 menu (đã responsive) xem được không? Nếu nó hiện ra b4:navbar:toggler như này thì thành công.

Sau khi ấn Enter nó sẽ ra như này. Như các bạn thấy sẽ không cần phải qua trang chủ Bootstrap để copy về đúng không?

Lưu ý: Nếu bạn gõ b4 rồi mà không thấy nó gợi ý thì ta phải cho phép b4 trong Preferences.sublime-settings bằng cách vào Preferences (thanh công cụ) – Settings.

Tại đây sẽ có 2 cột. 1 bên là Preferences.sublime-settings mặc định (không sửa gì được trong này) và bên kia (tay phải) sẽ là Preferences.sublime-settings cho người dùng (sẽ chèn code tại đây nhé). Sau đó, hãy copy và dán dòng cho phép b4 vào trong dấu ngoặc nhọn.

“auto_complete_triggers”: [{“selector”: “text.html”, “characters”: “b4”}]

Ví dụ: {“auto_complete_triggers”: [{“selector”: “text.html”, “characters”: “b4”}]}

Nếu trong file đó có sẵn 1 cặp dấu ngoặc nhọn rồi thì không cần tạo thêm 2 ngoăc nhọn nữa đâu mà cứ thế chèn thẳng vào luôn. Miễn là giữa các code ngăn nhau bằng dấu phảy nhé.

Ví dụ như Sublime Text 3 của mình:

Chèn đoạn code đó xong thì tắt đi, vào lại Sublime Text xem được chưa nhé.

Lời kết

Vậy là trên đây mình mới hướng dẫn các bạn cách cài package Bootstrap 4 Snippets cho Sublime Text 3. Mình mong rằng qua bài viết này, các bạn sẽ biết cách cài đặt và sử dụng thành công để từ đó có thể code 1 cách thần thánh. Nếu có bất kì khó khăn nào trong chủ đề của bài viết thì hãy để lại bình luận ngay phía dưới cho mình nhé.

Created by: PCDevShare.Com

7
Bình luận

avatar
2 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Số người bình luận
Cuong NguyenTrần Nhật SinhQuốc Bảo Blog Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Quốc Bảo Blog | 24 comments
Khách
Quốc Bảo Blog | 24 comments

ồ ồ :p mà chắc cái này em chưa cần đâu anh nhỉ :V

Quốc Bảo Blog | 24 comments
Khách
Quốc Bảo Blog | 24 comments

chắc chưa >< giờ em đang ghiền C++ nè :p viết bài về nó đi anhơi

Quốc Bảo Blog | 24 comments
Khách
Quốc Bảo Blog | 24 comments

kkk :p

Trần Nhật Sinh | 15 comments
Khách
Trần Nhật Sinh | 15 comments

Ghim trang lại vì sau này e sẽ cần cái này