in English

შესავალი

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

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

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

CSS

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

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

JS

ჩვენი ბევრი კომპონენტი ფუნქციონირებისთვის საჭიროებს JavaScript-ის გამოყენებას. კერძოდ, მათ სჭირდებათ jQuery , Popper და ჩვენი საკუთარი JavaScript დანამატები. ჩვენ ვიყენებთ jQuery-ის slim build-ს , მაგრამ ასევე მხარდაჭერილია სრული ვერსია.

განათავსეთ ერთ-ერთი შემდეგი <script>ს თქვენი გვერდების ბოლოს, ზუსტად დახურვის </body>ტეგამდე, რათა ჩართოთ ისინი. ჯერ უნდა მოვიდეს jQuery, შემდეგ Popper და შემდეგ ჩვენი JavaScript დანამატები.

შეკვრა

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ცალკე

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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-ის განვითარების შესახებ და დაუკავშირდით საზოგადოებას ამ სასარგებლო რესურსებით.

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

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

CSP და ჩაშენებული SVG

Bootstrap-ის რამდენიმე კომპონენტი მოიცავს ჩაშენებულ SVG-ებს ჩვენს CSS-ში, რათა კომპონენტების თანმიმდევრულად და მარტივად სტილიზაცია მოხდეს ბრაუზერებსა და მოწყობილობებში. უფრო მკაცრი CSP კონფიგურაციების მქონე ორგანიზაციებისთვის , ჩვენ დავაფიქსირეთ ჩვენი ჩაშენებული SVG-ების ყველა შემთხვევა (რომლებიც ყველა გამოიყენება მეშვეობით background-image), ასე რომ თქვენ შეგიძლიათ უფრო დეტალურად გადახედოთ თქვენს ვარიანტებს.

თემის საუბრის საფუძველზე , თქვენს კოდურ ბაზაში ამის გადასაჭრელად ზოგიერთი ვარიანტი მოიცავს URL-ების ჩანაცვლებას ლოკალურად განთავსებული აქტივებით, სურათების წაშლას და ინლაინ სურათების გამოყენებას (შეუძლებელია ყველა კომპონენტში) და თქვენი CSP-ის შეცვლას. ჩვენი რეკომენდაციაა, ყურადღებით გადახედოთ საკუთარ უსაფრთხოების პოლიტიკას და გადაწყვიტოთ საუკეთესო გზა, საჭიროების შემთხვევაში.