Home » Web Design » [Bootstrap] Bài 2: Hướng dẫn cài Sublime Text và các plugin cần thiết

[Bootstrap] Bài 2: Hướng dẫn cài Sublime Text và các plugin cần thiết

This entry is part 2 of 5 in the series Bootstrap

1: Cài Sublime Text.

Các bạn truy cập vào Sublimetext để tải và cài Sublime Text. Đây là một phần mềm miễn phí nên không vẩn crack hay mua.

sublime text

Sau khi cài xong các bạn mở lên.

image

2: Cài các Plugin cần thiết cho Sublime Text (Package Control, Emmet, View in browser, bs..).

Đầu tiên chúng ta tìm Package Control Sublime Text 3. Chọn kết quả đầu tiên, chúng ta sẽ thấy:

sublime text

Tiếp theo các bạn copy dòng mã này đối với SublimeText 3
package control

Hoặc
package control
đối với SublimeText 2.

Trở lại ứng dụng SublimeText. Các bạn gõ ctrl + ~ và điền phần mã bạn vừa copy vào, nhấn enter và đợi để phần mền cài Package Control.

console
Sau khi cài xong, các bạn đóng phần mềm và mở lại.
Gõ Ctrl + Shift + T và gõ Package Control: Install

package control install

Chờ đến khi hiện ra bảng, các bạn gõ Emmet và cài đặt.

max res default

Tiếp theo vẫn Ctrl + Shift + T/Package Control: Install/View In Browser, nhấn enter và cài để khi bạn viết code có thể view file html của bạn trên trình duyệt. Mặc định trình duyệt là Firefox, chúng ta có thể thay đổi sang Chrome bằng cách vào Preferences/Package Settings/View in browser/Settings-User. Copy {
"posix": {
"linux": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"linux2": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"darwin": {
"firefox": "open -a \"/Applications/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Applications/Google Chrome.app\"",
"chrome64": "open -a \"/Applications/Google Chrome.app\"",
"yandex": "open -a \"/Applications/Yandex.app\""
}
},
"nt": {
"win32": {
"firefox": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe -new-tab",
"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"
}
},

"browser": "chrome" //sửa firefox -> chrome tại đây
}
và nhấn save lại. Để xem file html trên trình duyệt nhấn Ctrl + Alt + V.

3: Ví dụ về sử dụng Emmet.

Nhấn Ctrl + N để tạo một tập tin mới và lưu với định dạng *.html.

  • html:5 + Tab: sẽ cho ra:

    html 5 tab

  • Gõ p.title + tab sẽ cho ra:
    , rất đơn giản phải không nào
  • Gõ #title sẽ cho ra:
  • Cũng có thể viết h1.title#tieude sẽ cho ra:
  • Gõ a[href=#]:
  • Ngoài ra: Lồng ghép các thẻ HTML. Emmet cho phép dùng các toán tử >,+,^ để bạn kết hợp tạo ra nhiều dòng code khi chỉ cần gõ 1 dòng đơn giản.

    math

Các Bạn có thể tìm hiểu thêm tại đây.

Nếu có câu hỏi hay thắc mắc nào có thể để lại lời bình luận bên dưới, mình sẻ giải đáp. Chúc các bạn thành công.

Bài tiếp theo:
Bài 3: Hệ thống lưới và căn chỉnh.
Bài 4: Tạo menu một cách nhanh chóng.

Series Navigation<< [Bootstrap] Bài 1: Bootstrap là gi?[Bootstrap] Bài 3: Hệ thống lưới và căn chỉnh. >>
Share
Share
Free WordPress Themes - Download High-quality Templates