Download tau

Bootstrap (tam sim no v3.3.7) muaj ob peb txoj hauv kev yooj yim los pib sai, txhua tus thov rau qib sib txawv thiab siv rooj plaub. Nyeem dhau los saib seb qhov twg haum rau koj cov kev xav tau tshwj xeeb.

Bootstrap CDN

Cov neeg nyob ntawm jsDelivr ua siab zoo muab CDN kev txhawb nqa rau Bootstrap's CSS thiab JavaScript. Tsuas yog siv cov Bootstrap CDN txuas.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

Nruab nrog Bower

Koj tuaj yeem nruab thiab tswj Bootstrap's Less, CSS, JavaScript, thiab fonts siv Bower :

$ bower install bootstrap

Nruab nrog npm

Koj tuaj yeem nruab Bootstrap siv npm :

$ npm install bootstrap@3

require('bootstrap')yuav thauj tag nrho Bootstrap's jQuery plugins mus rau jQuery khoom. Lub bootstrapmodule nws tus kheej tsis export dab tsi. Koj tuaj yeem manually thauj Bootstrap's jQuery plugins ib tus zuj zus los ntawm kev thauj cov /js/*.jsntaub ntawv hauv qab pob cov npe saum toj kawg nkaus.

Bootstrap's package.jsonmuaj qee cov metadata ntxiv nyob rau hauv cov yuam sij hauv qab no:

• less- txoj kev mus rau Bootstrap lub ntsiab Cov ntaub ntawv tsawg dua
• style- txoj hauv kev rau Bootstrap's tsis-minified CSS uas tau precompiled siv lub neej ntawd nqis (tsis muaj customization)

Nruab nrog Composer

Koj tuaj yeem nruab thiab tswj Bootstrap's Less, CSS, JavaScript, thiab fonts siv Composer :

$ composer require twbs/bootstrap

Autoprefixer xav tau rau Less/Sass

Bootstrap siv Autoprefixer los cuam tshuam nrog CSS tus neeg muag khoom ua ntej . Yog tias koj tab tom sau Bootstrap los ntawm nws qhov tsawg dua / Sass thiab tsis siv peb cov Gruntfile, koj yuav tsum tau koom nrog Autoprefixer rau hauv koj txoj kev tsim koj tus kheej. Yog tias koj siv Bootstrap precompiled lossis siv peb Gruntfile, koj tsis tas yuav txhawj txog qhov no vim tias Autoprefixer twb tau muab tso rau hauv peb Gruntfile.

Dab tsi suav nrog

Bootstrap yog downloadable nyob rau hauv ob daim ntawv, nyob rau hauv uas koj yuav pom cov nram qab no directory thiab cov ntaub ntawv, logically pab pawg neeg cov kev pab cuam thiab muab ob qho tib si compiled thiab minified variations.

Precompiled Bootstrap

Thaum downloaded, unzip lub compressed nplaub tshev kom pom cov qauv ntawm (lub compiled) Bootstrap. Koj yuav pom tej yam zoo li no:

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

Nov yog daim ntawv yooj yim tshaj plaws ntawm Bootstrap: cov ntaub ntawv precompiled rau kev siv ceev ceev hauv yuav luag txhua qhov web project. Peb muab tso ua ke CSS thiab JS ( bootstrap.*), nrog rau muab tso ua ke thiab minified CSS thiab JS ( bootstrap.min.*). CSS qhov chaw maps ( bootstrap.*.map) muaj rau siv nrog qee qhov browsers 'cov cuab yeej tsim tawm. Cov ntawv sau los ntawm Glyphicons suav nrog, zoo li yog lub ntsiab lus xaiv Bootstrap.

Bootstrap qhov chaws

Bootstrap qhov chaws rub tawm suav nrog CSS, JavaScript, thiab cov khoom muaj nqis font, nrog rau qhov tsawg, JavaScript, thiab cov ntaub ntawv. Tshwj xeeb tshaj yog, nws suav nrog cov hauv qab no thiab ntau dua:

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

Lub less/, js/, thiab fonts/yog cov cai rau peb CSS, JS, thiab icon fonts (raws li). Cov dist/ntawv tais ceev tseg suav nrog txhua yam uas tau teev tseg nyob rau hauv precompiled download seem saum toj no. Cov docs/ntawv tais ceev tseg suav nrog qhov chaws rau peb cov ntaub ntawv, thiab examples/kev siv Bootstrap. Ntxiv rau qhov ntawd, lwm cov ntaub ntawv suav nrog muab kev txhawb nqa rau pob khoom, ntaub ntawv tso cai, thiab kev txhim kho.

Compiling CSS thiab JavaScript

Bootstrap siv Grunt rau nws txoj kev tsim, nrog rau txoj hauv kev yooj yim rau kev ua haujlwm nrog lub moj khaum. Nws yog li cas peb suav peb cov lej, khiav kev xeem, thiab lwm yam.

Txhim kho Grunt

Txhawm rau nruab Grunt, koj yuav tsum xub rub tawm thiab nruab node.js (uas suav nrog npm). npm stands rau node ntim modules thiab yog ib txoj hauv kev los tswj kev txhim kho kev vam meej los ntawm node.js.

1. Nruab grunt-clithoob ntiaj teb nrog npm install -g grunt-cli.
2. Coj mus rau hauv paus /bootstrap/directory, ces khiav npm install. npm yuav saib cov package.jsonntaub ntawv thiab cia li nruab qhov tsim nyog hauv zos dependencies teev nyob rau ntawd.

Thaum ua tiav, koj yuav muaj peev xwm khiav ntau yam Grunt commands muab los ntawm kab hais kom ua.

Muaj Grunt cov lus txib

grunt dist(Xws li suav sau CSS thiab JavaScript)

Regenerates cov /dist/directory nrog compiled thiab minified CSS thiab JavaScript cov ntaub ntawv. Raws li tus neeg siv Bootstrap, qhov no feem ntau yog cov lus txib koj xav tau.

grunt watch(Saib)

Saib cov ntaub ntawv tsawg dua thiab rov ua dua lawv rau CSS thaum twg koj khaws qhov hloov pauv.

grunt test(Khiav kev xeem)

Khiav JSHint thiab khiav QUnit xeem headlessly hauv PhantomJS .

grunt docs(Tsim & sim cov cuab tam docs)

Tsim thiab sim CSS, JavaScript, thiab lwm yam khoom muaj nqis uas siv thaum khiav cov ntaub ntawv hauv zos ntawm bundle exec jekyll serve.

grunt(Tsim txhua yam thiab khiav kev xeem)

Compiles thiab minifies CSS thiab JavaScript, tsim cov ntaub ntawv lub website, khiav lub HTML5 validator tiv thaiv cov ntaub ntawv, regenerates Customizer cov cuab tam, thiab ntau dua. Yuav tsum tau Jekyll . Feem ntau tsuas yog tsim nyog yog tias koj tab tom nyiag ntawm Bootstrap nws tus kheej.

Kev daws teeb meem

Yog tias koj ntsib teeb meem nrog kev txhim kho kev vam khom lossis khiav Grunt cov lus txib, ua ntej rho tawm cov /node_modules/npe tsim los ntawm npm. Tom qab ntawd, rov ua dua npm install.

Basic template

Pib nrog cov qauv HTML yooj yim no, lossis hloov cov qauv no . Peb cia siab tias koj yuav hloov kho peb cov qauv thiab cov qauv, hloov kho kom haum rau koj cov kev xav tau.

Luam cov HTML hauv qab no los pib ua haujlwm nrog cov ntaub ntawv Bootstrap tsawg kawg nkaus.

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Piv txwv

Ua rau ntawm cov qauv yooj yim saum toj no nrog Bootstrap ntau yam khoom. Peb txhawb kom koj hloov kho thiab hloov kho Bootstrap kom haum rau koj tus kheej qhov kev xav tau.

Tau txais cov cai hauv qab no rau txhua qhov piv txwv hauv qab no los ntawm rub tawm Bootstrap repository . Piv txwv tuaj yeem pom hauv phau docs/examples/ntawv qhia.

Siv lub moj khaum

Pib template

Tsis muaj dab tsi tab sis cov hauv paus ntsiab lus: suav nrog CSS thiab JavaScript nrog rau lub thawv.

Bootstrap ntsiab

Thauj khoom xaiv Bootstrap lub ntsiab lus rau kev pom kev zoo dua.

Daim phiaj

Ntau qhov piv txwv ntawm daim phiaj layouts nrog tag nrho plaub theem, zes, thiab ntau dua.

Jumbotron

Tsim nyob ib ncig ntawm lub jumbotron nrog ib tug navbar thiab qee cov kab sib chaws yooj yim.

Nqaim jumbotron

Tsim ib nplooj ntawv kev cai ntau dua los ntawm nqaim lub thawv ntim thiab jumbotron.

Navbars hauv kev ua

Navbar

Super yooj yim template uas suav nrog navbar nrog rau qee cov ntsiab lus ntxiv.

Static sab saum toj navbar

Super yooj yim template nrog ib tug zoo li qub sab saum toj navbar nrog rau qee cov ntsiab lus ntxiv.

Tsau navbar

Super yooj yim template nrog ib tug tsau sab saum toj navbar nrog rau ib co ntxiv cov ntsiab lus.

Kev cai Cheebtsam

Npog

Ib nplooj ntawv template rau kev tsim cov nplooj ntawv yooj yim thiab zoo nkauj.

Carousel

Customize lub navbar thiab carousel, ces ntxiv ib co tshiab Cheebtsam.

Blog

Yooj yim ob-kab blog layout nrog kev cai navigation, header, thiab hom.

Dashboard

Cov qauv yooj yim rau tus thawj tswj hwm dashboard nrog tsau sidebar thiab navbar.

nplooj ntawv kos npe

Custom form layout and design for a simple sign in form.

Justified nav

Tsim ib qho kev cai navbar nrog kev sib txuas ncaj ncees. Tau taub hau! Tsis dhau Safari tus phooj ywg.

nplaum nplaum

Txuas tus footer rau hauv qab ntawm qhov chaw saib thaum cov ntsiab lus luv dua nws.

Npog footer nrog navbar

Txuas ib lub footer rau hauv qab ntawm qhov chaw saib nrog lub navbar ruaj khov rau saum.

Kev sim

Tsis teb Bootstrap

Yooj yim lov tes taw kev teb ntawm Bootstrap rau peb cov ntaub ntawv .

Off-canvas

Tsim kom muaj qhov toggleable off-canvas navigation zaub mov rau siv nrog Bootstrap.

Cov cuab yeej

Bootlint

Bootlint yog tus nom Bootstrap HTML liter cuab tam. Nws cia li kuaj xyuas ntau yam HTML yuam kev hauv cov nplooj ntawv web uas siv Bootstrap hauv txoj kev ncaj ncees "vanilla". Vanilla Bootstrap's Cheebtsam / widgets xav tau lawv qhov chaw ntawm DOM kom ua raws li qee cov qauv. Bootlint xyuas tias qhov piv txwv ntawm Bootstrap Cheebtsam muaj cov qauv HTML kom raug. Xav txog ntxiv Bootlint rau koj lub vev xaib kev txhim kho Bootstrap lub cuab yeej kom tsis muaj qhov ua yuam kev ua rau koj txoj haujlwm txhim kho.

Zej Zog

Nyob twj ywm rau hnub tim ntawm kev txhim kho Bootstrap thiab ncav cuag lub zej zog nrog cov peev txheej pab tau.

• Nyeem thiab sau npe mus rau Lub Tsev Haujlwm Bootstrap Blog .
• Tham nrog cov phooj ywg Bootstrappers siv IRC hauv irc.freenode.netserver, hauv ##bootstrap channel .
• Rau kev pab siv Bootstrap, nug ntawm StackOverflow siv lub cim npetwitter-bootstrap-3 .
• Cov neeg tsim khoom yuav tsum siv lo lus tseem ceeb bootstrapntawm cov pob khoom uas hloov kho lossis ntxiv rau kev ua haujlwm ntawm Bootstrap thaum faib los ntawm npm lossis cov txheej txheem xa khoom zoo sib xws rau kev tshawb pom ntau tshaj plaws.
• Nrhiav kev tshoov siab piv txwv ntawm cov neeg tsim nrog Bootstrap ntawm Bootstrap Expo .

Koj tuaj yeem ua raws @getbootstrap ntawm Twitter rau cov lus xaiv tshiab thiab cov yeeb yaj kiab txaus ntshai.

Disabling kev teb

Bootstrap tau hloov kho koj cov nplooj ntawv rau ntau qhov screen loj. Nov yog yuav ua li cas lov tes taw no feature kom koj nplooj ntawv ua haujlwm zoo li qhov piv txwv tsis teb .

Cov kauj ruam los lov tes taw nplooj teb

1. Tshem tawm qhov chaw saib <meta>tau hais hauv CSS docs
2. Override rau widthntawm .containertxhua daim phiaj kab nrog ib qhov dav, piv txwv li width: 970px !important;Nco ntsoov tias qhov no tuaj tom qab lub neej ntawd Bootstrap CSS. Koj tuaj yeem xaiv zam qhov !importantnrog cov lus nug xov xwm lossis qee qhov xaiv-fu.
3. Yog tias siv navbars, tshem tawm tag nrho navbar tsoo thiab nthuav tus cwj pwm.
4. Rau daim phiaj layouts, siv .col-xs-*cov chav kawm ntxiv rau, los yog nyob rau hauv qhov chaw, nruab nrab/loj sawv daws yuav. Tsis txhob txhawj, cov khoom siv me me ntxiv rau daim phiaj teev rau txhua qhov kev daws teeb meem.

Koj tseem yuav xav tau Respond.js rau IE8 (vim peb cov lus nug xov xwm tseem muaj thiab yuav tsum tau ua tiav). Qhov no lov tes taw "mobile site" yam ntawm Bootstrap.

Bootstrap template nrog kev ua haujlwm tsis ua haujlwm

Peb tau siv cov kauj ruam no los ua piv txwv. Nyeem nws qhov chaws los saib cov kev hloov pauv tshwj xeeb tau ua.

Saib piv txwv tsis teb

Browser thiab ntaus ntawv txhawb nqa

Bootstrap yog tsim los ua haujlwm zoo tshaj plaws nyob rau hauv qhov tseeb desktop thiab mobile browsers, lub ntsiab lus ntawm cov browsers qub yuav pom txawv styled, txawm tias ua haujlwm tau zoo, ua haujlwm ntawm qee yam khoom.

Txhawb browsers

Tshwj xeeb, peb txhawb qhov tseeb versions ntawm cov browsers thiab platforms hauv qab no.

Lwm qhov browsers uas siv qhov tseeb version ntawm WebKit, Blink, lossis Gecko, txawm tias ncaj qha lossis los ntawm lub platform lub vev xaib saib API, tsis txaus siab. Txawm li cas los xij, Bootstrap yuav tsum (feem ntau) tso saib thiab ua haujlwm kom raug hauv cov browsers no thiab. Cov ntaub ntawv txhawb nqa tshwj xeeb muaj qhia hauv qab no.

Cov khoom siv txawb

Feem ntau hais lus, Bootstrap txhawb nqa qhov tseeb versions ntawm txhua lub platform loj lub neej ntawd browsers. Nco ntsoov tias cov browsers npe (xws li Opera Mini, Opera Mobile's Turbo hom, UC Browser Mini, Amazon Silk) tsis txaus siab.

Desktop browsers

Ib yam li ntawd, qhov tseeb versions ntawm feem ntau desktop browsers tau txais kev txhawb nqa.

Hauv Windows, peb txhawb Internet Explorer 8-11 .

Rau Firefox, ntxiv rau qhov kev tso tawm ruaj khov tshiab kawg, peb kuj txhawb nqa qhov tseeb Extended Support Release (ESR) version ntawm Firefox.

Unofficially, Bootstrap yuav tsum saib thiab coj tus cwj pwm zoo txaus hauv Chromium thiab Chrome rau Linux, Firefox rau Linux, thiab Internet Explorer 7, nrog rau Microsoft Edge, txawm tias lawv tsis tau txais kev txhawb nqa.

Rau ib daim ntawv teev npe ntawm qee qhov browser kab mob uas Bootstrap yuav tsum tau rub nrog, saib peb phab ntsa ntawm browser kab .

Internet Explorer 8 thiab 9

Internet Explorer 8 thiab 9 kuj tau txais kev txhawb nqa, txawm li cas los xij, thov nco ntsoov tias qee qhov CSS3 cov khoom thiab HTML5 cov ntsiab lus tsis txaus siab los ntawm cov browsers no. Tsis tas li ntawd, Internet Explorer 8 yuav tsum tau siv Respond.js los pab txhawb cov lus nug xov xwm.

Mus saib Kuv tuaj yeem siv ... kom paub meej txog kev txhawb nqa browser ntawm CSS3 thiab HTML5 nta.

Internet Explorer 8 thiab Respond.js

Ceev faj ntawm cov lus ceeb toom hauv qab no thaum siv Respond.js hauv koj qhov kev txhim kho thiab tsim khoom ib puag ncig rau Internet Explorer 8.

Respond.js thiab cross-domain CSS

Siv Respond.js nrog CSS tuav ntawm qhov sib txawv (sub)domain (piv txwv li, ntawm CDN) yuav tsum muaj qee qhov teeb tsa ntxiv. Saib Respond.js docs kom paub meej.

Teb.js thiabfile://

Vim yog cov cai tswj kev nyab xeeb ntawm browser, Respond.js tsis ua haujlwm nrog cov nplooj ntawv saib ntawm cov file://txheej txheem (xws li thaum qhib cov ntaub ntawv HTML hauv zos). Txhawm rau kuaj cov yam ntxwv ua haujlwm hauv IE8, saib koj cov nplooj ntawv dhau HTTP(S). Saib Respond.js docs kom paub meej.

Teb.js thiab@import

Respond.js tsis ua haujlwm nrog CSS uas tau hais los ntawm @import. Tshwj xeeb, qee qhov kev teeb tsa Drupal paub siv @import. Saib Respond.js docs kom paub meej.

Internet Explorer 8 thiab lub thawv-sizing

IE8 tsis txhawb nqa tag nrho box-sizing: border-box;thaum ua ke nrog min-width, max-width, min-height, lossis max-height. Vim li ntawd, raws li ntawm v3.0.1, peb tsis siv max-widthntawm .containers.

Internet Explorer 8 thiab @font-face

IE8 muaj qee qhov teeb meem nrog @font-facethaum ua ke nrog :before. Bootstrap siv qhov sib xyaw ua ke nrog nws cov Glyphicons. Yog hais tias ib nplooj ntawv yog cached, thiab loaded yam tsis muaj tus nas hla lub qhov rais (piv txwv li ntaus lub refresh khawm lossis thauj ib yam dab tsi hauv iframe) ces nplooj ntawv tau rendered ua ntej lub font loads. Hovering hla nplooj ntawv (lub cev) yuav qhia qee lub cim thiab hovering hla cov cim ntxiv yuav pom cov ntawd thiab. Saib qhov teeb meem #13863 kom paub meej.

IE Compatibility hom

Bootstrap tsis txaus siab nyob rau hauv cov qub Internet Explorer compatibility hom. Txhawm rau kom paub tseeb tias koj tab tom siv hom kev qhia tshiab rau IE, xav txog suav nrog cov <meta>cim tsim nyog hauv koj cov nplooj ntawv:

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

Paub meej tias hom ntaub ntawv los ntawm kev qhib cov cuab yeej debugging: nias F12thiab xyuas "Cov ntaub ntawv hom".

Cov cim npe no suav nrog tag nrho ntawm Bootstrap cov ntaub ntawv thiab cov piv txwv los xyuas kom meej qhov ua tau zoo tshaj plaws hauv txhua qhov kev txhawb nqa ntawm Internet Explorer.

Saib cov lus nug StackOverflow no kom paub ntau ntxiv.

Internet Explorer 10 hauv Windows 8 thiab Windows Phone 8

Internet Explorer 10 tsis txawv qhov dav ntawm qhov dav ntawm qhov chaw saib , thiab yog li tsis siv cov lus nug xov xwm hauv Bootstrap's CSS. Nquag koj tsuas yog ntxiv cov snippet ceev ntawm CSS los kho qhov no:

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

Txawm li cas los xij, qhov no tsis ua haujlwm rau cov khoom siv khiav Windows Phone 8 versions laus dua li Hloov Kho 3 (aka GDR3) , vim nws ua rau cov khoom siv zoo li no los qhia pom feem ntau ntawm lub desktop es tsis txhob nqaim "xov tooj" saib. Txhawm rau daws qhov no, koj yuav tsum suav nrog CSS thiab JavaScript hauv qab no los ua haujlwm nyob ib puag ncig cov kab laum .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

Yog xav paub ntxiv thiab cov lus qhia siv, nyeem Windows Phone 8 thiab Device-Width .

Raws li lub taub hau, peb suav nrog qhov no hauv txhua yam ntawm Bootstrap cov ntaub ntawv thiab cov piv txwv ua qauv qhia.

Safari feem pua ​​rounding

Lub cav rendering ntawm versions ntawm Safari ua ntej v7.1 rau OS X thiab Safari rau iOS no v8.0 muaj ib co teeb meem nrog rau tus naj npawb ntawm decimal qhov chaw siv nyob rau hauv peb .col-*-1daim phiaj chav kawm ntawv. Yog li yog tias koj muaj 12 tus kab sib chaws kab, koj yuav pom tias lawv tuaj luv luv piv rau lwm kab kab. Dhau li ntawm kev kho dua tshiab Safari / iOS, koj muaj qee qhov kev xaiv rau kev ua haujlwm:

• Ntxiv .pull-rightrau koj daim phiaj kab kawg kom tau qhov kev sib tw nyuaj-txoj cai
• Tweak koj feem pua ​​​​ntawm tus kheej kom tau txais qhov zoo tshaj plaws hloov pauv rau Safari (ntau dua qhov kev xaiv thawj zaug)

Modals, navbars, thiab cov keyboards virtual

Overflow thiab scrolling

Kev them nyiaj yug rau overflow: hiddenntawm lub <body>caij yog heev txwv nyob rau hauv iOS thiab Android. Txog qhov kawg, thaum koj scroll dhau los ntawm sab saum toj lossis hauv qab ntawm lub modal hauv ob qho ntawm cov khoom siv 'browser, cov <body>ntsiab lus yuav pib scroll. Saib Chrome kab #175502 (tso nyob rau hauv Chrome v40) thiab WebKit kab #153852 .

iOS text teb thiab scrolling

Raws li ntawm iOS 9.3, thaum lub modal qhib, yog tias qhov pib kov ntawm ib qho taw qhia scroll nyob rau hauv ciam teb ntawm cov ntawv nyeem <input>lossis a <textarea>, cov <body>ntsiab lus hauv qab lub modal yuav scrolled es tsis txhob ntawm tus qauv nws tus kheej. Saib WebKit kab mob #153856 .

Cov keyboards virtual

Tsis tas li ntawd, nco ntsoov tias yog tias koj siv lub navbar ruaj khov lossis siv cov khoom nkag hauv lub modal, iOS no muaj cov kab rendering uas tsis hloov txoj hauj lwm ntawm cov ntsiab lus ruaj thaum lub virtual keyboard tshwm sim. Ob peb workarounds rau qhov no suav nrog kev hloov koj cov ntsiab lus mus rau position: absolutelossis thov lub sijhawm teem sijhawm los sim kho qhov chaw ntawm tus kheej. Qhov no tsis yog ua los ntawm Bootstrap, yog li nws yog nyob ntawm koj los txiav txim siab qhov kev daws teeb meem zoo tshaj rau koj daim ntawv thov.

Navbar Dropdowns

Lub .dropdown-backdropcaij tsis siv rau iOS no hauv nav vim qhov nyuaj ntawm z-indexing. Yog li, txhawm rau kaw cov dropdowns hauv navbars, koj yuav tsum ncaj qha nyem qhov poob qis (lossis lwm yam khoom uas yuav tua cov kev tshwm sim nyem hauv iOS ).

Browser zooming

Nplooj ntawv zooming inevitably nthuav qhia cov khoom cuav hauv qee cov khoom, ob qho tib si hauv Bootstrap thiab lwm lub vev xaib. Nyob ntawm qhov teeb meem, peb tuaj yeem kho nws (nrhiav ua ntej thiab qhib qhov teeb meem yog tias xav tau). Txawm li cas los xij, peb nyiam tsis quav ntsej cov no vim lawv feem ntau tsis muaj kev daws teeb meem uas tsis yog hacky workarounds.

Sticky :hover/ :focusntawm mobile

Txawm hais tias hovering tiag tiag tsis tuaj yeem ua tau ntawm feem ntau cov touchscreens, feem ntau cov browsers mobile emulate hovering kev txhawb nqa thiab ua :hover"nplaum". Hauv lwm lo lus, :hovercov qauv pib siv tom qab kais ib lub caij thiab tsuas yog tso tseg tsis siv tom qab tus neeg siv kais qee yam khoom. Qhov no tuaj yeem ua rau Bootstrap lub :hoverxeev los ua qhov tsis xav tau "kab" ntawm cov browsers. Qee qhov browsers mobile kuj ua rau :focuszoo sib xws. Tam sim no tsis muaj kev daws teeb meem yooj yim rau cov teeb meem no dua li tshem tawm cov qauv no nkaus xwb.

Kev luam ntawv

Txawm nyob hauv qee qhov browsers niaj hnub no, luam ntawv tuaj yeem ua qhov txawv txav.

Tshwj xeeb, raws li ntawm Chrome v32 thiab tsis hais txog ntawm cov npoo npoo, Chrome siv qhov dav dav dav dav nqaim dua li daim ntawv loj ntawm lub cev thaum daws cov lus nug xov xwm thaum luam tawm nplooj ntawv web. Qhov no tuaj yeem ua rau Bootstrap cov kab sib txuas ntxiv me me tau npaj txhij txog qhib thaum luam ntawv. Saib qhov teeb meem #12078 thiab Chrome kab #273306 rau qee cov ntsiab lus. Cov tswv yim daws teeb meem:

• Muab daim phiaj me me ntxiv thiab xyuas kom koj cov nplooj ntawv zoo li tau txais hauv qab nws.
• Customize qhov tseem ceeb ntawm @screen-*Less variables kom koj daim ntawv tshuab luam ntawv suav hais tias loj dua qhov me me.
• Ntxiv kev cai xov xwm queries los hloov daim phiaj loj breakpoints rau luam tawm xwb.

Tsis tas li ntawd, raws li Safari v8.0, qhov dav-dav .containers tuaj yeem ua rau Safari siv qhov txawv me me font loj thaum luam ntawv. Saib #14868 thiab WebKit kab #138192 kom paub meej ntxiv. Ib qho kev daws teeb meem rau qhov no yog ntxiv CSS hauv qab no:

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

Android Tshuag browser

Tawm ntawm lub thawv, Android 4.1 (thiab txawm tias qee qhov kev tshaj tawm tshiab pom meej) xa nrog Browser app raws li lub vev xaib browser xaiv (tsis yog Chrome). Hmoov tsis zoo, Browser app muaj ntau cov kab thiab tsis sib xws nrog CSS feem ntau.

Xaiv cov zaub mov

Ntawm <select>cov ntsiab lus, Android Tshuag browser yuav tsis tso saib cov kev tswj hwm sab yog tias muaj border-radiusthiab / lossis bordersiv. (Saib cov lus nug StackOverflow no kom paub meej.) Siv cov snippet ntawm cov cai hauv qab no kom tshem tawm CSS ua txhaum cai thiab muab cov <select>khoom ua tsis zoo ntawm Android Tshuag browser. Tus neeg siv tus neeg sawv cev sniffing zam kev cuam tshuam nrog Chrome, Safari, thiab Mozilla browsers.

<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>

Xav pom ib qho piv txwv? Mus saib no JS Bin demo.

Cov validators

Txhawm rau muab cov kev paub zoo tshaj plaws rau cov laus thiab cov neeg siv khoom tsis zoo, Bootstrap siv CSS browser hacks hauv ntau qhov chaw txhawm rau tsom CSS tshwj xeeb rau qee qhov browser versions txhawm rau ua haujlwm nyob ib puag ncig cov kab hauv browsers lawv tus kheej. Cov hacks no nkag siab ua rau CSS validators yws tias lawv tsis raug. Nyob rau hauv ob peb qhov chaw, peb kuj siv los ntshav-ntug CSS nta uas tseem tsis tau tag nrho cov qauv, tab sis cov no yog siv dawb huv rau kev nce qib.

Cov lus ceeb toom kev lees paub no tsis muaj teeb meem hauv kev xyaum txij li qhov tsis yog-hacky ntawm peb CSS tau siv tau tag nrho thiab cov feem hacky tsis cuam tshuam nrog kev ua haujlwm zoo ntawm qhov tsis yog hacky, yog li vim li cas peb txhob txwm tsis quav ntsej cov lus ceeb toom tshwj xeeb no.

Peb cov ntaub ntawv HTML ib yam li muaj qee qhov tsis tseem ceeb thiab tsis tsim nyog HTML validation ceeb toom vim peb suav nrog kev ua haujlwm rau qee yam kab mob Firefox .

Kev txhawb nqa thib peb

Txawm hais tias peb tsis tau txhawb nqa lwm tus neeg sab nrauv plugins lossis add-ons, peb muab qee cov lus qhia muaj txiaj ntsig los pab kom tsis txhob muaj teeb meem hauv koj cov haujlwm.

Box-sizing

Qee qhov software thib peb, suav nrog Google Maps thiab Google Custom Search Engine, tsis sib haum xeeb nrog Bootstrap vim yog * { box-sizing: border-box; }, txoj cai uas ua rau nws paddingtsis cuam tshuam rau qhov kawg suav dav ntawm lub ntsiab lus. Kawm ntxiv txog lub thawv qauv thiab qhov loj me ntawm CSS Tricks .

Nyob ntawm cov ntsiab lus, koj tuaj yeem hla dhau qhov xav tau (Kev Xaiv 1) lossis rov pib dua lub thawv-qhov loj me rau tag nrho cov cheeb tsam (Kev Xaiv 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();
}

Kev siv tau

Bootstrap ua raws li cov qauv hauv lub vev xaib thiab - nrog rau kev siv zog tsawg tsawg - tuaj yeem siv los tsim cov vev xaib uas siv tau rau cov neeg siv AT .

Hla navigation

Yog tias koj qhov kev taw qhia muaj ntau qhov txuas thiab tuaj ua ntej cov ntsiab lus tseem ceeb hauv DOM, ntxiv qhov Skip to main contenttxuas ua ntej kev taw qhia (rau cov lus piav qhia yooj yim, saib tsab xov xwm A11Y Project no ntawm hla kev txuas txuas ). Siv cov .sr-onlychav kawm yuav pom qhov muag zais qhov hla qhov txuas, thiab cov .sr-only-focusablechav kawm yuav xyuas kom meej tias qhov txuas yuav pom ib zaug tsom (rau cov neeg siv cov keyboard pom).

<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>

Nested headings

Thaum nesting headings ( <h1>- <h6>), koj thawj daim ntawv header yuav tsum yog <h1>. Cov kab hauv qab no yuav tsum ua kom muaj kev sib cav <h2>-<h6> xws li cov neeg nyeem ntawv tuaj yeem tsim cov ntsiab lus rau koj cov nplooj ntawv.

Kawm ntxiv ntawm HTML CodeSniffer thiab Penn State's AccessAbility .

Xim sib txawv

Tam sim no, qee qhov kev sib xyaw xim ua ntej muaj nyob rau hauv Bootstrap (xws li ntau yam styled khawm cov chav kawm, qee qhov ntawm cov cim qhia cov xim siv rau cov lej hauv paus , cov .bg-primary ntsiab lus hauv qab pab pawg, thiab cov xim txuas txuas ntxiv thaum siv rau tom qab dawb) muaj qhov sib piv qis (hauv qab qhov pom zoo piv ntawm 4.5: 1 ). Qhov no tuaj yeem ua rau muaj teeb meem rau cov neeg siv uas tsis pom kev lossis cov uas muaj xim tsis pom kev. Cov xim zoo li no yuav tsum tau hloov kho kom lawv qhov sib txawv thiab pom tseeb.

Cov peev txheej ntxiv

• "HTML Codesniffer" bookmarklet rau kev txheeb xyuas cov teeb meem nkag tau yooj yim
• Chrome's Accessibility Developer Tools extension
• Xim Contrast Analyzer
• Qhov project A11Y
• MDN cov ntaub ntawv nkag mus tau yooj yim

Daim ntawv tso cai FAQs

Bootstrap yog tso tawm raws li MIT daim ntawv tso cai thiab yog copyright 2016 Twitter. Boiled mus rau me me chunks, nws tuaj yeem piav qhia nrog cov xwm txheej hauv qab no.

Nws xav kom koj:

• Khaws daim ntawv tso cai thiab daim ntawv ceeb toom txwv tsis pub muaj nyob hauv Bootstrap's CSS thiab JavaScript cov ntaub ntawv thaum koj siv lawv hauv koj cov haujlwm

Nws tso cai rau koj mus:

• Dawb download tau thiab siv Bootstrap, tag nrho lossis ib feem, rau tus kheej, ntiag tug, tuam txhab sab hauv, lossis kev lag luam
• Siv Bootstrap hauv pob khoom lossis kev faib khoom uas koj tsim
• Hloov kho qhov chaws
• Muab ib daim ntawv tso cai los hloov kho thiab faib Bootstrap rau cov neeg thib peb uas tsis suav nrog hauv daim ntawv tso cai

Nws txwv koj:

• Tuav cov kws sau ntawv thiab cov tswv daim ntawv tso cai lav rau kev puas tsuaj raws li Bootstrap tau muab yam tsis muaj warranty
• Tuav tus tsim lossis cov tuav pov hwm ntawm Bootstrap lav
• Rov faib ib qho ntawm Bootstrap yam tsis muaj qhov tsim nyog
• Siv cov cim uas muaj los ntawm Twitter hauv txhua txoj kev uas yuav hais lossis qhia tias Twitter pom zoo rau koj qhov kev faib tawm
• Siv cov cim uas muaj los ntawm Twitter hauv txhua txoj kev uas yuav hais lossis qhia tias koj tsim Twitter software hauv nqe lus nug

Nws tsis xav kom koj:

• suav nrog lub hauv paus ntawm Bootstrap nws tus kheej, los yog ntawm ib qho kev hloov kho uas koj yuav tau ua rau nws, nyob rau hauv ib qho redistribution koj tuaj yeem sib sau ua ke uas suav nrog nws
• Xa cov kev hloov pauv uas koj ua rau Bootstrap rov qab mus rau qhov project Bootstrap (txawm hais tias cov lus qhia no tau txhawb nqa)

Daim ntawv tso cai Bootstrap tag nrho nyob rau hauv qhov project repository kom paub ntau ntxiv.

Kev txhais lus

Cov tswv cuab hauv zej zog tau txhais Bootstrap cov ntaub ntawv ua ntau hom lus. Tsis muaj leej twg tau txais kev txhawb nqa thiab tej zaum lawv yuav tsis hloov mus tas li.

• Bootstrap 中文文档 (Suav)
• Bootstrap 3 中文手冊 (Suav (Tseeb))
• Bootstrap ntawm Dansk (Danish)
• Bootstrap en Français (Fabkis)
• Bootstrap rau Deutsch (German)
• Bootstrap hauv Italiano (Italian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português rau Brasil (Brazilian Portuguese)
• Bootstrap по-русски (Lavxias teb sab)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Nyab laj teb)

Peb tsis pab npaj los yog host translations, peb tsuas yog txuas rau lawv.

Ua tiav qhov kev txhais lus tshiab lossis zoo dua? Qhib daim ntawv thov rub nws ntxiv rau peb daim ntawv teev npe.