Bootstrap نى كېڭەيتىش

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

Heads up! بۇ ھۆججەتلەر v2.3.2 ئۈچۈن بولۇپ ، ئەمدى رەسمىي قوللىمايدۇ. Bootstrap نىڭ ئەڭ يېڭى نەشرىنى تەكشۈرۈپ بېقىڭ!
LESS CSS

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

نېمىشقا LESS؟

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

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

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

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

تەپسىلاتى

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

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

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

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

بۇيرۇق قۇرى

بۇيرۇق قۇرى ئارقىلىق تۈزۈش ئۈچۈن GitHub دىكى تۈر ئوقۇشلۇقىدىكى كۆرسەتمىلەرگە ئەگىشىڭ .

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 نى كۆچۈرۈڭ.

  1. <html>
  2. <head>
  3. <title> Bootstrap 101 قېلىپ </title>
  4. <! - Bootstrap ->
  5. <link href = "public / css / bootstrap.min.css" rel = "ئۇسلۇب جەدۋىلى" >
  6. </head>
  7. <body>
  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. <head>
  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 = "ئۇسلۇب جەدۋىلى" >
  8. </head>
  9. <body>
  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>