გააფართოვეთ 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-ის ჩაშვებით. ცალკე განლაგება მორგებულ სტილებზე, მარტივი განახლებისთვის და მოვლისთვის.
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
Copy the following base HTML to get started.
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <!-- Bootstrap -->
- <link href="public/css/bootstrap.min.css" rel="stylesheet">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <!-- Bootstrap -->
- <script src="public/js/bootstrap.min.js"></script>
- </body>
- </html>
Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <!-- Bootstrap -->
- <link href="public/css/bootstrap.min.css" rel="stylesheet">
- <!-- Project -->
- <link href="public/css/application.css" rel="stylesheet">
- </head>
- <body>
- <h1> გამარჯობა, მსოფლიო! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" </script>
- <!-- პროექტი -->
- <script src = "public/js/application.js" </script>
- </body>
- </html>