გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

შესავალი

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

ამ გვერდზე

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

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

CSS

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

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

JS

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

შეკვრა

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

ცალკე

თუ გადაწყვეტთ ცალკე სკრიპტების გადაწყვეტას, Popper უნდა მოვიდეს ჯერ (თუ იყენებთ ინსტრუმენტების რჩევებს ან პოპოვერებს), შემდეგ კი ჩვენი JavaScript დანამატები.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

მოდულები

თუ იყენებთ <script type="module">, გთხოვთ იხილეთ ჩვენი Bootstrap-ის გამოყენება მოდულის განყოფილებაში.

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

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

კომპონენტების ჩვენება, რომლებიც საჭიროებენ JavaScript-ს
  • გაფრთხილებები დათხოვნის შესახებ
  • ღილაკები მდგომარეობების გადართვისა და მოსანიშნი ველი/რადიო ფუნქციონალობისთვის
  • კარუსელი ს���აიდის ყველა ქცევის, მართვისა და ინდიკატორისთვის
  • ჩაკეცვა კონტენტის ხილვადობის გადართვისთვის
  • ჩამოსაშლელები ჩვენებისა და პოზიციონირებისთვის (ასევე საჭიროებს პოპერს )
  • მოდალები ჩვენების, პოზიციონირებისა და გადახვევის ქცევისთვის
  • Navbar ჩვენი Collapse მოდულის გაფართოებისთვის საპასუხო ქცევის განსახორციელებლად
  • Offcanvases ჩვენების, პოზიციონირებისა და გადახვევის ქცევისთვის
  • სადღეგრძელოები ჩვენებისა და გათავისუფლებისთვის
  • ინსტრუმენტების რჩევები და პოვერები ჩვენებისთვის და პოზიციონირებისთვის (ასევე მოითხოვს პოპერს )
  • 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">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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">

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

ყუთის ზომა

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-ის განვითარების შესახებ და დაუკავშირდით საზოგადოებას ამ სასარგებლო რესურსებით.

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

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