Татаж авах

Bootstrap (одоогоор v3.4.1) нь хурдан эхлүүлэх хэд хэдэн хялбар аргатай бөгөөд тус бүр нь өөр өөр ур чадварын түвшин, хэрэглээний тохиолдлыг татдаг. Таны хэрэгцээнд юу тохирохыг харахын тулд уншина уу.

jsDelivr

jsDelivr -ийн хүмүүс Bootstrap-ийн CSS болон JavaScript-д CDN-ийн дэмжлэгийг эелдэгээр хангадаг. Зүгээр л эдгээр 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-ээр суулгана уу

Та мөн Bower ашиглан Bootstrap-ийн Less, CSS, JavaScript болон фонтуудыг суулгаж, удирдах боломжтой :

bower install bootstrap

npm-ээр суулгана уу

Та мөн npm ашиглан Bootstrap суулгаж болно :

npm install bootstrap@3

require('bootstrap')Bootstrap-ийн бүх jQuery залгаасуудыг jQuery объект руу ачаална. Модуль bootstrapөөрөө юу ч экспортлохгүй. /js/*.jsТа багцын дээд түвшний лавлах доорх файлуудыг ачаалснаар Bootstrap-ийн jQuery залгаасуудыг гараар ачаалж болно .

Bootstrap package.jsonнь дараах товчлууруудын доор нэмэлт мета өгөгдлийг агуулдаг:

• less- Bootstrap-ийн үндсэн Less эх файлын зам
• style- өгөгдмөл тохиргоог ашиглан урьдчилан бэлтгэсэн Bootstrap-ийн жижигрүүлсэн CSS-ийн зам (өөрчлөхгүй)

Composer ашиглан суулгана уу

Та мөн Composer ашиглан Bootstrap-ийн Less, CSS, JavaScript болон фонтуудыг суулгаж, удирдах боломжтой :

composer require twbs/bootstrap

Less/Sass-д автоматаар тохируулагч шаардлагатай

Bootstrap нь CSS үйлдвэрлэгчийн угтвартай ажиллахын тулд Autoprefixer ашигладаг . Хэрэв та Bootstrap-г Less/Sass эх сурвалжаас нь эмхэтгэж байгаа бөгөөд манай Gruntfile-г ашиглаагүй бол Autoprefixer-г өөрөө бүтээх процесстоо нэгтгэх хэрэгтэй болно. Хэрэв та урьдчилан хөрвүүлсэн Bootstrap ашиглаж байгаа эсвэл манай Gruntfile-г ашиглаж байгаа бол Autoprefixer нь манай Gruntfile-д аль хэдийн нэгдсэн байгаа тул энэ талаар санаа зовох хэрэггүй болно.

Юу багтсан байна

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 эх код

Bootstrap эх кодыг татаж авахад урьдчилан бэлтгэсэн CSS, JavaScript, фонтын хөрөнгө, Less эх сурвалж, JavaScript, баримт бичиг орно. Тодруулбал, үүнд дараах болон бусад зүйлс орно.

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

, less/, js/болон fonts/нь манай CSS, JS, icon фонтуудын (тус тус бүр) эх код юм. Уг dist/хавтас нь дээрх урьдчилан эмхэтгэсэн татаж авах хэсэгт жагсаасан бүх зүйлийг агуулдаг. Энэ docs/хавтсанд манай баримт бичгийн эх код болон examples/Bootstrap ашиглалтын код багтсан болно. Үүнээс гадна бусад хавсаргасан файлууд нь багц, лицензийн мэдээлэл, хөгжүүлэлтийг дэмждэг.

CSS болон JavaScript эмхэтгэж байна

Bootstrap нь бүтэцтэй ажиллахад тохиромжтой аргуудтай Grunt -ийг бүтээх системдээ ашигладаг. Энэ нь бид кодоо эмхэтгэх, тест хийх гэх мэт олон зүйлийг хийдэг.

Grunt суулгаж байна

Grunt-г суулгахын тулд та эхлээд node.js (npm орно) татаж аваад суулгах ёстой. npm нь зангилаа багцалсан модулиудын товчлол бөгөөд node.js-ээр дамжуулан хөгжүүлэлтийн хамаарлыг удирдах арга юм.

1. grunt-cli-аар дэлхий даяар суулгана npm install -g grunt-cli.
2. Үндсэн директор руу шилжиж /bootstrap/, дараа нь ажиллуулна уу npm install. npm нь файлыг хараад package.jsonтэнд жагсаасан шаардлагатай дотоод хамаарлыг автоматаар суулгана.

Дууссаны дараа та тушаалын мөрөөс өгсөн янз бүрийн Grunt тушаалуудыг ажиллуулах боломжтой болно.

Боломжтой Grunt тушаалууд

grunt dist(Зүгээр л CSS болон JavaScript хөрвүүлээрэй)

/dist/Эмхэтгэсэн болон жижигрүүлсэн CSS болон JavaScript файлуудын тусламжтайгаар лавлахыг сэргээдэг. Bootstrap хэрэглэгчийн хувьд энэ нь таны хүссэн тушаал юм.

grunt watch(Үзэх)

Бага эх сурвалж файлуудыг үзэж, өөрчлөлтийг хадгалах болгонд автоматаар 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 загвараас эхлэх эсвэл эдгээр жишээг өөрчил . Та манай загвар, жишээг өөрийн хэрэгцээнд нийцүүлэн тохируулна гэж найдаж байна.

Хамгийн бага Bootstrap баримт бичигтэй ажиллахын тулд доорх HTML-г хуулна уу.

<!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 сэдэв

Нэмэлт Bootstrap сэдвийг ачаалж үзэнгээ сайжруулаарай.

Сүлжээ

Бүх дөрвөн шатлалт, үүрлэх гэх мэт сүлжээний байршлын олон жишээ.

Жумботрон

Navbar болон зарим үндсэн сүлжээ багана бүхий jumbotron-ийн эргэн тойрон�� бүтээгээрэй.

Нарийн жумботрон

Өгөгдмөл контейнер болон jumbotron-ыг нарийсгаж илүү захиалгат хуудсыг бүтээгээрэй.

Навбарууд ажиллаж байна

Navbar

Нэмэлт контентын хамт navbar-г агуулсан супер үндсэн загвар.

Статик дээд навигац

Зарим нэмэлт контентын хамт статик дээд навигац бүхий супер үндсэн загвар.

Тогтмол navbar

Тогтмол дээд навигац бүхий супер үндсэн загвар болон нэмэлт контент.

Захиалгат бүрэлдэхүүн хэсгүүд

Хавтас

Энгийн бөгөөд үзэсгэлэнтэй нүүр хуудас бүтээх нэг хуудасны загвар.

Карусель

Navbar болон тойруулгыг тохируулж, дараа нь шинэ бүрэлдэхүүн хэсгүүдийг нэмнэ үү.

Блог

Захиалгат навигаци, толгой хэсэг, төрөл бүхий энгийн хоёр баганатай блогийн зохион байгуулалт.

Хяналтын самбар

Тогтмол хажуугийн самбар болон навигаци бүхий админ хяналтын самбарын үндсэн бүтэц.

Нэвтрэх хуудас

Захиалгат маягтын байршил, загвар нь энгийн нэвтрэх маягт.

Зөвшөөрөгдсөн nav

Зөвшөөрөгдсөн холбоос бүхий захиалгат navbar үүсгэ. Анхаар! Safari-д тийм ч ээлтэй биш.

Наалттай хөл хэсэг

Агуулга түүнээс богино байх үед харах цонхны доод хэсэгт хөл хэсгийг хавсаргана уу.

Navbar бүхий наалттай хөл хэсэг

Харах цонхны доод хэсэгт хөл хэсгийг хавсаргана.

Туршилтууд

Хариу өгөхгүй ачаалагч

Манай бичиг баримтын дагуу Bootstrap-ийн хариу үйлдлийг хялбархан идэвхгүй болго .

Зөөлөн даавуу

Bootstrap-тэй ашиглахын тулд сэлгэн залгах боломжтой зотон навигацийн цэсийг бүтээгээрэй.

Багаж хэрэгсэл

Bootlint

Bootlint бол албан ёсны Bootstrap HTML линтер хэрэгсэл юм. Энэ нь Bootstrap-ийг нэлээд "ванил" хэлбэрээр ашиглаж байгаа вэб хуудаснуудын нийтлэг HTML алдааг автоматаар шалгадаг. Vanilla Bootstrap-ийн бүрэлдэхүүн хэсэг/виджетүүд нь DOM-ийн хэсгүүдийг тодорхой бүтэцтэй нийцүүлэхийг шаарддаг. Bootlint нь Bootstrap бүрэлдэхүүн хэсгүүдийн зөв бүтэцтэй HTML-тэй эсэхийг шалгадаг. Нийтлэг алдаануудын аль нь ч таны төслийн хөгжлийг удаашруулахгүйн тулд Bootstrap вэб хөгжүүлэлтийн хэрэгслийн гинжиндээ Bootlint нэмэх талаар бодож үзээрэй.

Нийгэмлэг

Bootstrap-ийн хөгжүүлэлтийн талаар цаг тухайд нь мэдээлэлтэй байж, эдгээр хэрэгцээт эх сурвалжуудыг ашиглан нийгэмд хандаарай.

• The Official Bootstrap блогийг уншиж, бүртгүүлнэ үү .
• ##bootstrap сувагirc.freenode.net дээр серверийн IRC ашиглан бусад ачаалагч нартай чатлаарай .
• Bootstrap ашиглах талаар тусламж авахыг хүсвэл StackOverflow дээр хаягийг ашигланtwitter-bootstrap-3 асуугаарай .
• Хөгжүүлэгчид npm эсвэл ижил төстэй дамжуулах механизмаар bootstrapдамжуулан түгээхдээ Bootstrap-ийн функцийг өөрчлөх эсвэл нэмэх багц дээр түлхүүр үгийг ашиглах ёстой .
• Bootstrap Expo дээр Bootstrap ашиглан бүтээж буй хүмүүсийн урам зоригтой жишээг олоорой .

Та мөн Twitter дээр @getbootstrap- г дагаж сүүлийн үеийн хов жив, гайхалтай хөгжмийн видеог үзэх боломжтой.

Хариу өгөх чадварыг идэвхгүй болгож байна

Bootstrap нь таны хуудсыг янз бүрийн дэлгэцийн хэмжээтэй автоматаар тохируулдаг. Энэ функцийг хэрхэн идэвхгүй болгох талаар эндээс харж болно, ингэснээр таны хуудас энэ хариу өгөхгүй жишээ шиг ажиллах болно.

Хуудасны хариу үйлдлийг идэвхгүй болгох алхамууд

1. CSS баримт<meta> бичигт дурдсан харагдах хэсгийг орхи
2. widthНэг өргөнтэй сүлжээний түвшин тус бүр дээр гэсэн утгыг дарж бичнэ .containerүү, жишээлбэл, width: 970px !important;энэ нь анхдагч Bootstrap CSS-ийн дараа ирдэг эсэхийг шалгаарай. Та сонголтоор !importantмедиа асуулга эсвэл зарим сонгогч-фу-ээс зайлсхийж болно.
3. Хэрэв navbar ашиглаж байгаа бол бүх навигацийн уналт болон тэлэх үйлдлийг устгана уу.
4. Сүлжээний .col-xs-*байршлын хувьд дунд/том ангиудын оронд эсвэл нэмэлт ангиллыг ашиглана уу. Санаа зоволтгүй, хэт жижиг төхөөрөмжийн сүлжээ нь бүх нягтралд нийцдэг.

Танд IE8-д Respond.js хэрэгтэй хэвээр байх болно (учир нь манай медиа асуулга байсаар байгаа бөгөөд боловсруулах шаардлагатай). Энэ нь Bootstrap-ийн "мобайл сайт"-ыг идэвхгүй болгодог.

Хариултыг идэвхгүй болгосон ачаалах загвар

Бид эдгээр алхмуудыг жишээ болгон ашигласан. Хэрэгжүүлсэн тодорхой өөрчлөлтүүдийг харахын тулд эх кодыг уншина уу.

Хариу өгөхгүй жишээг харна уу

Хөтөч болон төхөөрөмжийн дэмжлэг

Bootstrap нь хамгийн сүүлийн үеийн ширээний болон гар утасны хөтчүүдэд хамгийн сайн ажиллахаар бүтээгдсэн бөгөөд энэ нь хуучин хөтчүүд нь бүрэн ажиллагаатай боловч зарим бүрэлдэхүүн хэсгүүдийн дүрслэлийг өөр өөр загвараар харуулах боломжтой гэсэн үг юм.

Дэмжигдсэн хөтчүүд

Тодруулбал, бид дараах хөтөч болон платформуудын хамгийн сүүлийн үеийн хувилбаруудыг дэмждэг.

WebKit, Blink, Gecko-ийн хамгийн сүүлийн хувилбарыг шууд эсвэл платформын вэб үзэх API-ээр дамжуулан ашигладаг өөр хөтчүүдийг шууд дэмждэггүй. Гэсэн хэдий ч Bootstrap нь (ихэнх тохиолдолд) эдгээр хөтчүүдэд зөв харуулж, ажиллах ёстой. Илүү тодорхой тусламжийн мэдээллийг доор өгөв.

Хөдөлгөөнт төхөөрөмж

Ерөнхийдөө Bootstrap нь үндсэн платформ бүрийн үндсэн хөтчийн хамгийн сүүлийн хувилбарыг дэмждэг. Прокси хөтчүүдийг (Opera Mini, Opera Mobile-ийн Turbo горим, UC Browser Mini, Amazon Silk гэх мэт) дэмждэггүйг анхаарна уу.

Ширээний хөтчүүд

Үүний нэгэн адил ихэнх ширээний хөтчүүдийн хамгийн сүүлийн хувилбарууд дэмжигддэг.

Windows дээр бид Internet Explorer 8-11-ийг дэмждэг .

Firefox-ийн хувьд бид хамгийн сүүлийн үеийн ердийн тогтвортой хувилбараас гадна Firefox-ын хамгийн сүүлийн үеийн Өргөтгөсөн дэмжлэгийн хувилбарыг (ESR) дэмждэг .

Албан бусаар Bootstrap нь Linux-д зориулсан Chromium болон Chrome, Linux-д зориулсан Firefox, Internet Explorer 7, мөн Microsoft Edge-д албан ёсоор дэмжигдээгүй ч хангалттай сайн харагдах ёстой.

Bootstrap-д тулгардаг хөтчийн зарим алдаануудын жагсаалтыг манай хөтчийн алдааны Wall -аас үзнэ үү .

Internet Explorer 8 ба 9

Internet Explorer 8 болон 9-ийг бас дэмждэг боловч зарим CSS3 шинж чанарууд болон HTML5 элементүүдийг эдгээр хөтчүүд бүрэн дэмждэггүйг анхаарна уу. Нэмж дурдахад Internet Explorer 8 нь медиа асуулгын дэмжлэгийг идэвхжүүлэхийн тулд Respond.js -г ашиглахыг шаарддаг.

CSS3 болон HTML5 функцуудын хөтчийн дэмжлэгийн талаарх дэлгэрэнгүй мэдээллийг Би ашиглаж болох уу... хэсгээс авна уу .

Internet Explorer 8 болон Respond.js

Respond.js-г Internet Explorer 8-д зориулсан хөгжүүлэлт болон үйлдвэрлэлийн орчинд ашиглахдаа дараах сэрэмжлүүлгээс болгоомжил.

Respond.js болон домайн хоорондын CSS

Respond.js-г өөр (дэд) домайн дээр (жишээ нь, CDN дээр) байршуулсан CSS-тэй ашиглах нь нэмэлт тохиргоог шаарддаг. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Respond.js болонfile://

file://Хөтчийн аюулгүй байдлын дүрмийн улмаас Respond.js нь протоколоор (локал HTML файл нээх гэх мэт) үзсэн хуудсуудтай ажиллахгүй . IE8-д хариу үйлдэл үзүүлэх функцуудыг шалгахын тулд HTTP(S)-ээр хуудсаа үзнэ үү. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Respond.js болон@import

Respond.js нь дамжуулан иш татсан CSS-тэй ажиллахгүй @import. Ялангуяа зарим Drupal тохиргоог ашигладаг нь мэдэгдэж байна @import. Дэлгэрэнгүйг Respond.js баримтаас үзнэ үү.

Internet Explorer 8 ба хайрцагны хэмжээ

IE8 нь , , , эсвэл box-sizing: border-box;-тэй хослуулсан тохиолдолд бүрэн дэмждэггүй . Ийм учраас v3.0.1-ээс хойш бид s дээр ашиглахаа больсон .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 болон @font-face

@font-faceIE8-тэй хослуулах үед зарим асуудал гардаг :before. Bootstrap нь энэ хослолыг Glyphicons-тойгоо ашигладаг. Хэрэв хуудсыг кэш хийж, хулганыг цонхон дээр дарахгүйгээр ачаалвал (жишээ нь, сэргээх товчийг дарах эсвэл iframe-д ямар нэгэн зүйл ачаалах) тохиолдолд фонт ачаалагдахаас өмнө хуудас хийгдэнэ. Хуудасны (бие) дээр хулганаа аваачихад зарим дүрс гарч ирэх ба үлдсэн дүрс дээр гүйлгэх нь мөн харагдах болно. Дэлгэрэнгүйг №13863 дугаараас үзнэ үү.

IE нийцтэй горимууд

Bootstrap нь хуучин Internet Explorer-ийн нийцтэй горимд дэмжигддэггүй. Та IE-ийн хамгийн сүүлийн үеийн дүрслэх горимыг ашиглаж байгаа эсэхээ баталгаажуулахын тулд <meta>хуудсандаа тохирох шошгыг оруулахыг бодоорой.

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

Дибаг хийх хэрэгслийг нээх замаар баримт бичгийн горимыг баталгаажуулна уу: F12"Баримт бичгийн горим" дээр дарж шалгана уу.

Энэ шошгыг Internet Explorer-ийн дэмжигдсэн хувилбар бүр дээр хамгийн сайн дүрслэхийн тулд Bootstrap-ийн бүх баримт бичиг, жишээнүүдэд оруулсан болно.

Дэлгэрэнгүй мэдээллийг StackOverflow асуултаас үзнэ үү .

Windows 8 болон Windows Phone 8 үйлдлийн систем дэх Internet Explorer 10

Internet Explorer 10 нь төхөөрөмжийн өргөнийг харах талбарын өргөнөөс ялгадаггүй тул Bootstrap-ийн CSS-ийн медиа асуулгад тохирохгүй байна. Ер нь та үүнийг засахын тулд CSS-ийн товч хэсгийг нэмэхэд хангалттай.

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

Гэсэн хэдий ч, энэ нь Windows Phone 8-ийн Update 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 болон Төхөөрөмжийн өргөнийг уншина уу .

Анхаарал татахуйц бид үүнийг Bootstrap-ийн бүх баримт бичиг, жишээнүүдэд жагсаал болгон оруулсан болно.

Safari хувь нь бөөрөнхийлсөн

OS X-д зориулсан Safari-ийн v7.1-ээс өмнөх хувилбарууд болон iOS v8.0-д зориулсан Safari-н хувилбаруудыг дүрслэх хөдөлгүүр нь манай .col-*-1торны ангиудад ашигласан аравтын бутархайн тоотой холбоотой асуудалтай байсан. Хэрэв танд 12 тусдаа сүлжээ багана байсан бол тэдгээр баганын бусад мөртэй харьцуулахад богино байгааг анзаарах болно. Safari/iOS-г шинэчлэхээс гадна танд тойрч гарах хэд хэдэн сонголт байна:

• .pull-rightХатуу баруун зэрэгцүүлэхийн тулд сүүлчийн сүлжээ баганадаа нэмнэ үү
• Safari-г төгс дугуйлахын тулд хувиараа гараар тохируулаарай (эхний сонголтоос илүү хэцүү)

Модал, навигац, виртуал гар

Халих, гүйлгэх

overflow: hiddenЭлемент дээрх дэмжлэг <body>iOS болон Android дээр нэлээд хязгаарлагдмал байдаг. Үүний тулд та эдгээр төхөөрөмжүүдийн аль нэг хөтчийг горимын дээд эсвэл доод талаас гүйлгэн гүйлгэх үед <body>контент гүйлгэж эхэлнэ. Chrome-ын алдаа # 175502 (Chrome v40 дээр зассан) болон WebKit-ийн алдаа # 153852- ыг харна уу .

iOS текст талбарууд болон гүйлгэх

iOS 9.3-аас эхлэн модаль нээлттэй байхад гүйлгэх дохионы эхний мэдрэгч нь текст <input>эсвэл a гэсэн заагт байгаа бол модаль өөрөө биш, доор <textarea>байгаа <body>контентыг гүйлгэх болно. WebKit-ийн алдаа # 153856- г үзнэ үү .

Виртуал гарууд

Түүнчлэн, хэрэв та тогтмол навигацийн самбар ашиглаж байгаа эсвэл модаль дотор оролт ашиглаж байгаа бол iOS-д виртуал гар асаалттай үед тогтмол элементийн байрлалыг шинэчлэхгүй дүрслэх алдаа байгааг анхаарна уу. Үүнийг шийдвэрлэх хэд хэдэн арга замууд нь өөрийн элементүүдийг өөрчлөх position: absoluteэсвэл байрлалыг гараар засахын тулд анхаарлаа төвлөрүүлэх цаг хэмжигчийг ажиллуулах явдал юм. Үүнийг Bootstrap хариуцдаггүй тул аль шийдэл нь таны хэрэглээнд тохирохыг та өөрөө шийднэ.

Navbar унадаг цэс

.dropdown-backdropz-индексжүүлэлтийн нарийн төвөгтэй байдлаас шалтгаалан энэ элементийг iOS дээр nav-д ашигладаггүй . Тиймээс, навигацын цэсийг хаахын тулд та унадаг элемент дээр (эсвэл iOS дээр товшилтыг идэвхжүүлдэг бусад элемент ) шууд дарах ёстой.

Хөтөчийг томруулж байна

Хуудсыг томруулах нь Bootstrap болон бусад вэбийн аль алинд нь зарим бүрэлдэхүүн хэсгүүдэд олдворуудыг үзүүлэх нь гарцаагүй. Асуудлаас хамааран бид үүнийг засах боломжтой (эхлээд хайгаад дараа нь шаардлагатай бол асуудлыг нээнэ үү). Гэсэн хэдий ч, бид тэдгээрийг үл тоомсорлох хандлагатай байдаг, учир нь тэдгээрт алдаатай тойрон гарахаас өөр шууд шийдэл байдаггүй.

Наалттай :hover/ :focusгар утсан дээр

Хэдийгээр ихэнх мэдрэгчтэй дэлгэц дээр бодит хулганыг зөөвөрлөх боломжгүй ч ихэнх гар утасны хөтчүүд зөөгчийг дуурайж, :hover"наалдамхай" болгодог. Өөрөөр хэлбэл, :hoverзагвар нь элементийг товшсоны дараа хэрэгжиж эхэлдэг бөгөөд хэрэглэгч өөр элементийг товшсоны дараа л хэрэглэхээ болино. Энэ нь Bootstrap-ийн :hoverтөлөвүүдийг ийм хөтөч дээр хүсээгүй "гацах"-д хүргэж болзошгүй. Зарим гар утасны хөтөч мөн :focusадил наалдамхай болгодог. Ийм хэв маягийг бүрмөсөн устгахаас өөр эдгээр асуудлыг шийдвэрлэх энгийн арга одоогоор алга.

Хэвлэх

Орчин үеийн зарим хөтөч дээр ч гэсэн хэвлэх нь хачирхалтай байж болно.

Ялангуяа Chrome v32 хувилбарын дагуу, захын тохиргооноос үл хамааран Chrome нь вэб хуудсыг хэвлэх явцад медиа асуултуудыг шийдвэрлэхдээ бодит цаасны хэмжээнээс хамаагүй нарийхан харагдах цонхны өргөнийг ашигладаг. Энэ нь хэвлэх үед Bootstrap-ийн хэт жижиг сүлжээг гэнэт идэвхжүүлэхэд хүргэдэг. Дэлгэрэнгүйг №12078 дугаар болон Chrome алдаа #273306 -г үзнэ үү. Санал болгож буй тойрон гарах арга замууд:

• Хэт жижиг сүлжээг хүлээн авч, түүний доор таны хуудас зөвшөөрөгдөх боломжтой эсэхийг шалгаарай.
• Бага хувьсагчийн утгыг @screen-*тохируулснаар таны принтерийн цаас хэт жижиг хэмжээнээс том гэж тооцогдоно.
• Зөвхөн хэвлэх хэрэгсэлд зориулсан сүлжээний хэмжээ таслах цэгийг өөрчлөхийн тулд тусгай медиа асуулга нэмнэ үү.

Түүнчлэн Safari v8.0 хувилбарын хувьд тогтмол өргөн нь Safari-г хэвлэхдээ .containerер бусын жижиг үсгийн хэмжээг ашиглахад хүргэдэг. Дэлгэрэнгүй мэдээллийг #14868 болон WebKit алдаа #138192-оос үзнэ үү. Үүнийг шийдвэрлэх нэг боломжит арга бол дараах CSS-г нэмэх явдал юм.

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

Android хувьцааны хөтөч

Хайрцагнаас Android 4.1 (мөн зарим шинэ хувилбарууд нь) нь Browser програмыг үндсэн вэб хөтчөөр (Chrome-ээс эсрэгээр) нийлүүлдэг. Харамсалтай нь Хөтөч програм нь ерөнхийдөө CSS-тэй нийцэхгүй, олон алдаатай байдаг.

Цэсүүдийг сонгоно уу

Элементүүд дээр болон/эсвэл хэрэгжсэн тохиолдолд <select>Android хувьцааны хөтөч хажуугийн удирдлагыг харуулахгүй . (Дэлгэрэнгүйг StackOverflow асуултаас үзнэ үү.) Доорх кодын хэсгийг ашиглан зөрчиж буй CSS-г устгаж, Android хувьцааны хөтөч дээр хэв маяггүй элемент болгон үзүүлээрэй. Хэрэглэгчийн агент нь Chrome, Safari, Mozilla хөтчүүдэд хөндлөнгөөс оролцохоос зайлсхийдэг.border-radiusborder<select>

<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 баримтууд нь мөн адил Firefox-ын тодорхой алдааг арилгах арга замыг оруулсантай холбоотой HTML баталгаажуулалтын зарим нэг өчүүхэн бөгөөд ач холбогдолгүй анхааруулгатай байдаг .

Гуравдагч талын дэмжлэг

Бид гуравдагч талын нэмэлт өргөтгөлүүдийг албан ёсоор дэмждэггүй ч таны төслүүдэд гарч болзошгүй асуудлуудаас зайлсхийхэд туслах хэдэн хэрэгтэй зөвлөгөөг санал болгож байна.

Хайрцагны хэмжээ

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 болон Пенн Стэйтийн AccessAbility- ээс илүү ихийг мэдэж аваарай .

Өнгөний ялгаа

Одоогоор Bootstrap-д байгаа зарим өгөгдмөл өнгөний хослолууд (төрөл бүрийн загвартай товчлуурын ангиуд, үндсэн кодын блокуудад ашигладаг кодыг тодруулах өнгө , .bg-primary контекст арын туслах анги, цагаан дэвсгэр дээр ашиглах үед анхдагч холбоосын өнгө гэх мэт) бага тодосгогч харьцаатай ( зөвлөмж болгож буй харьцаа 4.5:1-ээс бага ). Энэ нь хараа муутай эсвэл өнгөний харалган хэрэглэгчдэд асуудал үүсгэж болзошгүй. Эдгээр өгөгдмөл өнгийг тодосгогч, ойлгомжтой болгохын тулд өөрчлөх шаардлагатай байж магадгүй юм.

Нэмэлт нөөц

• Хүртээмжтэй холбоотой асуудлуудыг тодорхойлох "HTML Codesniffer" хавчуурга
• Chrome-ын Хүртээмжтэй хөгжүүлэгч хэрэгслийн өргөтгөл
• Өнгөний тодосгогч анализатор
• A11Y төсөл
• MDN хүртээмжтэй байдлын баримт бичиг

Лицензийн түгээмэл асуултууд

Bootstrap нь MIT лицензийн дагуу гарсан бөгөөд зохиогчийн эрх 2019 Twitter юм. Үүнийг жижиг хэсгүүдэд буцалгаж, дараах нөхцлөөр тодорхойлж болно.

Энэ нь танаас дараахыг шаарддаг:

• Та ажилдаа ашиглахдаа Bootstrap-ийн CSS болон JavaScript файлд байгаа лиценз болон зохиогчийн эрхийн мэдэгдлийг хадгалаарай.

Энэ нь танд дараах боломжийг олгоно:

• Bootstrap-ийг бүхэлд нь эсвэл хэсэгчлэн хувийн, хувийн, компанийн дотоод эсвэл арилжааны зорилгоор чөлөөтэй татаж аваад ашиглаарай.
• Bootstrap-ийг өөрийн үүсгэсэн багц эсвэл түгээлтэд ашиглаарай
• Эх кодыг өөрчлөх
• Тусгай зөвшөөрөлд ороогүй гуравдагч этгээдэд Bootstrap-г өөрчлөх, түгээх дэд лиценз олгох

Энэ нь таныг хориглодог:

• Bootstrap нь баталгаагүй нийлүүлэгдсэн тул зохиогчид болон лиценз эзэмшигчид хохирлыг хариуцна уу
• Bootstrap-ийн зохиогчид эсвэл зохиогчийн эрх эзэмшигчид хариуцлага тооц
• Bootstrap-ийн дурын хэсгийг зохих хамааралгүйгээр дахин тараана
• Твиттерийн эзэмшиж буй аливаа тэмдгийг Твиттер таны түгээлтийг дэмжиж байна гэсэн үгээр ашиглана уу
• Твиттерийн эзэмшиж буй аливаа тэмдгийг тухайн 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 (Вьетнам)

Бид орчуулгыг зохион байгуулах, зохион байгуулахад тусалдаггүй, зөвхөн орчуулгатай холбож өгдөг.

Шинэ эсвэл илүү сайн орчуулга хийж дуусгасан уу? Үүнийг манай жагсаалтад нэмэхийн тулд татах хүсэлтийг нээнэ үү.