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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

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

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

შეკვრა

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

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

ცალკე

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

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

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

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

კომპონენტების ჩვენება, რომლებიც საჭიროებენ 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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-ზე უახლესი ჭორებისა და გასაოცარი მუსიკალური ვიდეოებისთვის.