Ვიწყებთ
Bootstrap-ის მიმოხილვა, როგორ გადმოწეროთ და გამოიყენოთ, ძირითადი შაბლონები და მაგალითები და სხვა.
Bootstrap-ის მიმოხილვა, როგორ გადმოწეროთ და გამოიყენოთ, ძირითადი შაბლონები და მაგალითები და სხვა.
Bootstrap-ს (ამჟამად v3.3.7) აქვს რამდენიმე მარტივი გზა სწრაფად დასაწყებად, რომელთაგან თითოეული მიმართავს სხვადასხვა უნარების დონეს და გამოყენების შემთხვევაში. წაიკითხეთ, რომ ნახოთ რა შეესაბამება თქვენს კონკრეტულ საჭიროებებს.
შედგენილი და მინიფიცირებული CSS, JavaScript და შრიფტები. არ შედის დოკუმენტები ან ორიგინალური წყარო ფაილები.
წყარო Less, JavaScript და შრიფტის ფაილები ჩვენს დოკუმენტებთან ერთად. მოითხოვს ნაკლები შემდგენელი და გარკვეული კონფიგურაცია.
Bootstrap პორტირებულია Less-დან Sass- ში, რათა ადვილად ჩართოთ Rails, Compass ან Sass მხოლოდ პროექტებში.
jsDelivr- ის ხალხი გულმოდგინედ უზრუნველყოფს CDN მხარდაჭერას Bootstrap-ის CSS-ისა და JavaScript-ისთვის. უბრალოდ გამოიყენეთ ეს Bootstrap CDN ბმულები.
თქვენ ასევე შეგიძლიათ დააინსტალიროთ და მართოთ Bootstrap-ის Less, CSS, JavaScript და შრიფტები Bower- ის გამოყენებით :
თქვენ ასევე შეგიძლიათ დააინსტალიროთ Bootstrap npm-ის გამოყენებით :
require('bootstrap')
ჩატვირთავს Bootstrap-ის ყველა jQuery დანამატს jQuery ობიექტზე. თავად bootstrap
მოდული არაფრის ექსპორტს არ ახდენს. თქვენ შეგიძლიათ ხელით ჩატვირთოთ Bootstrap-ის jQuery დანამატები ინდივიდუალურად, /js/*.js
ფაილების ჩატვირთვით პაკეტის ზედა დონის დირექტორიაში.
Bootstrap package.json
შეიცავს დამატებით მეტამონაცემებს შემდეგი კლავიშების ქვეშ:
less
- გზა Bootstrap-ის მთავარი Less Source ფაილისკენstyle
- გზა Bootstrap-ის არამინიფიცირებული CSS-ისკენ, რომელიც წინასწარ შედგენილია ნაგულისხმევი პარამეტრების გამოყენებით (მორგების გარეშე)თქვენ ასევე შეგიძლიათ დააინსტალიროთ და მართოთ Bootstrap-ის Less, CSS, JavaScript და შრიფტები Composer- ის გამოყენებით :
Bootstrap იყენებს Autoprefixer- ს CSS გამყიდველის პრეფიქსებთან გასამკლავებლად . თუ თქვენ აწყობთ Bootstrap-ს მისი Less/Sass წყაროდან და არ იყენებთ ჩვენს Gruntfile-ს, თქვენ თავად მოგიწევთ Autoprefixer-ის ინტეგრირება თქვენს build პროცესში. თუ იყენებთ წინასწარ შედგენილ Bootstrap-ს ან იყენებთ ჩვენს Gruntfile-ს, არ გჭირდებათ ამაზე ფიქრი, რადგან Autoprefixer უკვე ინტეგრირებულია ჩვენს Gruntfile-ში.
Bootstrap-ის ჩამოტვირთვა შესაძლებელია ორი ფორმით, რომელშიც თქვენ იპოვით შემდეგ დირექტორიაებსა და ფაილებს, რომლებიც ლოგიკურად აჯგუფებენ საერთო რესურსებს და უზრუნველყოფენ როგორც შედგენილ, ისე მინიფიცირებულ ვარიაციებს.
გთხოვთ გაითვალისწინოთ, რომ JavaScript-ის ყველა დანამატი მოითხოვს jQuery- ს ჩართვას, როგორც ეს ნაჩვენებია დამწყებ შაბლონში . გაიარეთ კონსულტაციაbower.json
, რომ ნახოთ jQuery-ის რომელი ვერსიებია მხარდაჭერილი.
ჩამოტვირთვის შემდეგ გახსენით შეკუმშული საქაღალდე, რომ ნახოთ (შედგენილი) Bootstrap-ის სტრუქტურა. თქვენ ნახავთ ასეთ რამეს:
ეს არის Bootstrap-ის ყველაზე ძირითადი ფორმა: წინასწარ შედგენილი ფაილები სწრაფი ჩაშვებისთვის თითქმის ნებისმიერ ვებ პროექტში. ჩვენ გთავაზობთ შედგენილ CSS და JS ( bootstrap.*
), ასევე კომპილირებული და მინიფიცირებული CSS და JS ( bootstrap.min.*
). CSS წყაროს რუქები ( bootstrap.*.map
) ხელმისაწვდომია გარკვეული ბრაუზერების დეველოპერის ინსტრუმენტებთან გამოსაყენებლად. ჩართულია შრიფტები Glyphicons-დან, ისევე როგორც სურვილისამებრ Bootstrap თემა.
Bootstrap-ის საწყისი კოდის ჩამოტვირთვა მოიცავს წინასწარ შედგენილ CSS-ს, JavaScript-ს და შრიფტის აქტივებს, წყარო Less-თან, JavaScript-თან და დოკუმენტაციასთან ერთად. უფრო კონკრეტულად, მასში შედის შემდეგი და სხვა:
, less/
, js/
და fonts/
არის ჩვენი CSS, JS და ხატულა შრიფტების წყარო კოდი (შესაბამისად). საქაღალდე შეიცავს ყველაფერს, რაც dist/
ჩამოთვლილია წინასწარ შედგენილ ჩამოტვირთვის განყოფილებაში ზემოთ. საქაღალდე შეიცავს ჩვენი დოკუმენტაციის docs/
წყაროს კოდს და examples/
Bootstrap-ის გამოყენებას. ამის გარდა, ნებისმიერი სხვა ჩართული ფაილი უზრუნველყოფს პაკეტების მხარდაჭერას, ლიცენზიის ინფორმაციას და განვითარებას.
Bootstrap იყენებს Grunt- ს თავისი build სისტემისთვის, ჩარჩოსთან მუშაობის მოსახერხებელი მეთოდებით. ეს არის ის, თუ როგორ ვაგროვებთ ჩვენს კოდს, ვატარებთ ტესტებს და სხვა.
Grunt-ის ინსტალაციისთვის ჯერ უნდა ჩამოტვირთოთ და დააინსტალიროთ node.js (რომელიც მოიცავს npm). npm ნიშნავს კვანძების შეფუთულ მოდულებს და არის განვითარების დამოკიდებულების მართვის საშუალება node.js-ის საშუალებით.
შემდეგ, ბრძანების ხაზიდან:grunt-cli
გლობალურად npm install -g grunt-cli
./bootstrap/
დირექტორიაში, შემდეგ გაუშვით npm install
. npm გადახედავს package.json
ფაილს და ავტომატურად დააინსტალირებს იქ ჩამოთვლილ საჭირო ლოკალურ დამოკიდებულებებს.დასრულების შემდეგ, თქვენ შეძლებთ ბრძანების ხაზიდან მოწოდებული Grunt-ის სხვადასხვა ბრძანებების გაშვებას.
grunt dist
(უბრალოდ შეადგინეთ CSS და JavaScript)აღადგენს /dist/
დირექტორიას შედგენილი და მინიფიცირებული CSS და JavaScript ფაილებით. როგორც Bootstrap-ის მომხმარებელი, ეს ჩვეულებრივ არის თქვენთვის სასურველი ბრძანება.
grunt watch
(Უყურებს)უყურებს Less-ის წყაროს ფაილებს და ავტომატურად აწყობს მათ CSS-ში, როდესაც შეინახავთ ცვლილებას.
grunt test
(გაატარეთ ტესტები)აწარმოებს JSHint-ს და უხელმძღვანელებს QUnit ტესტებს PhantomJS-ში .
grunt docs
(შექმენით და შეამოწმეთ დოკუმენტების აქტივები)აშენებს და ამოწმებს CSS-ს, JavaScript-ს და სხვა აქტივებს, რომლებიც გამოიყენება დოკუმენტაციის ადგილობრივად გაშვებისას bundle exec jekyll serve
.
grunt
(აშენეთ აბსოლუტურად ყველაფერი და გაიარეთ ტესტები)ადგენს და ამცირებს CSS-ს და JavaScript-ს, აშენებს დოკუმენტაციის ვებსაიტს, აწარმოებს HTML5 ვალიდატორს დოკუმენტებთან მიმართებაში, ახდენს Customizer აქტივების რეგენერაციას და სხვა. მოითხოვს ჯეკილს . ჩვეულებრივ საჭიროა მხოლოდ იმ შემთხვევაში, თუ თქვენ ჰაკერთ თავად Bootstrap-ზე.
თუ პრობლემები შეგექმნათ დამოკიდებულებების ინსტალაციასთან ან Grunt ბრძანებების გაშვებასთან დაკავშირებით, ჯერ წაშალეთ /node_modules/
npm-ის მიერ გენერირებული დირექტორია. შემდეგ, ხელახლა გაუშვით npm install
.
დაიწყეთ ამ ძირითადი HTML შაბლონით, ან შეცვალეთ ეს მაგალითები . ჩვენ ვიმედოვნებთ, რომ თქვენ მორგებთ ჩვენს შაბლონებს და მაგალითებს, მოარგებთ მათ თქვენს საჭიროებებს.
დააკოპირეთ ქვემოთ მოცემული HTML მინიმალურ Bootstrap დოკუმენტთან მუშაობის დასაწყებად.
ააშენეთ ზემოთ მოყვანილი ძირითადი შაბლონი Bootstrap-ის მრავალი კომპონენტით. ჩვენ მოგიწოდებთ, დააკონფიგურიროთ და მოერგოთ Bootstrap თქვენი ინდივიდუალური პროექტის საჭიროებებზე.
მიიღეთ წყაროს კოდი ქვემოთ მოცემული თითოეული მაგალითისთვის Bootstrap საცავების ჩამოტვირთვით . მაგალითები შეგიძლიათ იხილოთ docs/examples/
დირექტორიაში.
შექმენით მორგებული ნავიგატორი გამართლებული ბმულებით. Თავები მაღლა! არც თუ ისე მეგობრული Safari.
Bootlint არის ოფიციალური Bootstrap HTML linter ინსტრუმენტი. ის ავტომატურად ამოწმებს რამდენიმე გავრცელებულ HTML შეცდომას ვებგვერდებში, რომლებიც იყენებენ Bootstrap-ს საკმაოდ „ვანილის“ გზით. Vanilla Bootstrap-ის კომპონენტები/ვიჯეტები მოითხოვს DOM-ის მათი ნაწილების შესაბამისობას გარკვეულ სტრუქტურებთან. Bootlint ამოწმებს, რომ Bootstrap კომპონენტების შემთხვევებს აქვთ სწორად სტრუქტურირებული HTML. იფიქრეთ Bootlint-ის დამატებაზე თქვენი Bootstrap ვებ განვითარების ხელსაწყოთა ქსელში, რათა არცერთმა საერთო შეცდომამ არ შეანელოს თქვენი პროექტის განვითარება.
იყავით განახლებული Bootstrap-ის განვითარების შესახებ და დაუკავშირდით საზოგადოებას ამ სასარგებლო რესურსებით.
irc.freenode.net
სერვერზე, ##bootstrap არხზე .twitter-bootstrap-3
ზე ტეგის გამოყენებით .bootstrap
პაკეტებზე, რომლებიც ცვლიან ან დაამატებენ Bootstrap-ის ფუნქციონირებას npm ან მსგავსი მიწოდების მექანიზმების მეშვეობით გავრცელებისას მაქსიმალური აღმოჩენისთვის.თქვენ ასევე შეგიძლიათ მიჰყვეთ @getbootstrap-ს Twitter-ზე უახლესი ჭორებისა და გასაოცარი მუსიკალური ვიდეოებისთვის.
Bootstrap ავტომატურად ადაპტირებს თქვენს გვერდებს ეკრანის სხვადასხვა ზომისთვის. აი, როგორ გამორთოთ ეს ფუნქცია, რათა თქვენი გვერდი იმუშაოს ისე, როგორც ეს არ რეაგირებს .
<meta>
მითითებულია CSS დოკუმენტებშიwidth
თითოეული .container
ბადის ფენა ერთი სიგანით, მაგალითად width: 970px !important;
, დარწმუნდით, რომ ეს ხდება ნაგულისხმევი Bootstrap CSS-ის შემდეგ. სურვილისამებრ, შეგიძლიათ თავიდან აიცილოთ !important
მედიის მოთხოვნები ან სელექტორი-ფუ..col-xs-*
კლასები საშუალო/დიდი კლასების დამატებით ან მის ნაცვლად. არ ინერვიულოთ, ზედმეტად მცირე ზომის მოწყობილობის ბადე მასშტაბურია ყველა რეზოლუციამდე.თქვენ კვლავ დაგჭირდებათ Respond.js IE8-ისთვის (რადგან ჩვენი მედია მოთხოვნები ჯერ კიდევ არსებობს და უნდა დამუშავდეს). ეს გამორთავს Bootstrap-ის „მობილური საიტის“ ასპექტებს.
ჩვენ გამოვიყენეთ ეს ნაბიჯები მაგალითზე. წაიკითხეთ მისი საწყისი კოდი, რომ ნახოთ განხორციელებული კონკრეტული ცვლილებები.
გსურთ Bootstrap-ის ძველი ვერსიიდან v3.x-ზე გადასვლა? შეამოწმეთ ჩვენი მიგრაციის სახელმძღვანელო .
Bootstrap შექმნილია იმისთვის, რომ საუკეთესოდ იმუშაოს უახლეს დესკტოპსა და მობილურ ბრაუზერებში, რაც იმას ნიშნავს, რომ ძველ ბრაუზერებს შეუძლიათ აჩვენონ გარკვეული კომპონენტების განსხვავებული სტილის, თუმცა სრულად ფუნქციონალური რენდერები.
კონკრეტულად, ჩვენ მხარს ვუჭერთ შემდეგი ბრაუზერებისა და პლატფორმების უახლეს ვერსიებს .
ალტერნატიული ბრაუზერები, რომლებიც იყენებენ WebKit-ის, Blink-ის ან Gecko-ს უახლეს ვერსიას, პირდაპირ თუ პლატფორმის ვებ ხედვის API-ს მეშვეობით, ცალსახად არ არის მხარდაჭერილი. თუმცა, Bootstrap უნდა (უმეტეს შემთხვევაში) აჩვენოს და სწორად ფუნქციონირებდეს ამ ბრაუზერებშიც. უფრო კონკრეტული მხარდაჭერის ინფორმაცია მოცემულია ქვემოთ.
ზოგადად რომ ვთქვათ, Bootstrap მხარს უჭერს თითოეული ძირითადი პლატფორმის ნაგულისხმევი ბრაუზერების უახლეს ვერსიებს. გაითვალისწინეთ, რომ პროქსი ბრაუზერები (როგორიცაა Opera Mini, Opera Mobile's Turbo რეჟიმი, UC Browser Mini, Amazon Silk) არ არის მხარდაჭერილი.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | მხარდაჭერილი | მხარდაჭერილი | N/A |
iOS | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი |
ანალოგიურად, მხარდაჭერილია დესკტოპის ბრაუზერების უმეტესობის უახლესი ვერსიები.
Chrome | Firefox | Internet Explorer | ოპერა | Safari | |
---|---|---|---|---|---|
მაკი | მხარდაჭერილი | მხარდაჭერილი | N/A | მხარდაჭერილი | მხარდაჭერილი |
ფანჯრები | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი | Არ არის მხარდაჭერილი |
Windows-ზე ჩვენ მხარს ვუჭერთ Internet Explorer 8-11-ს .
Firefox-ისთვის, უახლესი ნორმალური სტაბილური გამოშვების გარდა, ჩვენ ასევე მხარს ვუჭერთ Firefox-ის უახლეს გაფართოებული მხარდაჭერის გამოშვების (ESR) ვერსიას.
არაოფიციალურად, Bootstrap საკმარისად კარგად უნდა გამოიყურებოდეს და მოიქცეს Chromium-ში და Chrome-ში Linux-ისთვის, Firefox-ში Linux-ისთვის და Internet Explorer 7-ში, ასევე Microsoft Edge-ში, თუმცა ისინი ოფიციალურად არ არის მხარდაჭერილი.
ბრაუზერის ზოგიერთი ხარვეზის ჩამონათვალისთვის, რომელთანაც Bootstrap-ს უწევს გამკლავება, იხილეთ ჩვენი ბრაუზერის შეცდომების კედელი .
Internet Explorer 8 და 9 ასევე მხარდაჭერილია, თუმცა, გთხოვთ, გაითვალისწინოთ, რომ ზოგიერთი CSS3 თვისება და HTML5 ელემენტები სრულად არ არის მხარდაჭერილი ამ ბრაუზერების მიერ. გარდა ამისა, Internet Explorer 8 მოითხოვს Respond.js- ის გამოყენებას მედია შეკითხვის მხარდაჭერის გასააქტიურებლად.
ფუნქცია | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Არ არის მხარდაჭერილი | მხარდაჭერილი |
box-shadow |
Არ არის მხარდაჭერილი | მხარდაჭერილი |
transform |
Არ არის მხარდაჭერილი | მხარდაჭერილი, -ms პრეფიქსით |
transition |
Არ არის მხარდაჭერილი | |
placeholder |
Არ არის მხარდაჭერილი |
CSS3 და HTML5 ფუნქციების ბრაუზერის მხარდაჭერის შესახებ დეტალებისთვის ეწვიეთ Can I use....
უფრთხილდით შემდეგ შენიშვნებს Respond.js-ის გამოყენებისას თქვენი განვითარებისა და წარმოების გარემოში Internet Explorer 8-ისთვის.
Respond.js-ის გამოყენება CSS-ით, რომელიც განთავსებულია სხვა (ქვე) დომენზე (მაგალითად, CDN-ზე) მოითხოვს დამატებით კონფიგურაციას. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.
file://
ბრაუზერის უსაფრთხოების წესებიდან გამომდინარე, Respond.js არ მუშაობს file://
პროტოკოლით ნანახ გვერდებზე (როგორც ადგილობრივი HTML ფაილის გახსნისას). IE8-ში საპასუხო ფუნქციების შესამოწმებლად, ნახეთ თქვენი გვერდები HTTP(S) საშუალებით. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.
@import
Respond.js არ მუშაობს CSS-თან, რომელიც მითითებულია @import
. კერძოდ, ცნობილია დრუპალის ზოგიერთი კონფიგურაციის გამოყენება @import
. იხილეთ Respond.js დოკუმენტები დეტალებისთვის.
IE8 არ არის სრულად მხარდაჭერილი , box-sizing: border-box;
როდესაც კომბინირებულია min-width
, max-width
, min-height
ან max-height
. max-width
ამ მიზეზით, v3.0.1- დან ჩვენ აღარ ვიყენებთ .container
s.
IE8-ს აქვს გარკვეული პრობლემები, @font-face
როდესაც შერწყმულია :before
. Bootstrap იყენებს ამ კომბინაციას თავის გლიფიკონებთან. თუ გვერდი ინახება ქეშით და იტვირთება მაუსის გარეშე ფანჯარაში (ანუ დააჭირეთ განახლების ღილაკს ან ჩატვირთეთ რაიმე iframe-ში), მაშინ გვერდი ასახავს შრიფტის ჩატვირთვამდე. გვერდზე (სხეულის) თავზე გადახვევა გამოჩნდება ზოგიერთი ხატულა, ხოლო დარჩენილ ხატებზე გადატანა მათაც გამოჩნდება. იხილეთ ნომერი #13863 დეტალებისთვის.
Bootstrap არ არის მხარდაჭერილი ძველ Internet Explorer-ის თავსებადობის რეჟიმებში. იმისათვის, რომ დარწმუნდეთ, რომ იყენებთ IE-ს რენდერის უახლეს რეჟიმს, გაითვალისწინეთ შესაბამისი <meta>
ტეგის ჩართვა თქვენს გვერდებზე:
დაადასტურეთ დოკუმენტის რეჟიმი გამართვის ხელსაწყოების გახსნით: დააჭირეთ F12და შეამოწმეთ "დოკუმენტის რეჟიმი".
ეს ტეგი შედის Bootstrap-ის ყველა დოკუმენტაციასა და მაგალითში, რათა უზრუნველყოს საუკეთესო რენდერირება Internet Explorer-ის თითოეულ მხარდაჭერილ ვერსიაში.
დამატებითი ინფორმაციისთვის იხილეთ ეს StackOverflow შეკითხვა .
Internet Explorer 10 არ განასხვავებს მოწყობილობის სიგანეს ხედვის სიგანისგან და, შესაბამისად, სათანადოდ არ იყენებს მედია მოთხოვნებს Bootstrap-ის CSS-ში. ჩვეულებრივ, თქვენ უბრალოდ დაამატებდით CSS-ის სწრაფ ფრაგმენტს ამის გამოსასწორებლად:
თუმცა, ეს არ მუშაობს Windows Phone 8-ის ვერსიებზე უფრო ძველი ვიდრე განახლება 3 (ანუ GDR3) გაშვებული მოწყობილობებისთვის , რადგან ის იწვევს ასეთ მოწყობილობებს ძირითადად დესკტოპის ხედის ჩვენება ვიწრო „ტელეფონის“ ხედის ნაცვლად. ამ პრობლემის გადასაჭრელად, თქვენ უნდა შეიყვანოთ შემდეგი CSS და JavaScript შეცდომების აღმოსაფხვრელად .
დამატებითი ინფორმაციისთვის და გამოყენების ინსტრუქციებისთვის წაიკითხეთ Windows Phone 8 და Device-Width .
როგორც ხელმძღვანელები, ჩვენ ამას ვდებთ Bootstrap-ის ყველა დოკუმენტაციაში და მაგალითებში, როგორც დემონსტრირება.
Safari-ს v7.1-მდე ვერსიების რენდერინგი OS X-ისთვის და Safari iOS v8.0-ისთვის ჰქონდა გარკვეული პრობლემები ჩვენს .col-*-1
ბადის კლასებში გამოყენებული ათობითი ადგილების რაოდენობასთან დაკავშირებით. ასე რომ, თუ გქონდათ 12 ცალკეული ბადის სვეტი, შეამჩნევდით, რომ ისინი მოკლე იყო სვეტების სხვა მწკრივებთან შედარებით. Safari/iOS-ის განახლების გარდა, თქვენ გაქვთ რამდენიმე ვარიანტი გამოსავლისთვის:
.pull-right
თქვენი ბოლო ბადის სვეტს, რომ მიიღოთ მყარი მარჯვენა გასწორებაელემენტის მხარდაჭერა საკმაოდ შეზღუდულია iOS-სა და Android-ში overflow: hidden
. <body>
ამ მიზნით, როდესაც გადახვევთ მოდალის ზედა ან ქვედა მხარეს რომელიმე ამ მოწყობილობის ბრაუზერში, <body>
შინაარსი დაიწყებს გადახვევას. იხილეთ Chrome ხარვეზი #175502 (დასწორებულია Chrome v40-ში) და WebKit შეცდომა #153852 .
<input>
iOS 9.3-დან, სანამ მოდალი ღიაა, თუ გადახვევის ჟესტის თავდაპირველი შეხება ტექსტის ან ს საზღვრებშია, მოდალის ქვეშ <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-დან, ფიქსირებული სიგანის .container
s-ებმა შეიძლება გამოიწვიოს Safari-მ გამოიყენოს უჩვეულოდ მცირე შრიფტის ზომა ბეჭდვისას. იხილეთ #14868 და WebKit შეცდომა #138192 დამატებითი დეტალებისთვის. ამის ერთ-ერთი პოტენციური გამოსავალი არის შემდეგი CSS-ის დამატება:
გარეთ, Android 4.1 (და კიდევ უფრო ახალი რელიზები, როგორც ჩანს) მიეწოდება ბრაუზერის აპს, როგორც ნაგულისხმევი ვებ ბრაუზერის არჩევანს (Chrom-ისგან განსხვავებით). სამწუხაროდ, ბრაუზერის აპს აქვს ბევრი შეცდომა და შეუსაბამობა ზოგადად CSS-თან.
ელემენტებზე <select>
Android-ის საფონდო ბრაუზერი არ აჩვენებს გვერდით კონტროლს, თუ არის border-radius
და/ან border
გამოყენებული. (იხილეთ StackOverflow-ის ეს შეკითხვა დეტალებისთვის.) გამოიყენეთ ქვემოთ მოცემული კოდის ფრაგმენტი შეურაცხმყოფელი CSS- <select>
ის ამოსაშლელად და გადაიყვანეთ როგორც unstyled ელემენტი Android stock ბრაუზერში. მომხმარებლის აგენტის sniffing თავიდან აიცილებს ჩარევას Chrome, Safari და Mozilla ბრაუზერებში.
გსურთ ნახოთ მაგალითი? შეამოწმეთ ეს 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).
Bootstrap მიჰყვება საერთო ვებ სტანდარტებს და - მინიმალური დამატებითი ძალისხმევით - შეიძლება გამოყენებულ იქნას საიტების შესაქმნელად, რომლებიც ხელმისაწვდომი იქნება მათთვის, ვინც იყენებს AT .
თუ თქვენი ნავიგაცია შეიცავს ბევრ ბმულს და წინ უსწრებს DOM-ის მთავარ შინაარსს, დაამატეთ Skip to main content
ბმული ნავიგაციის დაწყებამდე (მარტივი ახსნისთვის იხილეთ ეს A11Y პროექტის სტატია ნავიგაციის ბმულების გამოტოვების შესახებ ). კლასის გამოყენება .sr-only
ვიზუალურად დამალავს გამოტოვების ბმულს და .sr-only-focusable
კლასი უზრუნველყოფს, რომ ბმული ხილული გახდეს ფოკუსირების შემდეგ (კლავიატურის მხედველი მომხმარებლებისთვის).
Chrome-ში დიდი ხნის ნაკლოვანებების/შეცდომის გამო (იხილეთ საკითხი 262171 Chromium-ის შეცდომების ტრეკერში ) და Internet Explorer-ში (იხილეთ ეს სტატია გვერდის ბმულებზე და ფოკუსირების რიგითობაზე ), თქვენ უნდა დარწმუნდეთ, რომ თქვენი გამოტოვების ბმულის სამიზნე არის მინიმუმ პროგრამულად ფოკუსირებადი დამატებით tabindex="-1"
.
გარდა ამისა, შეიძლება დაგჭირდეთ ცალსახად აღკვეთოთ ხილული ფოკუსის ჩვენება სამიზნეზე (განსაკუთრებით, რადგან Chrome ამჟამად ასევე ადგენს ელემენტებზე ფოკუსირებას, tabindex="-1"
როდესაც მათ მაუსით დააწკაპუნებთ) #content:focus { outline: none; }
.
გაითვალისწინეთ, რომ ეს შეცდომა ასევე იმოქმედებს ნებისმიერ სხვა შიდა ბმულზე, რომელსაც თქვენი საიტი იყენებს, რაც მათ უსარგებლო გახდის კლავიატურის მომხმარებლებისთვის. თქვენ შეგიძლიათ განიხილოთ მსგავსი შეჩერების შესწორების დამატება ყველა სხვა დასახელებულ წამყვანზე/ფრაგმენტის იდენტიფიკატორზე, რომლებიც მოქმედებენ როგორც ბმული სამიზნეები.
სათაურების ( <h1>
- <h6>
) ჩასმისას თქვენი ძირითადი დოკუმენტის სათაური უნდა იყოს <h1>
. შემდეგი სათაურები ლოგიკურად უნდა გამოიყენონ <h2>
- <h6>
ისეთი, რომ ეკრანის მკითხველებმა შეძლონ თქვენი გვერდების სარჩევის შექმნა.
შეიტყვეთ მეტი HTML CodeSniffer-სა და Penn State's AccessAbility-ზე .
ამჟამად, ზოგიერთი ნაგულისხმევი ფერის კომბინაცია ხელმისაწვდომია Bootstrap-ში (როგორიცაა სხვადასხვა სტილის ღილაკების კლასები, კოდის ზოგიერთი ხაზგასმული ფერები, რომლებიც გამოიყენება ძირითადი კოდის ბლოკებისთვის , .bg-primary
კონტექსტური ფონის დამხმარე კლასი და ბმულის ნაგულისხმევი ფერი თეთრ ფონზე გამოყენებისას) აქვს დაბალი კონტრასტის კოეფიციენტი ( რეკომენდებულ თანაფარდობას 4,5:1 ქვემოთ ). ამან შეიძლება პრობლემები შეუქმნას დაბალი მხედველობის მქონე მომხმარებლებს ან დალტონიკით. ამ ნაგულისხმევი ფერების შეცვლა შეიძლება საჭირო გახდეს მათი კონტრასტისა და წაკითხვის გაზრდის მიზნით.
Bootstrap გამოშვებულია MIT ლიცენზიით და არის საავტორო უფლებები 2016 Twitter-ზე. მოხარშული პატარა ნაჭრებად, შეიძლება აღწერილი იყოს შემდეგი პირობებით.
სრული Bootstrap ლიცენზია განთავსებულია პროექტის საცავში დამატებითი ინფორმაციისთვის.
საზოგადოების წევრებმა თარგმნეს Bootstrap-ის დოკუმენტაცია სხვადასხვა ენაზე. არცერთი არ არის ოფიციალურად მხარდაჭერილი და ისინი შეიძლება ყოველთვის არ იყოს განახლებული.
ჩვენ არ ვეხმარებით თარგმანების ორგანიზებას ან მასპინძლობას, ჩვენ უბრალოდ ვუკავშირდებით მათ.
დაასრულეთ ახალი თუ უკეთესი თარგმანი? გახსენით pull მოთხოვნა ჩვენს სიაში დასამატებლად.