كېڭەيتىش · Bootstrap ئۇيغۇردا

Bootstrap بولسا ياخشى دوستىمىز ئالېكىس سېللېر ئىجاد قىلغان ھەرىكەتچان ئۇسلۇب جەدۋىلى LESS بىلەن ياسالغان . ئۇ سىستېما ئاساسىدىكى CSS نى تېز ، تېخىمۇ ئاسان ۋە تېخىمۇ قىزىقارلىق قىلىدۇ.

نېمىشقا LESS؟

Bootstrap نىڭ ئىجادچىلىرىدىن بىرى بۇ توغرىلىق تېز بىلوگ يازدى :

Bootstrap Sass غا سېلىشتۇرغاندا تېخىمۇ تېز ~ 6x تېز
JavaScript دا ئازراق يېزىلغان ، Sass بىلەن Ruby غا سېلىشتۇرغاندا ، بىزنىڭ سۇغا شۇڭغۇش ۋە ياماق قىلىشىمىزنى ئاسانلاشتۇرىدۇ.
ئاز بولسا كۆپ بولىدۇ. ئۆزىمىزنى CSS يېزىۋاتقاندەك ھېس قىلىپ ، Bootstrap نى كۆپچىلىككە يېقىنلاشتۇرىمىز.

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ؟

CSS نىڭ كېڭەيتىلىشى سۈپىتىدە ، LESS ئۆزگەرگۈچى مىقدار ، قايتا ئىشلەتكىلى بولىدىغان كود پارچىلىرىنى ئارىلاشتۇرۇش ، ئاددىي ماتېماتىكا مەشغۇلاتى ، ئۇۋا ، ھەتتا رەڭ فۇنكسىيەسىنى ئۆز ئىچىگە ئالىدۇ.

تەپسىلاتى

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن http://lesscss.org/ دىكى ئورگان تور بېتىنى زىيارەت قىلىڭ .

بىزنىڭ CSS ئاز يېزىلغانلىقى ئۈچۈن ، ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلارنى ئىشلىتىدىغان بولغاچقا ، ئۇنى ئاخىرقى ئىشلەپچىقىرىشنى يولغا قويۇش ئۈچۈن تۈزۈشكە توغرا كېلىدۇ. بۇ قانداق.

ئەسكەرتىش: ئەگەر سىز ئۆزگەرتىلگەن CSS ئارقىلىق GitHub غا تارتىش تەلىپىنى يوللىسىڭىز ، چوقۇم بۇ ئۇسۇللارنىڭ خالىغان بىرى ئارقىلىق CSS نى قايتا تولۇقلىشىڭىز كېرەك.

تۈزۈش قوراللىرى

گىرىم بويۇملىرى

تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىش ئارقىلىق LESS بۇيرۇق قۇرى تۈزگۈچى ، JSHint ، Recess ۋە uglify-js نى پۈتۈن دۇنيا مىقياسىدا قاچىلاڭ:

$ npm قاچىلاش -g ئاز jshint recess uglify-js

قاچىلاپ بولغاندىن كېيىن makebootstrap مۇندەرىجىسىڭىزنىڭ يىلتىزىدىن ئىجرا قىلىڭ ، ھەممىڭىز تەييار.

بۇنىڭدىن باشقا ، ئەگەر سىزدە قول سائىتى ئورنىتىلغان بولسا ، make watchھەر قېتىم bootstrap lib دىكى ھۆججەتنى تەھرىرلىگەندە bootstrap نى ئاپتوماتىك قايتا قۇرۇشقا ئىجرا بولۇشىڭىز مۇمكىن (بۇ تەلەپ قىلىنمايدۇ ، پەقەت قۇلايلىق ئۇسۇل).

بۇيرۇق قۇرى

Node ئارقىلىق LESS بۇيرۇق قۇرىنى قاچىلاڭ ۋە تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىڭ:

$ 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.js ئۇلارنى رەتلەپ يەرلىك ساقلاشقا ساقلايدۇ.

غەيرىي رەسمىي Mac دېتالى

غەيرىي رەسمىي Mac دېتالى .less ھۆججىتىنىڭ مۇندەرىجىسىنى كۆرىدۇ ۋە كۆرگەن .سىز ھۆججەتنى ساقلىغاندىن كېيىن كودنى يەرلىك ھۆججەتلەرگە توپلايدۇ. ئەگەر ياقتۇرسىڭىز ، ئاپتوماتىك كىچىكلىتىش ۋە تۈزۈلگەن ھۆججەتلەرنىڭ قايسى مۇندەرىجىگە ئايلىنىدىغانلىقى توغرىسىدىكى ئەپتىكى مايىللىقنى ئالماشتۇرالايسىز.

تېخىمۇ كۆپ ئەپلەر

Crunch

Crunch بولسا Adobe Air دا ياسالغان ئېسىل كۆرۈنىدىغان LESS تەھرىرلىگۈچ ۋە تۈزگۈچى.

CodeKit

غەيرىي رەسمىي Mac دېتالى بىلەن ئوخشاش يىگىت تەرىپىدىن ئىجاد قىلىنغان CodeKit بولسا LESS ، SASS ، Stylus ۋە CoffeeScript نى توپلايدىغان Mac دېتالى.

ئاددىي

LESS ھۆججىتىنى سۆرەپ تاشلاش ئۈچۈن Mac ، Linux ۋە Windows ئەپلىرى. ئۇنىڭدىن باشقا ، ئەسلى كود GitHub دا بار .

تۈزۈلگەن ياكى كىچىكلىتىلگەن CSS ۋە JS نى تاشلاش ئارقىلىق ھەر قانداق تور تۈرىنى تېز باشلاڭ . ئاسان يېڭىلاش ۋە ئاسراش ئۈچۈن ئالغا ئىلگىرىلەش ئۈچۈن خاس ئۇسلۇبتىكى قاتلاملار ئايرىم.

ھۆججەت قۇرۇلمىسىنى تەڭشەش

ئەڭ يېڭى تۈزۈلگەن Bootstrap نى چۈشۈرۈپ ، تۈرىڭىزگە قويۇڭ. مەسىلەن ، سىزدە مۇنداق بىر نەرسە بولۇشى مۇمكىن:

  app /
      layout /
      قېلىپلار /
  public /
      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 = "ئۇسلۇب جەدۋىلى" >  
  </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 = "ئۇسلۇب جەدۋىلى" >  
    <! - تۈر ->
    <link href = "public / css / application.css" rel = "ئۇسلۇب جەدۋىلى" >  
  </head>
  <body>
    <h1> ياخشىمۇسىز ، دۇنيا! </h1>
    <! - Bootstrap ->
    <script src = "public / js / bootstrap.min.js" > </script> 
    <! - تۈر ->
    <script src = "public / js / application.js" > </script> 
  </body>
</html>

Bootstrap نى كېڭەيتىش

LESS بىلەن ياسالغان