Source

შესავალი

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

Სწრაფი დაწყება

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

CSS

დააკოპირეთ და ჩასვით სტილის ფურცელი <link>თქვენს <head>ყველა სხვა სტილში, რათა ჩაიტვირთოთ ჩვენი CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

ჩვენი ბევრი კომპონენტი ფუნქციონირებისთვის საჭიროებს JavaScript-ის გამოყენებას. კერძოდ, მათ სჭირდებათ jQuery , Popper.js და ჩვენი საკუთარი JavaScript დანამატები. განათავსეთ შემდეგი <script>s თქვენი გვერდების ბოლოს, დახურვის </body>ტეგის წინ, რომ ჩართოთ ისინი. ჯერ უნდა მოვიდეს jQuery, შემდეგ Popper.js და შემდეგ ჩვენი JavaScript დანამატები.

ჩვენ ვიყენებთ jQuery-ის slim build-ს , მაგრამ ასევე მხარდაჭერილია სრული ვერსია.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

გაინტერესებთ რომელ კომპონენტებს სჭირდებათ ცალსახად jQuery, ჩვენი JS და Popper.js? დააწკაპუნეთ ჩვენების კომპონენტების ბმულზე ქვემოთ. თუ საერთოდ არ ხართ დარწმუნებული გვერდის ზოგადი სტრუქტურის შესახებ, განაგრძეთ გვერდის შაბლონის კითხვა.

ჩვენი bootstrap.bundle.jsდა bootstrap.bundle.min.jsმოიცავს Popper , მაგრამ არა jQuery . დამატებითი ინფორმაციისთვის იმის შესახებ, თუ რა შედის Bootstrap-ში, იხილეთ ჩვენი შიგთავსის განყოფილება.

კომპონენტების ჩვენება, რომლებიც საჭიროებენ JavaScript-ს
  • გაფრთხილებები დათხოვნის შესახებ
  • ღილაკები მდგომარეობების გადართვისა და მოსანიშნი ველი/რადიო ფუნქციონალობისთვის
  • კარუსელი სლაიდის ყველა ქცევის, მართვისა და ინდიკატორისთვის
  • ჩაკეცვა კონტენტის ხილვადობის გადართვისთვის
  • ჩამოსაშლელები ჩვენებისა და პოზიციონირებისთვის (ასევე მოითხოვს Popper.js )
  • მოდალები ჩვენების, პოზიციონირებისა და გადახვევის ქცევისთვის
  • Navbar ჩვენი Collapse მოდულის გაფართოებისთვის საპასუხო ქცევის განსახორციელებლად
  • ინსტრუმენტების მინიშნებები და პოპოვერები ჩვენებისთვის და პოზიციონირებისთვის (ასევე მოითხოვს Popper.js )
  • Scrollspy გადახვევის ქცევისა და ნავიგაციის განახლებისთვის

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

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

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

მნიშვნელოვანი გლობალიები

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

HTML5 დოქტიპი

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

<!doctype html>
<html lang="en">
  ...
</html>

საპასუხო მეტა ტეგი

Bootstrap არის შემუშავებული ჯერ მობილური , სტრატეგია, რომლის დროსაც ჩვენ ჯერ მობილური მოწყობილობების კოდის ოპტიმიზაციას ვახდენთ და შემდეგ საჭიროებისამებრ ვამცირებთ კომპონენტებს CSS მედია მოთხოვნების გამოყენებით. იმისათვის, რომ უზრუნველყოთ სათანადო რენდერი და შეხებით მასშტაბირება ყველა მოწყობილობისთვის, დაამატეთ საპასუხო ხედვის პორტის მეტათეგი თქვენს <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

თქვენ შეგიძლიათ იხილოთ ამის მაგალითი მოქმედებაში დამწყებ შაბლონში .

ყუთის ზომა

CSS-ში უფრო მარტივი ზომისთვის, ჩვენ ვცვლით გლობალურ box-sizingმნიშვნელობას content-box. border-boxეს უზრუნველყოფს padding, რომ არ იმოქმედოს ელემენტის საბოლოო გამოთვლილ სიგანეზე, მაგრამ შეიძლება გამოიწვიოს პრობლემები მესამე მხარის პროგრამულ უზრუნველყოფასთან, როგორიცაა Google Maps და Google Custom Search Engine.

იშვიათ შემთხვევებში, როდესაც დაგჭირდებათ მისი უგულებელყოფა, გამოიყენეთ მსგავსი რამ:

.selector-for-some-widget {
  box-sizing: content-box;
}

ზემოაღნიშნული ფრაგმენტით, ჩადგმული ელემენტები — მათ შორის გენერირებული კონტენტი ::beforeდა ::after— ყველა მემკვიდრეობით მიიღებს box-sizingამისთვის მითითებულს .selector-for-some-widget.

შეიტყვეთ მეტი ყუთის მოდელისა და ზომის შესახებ CSS Tricks-ში .

გადატვირთვა

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

საზოგადოება

იყავით განახლებული Bootstrap-ის განვითარების შესახებ და დაუკავშირდით საზოგადოებას ამ სასარგებლო რესურსებით.

  • მიჰყევით @getbootstrap Twitter-ზე .
  • წაიკითხეთ და გამოიწერეთ ოფიციალური Bootstrap ბლოგი .
  • ესაუბრეთ მეგობარ Bootstrappers-ს IRC-ში. irc.freenode.netსერვერზე, არხზე ##bootstrap.
  • დანერგვის დახმარება შეგიძლიათ იხილოთ Stack Overflow-ზე (მონიშნული bootstrap-4).
  • დეველოპერებმა უნდა გამოიყენონ საკვანძო სიტყვა bootstrapპაკეტებზე, რომლებიც ცვლიან ან დაამატებენ Bootstrap-ის ფუნქციონირებას npm ან მსგავსი მიწოდების მექანიზმების მეშვეობით გავრცელებისას მაქსიმალური აღმოჩენისთვის.

თქვენ ასევე შეგიძლიათ მიჰყვეთ @getbootstrap-ს Twitter-ზე უახლესი ჭორებისა და გასაოცარი მუსიკალური ვიდეოებისთვის.