ขยาย · Bootstrap ในภาษาไทย

Bootstrap สร้างขึ้นโดยเน้นที่ LESS ซึ่งเป็นภาษาสไตล์ชีตแบบไดนามิกที่สร้างโดยAlexis Sellier เพื่อนที่ดี ของ เรา มันทำให้การพัฒนา CSS ตามระบบเร็วขึ้น ง่ายขึ้น และสนุกยิ่งขึ้น

ทำไมน้อย?

หนึ่งในผู้สร้างของ Bootstrap เขียนบล็อกโพสต์สั้นๆ เกี่ยวกับสิ่งนี้สรุปไว้ที่นี่:

Bootstrap คอมไพล์เร็วขึ้น ~6x เร็วขึ้นโดย Less เมื่อเทียบกับ Sass
Less เขียนด้วย JavaScript ทำให้เราดำน้ำและแก้ไขได้ง่ายขึ้นเมื่อเทียบกับ Ruby with Sass
น้อยมาก; เราต้องการรู้สึกเหมือนกำลังเขียน CSS และทำให้ Bootstrap เข้าถึงได้สำหรับทุกคน

รวมอะไรบ้าง?

LESS เป็นส่วนขยายของ CSS ประกอบด้วยตัวแปร มิกซ์อินสำหรับตัวอย่างโค้ดที่นำกลับมาใช้ใหม่ การดำเนินการสำหรับฟังก์ชันคณิตศาสตร์อย่างง่าย การซ้อน และแม้แต่ฟังก์ชันสี

เรียนรู้เพิ่มเติม

เยี่ยมชมเว็บไซต์อย่างเป็นทางการที่http://lesscss.org/เพื่อเรียนรู้เพิ่มเติม

เนื่องจาก CSS ของเราเขียนด้วย Less และใช้ตัวแปรและมิกซ์อิน จึงจำเป็นต้องคอมไพล์เพื่อการใช้งานจริงในขั้นสุดท้าย นี่คือวิธีการ

หมายเหตุ:หากคุณส่งคำขอดึงไปยัง GitHub ด้วย CSS ที่แก้ไข คุณ ต้องคอมไพล์ CSS ใหม่โดยใช้วิธีการเหล่านี้

เครื่องมือสำหรับการคอมไพล์

โหนดด้วย makefile

ติดตั้งคอมไพเลอร์บรรทัดคำสั่ง LESS, JSHint, Recess และ uglify-js ทั่วโลกด้วย npm โดยรันคำสั่งต่อไปนี้:

$ npm install -g น้อยกว่า jshint recess uglify-js

เมื่อติดตั้งแล้ว ให้เรียกใช้makeจากรูทของไดเร็กทอรีบูตสแตรปของคุณ เท่านี้คุณก็พร้อมแล้ว

นอกจากนี้ หากคุณได้ ติดตั้ง watchrไว้ คุณอาจเรียกใช้make watchเพื่อให้ bootstrap สร้างใหม่โดยอัตโนมัติทุกครั้งที่คุณแก้ไขไฟล์ใน bootstrap lib (ไม่จำเป็น เพียงเป็นวิธีที่สะดวก)

บรรทัดคำสั่ง

ติดตั้งเครื่องมือบรรทัดคำสั่ง LESS ผ่าน Node และเรียกใช้คำสั่งต่อไปนี้:

$ lessc ./less/bootstrap.less > bootstrap.css

อย่าลืมรวม--compressไว้ในคำสั่งนั้นหากคุณพยายามบันทึกบางไบต์!

JavaScript

ดาวน์โหลด Less.js ล่าสุดและรวมพา ธ ไปที่มัน (และ Bootstrap) ในไฟล์<head>.

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

ในการคอมไพล์ไฟล์ .less ใหม่ เพียงแค่บันทึกและโหลดหน้าเว็บของคุณใหม่ Less.js รวบรวมและจัดเก็บไว้ในที่จัดเก็บในตัวเครื่อง

แอพ Mac ที่ไม่เป็นทางการ

แอพ Mac ที่ไม่เป็นทางการดูไดเรกทอรีของไฟล์ .less และคอมไพล์โค้ดเป็นไฟล์ในเครื่องหลังจากบันทึกไฟล์ .less ที่ดูทุกครั้ง หากต้องการ คุณสามารถสลับการตั้งค่าในแอปสำหรับการลดขนาดอัตโนมัติและไดเร็กทอรีที่ไฟล์ที่คอมไพล์จะจบลง

แอพเพิ่มเติม

กระทืบ

Crunch เป็นโปรแกรมแก้ไขและคอมไพเลอร์ LESS ที่ดูดีซึ่งสร้างจาก Adobe Air

CodeKit

CodeKit เป็นแอป Mac ที่รวบรวม LESS, SASS, Stylus และ CoffeeScript โดยคนคนเดียวกับแอป Mac ที่ไม่เป็นทางการ

เรียบง่าย

แอพ Mac, Linux และ Windows สำหรับการลากและวางการรวบรวมไฟล์ LESS นอกจากนี้ซอร์สโค้ดยังอยู่บน GitHub

เริ่มต้นโครงการเว็บอย่างรวดเร็วโดยวางใน CSS และ JS ที่คอมไพล์แล้วหรือย่อ เลเยอร์บนสไตล์ที่กำหนดเองแยกกันเพื่อการอัปเกรดและการบำรุงรักษาที่ง่ายดายในอนาคต

ตั้งค่าโครงสร้างไฟล์

ดาวน์โหลด Bootstrap ที่คอมไพล์แล้วล่าสุด และวางลงในโครงการของคุณ ตัวอย่างเช่น คุณอาจมีสิ่งนี้:

  แอป/
      เลย์เอาต์/
      แม่แบบ/
  สาธารณะ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ใช้เทมเพลตเริ่มต้น

คัดลอก HTML พื้นฐานต่อไปนี้เพื่อเริ่มต้น

<html>
  <head>
    <title> เทมเพลต Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> สวัสดีชาวโลก! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

เลเยอร์บนโค้ดที่กำหนดเอง

ทำงานใน CSS, JS ที่กำหนดเอง และอื่นๆ ตามความจำเป็นเพื่อให้ Bootstrap เป็นของคุณเองด้วยไฟล์ CSS และ JS ที่แยกจากกัน

<html>
  <head>
    <title> เทมเพลต Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- โครงการ -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> สวัสดีชาวโลก! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- โครงการ -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

การขยาย Bootstrap

สร้างด้วย LESS