ດາວໂຫລດ

Bootstrap (ປະຈຸບັນ v3.4.1) ມີວິທີງ່າຍໆສອງສາມຢ່າງເພື່ອເລີ່ມຕົ້ນໄວ, ແຕ່ລະອັນທີ່ດຶງດູດກັບລະດັບທັກສະ ແລະກໍລະນີການນຳໃຊ້ທີ່ແຕກຕ່າງກັນ. ອ່ານຜ່ານເພື່ອເບິ່ງສິ່ງທີ່ເຫມາະສົມກັບຄວາມຕ້ອງການສະເພາະຂອງເຈົ້າ.

jsDelivr

ຄົນທີ່ຢູ່ jsDelivr ດ້ວຍຄວາມກະລຸນາໃຫ້ການສະຫນັບສະຫນູນ CDN ສໍາລັບ CSS ແລະ JavaScript ຂອງ Bootstrap. ພຽງແຕ່ໃຊ້ ລິ້ງ 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's Less, CSS, JavaScript, ແລະຕົວອັກສອນໂດຍໃຊ້ Bower :

bower install bootstrap

ຕິດຕັ້ງດ້ວຍ npm

ທ່ານຍັງສາມາດຕິດຕັ້ງ Bootstrap ໂດຍໃຊ້ npm :

npm install bootstrap@3

require('bootstrap')ຈະໂຫລດທຸກປລັກອິນ jQuery ຂອງ Bootstrap ໃສ່ວັດຖຸ jQuery. ໂມ bootstrapດູນຕົວມັນເອງບໍ່ໄດ້ສົ່ງອອກຫຍັງ. ທ່ານສາມາດໂຫລດ plugins jQuery ຂອງ Bootstrap ດ້ວຍຕົນເອງໂດຍການໂຫລດ /js/*.jsໄຟລ໌ພາຍໃຕ້ໄດເລກະທໍລີລະດັບສູງສຸດຂອງແພັກເກັດ.

Bootstrap package.jsonມີບາງ metadata ເພີ່ມເຕີມພາຍໃຕ້ກະແຈຕໍ່ໄປນີ້:

• less- ເສັ້ນທາງໄປຫາ ໄຟລ໌ແຫຼ່ງ ຕົ້ນຕໍຂອງ Bootstrap ຫນ້ອຍ
• style- ເສັ້ນທາງໄປສູ່ CSS ທີ່ບໍ່ແມ່ນການຫຍໍ້ຂອງ Bootstrap ທີ່ໄດ້ຖືກລວບລວມໄວ້ກ່ອນໂດຍໃຊ້ການຕັ້ງຄ່າເລີ່ມຕົ້ນ (ບໍ່ມີການປັບແຕ່ງ)

ຕິດຕັ້ງດ້ວຍ Composer

ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕັ້ງແລະຈັດການ Bootstrap's Less, CSS, JavaScript, ແລະ fonts ໂດຍໃຊ້ Composer :

composer require twbs/bootstrap

Autoprefixer ຕ້ອງການສໍາລັບ Less/Sass

Bootstrap ໃຊ້ Autoprefixer ເພື່ອຈັດການກັບ ຄໍານໍາຫນ້າຜູ້ຂາຍ CSS . ຖ້າທ່ານກໍາລັງລວບລວມ Bootstrap ຈາກແຫຼ່ງ Less/Sass ຂອງມັນແລະບໍ່ໃຊ້ Gruntfile ຂອງພວກເຮົາ, ທ່ານຈະຕ້ອງປະສົມປະສານ Autoprefixer ເຂົ້າໃນຂະບວນການສ້າງຕົວທ່ານເອງ. ຖ້າທ່ານກໍາລັງໃຊ້ Bootstrap precompiled ຫຼືໃຊ້ Gruntfile ຂອງພວກເຮົາ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບເລື່ອງນີ້ເພາະວ່າ Autoprefixer ໄດ້ຖືກປະສົມປະສານເຂົ້າໃນ Gruntfile ຂອງພວກເຮົາແລ້ວ.

ມີຫຍັງແດ່

Bootstrap ສາມາດດາວໂຫລດໄດ້ໃນສອງຮູບແບບ, ພາຍໃນທີ່ເຈົ້າຈະພົບເຫັນໄດເລກະທໍລີແລະໄຟລ໌ຕໍ່ໄປນີ້, ການຈັດກຸ່ມຊັບພະຍາກອນທົ່ວໄປຢ່າງມີເຫດຜົນແລະການສະຫນອງການລວບລວມແລະການປ່ຽນແປງຫນ້ອຍ.

Bootstrap precompiled

ເມື່ອດາວໂຫລດແລ້ວ, unzip ໂຟເດີທີ່ຖືກບີບອັດເພື່ອເບິ່ງໂຄງສ້າງຂອງ 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: ໄຟລ໌ precompiled ສໍາລັບການນໍາໃຊ້ຫຼຸດລົງໄວໃນເກືອບທຸກໂຄງການເວັບໄຊຕ໌. ພວກເຮົາສະຫນອງການລວບລວມ CSS ແລະ JS ( bootstrap.*), ເຊັ່ນດຽວກັນກັບການລວບລວມແລະຫຍໍ້ CSS ແລະ JS ( bootstrap.min.*). CSS source maps ( bootstrap.*.map) ສາມາດໃຊ້ໄດ້ກັບບາງເຄື່ອງມືນັກພັດທະນາຂອງຕົວທ່ອງເວັບ. ຕົວອັກສອນຈາກ Glyphicons ແມ່ນລວມ, ເຊັ່ນດຽວກັນກັບຫົວຂໍ້ Bootstrap ທາງເລືອກ.

ລະຫັດແຫຼ່ງ Bootstrap

ການດາວໂຫຼດລະຫັດແຫຼ່ງ Bootstrap ປະກອບມີ CSS, JavaScript, ແລະຊັບສິນຟອນທີ່ລວບລວມໄວ້ກ່ອນ, ພ້ອມກັບແຫຼ່ງທີ່ນ້ອຍກວ່າ, JavaScript, ແລະເອກະສານ. ໂດຍສະເພາະ, ມັນປະກອບມີດັ່ງຕໍ່ໄປນີ້ແລະອື່ນໆ:

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

The less/, js/, ແລະ fonts/ເປັນລະຫັດແຫຼ່ງສໍາລັບ CSS, JS, ແລະຕົວອັກສອນໄອຄອນຂອງພວກເຮົາ (ຕາມລໍາດັບ). ໂຟນເດີ ປະ dist/ກອບມີທຸກຢ່າງທີ່ມີລາຍຊື່ຢູ່ໃນສ່ວນການດາວໂຫຼດທີ່ກຽມໄວ້ຂ້າງເທິງ. ໂຟນເດີ ປະ docs/ກອບມີລະຫັດແຫຼ່ງສໍາລັບເອກະສານຂອງພວກເຮົາ, ແລະ examples/ການນໍາໃຊ້ Bootstrap. ນອກ​ຈາກ​ນັ້ນ​, ໄຟລ​໌​ອື່ນໆ​ທີ່​ປະ​ກອບ​ມີ​ສະ​ຫນັບ​ສະ​ຫນູນ​ສໍາ​ລັບ​ການ​ຫຸ້ມ​ຫໍ່​, ຂໍ້​ມູນ​ອະ​ນຸ​ຍາດ​, ແລະ​ການ​ພັດ​ທະ​ນາ​.

ການລວບລວມ CSS ແລະ JavaScript

Bootstrap ໃຊ້ Grunt ສໍາລັບລະບົບການກໍ່ສ້າງຂອງມັນ, ດ້ວຍວິທີການທີ່ສະດວກໃນການເຮັດວຽກກັບກອບ. ມັນເປັນວິທີທີ່ພວກເຮົາລວບລວມລະຫັດຂອງພວກເຮົາ, ດໍາເນີນການທົດສອບ, ແລະອື່ນໆ.

ການຕິດຕັ້ງ Grunt

ເພື່ອຕິດຕັ້ງ Grunt, ກ່ອນອື່ນ ໝົດ ທ່ານຕ້ອງ ດາວ ໂຫລດແລະຕິດຕັ້ງ node.js (ເຊິ່ງລວມມີ npm). npm ຫຍໍ້ ມາຈາກ node packaged modules ແລະເປັນວິທີການຈັດການການພັດທະນາ dependencies ຜ່ານ 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 ໃນຕົວທ່ອງເວັບທີ່ແທ້ຈິງຂອບໃຈ Karma .

grunt docs(ສ້າງ ແລະທົດສອບຊັບສິນເອກະສານ)

ກໍ່ສ້າງແລະທົດສອບ CSS, JavaScript, ແລະຊັບສິນອື່ນໆທີ່ຖືກນໍາໃຊ້ໃນເວລາທີ່ດໍາເນີນການເອກະສານຢູ່ໃນທ້ອງຖິ່ນໂດຍຜ່ານ bundle exec jekyll serve.

grunt(ສ້າງ​ທຸກ​ສິ່ງ​ທຸກ​ຢ່າງ​ຢ່າງ​ແທ້​ຈິງ​ແລະ​ດໍາ​ເນີນ​ການ​ທົດ​ສອບ​)

ລວບລວມແລະຫຍໍ້ CSS ແລະ JavaScript, ສ້າງເວັບໄຊທ໌ເອກະສານ, ແລ່ນຕົວກວດສອບ HTML5 ຕໍ່ກັບເອກະສານ, ສ້າງຊັບສິນ Customizer, ແລະອື່ນໆອີກ. ຕ້ອງ ການ Jekyll . ປົກກະຕິແລ້ວພຽງແຕ່ມີຄວາມຈໍາເປັນຖ້າຫາກວ່າທ່ານກໍາລັງ hacking ສຸດ Bootstrap ຕົວຂອງມັນເອງ.

ການແກ້ໄຂບັນຫາ

ຖ້າທ່ານພົບບັນຫາກັບການຕິດຕັ້ງ dependencies ຫຼືແລ່ນຄໍາສັ່ງ Grunt, ທໍາອິດລຶບໄດເລກະ /node_modules/ທໍລີທີ່ສ້າງຂຶ້ນໂດຍ npm. ຫຼັງ​ຈາກ​ນັ້ນ​, rerun 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 repository . ຕົວຢ່າງສາມາດພົບໄດ້ໃນໄດເລກະ docs/examples/ທໍລີ.

ການນໍາໃຊ້ກອບ

ແມ່ແບບເລີ່ມຕົ້ນ

ບໍ່ມີຫຍັງແຕ່ພື້ນຖານ: ລວບລວມ CSS ແລະ JavaScript ພ້ອມກັບບັນຈຸ.

ຫົວຂໍ້ Bootstrap

ໂຫຼດຫົວຂໍ້ Bootstrap ທາງເລືອກສໍາລັບປະສົບການທີ່ປັບປຸງສາຍຕາ.

ຕາຂ່າຍ

ຕົວຢ່າງຫຼາຍອັນຂອງການຈັດວາງຕາຂ່າຍທີ່ມີທັງສີ່ຊັ້ນ, ການສ້າງຮັງ, ແລະອື່ນໆອີກ.

ຈູມໂບຕຣອນ

ສ້າງອ້ອມຮອບ jumbotron ດ້ວຍແຖບ navbar ແລະບາງຖັນຕາຂ່າຍໄຟຟ້າພື້ນຖານ.

jumbotron ແຄບ

ສ້າງໜ້າເວັບທີ່ກຳນົດເອງຫຼາຍຂຶ້ນໂດຍການແຄບພາຊະນະເລີ່ມຕົ້ນ ແລະ jumbotron.

Navbars ໃນການປະຕິບັດ

Navbar

ແມ່ແບບພື້ນຖານສູງສຸດທີ່ປະກອບມີແຖບ navbar ພ້ອມກັບເນື້ອຫາເພີ່ມເຕີມບາງຢ່າງ.

ແຖບດ້ານເທິງຄົງທີ່

ແມ່ແບບພື້ນຖານສູງສຸດທີ່ມີແຖບນໍາທາງເທິງແບບຄົງທີ່ພ້ອມກັບເນື້ອຫາເພີ່ມເຕີມບາງຢ່າງ.

ແຖບ navbar ຄົງທີ່

ແມ່ແບບພື້ນຖານທີ່ດີເລີດທີ່ມີ navbar ເທິງຄົງທີ່ພ້ອມກັບເນື້ອຫາເພີ່ມເຕີມບາງຢ່າງ.

ອົງປະກອບທີ່ກໍາຫນົດເອງ

ກວມເອົາ

ແມ່ແບບຫນຶ່ງຫນ້າສໍາລັບການສ້າງຫນ້າທໍາອິດທີ່ງ່າຍດາຍແລະສວຍງາມ.

Carousel

ປັບແຕ່ງແຖບ navbar ແລະ carousel, ຫຼັງຈາກນັ້ນເພີ່ມບາງອົງປະກອບໃຫມ່.

ບລັອກ

ແຜນຜັງບລັອກແບບສອງຖັນແບບງ່າຍດາຍດ້ວຍການນຳທາງແບບກຳນົດເອງ, ສ່ວນຫົວ ແລະປະເພດ.

ແຜງໜ້າປັດ

ໂຄງສ້າງພື້ນຖານສໍາລັບ dashboard admin ທີ່ມີ sidebar ຄົງທີ່ແລະ navbar.

ໜ້າເຂົ້າສູ່ລະບົບ

ຮູບແບບຮູບແບບທີ່ກໍາຫນົດເອງແລະການອອກແບບສໍາລັບການເຂົ້າສູ່ລະບົບແບບງ່າຍດາຍ.

ຍຸດ​ທະ​ສາດ nav

ສ້າງແຖບ navbar ແບບກຳນົດເອງດ້ວຍລິ້ງທີ່ຖືກຕ້ອງ. ລະວັງ! ບໍ່ Safari ເປັນມິດເກີນໄປ.

ສ່ວນທ້າຍຕິດ

ແນບສ່ວນທ້າຍໃສ່ລຸ່ມສຸດຂອງຊ່ອງເບິ່ງເມື່ອເນື້ອຫາສັ້ນກວ່າມັນ.

ສ່ວນທ້າຍຕິດດ້ວຍແຖບ navbar

ແນບສ່ວນທ້າຍໃສ່ລຸ່ມສຸດຂອງຊ່ອງເບິ່ງດ້ວຍແຖບນໍາທາງທີ່ຄົງທີ່ຢູ່ເທິງສຸດ.

ການທົດລອງ

Bootstrap ບໍ່ຕອບສະໜອງ

ປິດການຕອບສະໜອງຂອງ Bootstrap ໄດ້ຢ່າງງ່າຍດາຍ ຕໍ່ເອກະສານຂອງພວກເຮົາ .

ຜ້າໃບ

ສ້າງເມນູນໍາທາງນອກຜ້າໃບທີ່ສາມາດສະຫຼັບໄດ້ເພື່ອໃຊ້ກັບ Bootstrap.

ເຄື່ອງມື

Bootlint

Bootlint ແມ່ນເຄື່ອງມື linter Bootstrap HTML ຢ່າງເປັນທາງການ. ມັນອັດຕະໂນມັດກວດເບິ່ງຄວາມຜິດພາດ HTML ທົ່ວໄປຫຼາຍໃນຫນ້າເວັບທີ່ກໍາລັງໃຊ້ Bootstrap ໃນທາງ "vanilla". ອົງປະກອບ/widgets ຂອງ Vanilla Bootstrap ຕ້ອງການພາກສ່ວນຂອງ DOM ຂອງເຂົາເຈົ້າໃຫ້ສອດຄ່ອງກັບໂຄງສ້າງທີ່ແນ່ນອນ. Bootlint ກວດເບິ່ງວ່າຕົວຢ່າງຂອງອົງປະກອບ Bootstrap ມີໂຄງສ້າງ HTML ຢ່າງຖືກຕ້ອງ. ພິຈາລະນາເພີ່ມ Bootlint ເຂົ້າໃນລະບົບຕ່ອງໂສ້ການພັດທະນາເວັບໄຊຕ໌ Bootstrap ຂອງທ່ານເພື່ອວ່າບໍ່ມີຄວາມຜິດພາດທົ່ວໄປເຮັດໃຫ້ການພັດທະນາໂຄງການຂອງທ່ານຊ້າລົງ.

ຊຸມຊົນ

ຕິດຕາມການພັດທະນາຂອງ Bootstrap ແລະເຂົ້າເຖິງຊຸມຊົນດ້ວຍຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດເຫຼົ່ານີ້.

• ອ່ານ ແລະສະໝັກໃຊ້ Blog Bootstrap ຢ່າງເປັນທາງການ .
• ສົນທະນາກັບເພື່ອນ Bootstrappers ໂດຍໃຊ້ IRC ໃນ irc.freenode.netເຊີບເວີ, ໃນຊ່ອງ ##bootstrap .
• ສໍາລັບການຊ່ວຍເຫຼືອໃນການນໍາໃຊ້ Bootstrap, ຖາມກ່ຽວກັບ StackOverflow ໂດຍໃຊ້ແທັກtwitter-bootstrap-3 .
• ນັກພັດທະນາຄວນໃຊ້ຄໍາສໍາຄັນ bootstrapໃນແພັກເກັດທີ່ດັດແປງຫຼືເພີ່ມການເຮັດວຽກຂອງ Bootstrap ເມື່ອແຈກຢາຍຜ່ານ npm ຫຼືກົນໄກການຈັດສົ່ງທີ່ຄ້າຍຄືກັນສໍາລັບການຄົ້ນພົບສູງສຸດ.
• ຊອກຫາຕົວຢ່າງແຮງບັນດານໃຈຂອງຄົນທີ່ສ້າງດ້ວຍ Bootstrap ຢູ່ Bootstrap Expo .

ນອກນັ້ນທ່ານຍັງສາມາດຕິດຕາມ @getbootstrap ໃນ Twitter ສໍາລັບວິດີໂອເພງນິນທາຫລ້າສຸດແລະຫນ້າຫວາດສຽວ.

ການປິດການຕອບສະໜອງ

Bootstrap ຈະປັບຫນ້າຂອງທ່ານໂດຍອັດຕະໂນມັດສໍາລັບຂະຫນາດຫນ້າຈໍຕ່າງໆ. ນີ້ແມ່ນວິທີການປິດຄຸນສົມບັດນີ້ເພື່ອໃຫ້ຫນ້າຂອງທ່ານເຮັດວຽກຄືກັບ ຕົວຢ່າງທີ່ບໍ່ຕອບສະຫນອງ ນີ້ .

ຂັ້ນຕອນເພື່ອປິດການຕອບສະໜອງໜ້າ

1. ຂ້າມຊ່ອງເບິ່ງ <meta>ທີ່ໄດ້ກ່າວໄວ້ໃນ ເອກະສານ CSS
2. Override the widthon the .containerfor each grid tier with a single width, ຍົກ​ຕົວ​ຢ່າງ width: 970px !important;​ໃຫ້​ແນ່​ໃຈວ່​າ​ການ​ນີ້​ມາ​ຫຼັງ​ຈາກ Bootstrap CSS ເລີ່ມຕົ້ນ. ທ່ານສາມາດເລືອກທາງເລືອກ !importantດ້ວຍການສອບຖາມສື່ ຫຼືບາງຕົວເລືອກ-fu.
3. ຖ້າ​ຫາກ​ວ່າ​ການ​ນໍາ​ໃຊ້ navbars​, ເອົາ​ທັງ​ຫມົດ navbar ຫຍໍ້​ລົງ​ແລະ​ການ​ຂະ​ຫຍາຍ​ພຶດ​ຕິ​ກໍາ​.
4. ສໍາລັບການຈັດວາງຕາຂ່າຍໄຟຟ້າ, ໃຫ້ໃຊ້ .col-xs-*ຫ້ອງຮຽນນອກເໜືອໄປຈາກ, ຫຼືແທນທີ່, ຂະໜາດກາງ/ໃຫຍ່. ບໍ່ຕ້ອງເປັນຫ່ວງ, ຕາຂ່າຍອຸປະກອນຂະໜາດນ້ອຍພິເສດຈະປັບຂະໜາດໃຫ້ທຸກຄວາມລະອຽດ.

ທ່ານຈະຍັງຕ້ອງການ Respond.js ສໍາລັບ IE8 (ນັບຕັ້ງແຕ່ການສອບຖາມສື່ຂອງພວກເຮົາຍັງມີຢູ່ ແລະຈໍາເປັນຕ້ອງໄດ້ຮັບການປະມວນຜົນ). ນີ້ປິດການໃຊ້ງານ "ເວັບໄຊທ໌ມືຖື" ລັກສະນະຂອງ Bootstrap.

ແມ່ແບບ Bootstrap ທີ່ມີການຕອບສະໜອງຖືກປິດໃຊ້ງານ

ພວກເຮົາໄດ້ນໍາໃຊ້ຂັ້ນຕອນເຫຼົ່ານີ້ເພື່ອເປັນຕົວຢ່າງ. ອ່ານລະຫັດແຫຼ່ງຂອງມັນເພື່ອເບິ່ງການປ່ຽນແປງສະເພາະທີ່ປະຕິບັດ.

ເບິ່ງຕົວຢ່າງທີ່ບໍ່ຕອບສະຫນອງ

ຕົວທ່ອງເວັບແລະອຸປະກອນສະຫນັບສະຫນູນ

Bootstrap ຖືກສ້າງຂຶ້ນເພື່ອເຮັດວຽກທີ່ດີທີ່ສຸດໃນ desktop ແລະ mobile browsers ຫຼ້າສຸດ, ຊຶ່ງຫມາຍຄວາມວ່າຕົວທ່ອງເວັບທີ່ເກົ່າແກ່ອາດຈະສະແດງຮູບແບບທີ່ແຕກຕ່າງກັນ, ເຖິງແມ່ນວ່າຈະເຮັດວຽກຢ່າງເຕັມທີ່, ການສະແດງອົງປະກອບບາງຢ່າງ.

ຕົວທ່ອງເວັບທີ່ຮອງຮັບ

ໂດຍສະເພາະ, ພວກເຮົາສະຫນັບສະຫນູນ ເວີຊັນຫຼ້າສຸດ ຂອງຕົວທ່ອງເວັບແລະເວທີຕໍ່ໄປນີ້.

ຕົວທ່ອງເວັບທາງເລືອກທີ່ໃຊ້ WebKit, Blink, ຫຼື Gecko ເວີຊັນຫຼ້າສຸດ, ບໍ່ວ່າຈະໂດຍກົງຫຼືຜ່ານ API ເບິ່ງເວັບຂອງເວທີ, ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງຊັດເຈນ. ຢ່າງໃດກໍຕາມ, Bootstrap ຄວນ (ໃນກໍລະນີຫຼາຍທີ່ສຸດ) ສະແດງແລະເຮັດວຽກຢ່າງຖືກຕ້ອງໃນຕົວທ່ອງເວັບເຫຼົ່ານີ້ເຊັ່ນດຽວກັນ. ຂໍ້ມູນການສະຫນັບສະຫນູນສະເພາະແມ່ນສະຫນອງໃຫ້ຂ້າງລຸ່ມນີ້.

ອຸປະກອນມືຖື

ໂດຍທົ່ວໄປແລ້ວ, Bootstrap ສະຫນັບສະຫນູນເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງແຕ່ລະແພລະຕະຟອມທີ່ສໍາຄັນ. ໃຫ້ສັງເກດວ່າຕົວທ່ອງເວັບຂອງຕົວແທນ (ເຊັ່ນ Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ແມ່ນບໍ່ຮອງຮັບ.

ຕົວທ່ອງເວັບຂອງ desktop

ເຊັ່ນດຽວກັນ, ເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບ desktop ສ່ວນໃຫຍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ.

ໃນ Windows, ພວກເຮົາຮອງຮັບ Internet Explorer 8-11 .

ສໍາລັບ Firefox, ນອກເຫນືອຈາກການປ່ອຍຄວາມຫມັ້ນຄົງປົກກະຕິຫລ້າສຸດ, ພວກເຮົາຍັງສະຫນັບສະຫນູນການ ຂະຫຍາຍການສະຫນັບສະຫນູນ (ESR) ຮຸ່ນຫຼ້າສຸດຂອງ Firefox.

ໂດຍບໍ່ເປັນທາງການ, Bootstrap ຄວນເບິ່ງແລະປະຕິບັດໄດ້ດີພຽງພໍໃນ Chromium ແລະ Chrome ສໍາລັບ Linux, Firefox ສໍາລັບ Linux, ແລະ Internet Explorer 7, ເຊັ່ນດຽວກັນກັບ Microsoft Edge, ເຖິງແມ່ນວ່າພວກເຂົາບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເປັນທາງການ.

ສໍາລັບບັນຊີລາຍຊື່ຂອງບາງຂໍ້ບົກພ່ອງຂອງຕົວທ່ອງເວັບທີ່ Bootstrap ຕ້ອງຕໍ່ສູ້ກັບ, ເບິ່ງ Wall of browser bug ຂອງພວກເຮົາ .

Internet Explorer 8 ແລະ 9

Internet Explorer 8 ແລະ 9 ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ, ຢ່າງໃດກໍຕາມ, ກະລຸນາຮັບຊາບວ່າບາງຄຸນສົມບັດ CSS3 ແລະອົງປະກອບ HTML5 ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໂດຍຕົວທ່ອງເວັບເຫຼົ່ານີ້. ນອກຈາກນັ້ນ, Internet Explorer 8 ຕ້ອງການໃຊ້ Respond.js ເພື່ອເປີດໃຊ້ການຮອງຮັບການສອບຖາມສື່.

ເຂົ້າ ໄປເບິ່ງ Can I use... ສໍາລັບລາຍລະອຽດກ່ຽວກັບການຮອງຮັບ browser ຂອງຄຸນສົມບັດ CSS3 ແລະ HTML5.

Internet Explorer 8 ແລະ Respond.js

ລະວັງການເຕືອນໄພຕໍ່ໄປນີ້ເມື່ອໃຊ້ Respond.js ໃນການພັດທະນາ ແລະສະພາບແວດລ້ອມການຜະລິດຂອງທ່ານສໍາລັບ Internet Explorer 8.

Respond.js ແລະ CSS ຂ້າມໂດເມນ

ການໃຊ້ Respond.js ກັບ CSS ທີ່ໂຮດຢູ່ໃນໂດເມນ (ຍ່ອຍ) ທີ່ແຕກຕ່າງກັນ (ຕົວຢ່າງ, ໃນ CDN) ຮຽກຮ້ອງໃຫ້ມີການຕິດຕັ້ງເພີ່ມເຕີມ. ເບິ່ງເອກະສານ Respond.js ສໍາລັບລາຍລະອຽດ.

Respond.js ແລະfile://

ເນື່ອງຈາກກົດລະບຽບຄວາມປອດໄພຂອງຕົວທ່ອງເວັບ, Respond.js ບໍ່ເຮັດວຽກກັບຫນ້າທີ່ເບິ່ງຜ່ານ file://ໂປໂຕຄອນ (ຄືກັບເວລາເປີດໄຟລ໌ 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;ທີ່ເມື່ອລວມເຂົ້າກັບ min-width, max-width, min-height, ຫຼື max-height. ສໍາລັບເຫດຜົນນັ້ນ, ເປັນຂອງ v3.0.1, ພວກເຮົາບໍ່ໄດ້ໃຊ້ max-widthໃນ .containers.

Internet Explorer 8 ແລະ @font-face

IE8 ມີບັນຫາບາງຢ່າງກັບ @font-faceເມື່ອລວມເຂົ້າກັບ :before. Bootstrap ໃຊ້ການປະສົມປະສານກັບ Glyphicons ຂອງມັນ. ຖ້າຫນ້າເວັບຖືກເກັບໄວ້, ແລະໂຫລດໂດຍບໍ່ມີຫນູຢູ່ເທິງຫນ້າຕ່າງ (ເຊັ່ນ: ກົດປຸ່ມໂຫຼດຫນ້າຈໍຄືນຫຼືໂຫລດບາງສິ່ງບາງຢ່າງໃນ iframe) ຫຼັງຈາກນັ້ນຫນ້າເວັບຈະຖືກສະແດງກ່ອນທີ່ font ຈະໂຫລດ. ເລື່ອນຢູ່ເທິງໜ້າ (ເນື້ອໃນ) ຈະສະແດງບາງໄອຄອນ ແລະ ການເລື່ອນໃສ່ໄອຄອນທີ່ຍັງເຫຼືອຈະສະແດງໃຫ້ເຫັນຄືກັນ. ເບິ່ງບັນຫາ #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 ບໍ່ໄດ້ແຍກ ຄວາມກວ້າງຂອງ ອຸປະກອນ ຈາກ ຄວາມ ກວ້າງ ຂອງຊ່ອງເບິ່ງ , ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ໃຊ້ການສອບຖາມສື່ໃນ CSS ຂອງ Bootstrap ຢ່າງຖືກຕ້ອງ. ໂດຍປົກກະຕິທ່ານພຽງແຕ່ຕ້ອງການເພີ່ມ CSS snippet ດ່ວນເພື່ອແກ້ໄຂນີ້:

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

ຢ່າງໃດກໍ່ຕາມ, ນີ້ໃຊ້ບໍ່ໄດ້ກັບອຸປະກອນທີ່ໃຊ້ Windows Phone 8 ລຸ້ນເກົ່າກວ່າ Update 3 (aka GDR3) , ຍ້ອນວ່າມັນເຮັດໃຫ້ອຸປະກອນດັ່ງກ່າວສະແດງມຸມເບິ່ງ desktop ສ່ວນໃຫຍ່ແທນທີ່ຈະເປັນມຸມເບິ່ງ "ໂທລະສັບ" ແຄບ. ເພື່ອແກ້ໄຂບັນຫານີ້, ທ່ານຈະຕ້ອງ ລວມເອົາ 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 (ຍາກ​ກ​່​ວາ​ທາງ​ເລືອກ​ທໍາ​ອິດ​)

Modals, navbars, ແລະແປ້ນພິມສະເໝືອນ

ລົ້ນ ແລະ ເລື່ອນ

ການສະຫນັບສະຫນູນສໍາລັບ ອົງ overflow: hiddenປະ <body>ກອບແມ່ນຂ້ອນຂ້າງຈໍາກັດໃນ iOS ແລະ Android. ເພື່ອເຮັດສິ່ງນີ້, ເມື່ອທ່ານເລື່ອນຜ່ານທາງເທິງຫຼືລຸ່ມຂອງ modal ໃນຕົວທ່ອງເວັບຂອງອຸປະກອນເຫຼົ່ານັ້ນ, <body>ເນື້ອຫາຈະເລີ່ມເລື່ອນລົງ. ເບິ່ງ ຂໍ້ບົກພ່ອງຂອງ Chrome #175502 (ແກ້ໄຂໃນ Chrome v40) ແລະ ຂໍ້ບົກພ່ອງ WebKit #153852 .

ຊ່ອງຂໍ້ມູນ iOS ແລະເລື່ອນ

ໃນ iOS 9.3, ໃນຂະນະທີ່ modal ເປີດ, ຖ້າການສໍາພັດເບື້ອງຕົ້ນຂອງ gesture ເລື່ອນແມ່ນຢູ່ໃນຂອບເຂດຂອງຂໍ້ຄວາມ <input>ຫຼື a <textarea>, <body>ເນື້ອໃນພາຍໃຕ້ modal ຈະຖືກເລື່ອນແທນທີ່ຈະເປັນ modal ຕົວຂອງມັນເອງ. ເບິ່ງ WebKit bug #153856 .

ແປ້ນພິມສະເໝືອນ

ນອກຈາກນັ້ນ, ໃຫ້ສັງເກດວ່າຖ້າທ່ານໃຊ້ແຖບ navbar ຄົງທີ່ຫຼືໃຊ້ວັດສະດຸປ້ອນພາຍໃນ modal, iOS ມີຂໍ້ຜິດພາດໃນການສະແດງຜົນທີ່ບໍ່ປັບປຸງຕໍາແຫນ່ງຂອງອົງປະກອບຄົງທີ່ໃນເວລາທີ່ແປ້ນພິມ virtual ຖືກກະຕຸ້ນ. ການແກ້ໄຂບາງຢ່າງສໍາລັບການນີ້ລວມມີການຫັນປ່ຽນອົງປະກອບຂອງທ່ານໄປຫາ position: absoluteຫຼືຮຽກຮ້ອງໃຫ້ຈັບເວລາໃນຈຸດສຸມເພື່ອພະຍາຍາມແກ້ໄຂການຈັດຕໍາແຫນ່ງດ້ວຍຕົນເອງ. ນີ້ບໍ່ໄດ້ຖືກຈັດການໂດຍ Bootstrap, ສະນັ້ນມັນຂຶ້ນກັບທ່ານທີ່ຈະຕັດສິນໃຈວ່າວິທີແກ້ໄຂທີ່ດີທີ່ສຸດສໍາລັບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ.

ເລື່ອນລົງ Navbar

ອົງ ປະ .dropdown-backdropກອບດັ່ງກ່າວບໍ່ໄດ້ໃຊ້ໃນ iOS ໃນ nav ເນື່ອງຈາກຄວາມສັບສົນຂອງ z-indexing. ດັ່ງນັ້ນ, ເພື່ອປິດ dropdowns ໃນ navbars, ທ່ານຕ້ອງໄດ້ໂດຍກົງຄລິກອົງປະກອບ dropdown (ຫຼື ອົງປະກອບອື່ນໆທີ່ຈະ fire event ຄລິກໃນ iOS ).

ການຊູມຂອງຕົວທ່ອງເວັບ

ການຊູມຫນ້າຢ່າງຫຼີກລ່ຽງບໍ່ໄດ້ສະເຫນີການສະແດງຜົນປອມໃນບາງອົງປະກອບ, ທັງໃນ Bootstrap ແລະສ່ວນທີ່ເຫຼືອຂອງເວັບ. ອີງຕາມບັນຫາ, ພວກເຮົາອາດຈະສາມາດແກ້ໄຂໄດ້ (ຄົ້ນຫາກ່ອນແລະຫຼັງຈາກນັ້ນເປີດບັນຫາຖ້າຕ້ອງການ). ຢ່າງໃດກໍຕາມ, ພວກເຮົາມີແນວໂນ້ມທີ່ຈະບໍ່ສົນໃຈສິ່ງເຫຼົ່ານີ້ຍ້ອນວ່າພວກເຂົາມັກຈະບໍ່ມີການແກ້ໄຂໂດຍກົງນອກເຫນືອຈາກການແກ້ໄຂບັນຫາ hacky.

ໜຽວ :hover/ :focusໃນມືຖື

ເຖິງແມ່ນວ່າການ hovering ທີ່ແທ້ຈິງເປັນໄປບໍ່ໄດ້ຢູ່ໃນຫນ້າຈໍສໍາພັດສ່ວນໃຫຍ່, ຕົວທ່ອງເວັບຂອງໂທລະສັບມືຖືສ່ວນໃຫຍ່ເຮັດຕາມການສະຫນັບສະຫນຸນ hover ແລະເຮັດໃຫ້ :hover"ຫນຽວ". ໃນຄໍາສັບຕ່າງໆອື່ນໆ, :hoverຮູບແບບເລີ່ມຕົ້ນນໍາໃຊ້ຫຼັງຈາກແຕະອົງປະກອບໃດຫນຶ່ງແລະພຽງແຕ່ຢຸດເຊົາການສະຫມັກຫຼັງຈາກຜູ້ໃຊ້ແຕະບາງອົງປະກອບອື່ນໆ. ນີ້ສາມາດເຮັດໃຫ້ລັດຂອງ Bootstrap :hoverກາຍເປັນ "ຕິດຢູ່" ທີ່ບໍ່ປາດຖະຫນາໃນຕົວທ່ອງເວັບດັ່ງກ່າວ. ບາງຕົວທ່ອງເວັບຂອງໂທລະສັບມືຖືຍັງເຮັດໃຫ້ :focusຄ້າຍຄືກັນ. ໃນປັດຈຸບັນບໍ່ມີການແກ້ໄຂງ່າຍໆສໍາລັບບັນຫາເຫຼົ່ານີ້ນອກເຫນືອຈາກການເອົາຮູບແບບດັ່ງກ່າວອອກທັງຫມົດ.

ການພິມ

ແມ້ແຕ່ຢູ່ໃນບາງຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ການພິມສາມາດ quirky.

ໂດຍສະເພາະ, ໃນ Chrome v32 ແລະບໍ່ຄໍານຶງເຖິງການຕັ້ງຄ່າຂອບ, Chrome ໃຊ້ຄວາມກວ້າງ viewport ແຄບກວ່າຂະຫນາດກະດາດຕົວຈິງໃນເວລາທີ່ການແກ້ໄຂຄໍາຖາມສື່ມວນຊົນໃນຂະນະທີ່ພິມຫນ້າເວັບ. ນີ້ສາມາດສົ່ງຜົນໃຫ້ຕາຂ່າຍໄຟຟ້າຂະຫນາດນ້ອຍພິເສດຂອງ Bootstrap ຖືກເປີດໃຊ້ໂດຍບໍ່ຄາດຄິດໃນເວລາພິມ. ເບິ່ງບັນຫາ #12078 ແລະ Chrome bug #273306 ສໍາລັບລາຍລະອຽດບາງຢ່າງ. ວິທີແກ້ໄຂບັນຫາທີ່ແນະນຳ:

• ເອົາຕາຂ່າຍໄຟຟ້າຂະຫນາດນ້ອຍພິເສດແລະໃຫ້ແນ່ໃຈວ່າຫນ້າຂອງທ່ານເບິ່ງຄືວ່າເປັນທີ່ຍອມຮັບພາຍໃຕ້ມັນ.
• ປັບແຕ່ງຄ່າຂອງ @screen-*ຕົວແປໜ້ອຍລົງເພື່ອໃຫ້ເຈ້ຍເຄື່ອງພິມຂອງເຈົ້າຖືວ່າໃຫຍ່ກວ່າຂະໜາດນ້ອຍພິເສດ.
• ເພີ່ມການສອບຖາມສື່ແບບກຳນົດເອງເພື່ອປ່ຽນຈຸດແບ່ງຂະໜາດຕາຂ່າຍໄຟຟ້າສຳລັບສື່ສິ່ງພິມເທົ່ານັ້ນ.

ນອກຈາກນີ້, ເປັນຂອງ Safari v8.0, fixed-width .containers ສາມາດເຮັດໃຫ້ Safari ໃຊ້ຂະຫນາດຕົວອັກສອນທີ່ຜິດປົກກະຕິໃນເວລາທີ່ພິມ. ເບິ່ງ #14868 ແລະ WebKit bug #138192 ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ. ຫນຶ່ງໃນການແກ້ໄຂທີ່ເປັນໄປໄດ້ສໍາລັບການນີ້ແມ່ນການເພີ່ມ CSS ຕໍ່ໄປນີ້:

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

ຕົວທ່ອງເວັບຫຼັກຊັບ Android

ອອກຈາກກ່ອງ, Android 4.1 (ແລະແມ້ກະທັ້ງບາງລຸ້ນໃຫມ່ທີ່ປາກົດຂື້ນ) ສົ່ງກັບແອັບຯ Browser ເປັນຕົວທ່ອງເວັບທາງເລືອກເລີ່ມຕົ້ນ (ກົງກັນຂ້າມກັບ Chrome). ແຕ່ຫນ້າເສຍດາຍ, ແອັບຯ Browser ມີຂໍ້ບົກພ່ອງຫຼາຍຢ່າງແລະບໍ່ສອດຄ່ອງກັບ CSS ໂດຍທົ່ວໄປ.

ເລືອກເມນູ

ໃນ <select>ອົງປະກອບ, ຕົວທ່ອງເວັບຫຼັກຊັບ Android ຈະບໍ່ສະແດງການຄວບຄຸມດ້ານຂ້າງຖ້າມີ border-radiusແລະ / ຫຼື borderນໍາໃຊ້. (ເບິ່ງ ຄໍາຖາມ StackOverflow ນີ້ ສໍາລັບລາຍລະອຽດ.) ໃຊ້ snippet ຂອງລະຫັດຂ້າງລຸ່ມນີ້ເພື່ອເອົາ CSS ທີ່ກະທໍາຜິດແລະສະແດງ <select>ເປັນອົງປະກອບ unstyled ໃນຕົວທ່ອງເວັບຫຼັກຊັບ Android. ຕົວແທນຜູ້ໃຊ້ 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 ນີ້.

ຜູ້ກວດສອບ

ເພື່ອໃຫ້ປະສົບການທີ່ດີທີ່ສຸດທີ່ເປັນໄປໄດ້ກັບຕົວທ່ອງເວັບເກົ່າແລະ buggy, Bootstrap ໃຊ້ CSS browser hacks ໃນຫຼາຍໆບ່ອນເພື່ອເປົ້າຫມາຍ CSS ພິເສດໃຫ້ກັບບາງຮຸ່ນຂອງຕົວທ່ອງເວັບເພື່ອເຮັດວຽກກັບແມງໄມ້ໃນຕົວທ່ອງເວັບຂອງຕົນເອງ. ການແຮັກເຫຼົ່ານີ້ເຂົ້າໃຈໄດ້ເຮັດໃຫ້ຜູ້ກວດສອບ CSS ຈົ່ມວ່າບໍ່ຖືກຕ້ອງ. ຢູ່ໃນສະຖານທີ່ສອງຢ່າງ, ພວກເຮົາຍັງໃຊ້ຄຸນສົມບັດ CSS ທີ່ມີເລືອດອອກທີ່ຍັງບໍ່ທັນໄດ້ມາດຕະຖານຢ່າງເຕັມສ່ວນ, ແຕ່ເຫຼົ່ານີ້ຖືກນໍາໃຊ້ຢ່າງດຽວສໍາລັບການເພີ່ມປະສິດທິພາບກ້າວຫນ້າ.

ຄໍາເຕືອນການຢືນຢັນເຫຼົ່ານີ້ບໍ່ສໍາຄັນໃນການປະຕິບັດເພາະວ່າສ່ວນທີ່ບໍ່ແມ່ນ hacky ຂອງ CSS ຂອງພວກເຮົາມີຄວາມຖືກຕ້ອງຢ່າງເຕັມສ່ວນແລະສ່ວນ hacky ບໍ່ໄດ້ແຊກແຊງການເຮັດວຽກທີ່ເຫມາະສົມຂອງສ່ວນທີ່ບໍ່ແມ່ນ hacky, ດັ່ງນັ້ນເປັນຫຍັງພວກເຮົາເຈດຕະນາບໍ່ສົນໃຈຄໍາເຕືອນໂດຍສະເພາະເຫຼົ່ານີ້.

ເອກະສານ HTML ຂອງພວກເຮົາເຊັ່ນດຽວກັນມີບາງຄໍາເຕືອນການກວດສອບ HTML ທີ່ບໍ່ສໍາຄັນແລະບໍ່ມີຜົນສະທ້ອນອັນເນື່ອງມາຈາກການລວມເອົາການແກ້ໄຂຂອງພວກເຮົາສໍາລັບ ບາງຂໍ້ຜິດພາດ Firefox .

ສະຫນັບສະຫນູນພາກສ່ວນທີສາມ

ໃນຂະນະທີ່ພວກເຮົາບໍ່ສະຫນັບສະຫນູນ plugins ຫຼື add-ons ພາກສ່ວນທີສາມຢ່າງເປັນທາງການ, ພວກເຮົາສະເຫນີຄໍາແນະນໍາທີ່ເປັນປະໂຫຍດເພື່ອຊ່ວຍຫຼີກເວັ້ນບັນຫາທີ່ອາດຈະເກີດຂື້ນໃນໂຄງການຂອງທ່ານ.

ຂະໜາດກ່ອງ

ບາງຊອບແວພາກສ່ວນທີສາມ, ລວມທັງ Google Maps ແລະ Google Custom Search Engine, ຂັດແຍ້ງກັບ Bootstrap ເນື່ອງຈາກ * { box-sizing: border-box; }, ກົດລະບຽບທີ່ເຮັດໃຫ້ມັນ paddingບໍ່ມີຜົນຕໍ່ຄວາມກວ້າງຂອງຄອມພິວເຕີ້ສຸດທ້າຍຂອງອົງປະກອບ. ຮຽນ​ຮູ້​ເພີ່ມ​ເຕີມ​ກ່ຽວ​ກັບ ​ຮູບ​ແບບ​ກ່ອງ​ແລະ​ຂະ​ຫນາດ​ຢູ່​ທີ່ CSS Tricks .

ອີງຕາມບໍລິບົດ, ທ່ານອາດຈະ override ຕາມຄວາມຕ້ອງການ (ທາງເລືອກ 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" bookmarklet ສໍາລັບການກໍານົດບັນຫາການເຂົ້າເຖິງ
• ສ່ວນຂະຫຍາຍເຄື່ອງມືຜູ້ພັດທະນາການເຂົ້າເຖິງຂອງ Chrome
• ເຄື່ອງວິເຄາະຄວາມຄົມຊັດຂອງສີ
• ໂຄງການ A11Y
• ເອກະສານການຊ່ວຍເຂົ້າເຖິງ MDN

ຄຳຖາມທີ່ຖາມເລື້ອຍໆກ່ຽວກັບໃບອະນຸຍາດ

Bootstrap ຖືກປ່ອຍອອກມາພາຍໃຕ້ໃບອະນຸຍາດ MIT ແລະເປັນລິຂະສິດ 2019 Twitter. ຕົ້ມລົງເປັນຕ່ອນນ້ອຍ, ມັນສາມາດໄດ້ຮັບການອະທິບາຍດ້ວຍເງື່ອນໄຂດັ່ງຕໍ່ໄປນີ້.

ມັນຮຽກຮ້ອງໃຫ້ທ່ານ:

• ຮັກສາໃບອະນຸຍາດແລະແຈ້ງການລິຂະສິດລວມຢູ່ໃນໄຟລ໌ CSS ແລະ JavaScript ຂອງ Bootstrap ເມື່ອທ່ານໃຊ້ພວກມັນໃນວຽກງານຂອງທ່ານ

ມັນອະນຸຍາດໃຫ້ທ່ານ:

• ດາວໂຫຼດ ແລະນຳໃຊ້ Bootstrap ໄດ້ຢ່າງບໍ່ເສຍຄ່າ, ທັງທັງໝົດ ຫຼືບາງສ່ວນ, ເພື່ອຈຸດປະສົງສ່ວນຕົວ, ສ່ວນຕົວ, ພາຍໃນບໍລິສັດ ຫຼື ການຄ້າ
• ໃຊ້ Bootstrap ໃນການຫຸ້ມຫໍ່ຫຼືການແຈກຢາຍທີ່ທ່ານສ້າງ
• ແກ້ໄຂລະຫັດແຫຼ່ງ
• ໃຫ້ໃບອະນຸຍາດຍ່ອຍເພື່ອດັດແປງແລະແຈກຢາຍ Bootstrap ໃຫ້ກັບບຸກຄົນທີສາມທີ່ບໍ່ລວມຢູ່ໃນໃບອະນຸຍາດ

ມັນ​ຫ້າມ​ທ່ານ​ທີ່​ຈະ​:

• ຖືຜູ້ຂຽນແລະເຈົ້າຂອງໃບອະນຸຍາດຮັບຜິດຊອບຕໍ່ຄວາມເສຍຫາຍຍ້ອນວ່າ Bootstrap ຖືກສະຫນອງໃຫ້ໂດຍບໍ່ມີການຮັບປະກັນ
• ຖືຜູ້ສ້າງ ຫຼືຜູ້ຖືລິຂະສິດຂອງ Bootstrap ຮັບຜິດຊອບ
• ແຈກຈ່າຍຄືນສິ້ນຂອງ Bootstrap ໂດຍບໍ່ມີການສະແດງຄຸນສົມບັດທີ່ເຫມາະສົມ
• ໃຊ້ເຄື່ອງໝາຍທີ່ເປັນເຈົ້າຂອງໂດຍ Twitter ໃນທຸກວິທີທາງທີ່ອາດຈະລະບຸ ຫຼືໝາຍເຖິງວ່າ Twitter ຮັບຮອງການແຈກຢາຍຂອງເຈົ້າ
• ໃຊ້ເຄື່ອງໝາຍທີ່ເປັນເຈົ້າຂອງໂດຍ Twitter ໃນທຸກວິທີທາງທີ່ອາດຈະລະບຸ ຫຼືໝາຍເຖິງວ່າທ່ານສ້າງຊອບແວ Twitter ໃນຄຳຖາມ

ມັນ​ບໍ່​ໄດ້​ຮຽກ​ຮ້ອງ​ໃຫ້​ທ່ານ​:

• ລວມເອົາແຫຼ່ງຂອງ Bootstrap ຕົວມັນເອງ, ຫຼືການດັດແປງໃດໆທີ່ທ່ານອາດຈະໄດ້ເຮັດກັບມັນ, ໃນການແຈກຢາຍຄືນໃຫມ່ໃດໆທີ່ເຈົ້າອາດຈະປະກອບທີ່ປະກອບມີມັນ.
• ສົ່ງການປ່ຽນແປງທີ່ທ່ານເຮັດກັບ Bootstrap ກັບຄືນໄປຫາໂຄງການ Bootstrap (ເຖິງແມ່ນວ່າຄໍາຄຶດຄໍາເຫັນດັ່ງກ່າວຈະຖືກຊຸກຍູ້ໃຫ້)

ໃບອະນຸຍາດ Bootstrap ເຕັມແມ່ນຢູ່ ໃນ repository ໂຄງການ ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.

ການແປ

ສະມາຊິກຊຸມຊົນໄດ້ແປເອກະສານຂອງ Bootstrap ເປັນພາສາຕ່າງໆ. ບໍ່ມີອັນໃດໄດ້ຮັບການສະໜັບສະໜູນຢ່າງເປັນທາງການ ແລະພວກມັນອາດຈະບໍ່ທັນສະ ເໝີ ໄປ.

• Bootstrap 中文文档 (ພາສາຈີນ)
• Bootstrap på Dansk (ເດນມາກ)
• Bootstrap en Français (ຝຣັ່ງ)
• Bootstrap auf Deutsch (ເຢຍລະມັນ)
• Bootstrap ໃນ Italiano (ອິຕາລີ)
• Bootstrap 한국어 (ເກົາຫຼີ)
• Bootstrap em Português do Brasil (ປອກຕຸຍການບຣາຊິວ)
• Bootstrap по-русски (ພາສາລັດເຊຍ)
• Bootstrap en Español (ສະເປນ)
• Türkçe Bootstrap (ຕວກກີ)
• Bootstrap українською (ຢູເຄຣນ)
• Bootstrap bằng Tiếng Việt (ຫວຽດນາມ)

ພວກ​ເຮົາ​ບໍ່​ໄດ້​ຊ່ວຍ​ຈັດ​ຕັ້ງ​ຫຼື​ເປັນ​ເຈົ້າ​ພາບ​ການ​ແປ​ພາ​ສາ​, ພວກ​ເຮົາ​ພຽງ​ແຕ່​ເຊື່ອມ​ຕໍ່​ກັບ​ພວກ​ເຂົາ​.

ສຳເລັດການແປໃໝ່ ຫຼືດີກວ່າບໍ? ເປີດການຮ້ອງຂໍດຶງເພື່ອເພີ່ມມັນໃສ່ບັນຊີລາຍຊື່ຂອງພວກເຮົາ.