გაფართოება · Bootstrap ქართულად

Bootstrap დამზადებულია LESS-ით, დინამიური სტილის ენით, რომელიც შექმნილია ჩვენი კარგი მეგობრის, ალექსის სელიერის მიერ . ეს ხდის სისტემებზე დაფუძნებული CSS-ის განვითარებას უფრო სწრაფს, მარტივს და სახალისოს.

რატომ ნაკლები?

Bootstrap-ის ერთ-ერთმა შემქმნელმა დაწერა სწრაფი ბლოგის პოსტი ამის შესახებ , შეჯამებული აქ:

Bootstrap იკრიბება უფრო სწრაფად ~ 6x უფრო სწრაფად Less-თან შედარებით Sass-თან შედარებით
უფრო ნაკლები იწერება JavaScript-ში, რაც გვაადვილებს ჩაძირვას და პატჩს Ruby-თან შედარებით Sass-თან შედარებით.
Ნაკლებად არის უფრო; ჩვენ გვინდა ვიგრძნოთ, რომ ვწერთ CSS-ს და ვქმნით Bootstrap-ს ყველასთვის მისაწვდომს.

რა შედის?

როგორც CSS-ის გაფართოება, LESS მოიცავს ცვლადებს, მიქსებს კოდის ხელახლა გამოყენებადი ფრაგმენტებისთვის, მარტივი მათემატიკის ოპერაციებისთვის, ბუდეების და ფერის ფუნქციებისთვისაც კი.

Გაიგე მეტი

მეტის გასაგებად ეწვიეთ ოფიციალურ ვებსაიტს http://lesscss.org/ .

ვინაიდან ჩვენი CSS იწერება Less-ით და იყენებს ცვლადებსა და მიქსებს, ის უნდა იყოს შედგენილი საბოლოო წარმოების განხორციელებისთვის. Აი როგორ.

შენიშვნა: თუ GitHub-ში აგზავნით მოთხოვნას შეცვლილი CSS-ით, თქვენ უნდა გადააკეთოთ CSS რომელიმე ამ მეთოდით.

ინსტრუმენტები შედგენისთვის

კვანძი მაკიაფილით

დააინსტალირეთ LESS ბრძანების ხაზის შემდგენელი, JSHint, Recess და uglify-js გლობალურად npm-ით შემდეგი ბრძანების გაშვებით:

$ npm install -g ნაკლები jshint recess uglify-js

ინსტალაციის შემდეგ უბრალოდ გაუშვით makeთქვენი bootstrap დირექტორიას ძირიდან და ყველაფერი მზად ხართ.

გარდა ამისა, თუ თქვენ დაინსტალირებული გაქვთ watchr , თქვენ შეგიძლიათ აწარმოოთ make watchbootstrap ავტომატურად ხელახლა აშენება ყოველ ჯერზე, როდესაც თქვენ შეცვლით ფაილს 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 არის Adobe Air-ზე აგებული LESS რედაქტორი და შემდგენელი.

CodeKit

შექმნილი იგივე ადამიანის მიერ, როგორც არაოფიციალური Mac აპი, CodeKit არის Mac აპი, რომელიც აგროვებს LESS, SASS, Stylus და CoffeeScript.

უბრალო

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>
  <თავი>
    <title> Bootstrap 101 შაბლონი </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <სხეული>
    <h1> გამარჯობა, მსოფლიო! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

ფენა მორგებულ კოდზე

იმუშავეთ თქვენს მორგებულ CSS-ში, JS-ში და სხვა საჭიროებისამებრ, რათა Bootstrap გახადოთ თქვენი საკუთარი ცალკეული CSS და JS ფაილებით.

<html>
  <თავი>
    <title> Bootstrap 101 შაბლონი </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- პროექტი -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <სხეული>
    <h1> გამარჯობა, მსოფლიო! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- პროექტი -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

Bootstrap-ის გაფართოება

აშენებულია LESS-ით