Tsitsani

Bootstrap (pakali pano v3.4.1) ili ndi njira zingapo zosavuta zoyambira msanga, iliyonse imakopa luso losiyana ndi momwe mungagwiritsire ntchito. Werengani kuti muwone zomwe zikugwirizana ndi zosowa zanu.

jsDelivr

Anthu aku jsDelivr mokoma mtima amapereka chithandizo cha CDN pa CSS ya Bootstrap ndi JavaScript. Ingogwiritsani ntchito maulalo awa a 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>

Ikani ndi Bower

Mutha kukhazikitsanso ndikuwongolera Zochepa za Bootstrap, CSS, JavaScript, ndi mafonti pogwiritsa ntchito Bower :

bower install bootstrap

Ikani ndi npm

Mukhozanso kukhazikitsa Bootstrap pogwiritsa ntchito npm :

npm install bootstrap@3

require('bootstrap')idzatsegula mapulagini onse a Bootstrap a jQuery pa chinthu cha jQuery. Module bootstrappalokha situmiza kunja chilichonse. Mutha kuyika mapulagini a Bootstrap a jQuery payekhapayekha pokweza /js/*.jsmafayilo pansi pa chikwatu chapamwamba cha phukusi.

Bootstrap's package.jsonili ndi metadata yowonjezera pansi pa makiyi awa:

• less- njira yopita ku fayilo yayikulu ya Bootstrap ya Less source
• style- njira yopita ku CSS yosagwirizana ndi Bootstrap yomwe idakonzedweratu pogwiritsa ntchito zosintha (palibe makonda)

Ikani ndi Composer

Mutha kukhazikitsanso ndikuwongolera Zochepa za Bootstrap, CSS, JavaScript, ndi mafonti pogwiritsa ntchito Composer :

composer require twbs/bootstrap

Autoprefixer yofunikira pa Less/Sass

Bootstrap imagwiritsa ntchito Autoprefixer kuthana ndi zoyambira za ogulitsa CSS . Ngati mukulemba Bootstrap kuchokera ku Less/Sass gwero lake ndipo osagwiritsa ntchito Gruntfile yathu, muyenera kuphatikiza Autoprefixer pakupanga kwanu nokha. Ngati mukugwiritsa ntchito Bootstrap yopangidwa kale kapena kugwiritsa ntchito Gruntfile yathu, simuyenera kuda nkhawa ndi izi chifukwa Autoprefixer yaphatikizidwa kale mu Gruntfile yathu.

Zomwe zikuphatikizidwa

Bootstrap imatsitsidwa m'njira ziwiri, momwe mungapezere zolemba ndi mafayilo otsatirawa, ndikuyika m'magulu azinthu zomwe zimagwirizana ndikupereka mitundu yonse yophatikizidwa komanso yocheperako.

Bootstrap yopangidwa kale

Mukatsitsa, tsegulani chikwatu choponderezedwa kuti muwone mawonekedwe a (wophatikizidwa) Bootstrap. Mudzawona chonga ichi:

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

Uwu ndiye mtundu wofunikira kwambiri wa Bootstrap: mafayilo opangidwa kale kuti mugwiritse ntchito mwachangu pafupifupi pulojekiti iliyonse. Timapereka CSS ndi JS ( bootstrap.*), kuphatikizapo CSS ndi JS ( bootstrap.min.*). Mamapu a CSS ( bootstrap.*.map) alipo kuti agwiritsidwe ntchito ndi zida zopangira asakatuli ena. Mafonti ochokera ku Glyphicons akuphatikizidwa, monganso mutu wa Bootstrap wosankha.

Bootstrap source code

The Bootstrap source code download imaphatikizapo CSS, JavaScript, ndi font assets, komanso source Less, JavaScript, ndi zolemba. Mwachindunji, zikuphatikizapo zotsatirazi ndi zina:

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

The less/, js/, ndipo fonts/ndi magwero a CSS, JS, ndi zilembo zazithunzi (motsatira). Chikwatucho dist/chimaphatikizapo zonse zomwe zalembedwa mugawo lotsitsa lomwe lasanjidwa pamwambapa. Fodayi docs/imaphatikizapo gwero la zolemba zathu, komanso examples/kugwiritsa ntchito Bootstrap. Kupitilira apo, fayilo ina iliyonse yophatikizidwa imapereka chithandizo pamaphukusi, zidziwitso zamalayisensi, ndi chitukuko.

Kupanga CSS ndi JavaScript

Bootstrap imagwiritsa ntchito Grunt pamakina ake omanga, ndi njira zosavuta zogwirira ntchito ndi chimango. Ndi momwe timapangira ma code athu, kuyesa mayeso, ndi zina zambiri.

Kukhazikitsa Grunt

Kuti muyike Grunt, muyenera kutsitsa ndikuyika node.js (yomwe imaphatikizapo npm). npm imayimira ma node packaged modules ndipo ndi njira yoyendetsera kudalira kwachitukuko kudzera node.js.

1. Ikani grunt-clipadziko lonse lapansi ndi npm install -g grunt-cli.
2. Pitani ku root /bootstrap/directory, kenako thamangani npm install. npm idzayang'ana package.jsonfayilo ndikuyika zokha zodalira zomwe zalembedwa pamenepo.

Mukamaliza, mudzatha kuyendetsa malamulo osiyanasiyana a Grunt operekedwa kuchokera pamzere wolamula.

Malamulo a Grunt alipo

grunt dist(Ingophatikizani CSS ndi JavaScript)

Imakonzanso /dist/chikwatucho ndi mafayilo ophatikizidwa ndi ma CSS ndi JavaScript. Monga wogwiritsa ntchito Bootstrap, ili ndi lamulo lomwe mukufuna.

grunt watch(Penyani)

Imawonera mafayilo Ocheperako ndikungowabwezeranso ku CSS nthawi iliyonse mukasunga zosintha.

grunt test(Thamangani mayeso)

Imayendetsa JSHnt ndikuyesa mayeso a QUnit mu asakatuli enieni chifukwa cha Karma .

grunt docs(Pangani & yesani katundu wa ma docs)

Amamanga ndi kuyesa CSS, JavaScript, ndi zinthu zina zomwe zimagwiritsidwa ntchito polemba zolembedwa kwanuko kudzera bundle exec jekyll serve.

grunt(Pangani chilichonse ndikuyesa mayeso)

Imaphatikiza ndikuchepetsa CSS ndi JavaScript, imapanga tsamba lazolemba, imayendetsa HTML5 yovomerezeka motsutsana ndi zolemba, imapanganso katundu wa Customizer, ndi zina zambiri. Imafunika Jekyll . Nthawi zambiri zimangofunika ngati mukubera Bootstrap yokha.

Kusaka zolakwika

Mukakumana ndi zovuta pakuyika zodalira kapena kugwiritsa ntchito malamulo a Grunt, choyamba chotsani /node_modules/chikwatu chopangidwa ndi npm. Kenako, bwerezaninso npm install.

Basic template

Yambani ndi template iyi ya HTML, kapena sinthani zitsanzo izi . Tikukhulupirira kuti mukonza ma tempulo ndi zitsanzo zathu, kuzisintha kuti zigwirizane ndi zosowa zanu.

Lembani HTML ili pansipa kuti muyambe kugwira ntchito ndi zolemba zochepa za 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>

Zitsanzo

Mangani pa template yoyambira pamwambapa ndi zigawo zambiri za Bootstrap. Tikukulimbikitsani kuti musinthe ndikusintha Bootstrap kuti igwirizane ndi zosowa za polojekiti yanu.

Pezani gwero lachitsanzo chilichonse pansipa potsitsa zosungira za Bootstrap . Zitsanzo zitha kupezeka m'ndandanda docs/examples/.

Kugwiritsa ntchito chimango

template yoyambira

Palibe koma zofunikira: CSS yopangidwa ndi JavaScript pamodzi ndi chidebe.

Mutu wa Bootstrap

Kwezani mutu womwe mwasankha wa Bootstrap kuti muwoneke bwino.

Magulu

Zitsanzo zingapo zamapangidwe a gridi okhala ndi magawo anayi onse, zisa, ndi zina zambiri.

Jumbotron

Mangani mozungulira jumbotron ndi navbar ndi mizati yoyambira.

Narrow jumbotron

Pangani tsamba lokhazikika pochepetsa chidebe chokhazikika ndi jumbotron.

Ma Navbar akugwira ntchito

Navbar

Template yapamwamba kwambiri yomwe imaphatikizapo navbar pamodzi ndi zina zowonjezera.

Static top navbar

Super Basic template yokhala ndi navbar yapamwamba komanso zina zowonjezera.

Navbar yokhazikika

Super Basic template yokhala ndi navbar yokhazikika komanso zina zowonjezera.

Custom zigawo

Chophimba

Tsamba limodzi lopangira masamba osavuta komanso okongola.

Carousel

Sinthani navbar ndi carousel, ndikuwonjezera zina zatsopano.

Blog

Mawonekedwe osavuta amizere iwiri yamabulogu okhala ndi makonda, mutu, ndi mtundu.

Dashboard

Mapangidwe oyambira a dashboard ya admin yokhala ndi sidebar yokhazikika ndi navbar.

Tsamba lolowera

Mawonekedwe a makonda ndi kapangidwe kachizindikiro chosavuta mu mawonekedwe.

Zolungamitsidwa nav

Pangani navbar yokhazikika yokhala ndi maulalo oyenera. Mungodziwiratu! Osati kwambiri Safari wochezeka.

Zomata pansi

Ikani pansi pa malo owonera pamene zomwe zili zazifupi kuposa izo.

Chomata chapansi chokhala ndi navbar

Ikani pansi pa malo owonera ndi navbar yokhazikika pamwamba.

Zoyesera

Bootstrap yosayankha

Letsani kuyankha kwa Bootstrap mosavuta pama docs athu .

Off-canvas

Pangani menyu yosunthika kuchokera ku canvas kuti mugwiritse ntchito ndi Bootstrap.

Zida

Bootlint

Bootlint ndiye chida chovomerezeka cha Bootstrap HTML. Imangoyang'ana zolakwika zingapo za HTML m'masamba omwe akugwiritsa ntchito Bootstrap mwanjira ya "vanilla". Magawo / ma widget a Vanilla Bootstrap amafunikira magawo awo a DOM kuti agwirizane ndi zina. Bootlint amayang'ana kuti magawo a Bootstrap ali ndi HTML yokonzedwa bwino. Ganizirani zowonjeza Bootlint ku Bootstrap tsamba lanu lachitukuko cha zida kuti pasakhale cholakwika chilichonse chomwe chimachepetsa kukula kwa polojekiti yanu.

Community

Khalani odziwa za kakulidwe ka Bootstrap ndikufikira anthu ammudzi ndi zinthu zothandizazi.

• Werengani ndikulembetsa ku The Official Bootstrap Blog .
• Chezani ndi ma Bootstrapper anzanu pogwiritsa ntchito IRC mu irc.freenode.netseva, mu ##bootstrap channel .
• Kuti muthandizidwe pogwiritsa ntchito Bootstrap, funsani pa StackOverflow pogwiritsa ntchito tagtwitter-bootstrap-3 .
• Madivelopa akuyenera kugwiritsa ntchito mawu osakira bootstrappamaphukusi omwe amasintha kapena kuwonjezera magwiridwe antchito a Bootstrap akamagawa kudzera mu npm kapena njira zofananira zotumizira kuti adziwike kwambiri.
• Pezani zitsanzo zolimbikitsa za anthu omanga ndi Bootstrap pa Bootstrap Expo .

Mutha kutsatiranso @getbootstrap pa Twitter pazamiseche zaposachedwa komanso makanema ochititsa chidwi anyimbo.

Kulepheretsa kuyankha

Bootstrap imangosintha masamba anu kuti aziwoneka mosiyanasiyana. Umu ndi momwe mungaletsere izi kuti tsamba lanu lizigwira ntchito ngati chitsanzo chosalabadira .

Njira zoletsa kuyankhidwa kwatsamba

1. Siyani malo owonera omwe <meta>atchulidwa muzolemba za CSS
2. Lembani widthpa gawo .containerlililonse la gridi ndi m'lifupi mwake, mwachitsanzo width: 970px !important;Onetsetsani kuti izi zimabwera pambuyo pa CSS ya Bootstrap. Mutha kupewa mwasankha !importantndi mafunso azama media kapena selector-fu.
3. Ngati mukugwiritsa ntchito navbar, chotsani ma navbar onse akugwa ndikukula.
4. Pa masanjidwe a gridi, gwiritsani ntchito .col-xs-*makalasi kuwonjezera, kapena m'malo mwa apakati / akulu. Osadandaula, gridi yazida zing'onozing'ono zimafikira kumalingaliro onse.

Mudzafunikabe Respond.js ya IE8 (popeza mafunso athu atolankhani akadalipo ndipo akuyenera kukonzedwa). Izi zimayimitsa "tsamba la m'manja" la Bootstrap.

Bootstrap template yokhala ndi kuyankha koyimitsidwa

Tagwiritsa ntchito izi pa chitsanzo. Werengani gwero lake kuti muwone zosintha zomwe zakhazikitsidwa.

Onani chitsanzo chosayankha

Thandizo la msakatuli ndi chipangizo

Bootstrap imapangidwa kuti izigwira ntchito bwino pamakompyuta aposachedwa ndi asakatuli am'manja, kutanthauza kuti asakatuli akale amatha kuwonetsa mosiyanasiyana, ngakhale akugwira ntchito mokwanira, kumasulira kwazinthu zina.

Asakatuli othandizidwa

Makamaka, timathandizira mitundu yaposachedwa ya asakatuli ndi nsanja zotsatirazi.

Asakatuli ena omwe amagwiritsa ntchito mtundu waposachedwa kwambiri wa WebKit, Blink, kapena Gecko, kaya mwachindunji kapena kudzera pawebusayiti ya API, samathandizidwa. Komabe, Bootstrap iyenera (nthawi zambiri) kuwonetsa ndikugwira ntchito moyenera msakatuliwanso. Zambiri zothandizira zikuperekedwa pansipa.

Zida zam'manja

Nthawi zambiri, Bootstrap imathandizira mitundu yaposachedwa ya asakatuli amtundu uliwonse. Dziwani kuti asakatuli a proxy (monga Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) sagwiritsidwa ntchito.

Asakatuli apakompyuta

Mofananamo, mitundu yaposachedwa ya asakatuli ambiri apakompyuta imathandizidwa.

Pa Windows, timathandizira Internet Explorer 8-11 .

Kwa Firefox, kuwonjezera pa kumasulidwa kokhazikika kwaposachedwa, timathandiziranso mtundu waposachedwa wa Extended Support Release (ESR) wa Firefox.

Mosavomerezeka, Bootstrap iyenera kuyang'ana ndikuchita bwino mu Chromium ndi Chrome ya Linux, Firefox ya Linux, ndi Internet Explorer 7, komanso Microsoft Edge, ngakhale sizimathandizidwa.

Kuti mupeze mndandanda wazovuta zina za msakatuli zomwe Bootstrap ikuyenera kulimbana nazo, onani Wall of browser bugs .

Internet Explorer 8 ndi 9

Internet Explorer 8 ndi 9 imathandizidwanso, komabe, chonde dziwani kuti zinthu zina za CSS3 ndi HTML5 sizimathandizidwa mokwanira ndi asakatuliwa. Kuphatikiza apo, Internet Explorer 8 imafuna kugwiritsa ntchito Respond.js kuti ithandizire kuthandizira pafunso la media.

Pitani Kodi ndingagwiritse ntchito... kuti mudziwe zambiri za chithandizo cha msakatuli cha CSS3 ndi HTML5.

Internet Explorer 8 ndi Respond.js

Chenjerani ndi zidziwitso zotsatirazi mukamagwiritsa ntchito Respond.js m'malo anu otukuka komanso opangira Internet Explorer 8.

Respond.js ndi CSS-domain-domain

Kugwiritsa ntchito Respond.js yokhala ndi CSS yosungidwa kumalo osiyanasiyana (mwachitsanzo, pa CDN) kumafuna kukhazikitsidwa kwina. Onani zolemba za Respond.js kuti mumve zambiri.

Respond.js ndifile://

Chifukwa cha malamulo achitetezo a msakatuli, Respond.js sigwira ntchito ndi masamba omwe amawonedwa kudzera mu file://protocol (monga potsegula fayilo yapafupi ya HTML). Kuti muyese mawonekedwe omvera mu IE8, onani masamba anu pa HTTP(S). Onani zolemba za Respond.js kuti mumve zambiri.

Respond.js ndi@import

Respond.js sikugwira ntchito ndi CSS yomwe imatchulidwa kudzera pa @import. Makamaka, masinthidwe ena a Drupal amadziwika kuti amagwiritsa ntchito @import. Onani zolemba za Respond.js kuti mumve zambiri.

Internet Explorer 8 ndi kukula kwa bokosi

IE8 sichirikiza kwathunthu box-sizing: border-box;ikaphatikizidwa ndi min-width, max-width, min-height, kapena max-height. Pachifukwa chimenecho, kuyambira v3.0.1, sitigwiritsanso ntchito max-widthpa .containers.

Internet Explorer 8 ndi @font-face

IE8 ili ndi zovuta zina @font-faceikaphatikizidwa ndi :before. Bootstrap imagwiritsa ntchito kuphatikiza kumeneko ndi Glyphicons zake. Ngati tsamba lasungidwa, ndikukwezedwa popanda mbewa pawindo (mwachitsanzo, dinani batani lotsitsimutsa kapena kutsitsa china chake mu iframe) ndiye tsambalo limaperekedwa mafonti asanafike. Kuyenda pamwamba pa tsamba (thupi) kuwonetsa zina mwazithunzi ndikuyenda pamwamba pazithunzi zomwe zatsala ziwonetsanso. Onani nkhani #13863 kuti mumve zambiri.

IE Compatibility modes

Bootstrap sichirikizidwa mumayendedwe akale a Internet Explorer. Kuti mutsimikize kuti mukugwiritsa ntchito mawonekedwe aposachedwa kwambiri a IE, ganizirani kuphatikiza <meta>tag yoyenera patsamba lanu:

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

Tsimikizirani mawonekedwe a chikalatacho potsegula zida zosinthira: dinani F12ndikuyang'ana "Document Mode".

Chizindikirochi chikuphatikizidwa m'zolemba zonse za Bootstrap ndi zitsanzo kuti zitsimikizire kumasulira kwabwino kwambiri mumtundu uliwonse wothandizidwa wa Internet Explorer.

Onani funso ili la StackOverflow kuti mumve zambiri.

Internet Explorer 10 mu Windows 8 ndi Windows Phone 8

Internet Explorer 10 simasiyanitsa kukula kwa chipangizo ndi m'lifupi mwa malo owonera , motero sichigwiritsa ntchito moyenera mafunso atolankhani mu CSS ya Bootstrap. Nthawi zambiri mumangowonjezera kachidutswa kakang'ono ka CSS kuti mukonze izi:

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

Komabe, izi sizikugwira ntchito pazida zomwe zimagwiritsa ntchito mitundu ya Windows Phone 8 yakale kuposa Update 3 (aka GDR3) , chifukwa zimapangitsa kuti zida zotere ziwonetsere mawonekedwe apakompyuta m'malo mwa "foni" yopapatiza. Kuti muchite izi, mufunika kuphatikiza CSS ndi JavaScript zotsatirazi kuti mugwiritse ntchito cholakwikacho .

@-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)
}

Kuti mudziwe zambiri ndi malangizo ogwiritsira ntchito, werengani Windows Phone 8 ndi Device-Width .

Monga mutu, tikuphatikiza izi muzolemba zonse za Bootstrap ndi zitsanzo ngati chiwonetsero.

Safari peresenti yozungulira

Injini yomasulira yamitundu ya Safari isanachitike v7.1 ya OS X ndi Safari ya iOS v8.0 inali ndi vuto ndi kuchuluka kwa malo omwe amagwiritsidwa ntchito m'makalasi athu .col-*-1a grid. Chifukwa chake ngati mutakhala ndi magawo 12 amtundu uliwonse, mutha kuwona kuti adabwera achidule poyerekeza ndi mizere ina. Kupatula kukulitsa Safari/iOS, muli ndi njira zina zogwirira ntchito:

• Onjezani kugawo .pull-rightlanu lomaliza la gridi kuti mulumikizane bwino kumanja
• Sinthani maperesenti anu pamanja kuti mupeze kuzungulira kwabwino kwa Safari (kovuta kwambiri kuposa njira yoyamba)

Ma modal, navbar, ndi ma kiyibodi enieni

Kusefukira ndi kupukusa

Thandizo overflow: hiddenpa <body>chinthucho ndi chochepa mu iOS ndi Android. Kuti izi zitheke, mukamadutsa pamwamba kapena pansi pa modal mu msakatuli uliwonse wa zidazo, zomwe <body>zili mkatimo zimayamba kusuntha. Onani Chrome bug #175502 (yokhazikika mu Chrome v40) ndi WebKit bug #153852 .

iOS malemba minda ndi scrolling

Pofika pa iOS 9.3, pomwe modal imatsegulidwa, ngati kukhudza koyambirira kwa mpukutu kumakhala m'malire a malemba <input>kapena a <textarea>, zomwe <body>zili pansi pa modal zidzasunthidwa m'malo mwa modal yokha. Onani cholakwika cha WebKit #153856 .

Ma kiyibodi a Virtual

Komanso, dziwani kuti ngati mukugwiritsa ntchito navbar yokhazikika kapena kugwiritsa ntchito zolowetsa mkati mwa modal, iOS ili ndi cholakwika chomwe sichisintha malo azinthu zokhazikika pomwe kiyibodi yeniyeni yayambika. Njira zingapo zochitira izi zikuphatikiza kusintha zinthu zanu kukhala position: absolutekapena kuyitanitsa chowerengera kuti muyese kukonza pamanja. Izi sizimayendetsedwa ndi Bootstrap, chifukwa chake zili ndi inu kusankha njira yomwe ili yabwino kwambiri pakugwiritsa ntchito kwanu.

Navbar Dropdowns

Chinthucho .dropdown-backdropsichimagwiritsidwa ntchito pa iOS mu nav chifukwa cha zovuta za z-indexing. Chifukwa chake, kuti mutseke zotsikira mu navbars, muyenera kudina mwachindunji chinthucho (kapena china chilichonse chomwe chingatsegule chochitika mu iOS ).

Kukulitsa msakatuli

Kuyang'ana masamba mosalephera kumapereka zinthu zakale muzinthu zina, mu Bootstrap ndi intaneti yonse. Kutengera ndi vuto, titha kukonza (fufuzani kaye kenako ndikutsegulanso ngati pakufunika kutero). Komabe, timakonda kunyalanyaza izi chifukwa nthawi zambiri alibe yankho lachindunji kupatula ma workaround achinyengo.

Zomata :hover/ :focuspa mafoni

Ngakhale kuyendayenda kwenikweni sikungatheke pazithunzi zambiri, asakatuli ambiri am'manja amatsanzira chithandizo chokhazikika ndikupanga :hover"chomata". Mwa kuyankhula kwina, :hovermasitayelo amayamba kugwira ntchito atadina chinthucho ndipo amangosiya kugwiritsa ntchito pambuyo poti wagwiritsa ntchito chinthu china. Izi zitha kupangitsa kuti mayiko a Bootstrap :hoverakhale "osakhazikika" pakusakatula kotere. Ma msakatuli ena am'manja amapangitsanso :focuschimodzimodzi. Pakalipano palibe njira yosavuta yothetsera nkhaniyi kupatula kuchotsa masitayelo otere.

Kusindikiza

Ngakhale m'masakatuli ena amakono, kusindikiza kungakhale kosokoneza.

Makamaka, monga Chrome v32 ndipo mosasamala kanthu za makonda am'mphepete, Chrome imagwiritsa ntchito mawonekedwe owonera mocheperapo kuposa kukula kwa pepala poyankha mafunso atolankhani ndikusindikiza tsamba. Izi zitha kupangitsa kuti grid yaing'ono ya Bootstrap iyambike mosayembekezereka posindikiza. Onani nkhani #12078 ndi Chrome bug #273306 kuti mumve zambiri. Njira zoyeserera:

• Landirani gridi yaying'ono ndikuwonetsetsa kuti tsamba lanu likuwoneka lovomerezeka pansi pake.
• Sinthani makonda a @screen-*Zocheperako kuti pepala lanu losindikiza liwoneke ngati lalikulu kuposa laling'ono.
• Onjezani mafunso azama media kuti musinthe ma breakpoints a grid kuti asindikize media okha.

Komanso, monga Safari v8.0, fixed-width .containers ingayambitse Safari kugwiritsa ntchito font yaying'ono posindikiza. Onani #14868 ndi WebKit bug #138192 kuti mumve zambiri. Njira imodzi yochitira izi ndikuwonjezera CSS iyi:

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

Android stock browser

Kuchokera m'bokosilo, Android 4.1 (ndiponso zotulutsa zatsopano) zimatumiza ndi pulogalamu ya Msakatuli ngati msakatuli wosankha (mosiyana ndi Chrome). Tsoka ilo, pulogalamu ya Msakatuli ili ndi zolakwika zambiri komanso zosagwirizana ndi CSS yonse.

Sankhani mindandanda yazakudya

Pazinthu <select>, msakatuli wa stock wa Android sawonetsa zowongolera zam'mbali ngati pali ndi border-radius/ kapena borderkugwiritsidwa ntchito. (Onani funso ili la StackOverflow kuti mumve zambiri.) Gwiritsani ntchito kaduka kakang'ono ka khodi ili m'munsimu kuti muchotse CSS yolakwayo ndikupereka <select>ngati chinthu chosasinthidwa pa msakatuli wa stock wa Android. Wogwiritsa ntchito akununkhiza amapewa kusokoneza asakatuli a Chrome, Safari, ndi 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>

Mukufuna kuwona chitsanzo? Onani chiwonetsero cha JS Bin ichi.

Otsimikizira

Kuti apereke chidziwitso chabwino kwambiri kwa asakatuli akale ndi ngolo, Bootstrap imagwiritsa ntchito ma hacks a CSS m'malo angapo kulunjika CSS yapadera kumitundu ina ya asakatuli kuti azitha kuthana ndi nsikidzi mu osatsegula okha. Ma hacks awa momveka amapangitsa ovomerezeka a CSS kudandaula kuti ndiwosavomerezeka. M'malo angapo, timagwiritsanso ntchito zida za CSS zotuluka magazi zomwe sizinakhazikike bwino, koma zimagwiritsidwa ntchito pongowonjezera pang'onopang'ono.

Machenjezo ovomerezekawa alibe ntchito chifukwa gawo la CSS lathu lopanda chinyengo limatsimikizira bwino ndipo magawo omwe amasokoneza samasokoneza kugwira ntchito moyenera kwa gawo lopanda chinyengo, chifukwa chake timanyalanyaza dala machenjezo awa.

Zolemba zathu za HTML zilinso ndi machenjezo ang'onoang'ono komanso osafunikira a HTML chifukwa chophatikizira njira yothetsera vuto linalake la Firefox .

Thandizo la chipani chachitatu

Ngakhale sitigwirizana ndi mapulagini a gulu lachitatu kapena zowonjezera, timapereka malangizo othandiza kuti tipewe zovuta zomwe zingachitike pamapulojekiti anu.

Kukula kwa bokosi

Mapulogalamu ena achipani chachitatu, kuphatikiza Google Maps ndi Google Custom Search Engine, amatsutsana ndi Bootstrap chifukwa * { box-sizing: border-box; }, lamulo lomwe limapangitsa kuti kutero paddingsilikhudza kuchuluka komaliza kwa chinthu. Phunzirani zambiri za chitsanzo cha bokosi ndi kukula pa CSS Tricks .

Kutengera ndi nkhani, mutha kupitilira momwe mungafunikire (Chosankha 1) kapena kukonzanso kukula kwa bokosi m'magawo onse (Njira 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();
}

Kufikika

Bootstrap imatsatira miyezo yodziwika bwino yapaintaneti ndipo-popanda kuyesetsa pang'ono-ingagwiritsidwe ntchito kupanga masamba omwe azitha kufika kwa omwe amagwiritsa ntchito AT .

Dumphani navigation

Ngati mayendedwe anu ali ndi maulalo ambiri ndipo amabwera patsogolo pa zomwe zili mu DOM, onjezani Skip to main contentulalo musanasamuke (kuti mumve zambiri, onani nkhani iyi ya A11Y Project podumpha maulalo oyenda ). Kugwiritsa ntchito .sr-onlykalasiyo kumabisa ulalo wodumphira, ndipo .sr-only-focusablekalasiyo iwonetsetsa kuti ulalowo ukuwoneka ukangoyang'ana (kwa ogwiritsa ntchito kiyibodi).

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

Mitu yokhazikika

Mukamapanga zisa ( <h1>- <h6>), mutu wanu woyamba uyenera kukhala <h1>. Mitu yotsatira iyenera kugwiritsa ntchito mwanzeru <h2>- <h6>kotero kuti owerenga zenera amatha kupanga mndandanda wazomwe zili patsamba lanu.

Phunzirani zambiri pa HTML CodeSniffer ndi AccessAbility ya Penn State .

Kusiyana kwamitundu

Pakadali pano, mitundu ina yosasinthika yamitundu yomwe ikupezeka mu Bootstrap (monga makalasi a mabatani osiyanasiyana, mitundu ina yowunikira yomwe imagwiritsidwa ntchito pamakina oyambira , gulu lothandizira lakumbuyo , ndi mtundu wa ulalo wokhazikika ukagwiritsidwa ntchito chakumbuyo koyera) khalani ndi chiŵerengero chochepa cha kusiyana (pansi pa chiŵerengero chovomerezeka cha 4.5:1 ). Izi zingayambitse mavuto kwa ogwiritsa ntchito omwe sawona bwino kapena omwe ali akhungu. Mitundu yosasinthayi ingafunike kusinthidwa kuti ionjezere kusiyana kwake ndi kumveka kwake..bg-primary

Zothandizira zowonjezera

• "HTML Codesniffer" bookmarklet pozindikira zovuta kupezeka
• Zida zowonjezera za Chrome's Accessibility Developer Tools
• Colour Contrast Analyzer
• Pulogalamu ya A11Y
• Zolemba za kupezeka kwa MDN

License FAQs

Bootstrap imatulutsidwa pansi pa layisensi ya MIT ndipo ndi copyright 2019 Twitter. Kuphika mpaka tinthu tating'onoting'ono, titha kufotokozedwa ndi zotsatirazi.

Zimafunikira kuti:

• Sungani laisensi ndi zidziwitso za kukopera zikuphatikizidwa m'mafayilo a Bootstrap a CSS ndi JavaScript mukawagwiritsa ntchito

Zimakulolani kuti:

• Tsitsani mwaulere ndikugwiritsa ntchito Bootstrap, yonse kapena mbali zake, pazolinga zanu, zachinsinsi, zamkati zamakampani, kapena zamalonda
• Gwiritsani ntchito Bootstrap mumaphukusi kapena magawo omwe mumapanga
• Sinthani code code
• Perekani chilolezo chosintha ndi kugawa Bootstrap kwa anthu ena omwe sanaphatikizidwe mu laisensi

Zimakuletsani kuti:

• Limbikitsani olemba ndi eni ziphaso kuti aziwononga chifukwa Bootstrap imaperekedwa popanda chitsimikizo
• Khalani ndi mlandu kwa omwe akupanga kapena omwe ali ndi copyright ya Bootstrap
• Gawaninso chidutswa chilichonse cha Bootstrap popanda kuperekedwa koyenera
• Gwiritsani ntchito zilembo zilizonse za Twitter mwanjira iliyonse yomwe inganene kapena kutanthauza kuti Twitter imavomereza kugawa kwanu
• Gwiritsani ntchito zilembo zilizonse za Twitter mwanjira iliyonse yomwe inganene kapena kutanthauza kuti mudapanga pulogalamu ya Twitter yomwe ikufunsidwa

Izi sizikutanthauza kuti:

• Phatikizani gwero la Bootstrap lokha, kapena zosintha zilizonse zomwe mwapanga nazo, pakugawa kulikonse komwe mungasonkhanitse komwe kumaphatikizapo
• Tumizani zosintha zomwe mumapanga ku Bootstrap kubwerera ku projekiti ya Bootstrap (ngakhale mayankho otere amalimbikitsidwa)

Layisensi yonse ya Bootstrap ili m'malo osungira projekiti kuti mudziwe zambiri.

Zomasulira

Anthu ammudzi amasulira zolemba za Bootstrap m'zilankhulo zosiyanasiyana. Palibe omwe amathandizidwa mwalamulo ndipo mwina sangakhale amakono nthawi zonse.

• Bootstrap 中文档 (Chitchaina)
• Bootstrap ku Dansk (Danish)
• Bootstrap ku Français (Chifalansa)
• Bootstrap auf Deutsch (Germany)
• Bootstrap in Italiano (Italian)
• Bootstrap 한국어 (Korea)
• Bootstrap em Português do Brasil (Chipwitikizi cha ku Brazil)
• Bootstrap по-русски (Chirasha)
• Bootstrap mu Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Chiyukireniya)
• Bootstrap bằng tiếng Việt (Vietnamese)

Sitithandizira kukonza kapena kuchititsa zomasulira, timangolumikizana nazo.

Mwamaliza kumasulira kwatsopano kapena kwabwinoko? Tsegulani zopempha kuti muwonjezere pamndandanda wathu.