Bootstrap

ការពង្រីក Bootstrap

ពង្រីក Bootstrap ដើម្បីទាញយកអត្ថប្រយោជន៍ពីរចនាប័ទ្ម និងសមាសធាតុរួមបញ្ចូល ក៏ដូចជាអថេរតិច និង mixins ។

ព្រឺក្បាល! ឯកសារទាំងនេះគឺសម្រាប់ v2.3.2 ដែលមិនត្រូវបានគាំទ្រជាផ្លូវការទៀតទេ។ សូមពិនិត្យមើលកំណែចុងក្រោយរបស់ Bootstrap!

សាងសង់ដោយ LESS

CSS តិច

Bootstrap ត្រូវ​បាន​បង្កើត​ឡើង​ដោយ​ប្រើ LESS ជា​ស្នូល​របស់​វា ជា​ភាសា​រចនាប័ទ្ម​ថាមវន្ត​ដែល​បង្កើត​ដោយ​មិត្ត​ល្អ​របស់​យើង Alexis Sellier ។ វាធ្វើឱ្យការបង្កើត CSS ផ្អែកលើប្រព័ន្ធកាន់តែលឿន ងាយស្រួល និងរីករាយជាងមុន។

ហេតុអ្វី LESS?

អ្នកបង្កើត Bootstrap ម្នាក់បានសរសេរ ប្រកាសប្លក់ រហ័ស អំពីរឿងនេះ ដោយសង្ខេបនៅទីនេះ៖

  • Bootstrap ចងក្រងលឿនជាងមុន ~ 6x លឿនជាងមុនជាមួយនឹង Less បើប្រៀបធៀបទៅនឹង Sass
  • តិចជាងនេះត្រូវបានសរសេរនៅក្នុង JavaScript ដែលធ្វើឱ្យវាកាន់តែងាយស្រួលសម្រាប់ពួកយើងក្នុងការជ្រមុជទឹក និងបំណះបើប្រៀបធៀបទៅនឹង Ruby ជាមួយ Sass ។
  • តិចគឺច្រើន; យើងចង់មានអារម្មណ៍ថាយើងកំពុងសរសេរ CSS និងធ្វើឱ្យ Bootstrap ងាយស្រួលសម្រាប់ទាំងអស់គ្នា។

រួមបញ្ចូលអ្វីខ្លះ?

ក្នុងនាមជាផ្នែកបន្ថែមនៃ CSS, LESS រួមបញ្ចូលអថេរ, mixins សម្រាប់ព័ត៌មានខ្លីៗនៃកូដដែលអាចប្រើឡើងវិញបាន ប្រតិបត្តិការសម្រាប់គណិតវិទ្យាសាមញ្ញ ការដាក់សំបុក និងសូម្បីតែមុខងារពណ៌។

ស្វែង​យល់​បន្ថែម

សូមចូលមើលគេហទំព័រផ្លូវការនៅ http://lesscss.org/ ដើម្បីស្វែងយល់បន្ថែម។

ការចងក្រង Bootstrap ជាមួយតិច

ដោយសារ CSS របស់យើងត្រូវបានសរសេរដោយ Less និងប្រើប្រាស់អថេរ និង mixins វាចាំបាច់ត្រូវតែចងក្រងសម្រាប់ការអនុវត្តផលិតកម្មចុងក្រោយ។ នេះជារបៀប។

ចំណាំ៖ ប្រសិនបើអ្នកកំពុងដាក់សំណើរទាញទៅកាន់ GitHub ជាមួយនឹង CSS ដែលបានកែប្រែ អ្នក ត្រូវតែ ចងក្រង CSS ឡើងវិញតាមរយៈវិធីសាស្រ្តទាំងនេះ។

ឧបករណ៍សម្រាប់ការចងក្រង

បន្ទាត់ពាក្យបញ្ជា

អនុវត្តតាម ការណែនាំនៅក្នុងគម្រោង readme នៅលើ GitHub សម្រាប់ការចងក្រងតាមរយៈបន្ទាត់ពាក្យបញ្ជា។

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 គឺជាកម្មវិធីនិពន្ធ និងកម្មវិធីចងក្រងដែលមើលទៅមិនសូវល្អដែលបង្កើតឡើងនៅលើ Adobe Air។

កូដឃីត

បង្កើតឡើងដោយបុរសដូចគ្នាទៅនឹងកម្មវិធី Mac ក្រៅផ្លូវការ CodeKit គឺជាកម្មវិធី Mac ដែលចងក្រង LESS, SASS, Stylus និង CoffeeScript ។

សាមញ្ញ

កម្មវិធី Mac, Linux និង Windows សម្រាប់អូស និងទម្លាក់ការចងក្រងឯកសារតិច។ លើសពីនេះ កូដប្រភពគឺនៅលើ GitHub ។

ប្រើជាទ្រព្យសកម្មឋិតិវន្ត

ចាប់ផ្តើមគម្រោងបណ្តាញណាមួយយ៉ាងឆាប់រហ័ស ដោយទម្លាក់ក្នុង CSS និង JS ដែលបានចងក្រង ឬបង្រួមតូច។ ស្រទាប់លើរចនាប័ទ្មផ្ទាល់ខ្លួនដោយឡែកពីគ្នា ដើម្បីងាយស្រួលក្នុងការធ្វើឱ្យប្រសើរឡើង និងការថែទាំបន្តទៅមុខ។

រៀបចំរចនាសម្ព័ន្ធឯកសារ

ទាញយក Bootstrap ដែលបានចងក្រងចុងក្រោយបំផុត ហើយដាក់ចូលទៅក្នុងគម្រោងរបស់អ្នក។ ឧទាហរណ៍ អ្នក​អាច​មាន​អ្វី​មួយ​ដូច​នេះ៖

  កម្មវិធី/
      ប្លង់/
      គំរូ/
  សាធារណៈ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ប្រើគំរូចាប់ផ្តើម

ចម្លង HTML មូលដ្ឋានខាងក្រោមដើម្បីចាប់ផ្តើម។

  1. <html>
  2.   <ក្បាល>
  3.     <title> គំរូ Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "សន្លឹករចនាប័ទ្ម" >  
  6.   </head>
  7.   <រាងកាយ>
  8.     <h1> សួស្តីពិភពលោក! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

ស្រទាប់លើលេខកូដផ្ទាល់ខ្លួន

ធ្វើការនៅក្នុង CSS, JS ផ្ទាល់ខ្លួនរបស់អ្នក និងច្រើនទៀតតាមការចាំបាច់ដើម្បីធ្វើឱ្យ Bootstrap របស់អ្នកជាមួយនឹងឯកសារ CSS និង JS ដាច់ដោយឡែករបស់អ្នក។

  1. <html>
  2.   <ក្បាល>
  3.     <title> គំរូ Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "សន្លឹករចនាប័ទ្ម" >  
  6.     <!-- គម្រោង -->
  7.     <link href = "public/css/application.css" rel = "stylesheet" >  
  8.   </head>
  9.   <រាងកាយ>
  10.     <h1> សួស្តីពិភពលោក! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- គម្រោង -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>