გააფართოვეთ Bootstrap, რომ ისარგებლოთ ჩართული სტილებით და კომპონენტებით, ასევე LESS ცვლადებითა და მიქსინებით.
Bootstrap დამზადებულია LESS-ით, დინამიური სტილის ენით, რომელიც შექმნილია ჩვენი კარგი მეგობრის, ალექსის სელიერის მიერ . ეს ხდის სისტემებზე დაფუძნებული CSS-ის განვითარებას უფრო სწრაფს, მარტივს და სახალისოს.
Bootstrap-ის ერთ-ერთმა შემქმნელმა დაწერა სწრაფი ბლოგის პოსტი ამის შესახებ , შეჯამებული აქ:
როგორც CSS-ის გაფართოება, LESS მოიცავს ცვლადებს, მიქსებს კოდის ხელახლა გამოყენებადი ფრაგმენტებისთვის, მარტივი მათემატიკის ოპერაციებისთვის, ბუდეების და ფერის ფუნქციებისთვისაც კი.
მეტის გასაგებად ეწვიეთ ოფიციალურ ვებსაიტს http://lesscss.org/ .
ვინაიდან ჩვენი CSS იწერება Less-ით და იყენებს ცვლადებსა და მიქსებს, ის უნდა იყოს შედგენილი საბოლოო წარმოების განხორციელებისთვის. Აი როგორ.
მიჰყევით ინსტრუქციებს პროექტის readme- ში GitHub-ზე ბრძანების ხაზის მეშვეობით შედგენისთვის.
ჩამოტვირთეთ უახლესი Less.js და ჩართეთ მისკენ მიმავალი გზა (და Bootstrap) ში <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" </script>
.less ფაილების ხელახლა კომპილაციისთვის, უბრალოდ შეინახეთ ისინი და გადატვირთეთ თქვენი გვერდი. Less.js აგროვებს მათ და ინახავს ადგილობრივ საცავში.
არაოფიციალური Mac აპი უყურებს .less ფაილების დირექტორიას და აგროვებს კოდს ადგილობრივ ფაილებში ნანახი .less ფაილის ყოველი შენახვის შემდეგ. თუ გსურთ, შეგიძლიათ გადართოთ აპის პრეფერენციები ავტომატური მინიფიკაციისთვის და რომელ დირექტორიაში მთავრდება შედგენილი ფაილები.
Crunch არის Adobe Air-ზე აგებული LESS რედაქტორი და შემდგენელი.
შექმნილი იგივე ადამიანის მიერ, როგორც არაოფიციალური 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>