ჩამოტვირთვა

Bootstrap-ს (ამჟამად v3.4.1) აქვს რამდენიმე მარტივი გზა სწრაფად დასაწყებად, რომელთაგან თითოეული მიმართავს სხვადასხვა უნარების დონეს და გამოყენების შემთხვევაში. წაიკითხეთ, რომ ნახოთ რა შეესაბამება თქვენს კონკრეტულ საჭიროებებს.

jsDelivr

jsDelivr- ის ხალხი გულმოდგინედ უზრუნველყოფს CDN მხარდაჭერას Bootstrap-ის CSS-ისა და JavaScript-ისთვის. უბრალოდ გამოიყენეთ ეს jsDelivr ბმულები.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

დააინსტალირეთ Bower-ით

თქვენ ასევე შეგიძლიათ დააინსტალიროთ და მართოთ Bootstrap-ის Less, CSS, JavaScript და შრიფტები Bower- ის გამოყენებით :

bower install bootstrap

დააინსტალირეთ npm-ით

თქვენ ასევე შეგიძლიათ დააინსტალიროთ Bootstrap npm-ის გამოყენებით :

npm install bootstrap@3

require('bootstrap')ჩატვირთავს Bootstrap-ის ყველა jQuery დანამატს jQuery ობიექტზე. თავად bootstrapმოდული არაფრის ექსპორტს არ ახდენს. თქვენ შეგიძლიათ ხელით ჩატვირთოთ Bootstrap-ის jQuery დანამატები ინდივიდუალურად, /js/*.jsფაილების ჩატვირთვით პაკეტის ზედა დონის დირექტორიაში.

Bootstrap package.jsonშეიცავს დამატებით მეტამონაცემებს შემდეგი კლავიშების ქვეშ:

• less- გზა Bootstrap-ის მთავარი Less Source ფაილისკენ
• style- გზა Bootstrap-ის არამინიფიცირებული CSS-ისკენ, რომელიც წინასწარ შედგენილია ნაგულისხმევი პარამეტრების გამოყენებით (მორგების გარეშე)

დააინსტალირეთ Composer-ით

თქვენ ასევე შეგიძლიათ დააინსტალიროთ და მართოთ Bootstrap-ის Less, CSS, JavaScript და შრიფტები Composer- ის გამოყენებით :

composer require twbs/bootstrap

Less/Sass-ისთვის საჭიროა ავტოპრეფიქსერი

Bootstrap იყენებს Autoprefixer- ს CSS გამყიდველის პრეფიქსებთან გასამკლავებლად . თუ თქვენ აწყობთ Bootstrap-ს მისი Less/Sass წყაროდან და არ იყენებთ ჩვენს Gruntfile-ს, თქვენ თავად მოგიწევთ Autoprefixer-ის ინტეგრირება თქვენს build პროცესში. თუ იყენებთ წინასწარ შედგენილ Bootstrap-ს ან იყენებთ ჩვენს Gruntfile-ს, არ გჭირდებათ ამაზე ფიქრი, რადგან Autoprefixer უკვე ინტეგრირებულია ჩვენს Gruntfile-ში.

რა შედის

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

წინასწარ შედგენილი Bootstrap

ჩამოტვირთვის შემდეგ გახსენით შეკუმშული საქაღალდე, რომ ნახოთ (შედგენილი) Bootstrap-ის სტრუქტურა. თქვენ ნახავთ ასეთ რამეს:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ეს არის Bootstrap-ის ყველაზე ძირითადი ფორმა: წინასწარ შედგენილი ფაილები სწრაფი ჩაშვებისთვის თითქმის ნებისმიერ ვებ პროექტში. ჩვენ გთავაზობთ შედგენილ CSS და JS ( bootstrap.*), ასევე კომპილირებული და მინიფიცირებული CSS და JS ( bootstrap.min.*). CSS წყაროს რუქები ( bootstrap.*.map) ხელმისაწვდომია გარკვეული ბრაუზერების დეველოპერის ინსტრუმენტებთან გამოსაყენებლად. ჩართულია შრიფტები Glyphicons-დან, ისევე როგორც სურვილისამებრ Bootstrap თემა.

ჩატვირთვის წყაროს კოდი

Bootstrap-ის საწყისი კოდის ჩამოტვირთვა მოიცავს წინასწარ შედგენილ CSS-ს, JavaScript-ს და შრიფტის აქტივებს, წყარო Less-თან, JavaScript-თან და დოკუმენტაციასთან ერთად. უფრო კონკრეტულად, მასში შედის შემდეგი და სხვა:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/და fonts/არის ჩვენი CSS, JS და ხატულა შრიფტების წყარო კოდი (შესაბამისად). საქაღალდე შეიცავს ყველაფერს, რაც dist/ჩამოთვლილია წინასწარ შედგენილ ჩამოტვირთვის განყოფილებაში ზემოთ. საქაღალდე შეიცავს ჩვენი დოკუმენტაციის docs/წყაროს კოდს და examples/Bootstrap-ის გამოყენებას. ამის გარდა, ნებისმიერი სხვა ჩართული ფაილი უზრუნველყოფს პაკეტების მხარდაჭერას, ლიცენზიის ინფორმაციას და განვითარებას.

CSS და JavaScript-ის შედგენა

Bootstrap იყენებს Grunt- ს თავისი build სისტემისთვის, ჩარჩოსთან მუშაობის მოსახერხებელი მეთოდებით. ეს არის ის, თუ როგორ ვაგროვებთ ჩვენს კოდს, ვატარებთ ტესტებს და სხვა.

Grunt-ის ინსტალაცია

Grunt-ის ინსტალაციისთვის ჯერ უნდა ჩამოტვირთოთ და დააინსტალიროთ node.js (რომელიც მოიცავს npm). npm ნიშნავს კვანძების შეფუთულ მოდულებს და არის განვითარების დამოკიდებულების მართვის საშუალება node.js-ის საშუალებით.

1. grunt-cliგლობალურად დააინსტალირეთ npm install -g grunt-cli.
2. გადადით root /bootstrap/დირექტორიაში, შემდეგ გაუშვით npm install. npm გადახედავს package.jsonფაილს და ავტომატურად დააინსტალირებს იქ ჩამოთვლილ საჭირო ლოკალურ დამოკიდებულებებს.

დასრულების შემდეგ, თქვენ შეძლებთ ბრძანების ხაზიდან მოწოდებული Grunt-ის სხვადასხვა ბრძანებების გაშვებას.

ხელმისაწვდომია Grunt ბრძანებები

grunt dist(უბრალოდ შეადგინეთ CSS და JavaScript)

აღადგენს /dist/დირექტორიას შედგენილი და მინიფიცირებული CSS და JavaScript ფაილებით. როგორც Bootstrap-ის მომხმარებელი, ეს ჩვეულებრივ არის თქვენთვის სასურველი ბრძანება.

grunt watch(Უყურებს)

უყურებს Less-ის წყაროს ფაილებს და ავტომატურად აწყობს მათ CSS-ში, როდესაც შეინახავთ ცვლილებას.

grunt test(გაატარეთ ტესტები)

მუშაობს JSHint და აწარმოებს QUnit ტესტებს რეალურ ბრაუზერებში კარმას წყალობით .

grunt docs(შექმენით და შეამოწმეთ დოკუმენტების აქტივები)

აშენებს და ამოწმებს CSS-ს, JavaScript-ს და სხვა აქტივებს, რომლებიც გამოიყენება დოკუმენტაციის ადგილობრივად გაშვებისას bundle exec jekyll serve.

grunt(აშენეთ აბსოლუტურად ყველაფერი და გაიარეთ ტესტები)

ადგენს და ამცირებს CSS-სა და JavaScript-ს, აშენებს დოკუმენტაციის ვებსაიტს, აწარმოებს HTML5 ვალიდატორს დოკუმენტებთან მიმართებაში, ახდენს Customizer აქტივების რეგენერაციას და სხვა. მოითხოვს ჯეკილს . ჩვეულებრივ საჭიროა მხოლოდ იმ შემთხვევაში, თუ თქვენ ჰაკერთ თავად Bootstrap-ზე.

Დიაგნოსტიკა

თუ პრობლემები შეგექმნათ დამოკიდებულებების ინსტალაციასთან ან Grunt ბრძანებების გაშვებასთან დაკავშირებით, ჯერ წაშალეთ /node_modules/npm-ის მიერ გენერირებული დირექტორია. შემდეგ, ხელახლა გაუშვით npm install.

ძირითადი შაბლონი

დაიწყეთ ამ ძირითადი HTML შაბლონით, ან შეცვალეთ ეს მაგალითები . ჩვენ ვიმედოვნებთ, რომ თქვენ მორგებთ ჩვენს შაბლონებს და მაგალითებს, მოარგებთ მათ თქვენს საჭიროებებს.

დააკოპირეთ ქვემოთ მოცემული HTML მინიმალურ Bootstrap დოკუმენტთან მუშაობის დასაწყებად.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

მაგალითები

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

მიიღეთ წყაროს კოდი ქვემოთ მოცემული თითოეული მაგალითისთვის Bootstrap საცავების ჩამოტვირთვით . მაგალითები შეგიძლიათ იხილოთ docs/examples/დირექტორიაში.

ჩარჩოს გამოყენება

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

საფუძვლების გარდა არაფერია: შედგენილი CSS და JavaScript კონტეინერთან ერთად.

ჩატვირთვის თემა

ჩატვირთეთ არჩევითი Bootstrap თემა ვიზუალურად გაუმჯობესებული გამოცდილებისთვის.

ბადეები

ბადის განლაგების მრავალი მაგალითი ოთხივე იარუსით, ბუდეებით და სხვა.

ჯუმბოტრონი

შექმენით ჯუმბოტრონის გარშემო ნავიბარი და რამდენიმე ძირითადი ბადის სვეტი.

ვიწრო ჯუმბოტრონი

შექმენით უფრო მორგებული გვერდი ნაგულისხმევი კონტეინერისა და ჯუმბოტრონის შევიწროვებით.

Navbars მოქმედებაში

ნავიბარი

სუპერ ძირითადი შაბლონი, რომელიც მოიცავს ნავიგალურ ზოლს დამატებით შინაარსთან ერთად.

სტატიკური ზედა ნავიგატორი

სუპერ ძირითადი შაბლონი სტატიკური ზედა ნავიგატორით და დამატებით შინაარსთან ერთად.

დაფიქსირდა ნავიბარი

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

მორგებული კომპონენტები

Საფარი

ერთგვერდიანი შაბლონი მარტივი და ლამაზი საწყისი გვერდების შესაქმნელად.

კარუსელი

შეცვალეთ ნავიბარი და კარუსელი, შემდეგ დაამატეთ რამდენიმე ახალი კომპონენტი.

ბლოგი

ბლოგის მარტივი ორსვეტიანი განლაგება მორგებული ნავიგაციით, სათაურით და ტიპით.

დაფა

ძირითადი სტრუქტურა ადმინისტრატორის დაფის ფიქსირებული გვერდითი ზოლით და ნავიბარით.

შესვლის გვერდი

ფორმის მორგებული განლაგება და დიზაინი ფორმაში მარტივი ნიშნისთვის.

გამართლებული ნავი

შექმენით მორგებული ნავიგატორი გამართლებული ბმულებით. Თავები მაღლა! არც ისე მეგობრული Safari.

წებოვანი ქვედა კოლონტიტული

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

წებოვანი ქვედა კოლონტიტული ნავიბარით

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

ექსპერიმენტები

არ რეაგირებს Bootstrap

მარტივად გამორთეთ Bootstrap-ის რეაგირება ჩვენს დოკუმენტებზე .

ტილოს გარეთ

შექმენით გადამრთველი ტილოდან ნავიგაციის მენიუ Bootstrap-ით გამოსაყენებლად.

ხელსაწყოები

ბუტლინტი

Bootlint არის ოფიციალური Bootstrap HTML linter ინსტრუმენტი. ის ავტომატურად ამოწმებს რამდენიმე გავრცელებულ HTML შეცდომას ვებგვერდებში, რომლებიც იყენებენ Bootstrap-ს საკმაოდ „ვანილის“ გზით. Vanilla Bootstrap-ის კომპონენტები/ვიჯეტები მოითხოვს DOM-ის მათი ნაწილების შესაბამისობას გარკვეულ სტრუქტურებთან. Bootlint ამოწმებს, რომ Bootstrap კომპონენტების შემთხვევებს აქვთ სწორად სტრუქტურირებული HTML. იფიქრეთ Bootlint-ის დამატებაზე თქვენი Bootstrap ვებ განვითარების ხელსაწყოთა ქსელში, რათა არცერთმა საერთო შეცდომამ არ შეანელოს თქვენი პროექტის განვითარება.

საზოგადოება

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

• წაიკითხეთ და გამოიწერეთ ოფიციალური Bootstrap ბლოგი .
• ესაუბრეთ სხვა Bootstrapper-ებს IRC-ის გამოყენებით irc.freenode.netსერვერზე, ##bootstrap არხზე .
• Bootstrap-ის გამოყენებისთვის დახმარებისთვის იკითხეთ StackOverflow-twitter-bootstrap-3 ზე ტეგის გამოყენებით .
• დეველოპერებმა უნდა გამოიყენონ საკვანძო სიტყვა bootstrapპაკეტებზე, რომლებიც ცვლიან ან დაამატებენ Bootstrap-ის ფუნქციონირებას npm ან მსგავსი მიწოდების მექანიზმების მეშვეობით გავრცელებისას მაქსიმალური აღმოჩენისთვის.
• იპოვეთ Bootstrap Expo- ზე ადამიანების აშენების შთამაგონებელი მაგალითები .

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

რეაგირების გამორთვა

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

ნაბიჯები გვერდის რეაგირების გამორთვისთვის

1. გამოტოვეთ ხედვის პორტი , რომელიც <meta>მითითებულია CSS დოკუმენტებში
2. გააუქმეთ widthთითოეული .containerბადის ფენა ერთი სიგანით, მაგალითად width: 970px !important;, დარწმუნდით, რომ ეს ხდება ნაგულისხმევი Bootstrap CSS-ის შემდეგ. სურვილისამებრ, შეგიძლიათ თავიდან აიცილოთ !importantმედიის მოთხოვნები ან სელექტორი-ფუ.
3. თუ იყენებთ navbar-ებს, წაშალეთ ყველა ნავიბარის კოლაფსი და გაფართოების ქცევა.
4. ბადის განლაგებისთვის გამოიყენეთ .col-xs-*კლასები საშუალო/დიდი კლასების დამატებით ან მის ნაცვლად. არ ინერვიულოთ, ზედმეტად მცირე ზომის მოწყობილობის ბადე მასშტაბურია ყველა რეზოლუციამდე.

თქვენ კვლავ დაგჭირდებათ Respond.js IE8-ისთვის (რადგან ჩვენი მედია მოთხოვნები ჯერ კიდევ არსებობს და უნდა დამუშავდეს). ეს გამორთავს Bootstrap-ის „მობილური საიტის“ ასპექტებს.

Bootstrap-ის შაბლონი გამორთულია პასუხისმგებლობით

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

იხილეთ არასაპასუხო მაგალითი

ბრაუზერის და მოწყობილობის მხარდაჭერა

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

მხარდაჭერილი ბრაუზერები

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

ალტერნატიული ბრაუზერები, რომლებიც იყენებენ WebKit-ის, Blink-ის ან Gecko-ს უახლეს ვერსიას, პირდაპირ თუ პლატფორმის ვებ ხედვის API-ს მეშვეობით, ცალსახად არ არის მხარდაჭერილი. თუმცა, Bootstrap უნდა (უმეტეს შემთხვევაში) აჩვენოს და სწორად ფუნქციონირებდეს ამ ბრაუზერებშიც. უფრო კონკრეტული მხარდაჭერის ინფორმაცია მოცემულია ქვემოთ.

Მობილური მოწყობილობები

ზოგადად რომ ვთქვათ, Bootstrap მხარს უჭერს თითოეული ძირითადი პლატფორმის ნაგულისხმევი ბრაუზერების უახლეს ვერსიებს. გაითვალისწინეთ, რომ პროქსი ბრაუზერები (როგორიცაა Opera Mini, Opera Mobile's Turbo რეჟიმი, UC Browser Mini, Amazon Silk) არ არის მხარდაჭერილი.

დესკტოპის ბრაუზერები

ანალოგიურად, მხარდაჭერილია დესკტოპის ბრაუზერების უმეტესობის უახლესი ვერსიები.

Windows-ზე ჩვენ მხარს ვუჭერთ Internet Explorer 8-11-ს .

Firefox-ისთვის, უახლესი ნორმალური სტაბილური გამოშვების გარდა, ჩვენ ასევე მხარს ვუჭერთ Firefox-ის უახლეს გაფართოებული მხარდაჭერის გამოშვების (ESR) ვერსიას.

არაოფიციალურად, Bootstrap საკმარისად კარგად უნდა გამოიყურებოდეს და მოიქცეს Chromium-ში და Chrome-ში Linux-ისთვის, Firefox-ში Linux-ისთვის და Internet Explorer 7-ში, ისევე როგორც Microsoft Edge-ში, თუმცა ისინი ოფიციალურად არ არის მხარდაჭერილი.

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

Internet Explorer 8 და 9

Internet Explorer 8 და 9 ასევე მხარდაჭერილია, თუმცა, გთხოვთ გაითვალისწინოთ, რომ ზოგიერთი CSS3 თვისება და HTML5 ელემენტი სრულად არ არის მხარდაჭერილი ამ ბრაუზერების მიერ. გარდა ამისა, Internet Explorer 8 მოითხოვს Respond.js- ის გამოყენებას მედია შეკითხვის მხარდაჭერის გასააქტიურებლად.

CSS3 და HTML5 ფუნქციების ბრაუზერის მხარდაჭერის შესახებ დეტალებისთვის ეწვიეთ Can I use....

Internet Explorer 8 და Respond.js

უფრთხილდით შემდეგ შენიშვნებს Respond.js-ის გამოყენებისას თქვენი განვითარებისა და წარმოების გარემოში Internet Explorer 8-ისთვის.

Respond.js და ჯვარედინი დომენური CSS

Respond.js-ის გამოყენება CSS-ით, რომელიც განთავსებულია სხვა (ქვე) დომენზე (მაგალითად, CDN-ზე) მოითხოვს დამატებით კონფიგურაციას. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.

უპასუხეთ.js დაfile://

ბრაუზერის უსაფრთხოების წესებიდან გამომდინარე, Respond.js არ მუშაობს file://პროტოკოლით ნანახ გვერდებზე (როგორც ადგილობრივი HTML ფაილის გახსნისას). IE8-ში საპასუხო ფუნქციების შესამოწმებლა��, ნახეთ თქვენი გვერდები HTTP(S) საშუალებით. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.

უპასუხეთ.js და@import

Respond.js არ მუშაობს CSS-თან, რომელიც მითითებულია @import. კერძოდ, ცნობილია დრუპალის ზოგიერთი კონფიგურაციის გამოყენება @import. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.

Internet Explorer 8 და ყუთის ზომა

IE8 არ არის სრულად მხარდაჭერილი , box-sizing: border-box;როდესაც კომბინირებულია min-width, max-width, min-heightან max-height. max-widthამ მიზეზით, v3.0.1- დან ჩვენ აღარ ვიყენებთ .containers.

Internet Explorer 8 და @font-face

IE8-ს აქვს გარკვეული პრობლემები, @font-faceროდესაც შერწყმულია :before. Bootstrap იყენებს ამ კომბინაციას თავის გლიფიკონებთან. თუ გვერდი ინახება ქეშით და იტვირთება მაუსის გარეშე ფანჯარაში (ანუ დააჭირეთ განახლების ღილაკს ან ჩატვირთეთ რაიმე iframe-ში), მაშინ გვერდი ასახავს შრიფტის ჩატვირთვამდე. გვერდზე (სხეულის) თავზე გადახვევა გამოჩნდება ზოგიერთი ხატულა, ხოლო დარჩენილ ხატებზე გადატანა მათაც გამოჩნდება. იხილეთ ნომერი #13863 დეტალებისთვის.

IE თავსებადობის რეჟიმები

Bootstrap არ არის მხარდაჭერილი ძველ Internet Explorer-ის თავსებადობის რეჟიმებში. იმისათვის, რომ დარწმუნდეთ, რომ იყენებთ IE-ს რენდერის უახლეს რეჟიმს, გაითვალისწინეთ შესაბამისი <meta>ტეგის ჩართვა თქვენს გვერდებზე:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

დაადასტურეთ დოკუმენტის რეჟიმი გამართვის ხელსაწყოების გახსნით: დააჭირეთ F12და შეამოწმეთ "დოკუმენტის რეჟიმი".

ეს ტეგი შედის Bootstrap-ის ყველა დოკუმენტაციასა და მაგალითში, რათა უზრუნველყოს საუკეთესო რენდერირება Internet Explorer-ის თითოეულ მხარდაჭერილ ვერსიაში.

დამატებითი ინფორმაციისთვის იხილეთ ეს StackOverflow შეკითხვა .

Internet Explorer 10 Windows 8-ში და Windows Phone 8-ში

Internet Explorer 10 არ განასხვავებს მოწყობილობის სიგანეს ხედვის სიგანისგან და, შესაბამისად, სათანადოდ არ იყენებს მედია მოთხოვნებს Bootstrap-ის CSS-ში. ჩვეულებრივ, თქვენ უბრალოდ დაამატებდით CSS-ის სწრაფ ფრაგმენტს ამის გამოსასწორებლად:

@-ms-viewport       { width: device-width; }

თუმცა, ეს არ მუშაობს Windows Phone 8 ვერსიით უფრო ძველი, ვიდრე განახლება 3 (ანუ GDR3) გაშვებული მოწყობილობებისთვის , რადგან ის იწვევს ასეთ მოწყობილობებს ძირითადად დესკტოპის ხედის ჩვენების ნაცვლად ვიწრო „ტელეფონის“ ხედის ნაცვლად. ამ პრობლემის გადასაჭრელად, თქვენ უნდა შეიყვანოთ შემდეგი CSS და JavaScript შეცდომების აღმოსაფხვრელად .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

დამატებითი ინფორმაციისთვის და გამოყენების ინსტრუქციებისთვის წაიკითხეთ Windows Phone 8 და Device-Width .

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

Safari პროცენტული დამრგვალება

Safari-ს v7.1-მდე ვერსიების რენდერინგი OS X-ისთვის და Safari iOS v8.0-ისთვის ჰქონდა გარკვეული პრობლემები ჩვენს .col-*-1ბადის კლასებში გამოყენებული ათობითი ადგილების რაოდენობასთან დაკავშირებით. ასე რომ, თუ გქონდათ 12 ცალკეული ბადის სვეტი, შეამჩნევდით, რომ ისინი მოკლე იყო სვეტების სხვა მწკრივებთან შედარებით. Safari/iOS-ის განახლების გარდა, თქვენ გაქვთ რამდენიმე ვარიანტი გამოსავლისთვის:

• დაამატეთ .pull-rightთქვენი ბოლო ბადის სვეტს, რომ მიიღოთ მყარი მარჯვენა გასწორება
• ხელით შეცვალეთ თქვენი პროცენტები Safari-სთვის სრულყოფილი დამრგვალების მისაღებად (უფრო რთული ვიდრე პირველი ვარიანტი)

მოდალები, ნავიგები და ვირტუალური კლავიატურები

გადინება და გადახვევა

ელემენტის მხარდაჭერა საკმაოდ შეზღუდულია iOS-სა და Android-ში overflow: hidden. <body>ამ მიზნით, როდესაც გადახვევთ მოდალის ზედა ან ქვედა მხარეს რომელიმე ამ მოწყობილობის ბრაუზერში, <body>შინაარსი დაიწყებს გადახვევას. იხილეთ Chrome ხარვეზი #175502 (დასწორებულია Chrome v40-ში) და WebKit შეცდომა #153852 .

iOS ტექსტური ველები და გადახვევა

iOS 9.3-დან, სანამ მოდალი ღიაა, თუ გადახვევის ჟესტის თავდაპირველი შეხება არის ტექსტის <input>ან ს საზღვრებში, მოდალის ქვეშ <textarea>არსებული <body>შინაარსი გადაინაცვლებს თავად მოდალის ნაცვლად. იხილეთ WebKit შეცდომა #153856 .

ვირტუალური კლავიატურები

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

ნავიბარის ჩამოსაშლელები

ელემენტი არ გამოიყენება iOS- ზე .dropdown-backdropნავიში z-ინდექსირების სირთულის გამო. ამგვარად, ჩასაშლელი ფაილების დახურვისთვის, თქვენ პირდაპირ უნდა დააწკაპუნოთ ჩამოსაშლელ ელემენტზე (ან ნებისმიერ სხვა ელემენტზე, რომელიც გაუშვებს დაწკაპუნების მოვლენას iOS-ში ).

ბრაუზერის მასშტაბირება

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

წებოვანი :hover/ :focusმობილურზე

მიუხედავად იმისა, რომ რეალური ჰოვერირება შეუძლებელია უმეტეს სენსორულ ეკრანებზე, მობილური ბრაუზერების უმეტესობა ამსგავსებს ჰოვერინგის მხარდაჭერას და ხდის :hover"წებოვანს". სხვა სიტყვებით რომ ვთქვათ, :hoverსტილის გამოყენება იწყება ელემენტზე შეხების შემდეგ და წყვეტს გამოყენებას მხოლოდ მას შემდეგ, რაც მომხმარებელი შეეხება სხვა ელემენტს. ამან შეიძლება გამოიწვიოს Bootstrap-ის :hoverმდგომარეობების არასასურველად „გაჭედვა“ ასეთ ბრაუზერებზე. ზოგიერთი მობილური ბრაუზერი ასევე ხდის :focusანალოგიურად წებოვანს. ამჟამად არ არსებობს მარტივი გამოსავალი ამ საკითხებისთვის, გარდა ასეთი სტილის მთლიანად მოხსნისა.

ბეჭდვა

ზოგიერთ თანამედროვე ბრაუზერშიც კი, ბეჭდვა შეიძლება იყოს უცნაური.

კერძოდ, Chrome v32-დან და მინდვრის პარამეტრების მიუხედავად, Chrome იყენებს ხედვის პორტის სიგანეს მნიშვნელოვნად უფრო ვიწრო, ვიდრე ფიზიკური ქაღალდის ზომა ვებგვერდის ბეჭდვისას მედია მოთხოვნების გადაჭრისას. ამან შეიძლება გამოიწვიოს Bootstrap-ის ძალიან მცირე ბადე მოულოდნელად გააქტიურდეს ბეჭდვისას. იხილეთ საკითხი #12078 და Chrome შეცდომა #273306 ზოგიერთი დეტალისთვის. შემოთავაზებული გამოსავალი:

• აიღეთ ძალიან მცირე ბადე და დარწმუნდით, რომ თქვენი გვერდი მისაღებიდ გამოიყურება მის ქვეშ.
• შეცვალეთ @screen-*Less ცვლადების მნიშვნელობები ისე, რომ თქვენი პრინტერის ქაღალდი ჩაითვალოს უფრო დიდი ვიდრე ზედმეტი.
• დაამატეთ მორგებული მედია მოთხოვნები, რათა შეცვალოთ ბადის ზომის წყვეტის წერტილები მხოლოდ ბეჭდური მედიისთვის.

ასევე, Safari v8.0-დან, ფიქსირებული სიგანის .containers-ებმა შეიძლება გამოიწვიოს Safari-მ გამოიყენოს უჩვეულოდ მცირე შრიფტის ზომა ბეჭდვისას. იხილეთ #14868 და WebKit შეცდომა #138192 დამატებითი დეტალებისთვის. ამის ერთ-ერთი პოტენციური გამოსავალი არის შემდეგი CSS-ის დამატება:

@media print {
  .container {
    width: auto;
  }
}

ანდროიდის საფონდო ბრაუზერი

გარეთ, Android 4.1 (და კიდევ უფრო ახალი რელიზები, როგორც ჩანს) მიეწოდება ბრაუზერის აპს, როგორც ნაგულისხმევი ვებ ბრაუზერის არჩევანს (Chrom-ისგან განსხვავებით). სამწუხაროდ, ბრაუზერის აპს აქვს ბევრი შეცდომა და შეუსაბამობა ზოგადად CSS-თან.

აირჩიეთ მენიუები

ელემენტებზე <select>Android-ის საფონდო ბრაუზერი არ აჩვენებს გვერდით კონტროლს, თუ არის border-radiusდა/ან borderგამოყენებული. (იხილეთ StackOverflow-ის ეს შეკითხვა დეტალებისთვის.) გამოიყენეთ ქვემოთ მოცემული კოდის ფრაგმენტი შეურაცხმყოფელი CSS- <select>ის ამოსაშლელად და გადაიყვანეთ როგორც unstyled ელემენტად Android stock ბრაუზერში. მომხმარებლის აგენტის sniffing თავიდან აიცილებს ჩარევას Chrome, Safari და Mozilla ბრაუზერებში.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

გსურთ ნახოთ მაგალითი? შეამოწმეთ ეს JS Bin დემო ვერსია.

ვალიდიატორები

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

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

ჩვენს HTML დოკუმენტებს ასევე აქვთ რამდენიმე ტრივიალური და არათანმიმდევრული HTML ვალიდაციის გაფრთხილებები Firefox-ის გარკვეული ხარვეზის გამოსწორების გამო .

მესამე მხარის მხარდაჭერა

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

ყუთის ზომა

ზოგიერთი მესამე მხარის პროგრამული უზრუნველყოფა, მათ შორის Google Maps და Google Custom Search Engine, კონფლიქტშია Bootstrap-თან .-ის გამო * { box-sizing: border-box; }, წესი, რომელიც აიძულებს მას ასე paddingარ იმოქმედოს ელემენტის საბოლოო გამოთვლილ სიგანეზე. შეიტყვეთ მეტი ყუთის მოდელისა და ზომის შესახებ CSS Tricks-ში .

კონტექსტიდან გამომდინარე, შეგიძლიათ აუქმოთ საჭიროებისამებრ (ვარიანტი 1) ან გადააყენოთ ყუთის ზომა მთელი რეგიონებისთვის (ვარიანტი 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

ხელმისაწვდომობა

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

ნავიგაციის გამოტოვება

თუ თქვენი ნავიგაცია შეიცავს ბევრ ბმულს და წინ უსწრებს DOM-ის მთავარ შინაარსს, დაამატეთ Skip to main contentბმული ნავიგაციის დაწყებამდე (მარტივი ახსნისთვის იხილეთ ეს A11Y პროექტის სტატია ნავიგაციის ბმულების გამოტოვების შესახებ ). კლასის გამოყენება .sr-onlyვიზუალურად დამალავს გამოტოვების ბმულს და .sr-only-focusableკლასი უზრუნველყოფს, რომ ბმული ხილული გახდეს ფოკუსირების შემდეგ (კლავიატურის მხედველი მომხმარებლებისთვის).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

ჩადგმული სათაურები

სათაურების ( <h1>- <h6>) ჩასმისას თქვენი ძირითადი დოკუმენტის სათაური უნდა იყოს <h1>. მომდევნო სათაურებმა ლოგიკურად უნდა გამოიყენონ <h2>-<h6> ისეთი, რომ ეკრანის მკითხველებმა შეძლონ თქვენი გვერდების სარჩევის შექმნა.

შეიტყვეთ მეტი HTML CodeSniffer-სა და Penn State's AccessAbility-ზე .

ფერის კონტრასტი

ამჟამად, ზოგიერთი ნაგულისხმევი ფერის კომბინაცია ხელმისაწვდომია Bootstrap-ში (როგორიცაა სხვადასხვა სტილის ღილაკების კლასები, კოდის ზოგიერთი ხაზგასმული ფერები, რომლებიც გამოიყენება ძირითადი კოდის ბლოკებისთვის , .bg-primary კონტექსტური ფონის დამხმარე კლასი და ბმულის ნაგულისხმევი ფერი თეთრ ფონზე გამოყენებისას) აქვს დაბალი კონტრასტის კოეფიციენტი ( რეკომენდებულ თანაფარდობას 4,5:1 ქვემოთ ). ამან შეიძლება პრობლემები შეუქმნას დაბალი მხედველობის მქონე მომხმარებლებს ან დალტონიკით. ამ ნაგულისხმევი ფერების შეცვლა შეიძლება საჭირო გახდეს მათი კონტრასტისა და წაკითხვის გაზრდის მიზნით.

Დამატებითი რესურსები

• "HTML Codesniffer" სანიშნე ხელმისაწვდომობის პრობლემების იდენტიფიცირებისთვის
• Chrome-ის Accessibility Developer Tools გაფართოება
• ფერის კონტრასტის ანალიზატორი
• A11Y პროექტი
• MDN ხელმისაწვდომობის დოკუმენტაცია

ლიცენზიის ხშირად დასმული კითხვები

Bootstrap გამოშვებულია MIT ლიცენზიით და არის 2019 წლის Twitter-ის საავტორო უფლებები. მოხარშული პატარა ნაჭრებად, შეიძლება აღწერილი იყოს შემდეგი პირობებით.

ის მოითხოვს თქვენგან:

• შეინახეთ ლიცენზია და საავტორო უფლებების შესახებ შეტყობინება ჩართული Bootstrap-ის CSS და JavaScript ფაილებში, როდესაც მათ იყენებთ თქვენს ნამუშევრებში

ის გაძლევთ საშუალებას:

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

ის გიკრძალავს:

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

ეს არ მოითხოვს თქვენგან:

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

სრული Bootstrap ლიცენზია განთავსებულია პროექტის საცავში დამატებითი ინფორმაციისთვის.

თარგმანები

საზოგადოების წევრებმა თარგმნეს Bootstrap-ის დოკუმენტაცია სხვადასხვა ენაზე. არცერთი არ არის ოფიციალურად მხარდაჭერილი და ისინი შეიძლება ყოველთვის არ იყოს განახლებული.

• Bootstrap 中文文档 (ჩინური)
• Bootstrap på Dansk (დანიური)
• Bootstrap en Français (ფრანგ.)
• Bootstrap auf Deutsch (გერმანული)
• ჩამკეტი იტალიურად (იტალიურად)
• Bootstrap 한국어 (კორეული)
• Bootstrap em Português do Brasil (ბრაზილიური პორტუგალიური)
• Bootstrap по-русски (რუსული)
• Bootstrap en Español (ესპანური)
• Türkçe Bootstrap (თურქული)
• Bootstrap українською (უკრაინული)
• Bootstrap bằng tiếng Việt (ვიეტნამური)

ჩვენ არ ვეხმარებით თარგმანების ორგანიზებას ან მასპინძლობას, ჩვენ უბრალოდ ლინკებს ვაძლევთ მათ.

დაასრულეთ ახალი თუ უკეთესი თარგმანი? გახსენით pull მოთხოვნა ჩვენს სიაში დასამატებლად.