Budata

Bootstrap (ugbu a v3.3.7) nwere ụzọ ole na ole dị mfe ịmalite ngwa ngwa, onye ọ bụla na-adọrọ mmasị na ọkwa nkà dị iche iche na iji ikpe. Gụkwuo ka ị hụ ihe dabara mkpa gị.

CDN bootstrap

Ndị folks nọ na jsDelivr ji amara na-enye nkwado CDN maka Bootstrap's CSS na JavaScript. Naanị jiri njikọ CDN Bootstrap ndị a .

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

Wụnye na Bower

Ị nwekwara ike iwunye ma jikwaa Bootstrap's Less, CSS, JavaScript, na fonts site na iji Bower :

$ bower install bootstrap

Wụnye na npm

Ị nwekwara ike ịwụnye Bootstrap site na iji npm :

$ npm install bootstrap@3

require('bootstrap')ga-ebunye ihe mgbakwunye jQuery Bootstrap na ihe jQuery. Modul bootstrapn'onwe ya anaghị ebupụ ihe ọ bụla. Ị nwere ike iji aka buo Bootstrap's jQuery plugins n'otu n'otu site na ịkwanye /js/*.jsfaịlụ ndị dị n'okpuru akwụkwọ ndekọ aha dị elu nke ngwugwu.

Bootstrap package.jsonnwere ụfọdụ metadata agbakwunyere n'okpuru igodo ndị a:

• less- ụzọ isi Bootstrap faịlụ isi obere obere
• style- ụzọ na-aga Bootstrap CSS na-abụghị nke a chịkọtara nke ọma site na iji ntọala ndabara (enweghị nhazi)

Wụnye na Onye na-ede ihe

Ị nwekwara ike iwunye ma jikwaa Bootstrap's Less, CSS, JavaScript, na fonts site na iji Onye na-edepụta ihe :

$ composer require twbs/bootstrap

Achọrọ prefixer maka obere obere/Sass

Bootstrap na-eji Autoprefixer na-emeso prefixes ndị na-ere CSS . Ọ bụrụ na ị na-achịkọta Bootstrap site na isi mmalite ya dị obere ma ọ bụghị iji Gruntfile anyị, ị ga-achọ itinye Autoprefixer n'ime usoro nrụpụta gị n'onwe gị. Ọ bụrụ na ị na-eji Bootstrap emekọburu ma ọ bụ na-eji Gruntfile anyị, ịkwesighi ichegbu onwe gị maka nke a n'ihi na Autoprefixer abanyelarị na Gruntfile anyị.

Kedu ihe gụnyere

Enwere ike ibudata Bootstrap n'ụdị abụọ, n'ime nke ị ga-ahụ akwụkwọ ndekọ aha na faịlụ ndị a, na-achịkọta ihe ndị a na-ahụkarị ma na-enye ma agbakọta na obere mgbanwe.

Bootstrap achịkọtaburu

Ozugbo ebudatara ya, mepee folda ahụ abịakọrọ ka ịhụ nhazi nke (nke achịkọtara) Bootstrap. Ị ga-ahụ ihe dị ka nke a:

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

Nke a bụ ụdị Bootstrap kachasị ewu ewu: faịlụ achịkọtara achịkọtara maka ojiji ntinye ngwa ngwa n'ihe fọrọ nke nta ka ọ bụrụ ọrụ webụ ọ bụla. Anyị na-enye CSS na JS ( bootstrap.*), yana CSS na JS ( bootstrap.min.*) chịkọtara na obere . Maapụ isi mmalite CSS ( bootstrap.*.map) dị maka iji ya na ụfọdụ ngwaọrụ nrụpụta ihe nchọgharị. Agụnyere mkpụrụedemede sitere na Glyphicons, yana isiokwu Bootstrap nhọrọ.

Koodu isi mmalite bootstrap

Nbudata koodu isi mmalite Bootstrap gụnyere CSS achịkọtagoro, Javascript na akụ font, yana isi mmalite obere, Javascript, na akwụkwọ. Kpọmkwem, ọ gụnyere ihe ndị a yana ndị ọzọ:

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

The less/, js/, na fonts/bụ koodu isi mmalite maka mkpụrụedemede CSS, JS na akara ngosi (otu n'otu). Mpempe dist/akwụkwọ ahụ gụnyere ihe niile edepụtara na ngalaba nbudata achịkọtara achịkọtara n'elu. Ebe docs/nchekwa ahụ gụnyere koodu isi mmalite maka akwụkwọ anyị, yana examples/ojiji Bootstrap. E wezụga nke ahụ, faịlụ ọ bụla agụnyere na-enye nkwado maka ngwugwu, ozi ikike, na mmepe.

Na-achịkọta CSS na JavaScript

Bootstrap na-eji Grunt maka sistemụ nrụpụta ya, yana ụzọ dabara adaba maka iji usoro arụ ọrụ. Ọ bụ ka anyị si achịkọta koodu anyị, mee ule na ndị ọzọ.

Ịwụnye Grunt

Iji wụnye Grunt, ị ga- ebu ụzọ budata ma wụnye node.js (nke gụnyere npm). npm na-anọchi anya modul ngwugwu ọnụ na bụ ụzọ isi jikwaa ndabere mmepe site na node.js.

1. Jiri grunt-cliwụnye npm install -g grunt-cli.
2. Gaa na ndekọ mgbọrọgwụ /bootstrap/, wee mee npm install. npm ga-eleba anya na package.jsonfaịlụ ahụ wee wụnye ihe ndabere mpaghara dị mkpa edepụtara ebe ahụ ozugbo.

Mgbe emechara, ị ga-enwe ike ịme iwu Grunt dị iche iche enyere site na ahịrị iwu.

Iwu Grunt dị

grunt dist(Naanị chịkọta CSS na JavaScript)

Na-eweghachi /dist/ndekọ ndekọ aha site na iji faịlụ CSS na Javascript chịkọtara na nke pere mpe. Dịka onye ọrụ Bootstrap, nke a na-abụkarị iwu ịchọrọ.

grunt watch(Lee)

Na-ekiri faịlụ ndị dị obere ma na-achịkọta ha na CSS na-akpaghị aka mgbe ọ bụla ịchekwaa mgbanwe.

grunt test(Gbaa ule)

Na- agba ọsọ JSHint ma na-agba ọsọ QUnit n'enweghị isi na PhantomJS .

grunt docs(Wụpụta ma nwalee akụ ndị ahụ)

Na-ewulite ma nwalee CSS, JavaScript, na akụ ndị ọzọ a na-eji mgbe a na-eme akwụkwọ na mpaghara site na bundle exec jekyll serve.

grunt(Mee ihe niile ma gbaa ule)

Na-achịkọta ma na-ebelata CSS na Javascript, na-ewuli webụsaịtị akwụkwọ, na-eme HTML5 nkwado megide docs, na-emegharị akụ Customizer, na ndị ọzọ. Jekyll chọrọ . Ọ na-adịkarị mkpa ma ọ bụrụ na ị na-agba ọsọ na Bootstrap n'onwe ya.

Nchọpụta nsogbu

Ọ bụrụ na ị nweta nsogbu na ịwụnye ndabere ma ọ bụ na-agba ọsọ Grunt iwu, buru ụzọ hichapụ /node_modules/ndekọ nke npm mepụtara. Mgbe ahụ, megharịa npm install.

Ndebiri nke bụ isi

Malite na ndebiri HTML a, ma ọ bụ gbanwee ihe atụ ndị a . Anyị na-atụ anya na ị ga-ahazi ndebiri na ihe atụ anyị, na-emegharị ha ka ọ dabara na mkpa gị.

Detuo HTML dị n'okpuru ka ịmalite iji obere akwụkwọ Bootstrap rụọ ọrụ.

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

Ihe atụ

Wulite na ndebiri nke dị n'elu site na iji ọtụtụ ihe Bootstrap. Anyị na-agba gị ume ka ị hazie ma megharịa Bootstrap ka ọ dabara na mkpa ọrụ gị n'otu n'otu.

Nweta koodu isi mmalite maka ihe atụ ọ bụla dị n'okpuru site na nbudata ebe nchekwa Bootstrap . Enwere ike ịhụ ihe atụ na docs/examples/ndekọ.

Iji framework

template mmalite

Ọ dịghị ihe ọ bụla ma isi: achịkọtara CSS na Javascript yana akpa.

Isiokwu buutstrap

Bunye isiokwu Bootstrap nhọrọ maka ahụmịhe emelitere anya.

Grids

Otutu ihe atụ nke nhazi grid nwere ọkwa anọ niile, akwụ, na ndị ọzọ.

Jumbotron

Jiri ihe navbar wuo gburugburu jumbotron na ụfọdụ ogidi grid ndị bụ isi.

Jumbotron dị warara

Mepụta ibe omenala karịa site na ibelata akpa ndabara na jumbotron.

Navbars na-arụ ọrụ

Navbar

Nnukwu ndebiri nke gụnyere navbar yana ụfọdụ ọdịnaya agbakwunyere.

Ogwe ụgbọ mmiri dị elu static

Ihe ndebiri nke nwere nnukwu navbar dị elu yana ụfọdụ ọdịnaya agbakwunyere.

Navbar kwụsiri ike

Super Basic template nwere nnukwu navbar dị elu yana ụfọdụ ọdịnaya agbakwunyere.

Ngwakọta omenala

Mkpuchi

Ihe ndebiri otu ibe maka iwulite ibe obibi dị mfe ma mara mma.

Carousel

Hazie navbar na carousel, wee tinye ụfọdụ ihe ọhụrụ.

Blog

Nhazi blọgụ kọlụm abụọ dị mfe nwere igodo omenala, nkụnye eji isi mee na ụdị.

Dashboard

Nhazi ntọala maka dashboard admin nwere akụkụ akụkụ yana navbar kwụziri.

Ibe nbanye

Nhazi ụdị omenala na imewe maka akara nrịbama dị mfe.

Nav ziri ezi

Mepụta navbar omenala nwere njikọ ziri ezi. Welie isi elu! Ọ bụghịkwa Safari enyi.

Ụkwụ na-atọ ụtọ

Gbakwunye ụkwụ n'okpuru ebe nlele mgbe ọdịnaya dị mkpụmkpụ karịa ya.

Ụkwụ na-atọ ụtọ nwere navbar

Jikọọ ụkwụ n'ala ala ihe nlele ahụ na-eji ụgbọ mmiri kwụ ọtọ n'elu.

Nnwale

Bootstrap anaghị anabata

Gbanyụọ ngwa ngwa nnabata nke Bootstrap kwa doc anyị .

Gbanyụọ-akwa akwa

Wulite menu igodo mpụ-akwa akwa maka iji Bootstrap mee ihe.

Ngwa

Bootlint

Bootlint bụ ngwa ọrụ Bootstrap HTML. Ọ na-enyocha akpaghị aka maka ọtụtụ mmejọ HTML a na-ahụkarị na ibe weebụ na-eji Bootstrap n'ụzọ "vanilla" ziri ezi. Ngwa/wijetị Vanilla Bootstrap chọrọ akụkụ ha nke DOM ka ha kwekọọ n'ụkpụrụ ụfọdụ. Bootlint na-enyocha na ihe atụ nke akụrụngwa Bootstrap ahazila HTML nke ọma. Tụlee ịgbakwunye Bootlint na ngwá ọrụ mmepe weebụ Bootstrap gị ka ọ dịghị nke ọ bụla n'ime mmejọ a na-emekarị na-ebelata mmepe nke ọrụ gị.

Ogbe

Jikọọ na mmepe nke Bootstrap ma jiri ihe enyemaka ndị a na-enyere ndị obodo aka.

• Gụọ ma denye aha na blọọgụ Bootstrap gọọmentị .
• Soro ndị Bootstrapper ibe gị kparịta ụka site na iji IRC na irc.freenode.netsava, na ọwa ##bootstrap .
• Maka enyemaka iji Bootstrap, jụọ StackOverflow site na iji mkpadotwitter-bootstrap-3 .
• Ndị nrụpụta kwesịrị iji isiokwu bootstrapdị na ngwugwu na-agbanwe ma ọ bụ gbakwunye na arụmọrụ nke Bootstrap mgbe a na-ekesa site na npm ma ọ bụ usoro nnyefe yiri ya maka nchọpụta kacha.
• Chọta ihe atụ na-akpali akpali nke ndị mmadụ ji Bootstrap na-ewu ụlọ na Bootstrap Expo .

Ị nwekwara ike soro @getbootstrap na Twitter maka asịrị ọhụrụ na vidiyo egwu dị egwu.

Na-ewepụ nnabata

Bootstrap na-emegharị ibe gị ozugbo maka nha ihuenyo dị iche iche. Nke a bụ otu ị ga-esi gbanyụọ njirimara a ka ibe gị rụọ ọrụ dị ka ihe atụ na-adịghị anabata .

Nzọụkwụ iji gbanyụọ nzaghachi ibe

1. Wepụ nlegharị anya nke <meta>akpọtụrụ na dọkụmentị CSS
2. Wepụ widthna nke .containerọ bụla grid tier na otu obosara, ọmụmaatụ width: 970px !important;jide n'aka na nke a na-abịa mgbe ndabara Bootstrap CSS. Ị nwere ike iji !importantajụjụ mgbasa ozi ma ọ bụ ụfọdụ họrọ-fu gbanarị ya na nhọrọ.
3. Ọ bụrụ na ị na-eji navbars, wepụ ihe navbar niile na-ada ada ma na-agbasawanye omume.
4. Maka nhazi grid, jiri .col-xs-*klaasị na mgbakwunye na, ma ọ bụ n'ọnọdụ, ndị ọkara/ndị buru ibu. Echegbula onwe gị, grid ngwaọrụ dị ntakịrị na-adabere na mkpebi niile.

Ị ka ga-achọ Respond.js maka IE8 (ebe ọ bụ na ajụjụ mgbasa ozi anyị ka dị ma ọ dị mkpa ka ahazi ya). Nke a na-ewepụ akụkụ "mobile saịtị" nke Bootstrap.

Akwụsịla template bootstrap nwere nzaghachi

Anyị etinyela usoro ndị a n'ihe atụ. Gụọ koodu isi mmalite ya ka ịhụ mgbanwe ndị a ka etinyere ya.

Lelee ihe atụ anaghị anabata

Nkwado ihe nchọgharị na ngwaọrụ

Ewubere Bootstrap ka ọ rụọ ọrụ nke ọma na desktọpụ kachasị ọhụrụ na ihe nchọgharị mkpanaka, nke pụtara na ihe nchọgharị ochie nwere ike igosipụta ụdịdị dị iche iche, n'agbanyeghị na ọ na-arụ ọrụ nke ọma, nsụgharị nke akụkụ ụfọdụ.

Ihe nchọgharị akwadoro

Kpọmkwem, anyị na-akwado ụdị ihe nchọgharị na nyiwe ndị a kachasị ọhụrụ .

Ihe nchọgharị ọzọ nke na-eji ụdị WebKit, Blink ma ọ bụ Gecko kachasị ọhụrụ, ma ọ bụ ozugbo ma ọ bụ site na API nlele webụ nke ikpo okwu, anaghị akwado nke ọma. Agbanyeghị, Bootstrap kwesịrị (n'ọtụtụ oge) gosipụta ma rụọ ọrụ nke ọma na ihe nchọgharị ndị a. Enyere ozi nkwado ndị ọzọ n'okpuru.

Ekwentị mkpanaaka

N'ikwu okwu n'ozuzu, Bootstrap na-akwado nsụgharị kachasị ọhụrụ nke ihe nchọgharị ndabere nke ikpo okwu ọ bụla. Rịba ama na akwadoghị ihe nchọgharị proxy (dị ka Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk).

Ihe nchọgharị desktọpụ

N'otu aka ahụ, a na-akwado ụdị kachasị ọhụrụ nke ọtụtụ ihe nchọgharị desktọpụ.

Na Windows, anyị na-akwado Internet Explorer 8-11 .

Maka Firefox, na mgbakwunye na ntọhapụ kwụsiri ike kachasị ọhụrụ, anyị na-akwado ụdị Mwepụta Nkwado Extended (ESR) nke Firefox kachasị ọhụrụ.

Na-akwadoghị, Bootstrap kwesịrị ịdị na-ele anya ma na-akpa àgwà nke ọma na Chromium na Chrome maka Linux, Firefox maka Linux, na Internet Explorer 7, yana Microsoft Edge, n'agbanyeghị na akwadoghị ha.

Maka ndepụta ụfọdụ ahụhụ ihe nchọgharị nke Bootstrap ga-ejiri, hụ Wall of browser bugs .

Internet Explorer 8 na 9

A na-akwadokwa Internet Explorer 8 na 9, Otú ọ dị, biko mara na ụfọdụ ihe nchọgharị CSS3 na HTML5 anaghị akwado nke ọma site na ihe nchọgharị ndị a. Na mgbakwunye, Internet Explorer 8 chọrọ iji Respond.js mee nkwado ajụjụ mgbasa ozi.

Gaa leta Enwere m ike iji... maka nkọwa na nkwado ihe nchọgharị nke njirimara CSS3 na HTML5.

Internet Explorer 8 na Respond.js

Kpachara anya maka egwu ndị a mgbe ị na-eji Respond.js na gburugburu mmepe na mmepụta gị maka Internet Explorer 8.

Respond.js na cross-domain CSS

Iji Respond.js nwere CSS kwadoro na ngalaba (sub) dị iche (dịka ọmụmaatụ, na CDN) chọrọ ntọlite ​​ọzọ. Hụ docs Respond.js maka nkọwa.

Zaghachi.js nafile://

N'ihi iwu nchekwa ihe nchọgharị, Respond.js anaghị arụ ọrụ na ibe ndị a na-elele site na file://protocol (dị ka mgbe imepe faịlụ HTML mpaghara). Iji nwalee njirimara anabatara na IE8, lelee ibe gị n'elu HTTP(S). Hụ docs Respond.js maka nkọwa.

Zaghachi.js na@import

Respond.js anaghị arụ ọrụ na CSS nke e zoro aka na ya site na @import. Karịsịa, a maara ụfọdụ nhazi Drupal iji @import. Hụ docs Respond.js maka nkọwa.

Internet Explorer 8 na igbe igbe

IE8 anaghị akwado nke ọma box-sizing: border-box;mgbe ejikọtara ya na min-width, max-width, min-height, ma ọ bụ max-height. N'ihi ya, dị ka nke v3.0.1, anyị anaghịzi eji max-widthna .containers.

Internet Explorer 8 na @font-face

IE8 nwere ụfọdụ nsogbu @font-facemgbe ejikọtara ya na :before. Bootstrap na-eji ngwakọta ahụ na Glyphicons ya. Ọ bụrụ na echekwabara ibe, wee buru ya na-enweghị òké n'elu mpio (ya bụ, pịa bọtịnụ ume ọhụrụ ma ọ bụ buo ihe na iframe) mgbe ahụ, a ga-emegharị ibe ahụ tupu ibu font ahụ. Ịtụgharị n'elu ibe (ahụ) ga-egosi ụfọdụ akara ngosi na ịfegharị n'elu akara ngosi ndị fọdụrụ ga-egosikwa ndị ahụ. Hụ mbipụta #13863 maka nkọwa.

Ụdị ndakọrịta IE

Akwadoghi bootstrap n'ụdị ndakọrịta Internet Explorer ochie. Iji jide n'aka na ị na-eji ụdị nsụgharị ọhụrụ maka IE, tụlee itinye <meta>mkpado kwesịrị ekwesị na ibe gị:

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

Kwado ụdị akwụkwọ ahụ site na imepe ngwaọrụ nbipu: pịa F12ma lelee "Ụdị akwụkwọ".

Agụnyere mkpado a na akwụkwọ Bootstrap niile na ọmụmaatụ iji hụ na nsụgharị kacha mma enwere ike na ụdị Internet Explorer ọ bụla akwadoro.

Lee ajụjụ StackOverflow a maka ozi ndị ọzọ.

Internet Explorer 10 na Windows 8 na Windows Phone 8

Internet Explorer 10 anaghị ekewa obosara ngwaọrụ na obosara nlele , yabụ anaghị etinye ajụjụ mgbasa ozi nke ọma na Bootstrap's CSS. Dị ka ọ na-adịkarị, ị ga-agbakwunye ngwa ngwa CSS iji dozie nke a:

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

Otú ọ dị, nke a anaghị arụ ọrụ maka ngwaọrụ ndị na-agba ọsọ Windows Phone 8 nsụgharị tọrọ ntọala 3 (aka GDR3) , n'ihi na ọ na-eme ka ngwaọrụ ndị dị otú ahụ na-egosi na-ahụkarị desktọọpụ kama anya warara "ekwentị". Iji dozie nke a, ị ga -etinyerịrị CSS na Javascript na-esote iji rụọ ọrụ gburugburu ahụhụ .

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

Maka ozi ndị ọzọ na ntuziaka ojiji, gụọ Windows Phone 8 na obosara ngwaọrụ .

Dị ka isi n'isi, anyị na-etinye nke a na akwụkwọ Bootstrap niile na ihe atụ dị ka ihe ngosi.

Njedebe pasentị Safari

The nsụgharị engine nke nsụgharị nke Safari tupu v7.1 maka OS X na Safari maka iOS v8.0 nwere ụfọdụ nsogbu na ọnụ ọgụgụ nke decimal ebe eji na anyị .col-*-1okporo klas. Yabụ ọ bụrụ na ị nwere kọlụm grid iri na abụọ, ị ga-achọpụta na ha dị mkpụmkpụ ma e jiri ya tụnyere ahịrị kọlụm ndị ọzọ. E wezụga nkwalite Safari/iOS, ị nwere ụfọdụ nhọrọ maka workarounds:

• Tinye .pull-rightna kọlụm grid ikpeazụ gị ka ị nweta nhazi-aka nri siri ike
• Jiri aka megharịa pasentị gị ka ị nweta okirikiri zuru oke maka Safari (ọ siri ike karịa nhọrọ mbụ)

Modals, navbars na ahụigodo mebere

Ijubiga ókè na mpịakọta

Nkwado maka overflow: hiddenmmewere <body>dị oke na iOS na gam akporo. Iji mezuo nke ahụ, mgbe ị pịrịga n'elu ma ọ bụ ala nke modal na nke ọ bụla n'ime ihe nchọgharị ngwaọrụ ndị ahụ, <body>ọdịnaya ga-amalite ịpịgharịa. Hụ ahụhụ Chrome #175502 (nke edobere na Chrome v40) yana ahụhụ WebKit #153852 .

IOS ederede ubi na mpịakọta

Dị ka nke iOS 9.3, mgbe modal na-emeghe, ọ bụrụ na mmetụ mbụ nke mmegharị akwụkwọ mpịakọta dị n'ime oke ederede <input>ma ọ bụ a <textarea>, a <body>ga-atụgharị ọdịnaya dị n'okpuru modal kama modal n'onwe ya. Lee ahụhụ WebKit #153856 .

Ahụigodo mebere

Ọzọkwa, rịba ama na ọ bụrụ na ị na-eji navbar ofu ma ọ bụ na-eji ntinye n'ime modal, iOS nwere ahụhụ na-eme ka ọ ghara imelite ọnọdụ nke ihe edoziri mgbe etinyere keyboard mebere. Usoro ole na ole maka nke a gụnyere ịgbanwe ihe gị ka ọ bụrụ position: absolutema ọ bụ ịkpọku ngụ oge na-elekwasị anya ka ịgbalị iji aka dozie ọnọdụ ahụ. Ọ bụghị Bootstrap na-ejikwa nke a, yabụ ọ dịịrị gị ikpebi azịza kacha mma maka ngwa gị.

Mbudata Navbar

A .dropdown-backdropnaghị eji ihe ahụ eme ihe na iOS na ụgbọ mmiri n'ihi mgbagwoju anya nke z-indexing. Ya mere, imechi dropdowns na navbars, ị ga-pịa ozugbo dropdown element (ma ọ bụ ihe ọ bụla ọzọ mmewere nke ga-ọkụ a click omume na iOS ).

Mbugharị ihe nchọgharị

Mbugharị ibe na-enweghị atụ na-egosi ihe arụrụ arụ na akụkụ ụfọdụ, ma na Bootstrap na webụ ndị ọzọ. Dabere n'okwu a, anyị nwere ike idozi ya (chọọ na mbụ wee mepee esemokwu ma ọ bụrụ na ọ dị mkpa). Agbanyeghị, anyị na-eleghara ihe ndị a anya n'ihi na ha anaghị enwekarị azịza ọ bụla ma ọ bụghị ihe mgbakasị ahụ.

Nnyapade :hover/ :focusna mobile

Ọ bụ ezie na ezigbo hovering agaghị ekwe omume na ọtụtụ ihuenyo mmetụ aka, ọtụtụ ihe nchọgharị mkpanaka na-eṅomi nkwado hovering na-eme ka :hover"na-arapara". Yabụ,:hover ụdị na-amalite itinye mgbe ịmechara ihe na-akwụsị naanị itinye mgbe onye ọrụ kpatụ ihe ọzọ. Nke a nwere ike ime ka steeti Bootstrap :hover'rapaara' n'ụdị ihe nchọgharị ahụ na-enweghị isi. Ụfọdụ ihe nchọgharị mkpanaka na-emekwa ka :focusnnyapade n'otu aka ahụ. Ugbu a ọ nweghị ihe ngwọta dị mfe maka okwu ndị a ma ọ bụghị iwepụ ụdịdị ndị ahụ kpamkpam.

Na-ebi akwụkwọ

Ọbụlagodi na ụfọdụ ihe nchọgharị ọgbara ọhụrụ, ibipụta nwere ike ịdị egwu.

Karịsịa, dị ka Chrome v32 na agbanyeghị ntọala oke, Chrome na-eji obosara nlele dị warara karịa nha akwụkwọ anụ ahụ mgbe ọ na-edozi ajụjụ mgbasa ozi mgbe ọ na-ebipụta ibe weebụ. Nke a nwere ike ime ka agbanyere obere grid Bootstrap na mberede mgbe a na-ebipụta ya. Hụ mbipụta #12078 na Chrome ahụhụ #273306 maka nkọwa ụfọdụ. Atụmatụ akwadoro:

• Nabata grid ntakịrị ma hụ na ibe gị dị ka nke a na-anabata nke ọma n'okpuru ya.
• Hazie ụkpụrụ nke @screen-*obere mgbanwe ka a na-ahụta akwụkwọ nbipute gị ka ọ dị obere.
• Tinye ajụjụ mgbasa ozi ahaziri iche iji gbanwee ebe nkwụsịtụ nha grid maka naanị mgbasa ozi ebipụta.

Ọzọkwa, dị ka nke Safari v8.0, ofu obosara .containernwere ike ime ka Safari jiri obere mkpụrụedemede na-enweghị atụ mgbe ọ na-ebi akwụkwọ. Hụ #14868 na ahụhụ WebKit #138192 maka nkọwa ndị ọzọ. Otu enwere ike idozi nke a bụ ịgbakwunye CSS ndị a:

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

Ihe nchọgharị ngwaahịa Android

N'ime igbe ahụ, Android 4.1 (na ọbụna ụfọdụ ntọhapụ ọhụrụ doro anya) jiri ngwa ihe nchọgharị na-ebufe dị ka ihe nchọgharị weebụ nke nhọrọ (na-emegide Chrome). N'ụzọ dị mwute, ngwa ihe nchọgharị ahụ nwere ọtụtụ chinchi na ekwekọghị ekwekọ na CSS n'ozuzu ya.

Họrọ menus

Na <select>ọcha, ihe nchọgharị ngwaahịa gam akporo agaghị egosipụta njikwa akụkụ ma ọ bụrụ na enwere border-radiusna/ma ọ bụ bordertinye ya n'ọrụ. (Lee ajụjụ StackOverflow a maka nkọwa.) Jiri snippet nke koodu dị n'okpuru wepụ CSS na-akpasu iwe wee mee ya <select>ka ọ bụrụ ihe na-enweghị usoro na ihe nchọgharị ngwaahịa gam akporo. Onye ọrụ na-eku ume na-ezere ndabichi na ihe nchọgharị Chrome, Safari na 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>

Chọrọ ịhụ ihe atụ? Lelee ihe ngosi JS Bin a.

Ndị nkwado

Iji nye ahụmịhe kachasị mma maka ihe nchọgharị ochie na nke na-adịghị mma, Bootstrap na-eji hacks ihe nchọgharị CSS n'ọtụtụ ebe iji kwado CSS pụrụ iche na ụdị ihe nchọgharị ụfọdụ iji rụọ ọrụ gburugburu ahụhụ na ihe nchọgharị ahụ n'onwe ha. Mbanye anataghị ikike ndị a na-eme ka ndị nkwado CSS na-eme mkpesa na ha adịghị mma. N'ebe di na nwunye, anyị na-ejikwa njirimara CSS ọnụ na-agba ọbara nke na-edobebeghị nke ọma, mana a na-eji ndị a naanị maka nkwalite na-aga n'ihu.

Ịdọ aka ná ntị nkwado ndị a adịghị mkpa na omume ebe akụkụ na-adịghị eme ihe ike nke CSS anyị kwadoro nke ọma yana akụkụ ndị ahụ na-adịghị mma anaghị egbochi ọrụ nke ọma nke akụkụ ahụ na-adịghị mma, ya mere anyị ji kpachara anya na-eleghara ịdọ aka ná ntị ndị a anya.

Docs HTML anyị nwekwara ụfọdụ ịdọ aka ná ntị nkwado HTML na-adịghị mkpa na nke na-adịghị mkpa n'ihi ntinye anyị na-arụ ọrụ maka ụfọdụ ahụhụ Firefox .

Nkwado ndị ọzọ

Ọ bụ ezie na anyị anaghị akwado plugins ma ọ bụ tinye-ons ndị ọzọ n'ihu ọha, anyị na-enye ndụmọdụ bara uru iji nyere aka zere nsogbu ndị nwere ike na ọrụ gị.

Nhazi igbe

Ụfọdụ ngwanrọ ndị ọzọ, gụnyere Google Maps na Google Custom Search Engine, na-emegide Bootstrap n'ihi * { box-sizing: border-box; }, iwu nke na-eme ya paddinganaghị emetụta obosara agbakọ ikpeazụ nke mmewere. Mụtakwuo maka ụdị igbe na nha nha na CSS Tricks .

Dabere na ihe gbara ya gburugburu, ịnwere ike ịkagbu dị ka achọrọ (Nhọrọ 1) ma ọ bụ tọgharịa nha igbe maka mpaghara niile (Nhọrọ 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();
}

Nnweta

Bootstrap na-agbaso ụkpụrụ webụ a na-ahụkarị yana - na obere mbọ - enwere ike iji mepụta saịtị ndị na-eji AT nweta .

Mafee nsoroụzọ

Ọ bụrụ na igodo gị nwere ọtụtụ njikọ wee bịa n'ihu isi ọdịnaya dị na DOM, gbakwunye Skip to main contentnjikọ n'ihu igodo (maka nkọwa dị mfe, lee isiokwu A11Y Project na njikọ njikọ skip navigation ). Iji .sr-onlyklaasị ahụ ga-ezobe njikọ mwụgharị ahụ n'anya, .sr-only-focusableklaasị ahụ ga-ahụkwa na njikọ ahụ ga-ahụ anya ozugbo lekwasịrị anya (maka ndị na-ahụ maka ahụigodo).

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

Isi okwu akwụghị ụgwọ

Mgbe ị na-akụ isiokwu ( <h1>- <h6>), isi akwụkwọ gị kwesịrị ịbụ <h1>. Isiokwu ndị na-esote kwesịrị iji ezi uche mee ihe <h2>- <h6>ndị na-agụ ihuenyo nwere ike wuo tebụl ọdịnaya maka ibe gị.

Mụtakwuo na HTML CodeSniffer na Penn State's Accessability .

Agba dị iche

Ugbu a, ụfọdụ n'ime agba agba agba agba agba dị na Bootstrap (dị ka klaasị bọtịnụ ụdị dị iche iche, ụfọdụ n'ime koodu na-akọwapụta agba eji eme ihe maka ngọngọ koodu , klaasị na-enyere aka .bg-primary n'okirikiri , na agba njikọ ndabara mgbe ejiri ya na ndabere ọcha) nwee oke ọdịiche dị ala (n'okpuru oke akwadoro nke 4.5: 1 ). Nke a nwere ike ịkpata nsogbu nye ndị ọrụ nwere obere ọhụụ ma ọ bụ ndị kpuru ìsì. Agba ndị a nwere ike ime ka ọ dị mkpa ka a gbanwee iji mee ka ọdịiche ha dị na legibility.

Ihe ndị ọzọ

• “HTML Codesniffer” ibe edokọbara maka ịchọpụta nsogbu nnweta
• Mgbatị Ngwa Ndị Mmepụta Nnweta Chrome
• Ihe nyocha ọdịiche agba
• Ihe oru ngo A11Y
• Akwụkwọ nnweta MDN

Ajụjụ akwụkwọ ikike

A tọhapụrụ Bootstrap n'okpuru ikike MIT ma bụrụ nwebiisinka 2016 Twitter. Efere ya na obere iberibe, enwere ike ịkọwa ya na ọnọdụ ndị a.

Ọ chọrọ ka ị:

• Debe ikike na ọkwa nwebisiinka gụnyere na Bootstrap's CSS na JavaScript faịlụ mgbe ị na-eji ha n'ọrụ gị.

Ọ na-enye gị ohere:

• Budata ma jiri Bootstrap n'efu, n'ozuzu ma ọ bụ akụkụ ya, maka ebumnuche nkeonwe, nkeonwe, ime ụlọ ọrụ ma ọ bụ azụmahịa
• Jiri Bootstrap na ngwugwu ma ọ bụ nkesa ị mepụtara
• Megharịa koodu isi mmalite
• Nye ikike sublicense iji gbanwee na kesaa Bootstrap n'aka ndị ọzọ etinyeghị na ikike ahụ

Ọ machibidoro gị iwu:

• Jide ndị odee na ndị nwe ikikere maka mmebi dịka a na-enye Bootstrap na-enweghị akwụkwọ ikike
• Jide ndị okike ma ọ bụ ndị nwe nwebiisinka nke Bootstrap n'ụra
• Kesaa ibe Bootstrap ọ bụla na-enweghị njirimara kwesịrị ekwesị
• Jiri akara ọ bụla Twitter nwere n'ụzọ ọ bụla nwere ike ikwu ma ọ bụ gosi na Twitter kwadoro nkesa gị
• Jiri akara ọ bụla Twitter nwere n'ụzọ ọ bụla nwere ike ikwu ma ọ bụ pụta na ị mepụtara ngwa Twitter a na-ajụ

Ọ chọghị ka ị:

• Gụnye isi mmalite nke Bootstrap n'onwe ya, ma ọ bụ nke mgbanwe ọ bụla ị nwere ike ime na ya, na nkesa ọ bụla ị nwere ike ikpokọta nke gụnyere ya.
• Nyefee mgbanwe ndị ị na-eme na Bootstrap laghachi na ọrụ Bootstrap (n'agbanyeghị na agbamume nzaghachi dị otú ahụ)

Ikikere Bootstrap zuru ezu dị na ebe nchekwa ọrụ maka ozi ndị ọzọ.

Ntụgharị asụsụ

Ndị otu obodo atụgharịala akwụkwọ Bootstrap n'asụsụ dị iche iche. Ọnweghị nke a na-akwado n'ọchịchị yana ọ nwere ike ọ gaghị adị ọhụrụ mgbe niile.

• Bootstrap 中文文档 (Chinese)
• Bootstrap 3 中文手冊 (Chinese (Ọdịnala))
• Bootstrap na Dansk (Danish)
• Bootstrap na Français (French)
• Bootstrap auf Deutsch (German)
• Bootstrap na Italiano (Italian)
• Bootstrap (Korean)
• Bootstrap em Português do Brasil (Brazil Portuguese)
• Bootstrap po-русски (Russian)
• Bootstrap na Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap nke Việt (Vietnamese)

Anyị anaghị enyere aka ịhazi ma ọ bụ kwado ntụgharị asụsụ, naanị anyị na-ejikọta na ha.

Emechaala ntụgharị asụsụ ọhụrụ ma ọ bụ ka mma? Mepee arịrịọ ịdọrọ ka ịgbakwunye ya na ndepụta anyị.