Mở rộng · Bootstrap bằng tiếng việt

Bootstrap được tạo ra với LESS làm cốt lõi của nó, một ngôn ngữ biểu định kiểu động được tạo ra bởi người bạn tốt của chúng tôi, Alexis Sellier . Nó làm cho việc phát triển CSS dựa trên hệ thống nhanh hơn, dễ dàng hơn và thú vị hơn.

Tại sao lại ÍT?

Một trong những người sáng tạo của Bootstrap đã viết một bài đăng trên blog nhanh về điều này , được tóm tắt ở đây:

Bootstrap biên dịch nhanh hơn ~ 6 lần nhanh hơn với Ít hơn so với Sass
Ít hơn được viết bằng JavaScript, giúp chúng tôi dễ dàng tìm hiểu và vá lỗi hơn so với Ruby với Sass.
Càng đơn giản càng đẹp; chúng tôi muốn có cảm giác như chúng tôi đang viết CSS và làm cho Bootstrap có thể tiếp cận được với tất cả mọi người.

Bao gồm những gì?

Là một phần mở rộng của CSS, LESS bao gồm các biến, mixin cho các đoạn mã có thể tái sử dụng, các phép toán cho phép toán đơn giản, lồng và thậm chí cả các hàm màu.

Tìm hiểu thêm

Truy cập trang web chính thức tại http://lesscss.org/ để tìm hiểu thêm.

Vì CSS của chúng tôi được viết với Ít hơn và sử dụng các biến và hỗn hợp, nó cần được biên dịch để triển khai sản xuất cuối cùng. Đây là cách thực hiện.

Lưu ý: Nếu bạn đang gửi yêu cầu kéo tới GitHub với CSS đã sửa đổi, bạn phải biên dịch lại CSS thông qua bất kỳ phương pháp nào trong số này.

Công cụ để biên dịch

Dòng lệnh

Làm theo hướng dẫn trong readme dự án trên GitHub để biên dịch qua dòng lệnh.

JavaScript

Tải xuống Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong <head>.

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

Để biên dịch lại các tệp .less, chỉ cần lưu chúng và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ trong bộ nhớ cục bộ.

Ứng dụng Mac không chính thức

Ứng dụng Mac không chính thức xem thư mục của các tệp .less và biên dịch mã thành các tệp cục bộ sau mỗi lần lưu tệp .less đã xem. Nếu muốn, bạn có thể chuyển đổi các tùy chọn trong ứng dụng để thu nhỏ tự động và thư mục nào mà các tệp đã biên dịch kết thúc.

Thêm nhiều ứng dụng

Crunch

Crunch là một trình soạn thảo và biên dịch LESS tuyệt vời được xây dựng trên Adobe Air.

CodeKit

Được tạo bởi cùng một người như ứng dụng Mac không chính thức, CodeKit là một ứng dụng Mac có thể biên dịch LESS, SASS, Stylus và CoffeeScript.

Đơn giản

Ứng dụng Mac, Linux và Windows để kéo và thả biên dịch các tệp LESS. Thêm vào đó, mã nguồn nằm trên GitHub .

Nhanh chóng bắt đầu bất kỳ dự án web nào bằng cách thả CSS và JS đã biên dịch hoặc rút gọn. Lớp trên các kiểu tùy chỉnh riêng biệt để dễ dàng nâng cấp và bảo trì trong tương lai.

Thiết lập cấu trúc tệp

Tải xuống Bootstrap được biên dịch mới nhất và đặt vào dự án của bạn. Ví dụ, bạn có thể có một cái gì đó như thế này:

  ứng dụng/
      bố cục /
      mẫu /
  công cộng/
      css /
          bootstrap.min.css
      js /
          bootstrap.min.js
      img /
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Sử dụng mẫu khởi động

Sao chép HTML cơ sở sau để bắt đầu.

<html>
  <head>
    <title> Mẫu Bootstrap 101 </title>
    <! - Bootstrap ->
    <link href = "public / css / bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> Xin chào cả thế giới! </h1>
    <! - Bootstrap ->
    <script src = "public / js / bootstrap.min.js" > </script> 
  </body>
</html>

Lớp trên mã tùy chỉnh

Làm việc trong CSS, JS tùy chỉnh của bạn và hơn thế nữa khi cần thiết để tạo Bootstrap của riêng bạn với các tệp CSS và JS riêng biệt của bạn.

<html>
  <head>
    <title> Mẫu Bootstrap 101 </title>
    <! - Bootstrap ->
    <link href = "public / css / bootstrap.min.css" rel = "stylesheet" >  
    <! - Dự án ->
    <link href = "public / css / application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> Xin chào cả thế giới! </h1>
    <! - Bootstrap ->
    <script src = "public / js / bootstrap.min.js" > </script> 
    <! - Dự án ->
    <script src = "public / js / application.js" > </script> 
  </body>
</html>

Mở rộng Bootstrap

Được xây dựng với LESS