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

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

ნაკლები CSS

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

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

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

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

რა შედის?

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

Გაიგე მეტი

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

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

შენიშვნა: თუ 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-ზე აგებული LESS რედაქტორი და შემდგენელი.

CodeKit

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

უბრალო

Mac-ის, Linux-ისა და Windows-ის აპი LESS ფაილების შედგენისთვის გადაიტანეთ და ჩამოაგდეთ. გარდა ამისა, წყაროს კოდი არის GitHub-ზე .

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

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

Utilize starter template

Copy the following base HTML to get started.

  1. <html>
  2. <head>
  3. <title>Bootstrap 101 Template</title>
  4. <!-- Bootstrap -->
  5. <link href="public/css/bootstrap.min.css" rel="stylesheet">
  6. </head>
  7. <body>
  8. <h1>Hello, world!</h1>
  9. <!-- Bootstrap -->
  10. <script src="public/js/bootstrap.min.js"></script>
  11. </body>
  12. </html>

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

  1. <html>
  2. <head>
  3. <title>Bootstrap 101 Template</title>
  4. <!-- Bootstrap -->
  5. <link href="public/css/bootstrap.min.css" rel="stylesheet">
  6. <!-- Project -->
  7. <link href="public/css/application.css" rel="stylesheet">
  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>