ჩამტვირთავი

Ვიწყებთ

პროექტის მიმოხილვა, მისი შინაარსი და როგორ დავიწყოთ მარტივი შაბლონით.

1. ჩამოტვირთვა

ჩამოტვირთვამდე, დარწმუნდით, რომ გქონდეთ კოდის რედაქტორი (გირჩევთ Sublime Text 2 ) და გარკვეული სამუშაო ცოდნა HTML და CSS. ჩვენ არ განვიხილავთ წყაროს ფაილებს აქ, მაგრამ ისინი ხელმისაწვდომია ჩამოსატვირთად. ჩვენ ყურადღებას გავამახვილებთ ჩვენი შედგენილი Bootstrap ფაილების დაწყებაზე.

ჩამოტვირთვა შედგენილია

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

ჩამოტვირთეთ Bootstrap

გადმოწერის წყარო

მიიღეთ ორიგინალური ფაილები ყველა CSS-ისა და Javasript-ისთვის, დოკუმენტების ლოკალურ ასლთან ერთად უახლესი ვერსიის პირდაპირ GitHub-დან ჩამოტვირთვით.

ჩამოტვირთეთ Bootstrap წყარო

2. ფაილის სტრუქტურა

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

ჩამოტვირთვის შემდეგ გახსენით შეკუმშული საქაღალდე, რომ ნახოთ (შედგენილი) Bootstrap-ის სტრუქტურა. თქვენ ნახავთ ასეთ რამეს:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . წთ . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . წთ . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── გლიფიკონები - ნახევარი - თეთრი . png
  
  
        
        
        └── წაიკითხეთ . მდ

ეს არის Bootstrap-ის ყველაზე ძირითადი ფორმა: შედგენილი ფაილები სწრაფი ჩამოსაშლელი გამოყენებისთვის თითქმის ნებისმიერ ვებ პროექტში. ჩვენ გთავაზობთ შედგენილ CSS და JS ( bootstrap.*), ასევე კომპილირებული და მინიფიცირებული CSS და JS ( bootstrap.min.*). გამოსახულების ფაილები შეკუმშულია ImageOptim- ის გამოყენებით , Mac აპლიკაციის PNG-ების შეკუმშვისთვის.

3. რა შედის

Bootstrap აღჭურვილია HTML, CSS და JS ყველა სახის ნივთისთვის, მაგრამ მათი შეჯამება შესაძლებელია რამდენიმე კატეგორიით, რომელიც ჩანს Bootstrap დოკუმენტაციის ზედა ნაწილში .

Docs სექციები

ხარაჩოები

სხეულის გლობალური სტილები ტიპისა და ფონის გადატვირთვისთვის, ბმულის სტილები, ბადის სისტემა და ორი მარტივი განლაგება.

ბაზის CSS

ჩვეულებრივი HTML ელემენტების სტილები, როგორიცაა ტიპოგრაფია, კოდი, ცხრილები, ფორმები და ღილაკები. ასევე მოიცავს Glyphicons , შესანიშნავი პატარა ხატების ნაკრები.

კომპონენტები

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

Javascript დანამატები

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

კომპონენტების სია

კომპონენტები და Javascript დანამატების სექციები ერთად უზრუნველყოფს ინტერფეისის შემდეგ ელემენტებს:

  • ღილაკების ჯგუფები
  • ღილაკების ჩამოსაშლელები
  • სანავიგაციო ჩანართები, აბები და სიები
  • ნავიბარი
  • ეტიკეტები
  • სამკერდე ნიშნები
  • გვერდის სათაურები და გმირის ერთეული
  • ესკიზები
  • გაფრთხილებები
  • პროგრესის ზოლები
  • მოდალები
  • ჩამოსაშლელები
  • ინსტრუმენტების რჩევები
  • პოპოვერები
  • აკორდეონი
  • კარუსელი
  • Typeahead

სამომავლო სახელმძღვანელოებში, ჩვენ შეგვიძლია უფრო დეტალურად განვიხილოთ ეს კომპონენტები ინდივიდუალურად. მანამდე, მოძებნეთ თითოეული მათგანი დოკუმენტაციაში ინფორმაციისთვის, თუ როგორ გამოიყენოთ და მორგება.

4. ძირითადი HTML შაბლონი

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

ახლა, აქ არის ტიპიური HTML ფაილი :

  1. <html>
  2.   <თავი>
  3.     <title> Bootstrap 101 შაბლონი </title>
  4.   </head>
  5.   <სხეული>
  6.     <h1> გამარჯობა, მსოფლიო! </h1>
  7.   </body>
  8. </html>

იმისათვის, რომ ეს იყოს Bootstrapped შაბლონი , უბრალოდ შეიტანეთ შესაბამისი CSS და JS ფაილები:

  1. <html>
  2.   <თავი>
  3.     <title> Bootstrap 101 შაბლონი </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <სხეული>
  8.     <h1> გამარჯობა, მსოფლიო! </h1>
  9.     <script src = "js/bootstrap.min.js" </script> 
  10.   </body>
  11. </html>

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

5. მაგალითები

გადადით საბაზისო შაბლონის მიღმა რამდენიმე განლაგების მაგალითით. ჩვენ მოვუწოდებთ ხალხს, გაიმეორონ ეს მაგალითები და არ გამოიყენონ ისინი, როგორც საბოლოო შედეგი.

  • ძირითადი მარკეტინგის საიტი

    შეიცავს გმირის ერთეულს პირველადი შეტყობინებისთვის და სამი დამხმარე ელემენტისთვის.

  • სითხის განლაგება

    იყენებს ჩვენს ახალ საპასუხო, სითხის ბადის სისტემას, რომ შექმნას უწყვეტი სითხის განლაგება.

  • დამწყებ შაბლონი

    Barebones HTML დოკუმენტი ჩართული Bootstrap CSS და Javascript-ით.

Შემდეგი რა არის?

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

ეწვიეთ Bootstrap დოკუმენტებს Bootstrap-ის მორგება