დაიწყეთ Bootstrap-ით

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

ამ გვერდზე

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

დაიწყეთ Bootstrap-ის წარმოებისთვის მზა CSS-ის და JavaScript-ის ჩათვლით CDN-ის მეშვეობით ყოველგვარი კონსტრუქციის ნაბიჯების საჭიროების გარეშე. იხილეთ ეს პრაქტიკაში ამ Bootstrap CodePen დემო საშუალებით .

შექმენით ახალი index.htmlფაილი თქვენი პროექტის root-ში. ჩართეთ <meta name="viewport">ტეგი ასევე მობილურ მოწყობილობებში სათანადო რეაგირებისთვის .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

ჩართეთ Bootstrap-ის CSS და JS. მოათავსეთ <link>ტეგი <head>ჩვენი CSS-ისთვის და <script>თეგი ჩვენი JavaScript-ის ნაკრებისთვის (პოპერის ჩათვლით ჩამოსაშლელი ფაილების პოზიციონირებისთვის, პოპერები და ინსტრუმენტების რჩევები) დახურვამდე </body>. შეიტყვეთ მეტი ჩვენი CDN ბმულების შესახებ .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN ბმულები

როგორც მითითება, აქ არის ჩვენი ძირითადი CDN ბმულები.

აღწერა	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

თქვენ ასევე შეგიძლიათ გამოიყენოთ CDN შიგთავსის გვერდზე ჩამოთვლილი ნებისმიერი ჩვენი დამატებითი კონსტრუქციის მისაღებად .

Შემდეგი ნაბიჯები

წაიკითხეთ ცოტა მეტი რამდენიმე მნიშვნელოვანი გლობალური გარემოს პარამეტრების შესახებ , რომლებსაც Bootstrap იყენებს.
წაიკითხეთ იმის შესახებ, თუ რა შედის Bootstrap-ში ჩვენს შიგთავსის განყოფილებაში და ქვემოთ მოცემული კომპონენტების სია, რომლებიც საჭიროებენ JavaScript- ს .
გჭირდებათ ცოტა მეტი ძალა? განიხილეთ Bootstrap-ით აშენება წყაროს ფაილების ჩათვლით პაკეტის მენეჯერის მეშვეობით .
გსურთ გამოიყენოთ Bootstrap როგორც მოდული <script type="module">? გთხოვთ, იხილოთ ჩვენი Bootstrap-ის გამოყენება მოდულის განყოფილებაში.

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

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

კომპონენტების ჩვენება, რომლებიც საჭიროებენ JavaScript-ს

გაფრთხილებები გათავისუფლების შესახებ
ღილაკები მდგომარეობების გადართვისა და მოსანიშნი ველი/რადიო ფუნქციონალობისთვის
კარუსელი სლაიდის ყველა ქცევის, მართვისა და ინდიკატორისთვის
ჩაკეცვა კონტენტის ხილვადობის გადართვისთვის
ჩამოსაშლელები ჩვენებისა და პოზიციონირებისთვის (ასევე საჭიროებს პოპერს )
მოდალები ჩვენების, პოზიციონირებისა და გადახვევის ქცევისთვის
Navbar ჩვენი Collapse და Offcanvas დანამატების გაფართოებისთვის საპასუხო ქცევების განსახორციელებლად
ნავიგაცია Tab დანამატით შიგთავსის პანელის გადართვისთვის
Offcanvases ჩვენების, პოზიციონირებისა და გადახვევის ქცევისთვის
Scrollspy გადახვევის ქცევისა და ნავიგაციის განახლებისთვის
სადღეგრძელოები ჩვენების და გათავისუფლებისთვის
ინსტრუმენტების რჩევები და პოვერები ჩვენებისთვის და პოზიციონირებისთვის (ასევე მოითხოვს პოპერს )

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

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

HTML5 დოქტიპი

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

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

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