Өргөтгөх · Bootstrap монгол хэлээр

Bootstrap нь бидний сайн найз Алексис Селлиерийн бүтээсэн динамик загварын хэл болох LESS-ээр хийгдсэн . Энэ нь системд суурилсан CSS-ийг илүү хурдан, хялбар, хөгжилтэй болгодог.

Яагаад БАГА гэж?

Bootstrap-ийн бүтээгчдийн нэг энэ тухай товч блог нийтлэлийг энд хураангуйлан бичсэн байна:

Bootstrap нь Sass-тай харьцуулахад бага багаар ~6 дахин хурдан хөрвүүлдэг
JavaScript дээр бага бичигдсэн байдаг нь Ruby-тэй Sass-тай харьцуулахад бидэнд нэвтэрч, нөхөхөд хялбар болгодог.
Бага нь илүү; Бид CSS бичиж, Bootstrap-г хүн бүрт хүртээмжтэй болгож байгаа мэт сэтгэгдэл төрүүлэхийг хүсч байна.

Юу багтсан бэ?

CSS-ийн өргөтгөл болох LESS нь хувьсагч, дахин ашиглах боломжтой кодын хэсэгчилсэн хольц, энгийн математикийн үйлдлүүд, үүрлэх, бүр өнгөт функцуудыг агуулдаг.

Илүү их судла

Дэлгэрэнгүй мэдээллийг http://lesscss.org/ албан ёсны вэбсайтад зочилно уу .

Манай CSS нь Less-ээр бичигдсэн бөгөөд хувьсагч болон холимгуудыг ашигладаг тул эцсийн үйлдвэрлэлийг хэрэгжүүлэхийн тулд үүнийг эмхэтгэх шаардлагатай. Эндээс хэрхэн.

Тайлбар: Хэрэв та GitHub-д өөрчилсөн CSS-тэй татах хүсэлт илгээж байгаа бол эдгээр аргуудын аль нэгээр дамжуулан CSS-г дахин эмхэтгэх ёстой .

Эмхэтгэх хэрэгслүүд

Тушаалын мөр

Командын мөрөөр эмхэтгэхийн тулд GitHub дээрх төслийн Readme дээрх зааврыг дагана уу.

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 дээр бүтээгдсэн LESS засварлагч, хөрвүүлэгч юм.

CodeKit

Албан бус Mac программтай нэг залуугийн бүтээсэн CodeKit нь LESS, SASS, Stylus, CoffeeScript-ийг нэгтгэдэг Mac програм юм.

Энгийн

Mac, Linux болон Windows програмууд нь чирж буулгах замаар ЦӨГӨӨ файлуудыг эмхэтгэхэд зориулагдсан. Дээрээс нь эх код нь GitHub дээр байна.

Эмхэтгэсэн эсвэл жижигрүүлсэн CSS болон JS-г оруулан дурын вэб төслийг хурдан эхлүүлээрэй . Сайжруулж, засвар үйлчилгээ хийхэд хялбар болгох үүднээс захиалгат хэв маягийг тусад нь давхарлана.

Файлын бүтцийг тохируулах

Хамгийн сүүлийн үеийн хөрвүүлсэн Bootstrap-г татаж аваад төсөлдөө оруулна уу. Жишээлбэл, танд иймэрхүү зүйл байж болно:

  апп/
      зохион байгуулалт/
      загварууд/
  олон нийтэд/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Эхлэх загварыг ашиглах

Эхлэхийн тулд дараах үндсэн HTML-г хуулна уу.

<html>
  <толгой>
    <title> Bootstrap 101 загвар </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "загварын хуудас" >  
  </head>
  <бие>
    <h1> Сайн байна уу, дэлхий! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" >></script> 
  </body>
</html>

Тусгай код дээр давхарга

Bootstrap-г өөрийн тусдаа CSS болон JS файлуудаар өөрийн болгохын тулд шаардлагатай CSS, JS болон бусад зүйл дээр ажиллана уу.

<html>
  <толгой>
    <title> Bootstrap 101 загвар </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "загварын хуудас" >  
    <!-- Төсөл -->
    <link href = "public/css/application.css" rel = "загварын хуудас" >  
  </head>
  <бие>
    <h1> Сайн байна уу, дэлхий! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" >></script> 
    <!-- Төсөл -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap-ийг өргөтгөж байна

БАГААР барьсан