Gba lati ayelujara

Bootstrap (Lọwọlọwọ v3.4.1) ni awọn ọna ti o rọrun diẹ lati bẹrẹ ni kiakia, ọkọọkan n ṣe itara si ipele ọgbọn oriṣiriṣi ati ọran lilo. Ka nipasẹ lati wo ohun ti o baamu awọn aini rẹ pato.

jsDelivr

Awọn eniyan ti o wa ni jsDelivr pẹlu oore-ọfẹ pese atilẹyin CDN fun Bootstrap's CSS ati JavaScript. Kan lo awọn ọna asopọ jsDelivr wọnyi .

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

Fi sori ẹrọ pẹlu Bower

O tun le fi sori ẹrọ ati ṣakoso Bootstrap's Kere, CSS, JavaScript, ati awọn nkọwe nipa lilo Bower :

bower install bootstrap

Fi sori ẹrọ pẹlu npm

O tun le fi Bootstrap sori ẹrọ ni lilo npm :

npm install bootstrap@3

require('bootstrap')yoo gbe gbogbo awọn afikun jQuery Bootstrap sori ohun jQuery. Awọn bootstrapmodule ara ko ni okeere ohunkohun. O le fi ọwọ gbe awọn afikun jQuery Bootstrap lọkọọkan nipasẹ ikojọpọ awọn /js/*.jsfaili labẹ itọsọna ipele oke ti package.

Bootstrap's package.jsonni diẹ ninu awọn afikun metadata labẹ awọn bọtini wọnyi:

• less- ọna si Bootstrap akọkọ Kere orisun faili
• style- ọna si Bootstrap ti kii ṣe minimini CSS ti o ti ṣajọ tẹlẹ nipa lilo awọn eto aiyipada (ko si isọdi)

Fi sori ẹrọ pẹlu Olupilẹṣẹ

O tun le fi sori ẹrọ ati ṣakoso Bootstrap's Kere, CSS, JavaScript, ati awọn nkọwe nipa lilo Olupilẹṣẹ :

composer require twbs/bootstrap

Autoprefixer beere fun Kere/Sass

Bootstrap nlo Autoprefixer lati wo pẹlu awọn ami-isọju ataja CSS . Ti o ba n ṣe akopọ Bootstrap lati orisun Kere/Sass ati pe ko lo Gruntfile wa, iwọ yoo nilo lati ṣepọ Autoprefixer sinu ilana kikọ rẹ funrararẹ. Ti o ba nlo Bootstrap iṣaaju tabi lilo Gruntfile wa, iwọ ko nilo lati ṣe aniyan nipa eyi nitori pe Autoprefixer ti wa tẹlẹ sinu Gruntfile wa.

Ohun ti o wa ninu

Bootstrap jẹ igbasilẹ ni awọn fọọmu meji, laarin eyiti iwọ yoo rii awọn ilana atẹle ati awọn faili, ṣiṣe akojọpọ awọn orisun ti o wọpọ ati pese akojọpọ mejeeji ati awọn iyatọ kekere.

Bootstrap ti a ti ṣajọ tẹlẹ

Ni kete ti o ba ti gbasilẹ, ṣii folda fisinuirindigbindigbin lati wo eto ti Bootstrap (akojọ). Iwọ yoo rii nkan bii eyi:

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

Eyi ni fọọmu ipilẹ julọ ti Bootstrap: awọn faili ti a ṣajọ tẹlẹ fun lilo sisọ-silẹ ni iyara ni fere eyikeyi iṣẹ akanṣe wẹẹbu. A pese CSS ti a kojọpọ ati JS ( bootstrap.*), bakannaa ti a ṣajọpọ ati minifised CSS ati JS ( bootstrap.min.*). Awọn maapu orisun CSS ( bootstrap.*.map) wa fun lilo pẹlu awọn irinṣẹ idagbasoke awọn aṣawakiri kan. Awọn nkọwe lati Glyphicons wa pẹlu, gẹgẹ bi akori Bootstrap iyan.

Bootstrap koodu orisun

Igbasilẹ koodu orisun Bootstrap pẹlu CSS ti a ṣajọ tẹlẹ, JavaScript, ati awọn ohun-ini fonti, pẹlu orisun Kere, JavaScript, ati iwe. Ni pataki diẹ sii, o pẹlu atẹle naa ati diẹ sii:

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

Awọn less/, js/, ati fonts/pe o jẹ koodu orisun fun CSS, JS, ati awọn nkọwe aami (lẹsẹsẹ). Fọọmu dist/naa pẹlu ohun gbogbo ti a ṣe akojọ si ni apakan igbasilẹ ti a ti ṣajọ tẹlẹ loke. Awọn docs/folda pẹlu awọn koodu orisun fun wa iwe, ati examples/ti Bootstrap lilo. Ni ikọja iyẹn, eyikeyi faili to wa pẹlu n pese atilẹyin fun awọn akojọpọ, alaye iwe-aṣẹ, ati idagbasoke.

Iṣakojọpọ CSS ati JavaScript

Bootstrap nlo Grunt fun eto kikọ rẹ, pẹlu awọn ọna irọrun fun ṣiṣẹ pẹlu ilana naa. O jẹ bii a ṣe ṣajọ koodu wa, ṣiṣe awọn idanwo, ati diẹ sii.

Fifi Grunt sori ẹrọ

Lati fi Grunt sori ẹrọ, o gbọdọ kọkọ ṣe igbasilẹ ati fi node.js sori ẹrọ (eyiti o pẹlu npm). npm duro fun awọn modulu idii node ati pe o jẹ ọna lati ṣakoso awọn igbẹkẹle idagbasoke nipasẹ node.js.

1. Fi sori ẹrọ grunt-clini agbaye pẹlu npm install -g grunt-cli.
2. Lilö kiri si itọsọna gbongbo /bootstrap/, lẹhinna ṣiṣe npm install. npm yoo wo package.jsonfaili naa ati fi sori ẹrọ laifọwọyi awọn igbẹkẹle agbegbe pataki ti a ṣe akojọ sibẹ.

Nigbati o ba pari, iwọ yoo ni anfani lati ṣiṣe awọn oriṣiriṣi awọn aṣẹ Grunt ti a pese lati laini aṣẹ.

Awọn pipaṣẹ Grunt ti o wa

grunt dist(O kan ṣajọ CSS ati JavaScript)

Ṣe atunto iwe /dist/ilana pẹlu akojọpọ CSS ati awọn faili JavaScript. Gẹgẹbi olumulo Bootstrap, eyi jẹ deede aṣẹ ti o fẹ.

grunt watch(Wo)

Wiwo awọn faili orisun Kere ati ṣe atunṣe wọn laifọwọyi si CSS nigbakugba ti o ba fi iyipada pamọ.

grunt test(Ṣiṣe awọn idanwo)

Ṣiṣe JSHint ati ṣiṣe awọn idanwo QUnit ni awọn aṣawakiri gidi ọpẹ si Karma .

grunt docs(Kọ & idanwo awọn dukia docs)

Kọ ati ṣe idanwo CSS, JavaScript, ati awọn ohun-ini miiran eyiti o jẹ lilo nigbati o nṣiṣẹ iwe ni agbegbe nipasẹ bundle exec jekyll serve.

grunt(Kọ Egba ohun gbogbo ati ṣiṣe awọn idanwo)

Ṣe akopọ ati dinku CSS ati JavaScript, kọ oju opo wẹẹbu iwe, nṣiṣẹ olufọwọsi HTML5 lodi si awọn iwe aṣẹ, tun ṣe awọn ohun-ini Customizer, ati diẹ sii. Nilo Jekyll . Nigbagbogbo pataki nikan ti o ba n gige lori Bootstrap funrararẹ.

Laasigbotitusita

Ti o ba pade awọn iṣoro pẹlu fifi awọn igbẹkẹle sii tabi ṣiṣiṣẹ awọn aṣẹ Grunt, kọkọ paarẹ /node_modules/ilana ti ipilẹṣẹ nipasẹ npm. Lẹhinna, tun ṣe npm install.

Awoṣe ipilẹ

Bẹrẹ pẹlu awoṣe HTML ipilẹ yii, tabi yi awọn apẹẹrẹ wọnyi pada . A nireti pe iwọ yoo ṣe akanṣe awọn awoṣe ati awọn apẹẹrẹ wa, ṣe imudara wọn lati baamu awọn iwulo rẹ.

Daakọ HTML ni isalẹ lati bẹrẹ ṣiṣẹ pẹlu iwe Bootstrap ti o kere ju.

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

Awọn apẹẹrẹ

Kọ sori awoṣe ipilẹ loke pẹlu ọpọlọpọ awọn paati Bootstrap. A gba ọ niyanju lati ṣe akanṣe ati mu Bootstrap mu lati ba awọn iwulo iṣẹ akanṣe kọọkan mu.

Gba koodu orisun fun gbogbo apẹẹrẹ ni isalẹ nipa gbigba ibi ipamọ Bootstrap silẹ . Apeere le ri ninu awọn docs/examples/liana.

Lilo ilana

Awoṣe ibẹrẹ

Nkankan bikoṣe awọn ipilẹ: kojọ CSS ati JavaScript papọ pẹlu eiyan kan.

Akori Bootstrap

Ṣe kojọpọ akori Bootstrap iyan fun iriri imudara oju.

Awọn akoj

Awọn apẹẹrẹ pupọ ti awọn ipilẹ akoj pẹlu gbogbo awọn ipele mẹrin, itẹ-ẹiyẹ, ati diẹ sii.

Jumbotron

Kọ ni ayika jumbotron pẹlu navbar ati diẹ ninu awọn ipilẹ akoj ọwọn.

Jumbotron dín

Kọ oju-iwe aṣa diẹ sii nipa didin eiyan aiyipada ati jumbotron.

Navbars ni igbese

Navbar

Super ipilẹ awoṣe ti o ba pẹlu navbar pẹlú pẹlu diẹ ninu awọn afikun akoonu.

Aimi oke navbar

Super ipilẹ awoṣe pẹlu kan aimi oke navbar pẹlú pẹlu diẹ ninu awọn afikun akoonu.

Navbar ti o wa titi

Super ipilẹ awoṣe pẹlu kan ti o wa titi oke navbar pẹlú pẹlu diẹ ninu awọn afikun akoonu.

Aṣa irinše

Ideri

Awoṣe oju-iwe kan fun kikọ awọn oju-iwe ile ti o rọrun ati ẹlẹwa.

Carousel

Ṣe akanṣe navbar ati carousel, lẹhinna ṣafikun diẹ ninu awọn paati tuntun.

Bulọọgi

Ifilelẹ bulọọgi ọwọn meji ti o rọrun pẹlu lilọ kiri aṣa, akọsori, ati iru.

Dasibodu

Eto ipilẹ fun dasibodu abojuto pẹlu ọpa ẹgbẹ ti o wa titi ati navbar.

Oju-iwe iwọle

Ifilelẹ fọọmu aṣa ati apẹrẹ fun ami ti o rọrun ni fọọmu.

Lare nav

Ṣẹda navbar aṣa pẹlu awọn ọna asopọ idalare. Efeti sile! Ko ju Safari ore.

Ẹsẹ alalepo

So ẹlẹsẹ kan si isalẹ ti wiwo wiwo nigbati akoonu ba kuru ju rẹ lọ.

Alalepo ẹlẹsẹ pẹlu navbar

So ẹlẹsẹ kan si isalẹ ti oju wiwo pẹlu navbar ti o wa titi ni oke.

Awọn idanwo

Bootstrap ti kii ṣe idahun

Ni irọrun mu idahun ti Bootstrap kuro fun awọn iwe aṣẹ wa .

Pa-kanfasi

Kọ akojọ aṣayan lilọ kiri ni pipa-kanfasi fun lilo pẹlu Bootstrap.

Awọn irinṣẹ

Bootlint

Bootlint jẹ ohun elo Bootstrap HTML osise . O ṣe ayẹwo laifọwọyi fun ọpọlọpọ awọn aṣiṣe HTML ti o wọpọ ni awọn oju opo wẹẹbu ti o nlo Bootstrap ni ọna “vanilla” titọ. Awọn paati/awọn ẹrọ ailorukọ Vanilla Bootstrap nilo awọn apakan wọn ti DOM lati ni ibamu si awọn ẹya kan. Bootlint sọwedowo pe awọn iṣẹlẹ ti awọn paati Bootstrap ni HTML ti a ṣeto ni deede. Gbiyanju fifi Bootlint kun si ohun elo irinṣẹ idagbasoke Bootstrap wẹẹbu rẹ ki ko si ọkan ninu awọn aṣiṣe ti o wọpọ fa fifalẹ idagbasoke iṣẹ akanṣe rẹ.

Agbegbe

Duro titi di oni lori idagbasoke Bootstrap ki o de ọdọ agbegbe pẹlu awọn orisun iranlọwọ wọnyi.

• Ka ati ṣe alabapin si Bulọọgi Bootstrap osise naa .
• Wiregbe pẹlu awọn Bootstrappers ẹlẹgbẹ ni lilo IRC ninu irc.freenode.netolupin, ni ikanni ##bootstrap .
• Fun iranlọwọ ni lilo Bootstrap, beere lori StackOverflow nipa lilo tagtwitter-bootstrap-3 .
• Awọn olupilẹṣẹ yẹ ki o lo koko-ọrọ bootstraplori awọn idii eyiti o yipada tabi ṣafikun si iṣẹ ṣiṣe ti Bootstrap nigbati o n pin kaakiri nipasẹ npm tabi awọn ọna ifijiṣẹ ti o jọra fun wiwa ti o pọju.
• Wa awọn apẹẹrẹ iwuri ti awọn eniyan ti o kọ Bootstrap ni Bootstrap Expo .

O tun le tẹle @getbootstrap lori Twitter fun olofofo tuntun ati awọn fidio orin oniyi.

Dina idahun

Bootstrap ṣe adaṣe awọn oju-iwe rẹ laifọwọyi fun ọpọlọpọ awọn iwọn iboju. Eyi ni bii o ṣe le mu ẹya ara ẹrọ yii jẹ ki oju-iwe rẹ ṣiṣẹ bii apẹẹrẹ ti kii ṣe idahun .

Awọn igbesẹ lati mu idahun oju-iwe ṣiṣẹ

1. Jade wiwo wiwo ti <meta>a mẹnuba ninu awọn iwe aṣẹ CSS
2. Yipadanu widthlori .containerfun ipele akoj kọọkan pẹlu iwọn kan, fun apẹẹrẹ width: 970px !important;Rii daju pe eyi wa lẹhin Bootstrap aiyipada CSS. O le yago fun yiyan !importantpẹlu awọn ibeere media tabi diẹ ninu awọn selector-fu.
3. Ti o ba nlo awọn navbars, yọ gbogbo navbar ti n ṣubu ati ihuwasi ti o pọ si kuro.
4. Fun awọn ipilẹ akoj, lo .col-xs-*awọn kilasi ni afikun si, tabi ni aaye, awọn alabọde/awọn nla. Maṣe yọ ara rẹ lẹnu, awọn iwọn akoj ẹrọ kekere-kekere si gbogbo awọn ipinnu.

Iwọ yoo tun nilo Respond.js fun IE8 (niwọn igba ti awọn ibeere media wa tun wa ati pe o nilo lati ni ilọsiwaju). Eyi mu awọn abala “ojula alagbeka” kuro ti Bootstrap.

Awoṣe Bootstrap pẹlu alaabo idahun

A ti lo awọn igbesẹ wọnyi si apẹẹrẹ. Ka koodu orisun rẹ lati rii awọn iyipada kan pato ti a ṣe imuse.

Wo apẹẹrẹ ti kii ṣe idahun

Ẹrọ aṣawakiri ati atilẹyin ẹrọ

Bootstrap jẹ itumọ lati ṣiṣẹ daradara julọ ni tabili tuntun ati awọn aṣawakiri alagbeka, afipamo pe awọn aṣawakiri agbalagba le ṣafihan aṣa ti o yatọ, botilẹjẹpe iṣẹ ṣiṣe ni kikun, awọn atunṣe ti awọn paati kan.

Awọn aṣawakiri atilẹyin

Ni pataki, a ṣe atilẹyin awọn ẹya tuntun ti awọn aṣawakiri atẹle ati awọn iru ẹrọ.

Awọn aṣawakiri omiiran ti o lo ẹya tuntun ti WebKit, Blink, tabi Gecko, boya taara tabi nipasẹ wiwo oju opo wẹẹbu ti Syeed, ko ni atilẹyin ni gbangba. Sibẹsibẹ, Bootstrap yẹ (ni ọpọlọpọ awọn ọran) ṣafihan ati ṣiṣẹ ni deede ni awọn aṣawakiri wọnyi daradara. Alaye atilẹyin pato diẹ sii ti pese ni isalẹ.

Awọn ẹrọ alagbeka

Ni gbogbogbo, Bootstrap ṣe atilẹyin awọn ẹya tuntun ti awọn aṣawakiri aiyipada ti iru ẹrọ kọọkan. Ṣe akiyesi pe awọn aṣawakiri aṣoju (bii Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ko ni atilẹyin.

Awọn aṣawakiri tabili

Bakanna, awọn ẹya tuntun ti ọpọlọpọ awọn aṣawakiri tabili tabili ni atilẹyin.

Lori Windows, a ṣe atilẹyin Internet Explorer 8-11 .

Fun Firefox, ni afikun si itusilẹ iduroṣinṣin deede tuntun, a tun ṣe atilẹyin ẹya Itusilẹ Atilẹyin Afikun tuntun (ESR) ti Firefox.

Laigba aṣẹ, Bootstrap yẹ ki o wo ati huwa daradara ni Chromium ati Chrome fun Linux, Firefox fun Linux, ati Internet Explorer 7, ati Microsoft Edge, botilẹjẹpe wọn ko ṣe atilẹyin ni ifowosi.

Fun atokọ diẹ ninu awọn idun ẹrọ aṣawakiri ti Bootstrap ni lati koju, wo Odi wa ti awọn idun ẹrọ aṣawakiri .

Internet Explorer 8 ati 9

Internet Explorer 8 ati 9 tun ni atilẹyin, sibẹsibẹ, jọwọ ṣe akiyesi pe diẹ ninu awọn ohun-ini CSS3 ati awọn eroja HTML5 ko ni atilẹyin ni kikun nipasẹ awọn aṣawakiri wọnyi. Ni afikun, Internet Explorer 8 nilo lilo Respond.js lati mu atilẹyin ibeere media ṣiṣẹ.

Ṣabẹwo Ṣe MO le lo... fun awọn alaye lori atilẹyin ẹrọ aṣawakiri ti CSS3 ati awọn ẹya HTML5.

Internet Explorer 8 ati Respond.js

Ṣọra fun awọn akiyesi atẹle nigba lilo Respond.js ninu idagbasoke ati awọn agbegbe iṣelọpọ fun Internet Explorer 8.

Respond.js ati agbelebu-ašẹ CSS

Lilo Respond.js pẹlu CSS ti gbalejo lori oriṣiriṣi (iha) agbegbe (fun apẹẹrẹ, lori CDN) nilo iṣeto ni afikun. Wo Respond.js docs fun awọn alaye.

Dahun.js atifile://

Nitori awọn ofin aabo aṣawakiri, Respond.js ko ṣiṣẹ pẹlu awọn oju-iwe ti a wo nipasẹ file://ilana naa (bii nigba ṣiṣi faili HTML agbegbe kan). Lati ṣe idanwo awọn ẹya idahun ni IE8, wo awọn oju-iwe rẹ lori HTTP(S). Wo Respond.js docs fun awọn alaye.

Dahun.js ati@import

Respond.js ko ṣiṣẹ pẹlu CSS ti o tọka nipasẹ @import. Ni pataki, diẹ ninu awọn atunto Drupal ni a mọ lati lo @import. Wo Respond.js docs fun awọn alaye.

Internet Explorer 8 ati apoti-iwọn

IE8 ko ṣe atilẹyin ni kikun box-sizing: border-box;nigbati o ba darapọ pẹlu min-width, max-width, min-height, tabi max-height. Fun idi naa, bi ti v3.0.1, a ko lo max-widthlori .containers.

Internet Explorer 8 ati @font-oju

IE8 ni diẹ ninu awọn ọran pẹlu @font-facenigba idapo pẹlu :before. Bootstrap nlo apapo yẹn pẹlu awọn Glyphicons rẹ. Ti oju-iwe kan ba wa ni ipamọ, ti o kojọpọ laisi asin lori ferese (ie lu bọtini isọdọtun tabi gbe nkan kan sinu iframe) lẹhinna oju-iwe naa yoo ni jigbe ṣaaju ki awọn ẹru fonti naa. Lilọ kiri lori oju-iwe (ara) yoo ṣafihan diẹ ninu awọn aami ati gbigbe lori awọn aami ti o ku yoo ṣafihan awọn naa daradara. Wo atejade #13863 fun alaye.

IE ibamu igbe

Bootstrap ko ni atilẹyin ni awọn ipo ibaramu Internet Explorer atijọ. Lati rii daju pe o nlo ipo tuntun fun IE, ronu pẹlu aami ti o yẹ <meta>ninu awọn oju-iwe rẹ:

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

Jẹrisi ipo iwe aṣẹ nipa ṣiṣi awọn irinṣẹ n ṣatunṣe aṣiṣe: tẹ F12ki o ṣayẹwo “Ipo iwe”.

Aami yii wa ninu gbogbo awọn iwe-ipamọ Bootstrap ati awọn apẹẹrẹ lati rii daju pe o ṣee ṣe atunṣe ti o dara julọ ni ẹya atilẹyin kọọkan ti Internet Explorer.

Wo ibeere StackOverflow yii fun alaye diẹ sii.

Internet Explorer 10 ni Windows 8 ati Windows Phone 8

Internet Explorer 10 ko ṣe iyatọ iwọn ẹrọ lati iwọn wiwo , ati nitorinaa ko lo awọn ibeere media daradara ni Bootstrap's CSS. Ni deede iwọ yoo kan ṣafikun snippet iyara ti CSS lati ṣatunṣe eyi:

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

Sibẹsibẹ, eyi ko ṣiṣẹ fun awọn ẹrọ nṣiṣẹ awọn ẹya Windows Phone 8 ti o dagba ju Imudojuiwọn 3 (aka GDR3) , nitori pe o fa iru awọn ẹrọ lati ṣafihan wiwo tabili okeene dipo wiwo “foonu” dín. Lati koju eyi, iwọ yoo nilo lati ni CSS atẹle yii ati JavaScript lati ṣiṣẹ ni ayika kokoro naa .

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

Fun alaye diẹ ẹ sii ati awọn itọnisọna lilo, ka Windows Phone 8 ati Iwọn-ẹrọ .

Gẹgẹbi olori, a ṣafikun eyi ni gbogbo awọn iwe Bootstrap ati awọn apẹẹrẹ bi iṣafihan.

Safari ogorun ikotan

Ẹnjini Rendering ti awọn ẹya ti Safari ṣaaju si v7.1 fun OS X ati Safari fun iOS v8.0 ni diẹ ninu wahala pẹlu nọmba awọn aaye eleemewa ti a lo ninu awọn .col-*-1kilasi akoj wa. Nitorina ti o ba ni awọn ọwọn akoj 12 kọọkan, iwọ yoo ṣe akiyesi pe wọn wa ni kukuru ni akawe si awọn ori ila ti awọn ọwọn miiran. Yato si igbegasoke Safari/iOS, o ni diẹ ninu awọn aṣayan fun workarounds:

• Ṣafikun .pull-rightsi iwe akoj rẹ ti o kẹhin lati gba titete-ọtun lile lile
• Tweak awọn ipin rẹ pẹlu ọwọ lati gba iyipo pipe fun Safari (ti o nira ju aṣayan akọkọ lọ)

Modals, navbars, ati awọn bọtini itẹwe foju

Aponsedanu ati yi lọ

Atilẹyin fun overflow: hiddennkan <body>naa jẹ opin ni iOS ati Android. Si ipari yẹn, nigba ti o ba yi lọ kọja oke tabi isalẹ ti modal ninu ọkan ninu awọn aṣawakiri ẹrọ wọnyẹn, <body>akoonu yoo bẹrẹ lati yi lọ. Wo Bug Chrome #175502 (ti o wa titi ni Chrome v40) ati Bug WebKit #153852 .

Awọn aaye ọrọ iOS ati yiyi

Bi ti iOS 9.3, lakoko ti modal wa ni sisi, ti ifọwọkan ibẹrẹ ti idari lilọ kiri kan wa laarin aala ti ọrọ <input>tabi a <textarea>, <body>akoonu ti o wa labẹ modal yoo yi lọ dipo modal funrararẹ. Wo Bug WebKit #153856 .

Awọn bọtini itẹwe foju

Paapaa, ṣe akiyesi pe ti o ba nlo navbar ti o wa titi tabi lilo awọn igbewọle laarin modal kan, iOS ni bug Rendering ti ko ṣe imudojuiwọn ipo awọn eroja ti o wa titi nigbati bọtini itẹwe foju ba nfa. Awọn ibi-itọju diẹ fun eyi pẹlu yiyi awọn eroja rẹ pada si position: absolutetabi pipe aago kan lori idojukọ lati gbiyanju lati ṣatunṣe ipo pẹlu ọwọ. Eyi kii ṣe nipasẹ Bootstrap, nitorinaa o wa si ọ lati pinnu iru ojutu ti o dara julọ fun ohun elo rẹ.

Navbar Dropdowns

Awọn .dropdown-backdropano ti wa ni ko lo lori iOS ni nav nitori awọn complexity ti z-titọka. Nitorinaa, lati pa awọn isọ silẹ ni awọn navbars, o gbọdọ tẹ taara nkan isọ silẹ (tabi eyikeyi nkan miiran eyiti yoo tan iṣẹlẹ tẹ ni iOS ).

Sisun ẹrọ aṣawakiri

Sisun oju-iwe laiseaniani ṣe afihan awọn ohun-iṣere ni diẹ ninu awọn paati, mejeeji ni Bootstrap ati iyoku wẹẹbu. Da lori ọrọ naa, a le ni anfani lati ṣatunṣe (wa akọkọ ati lẹhinna ṣii ọrọ kan ti o ba nilo). Sibẹsibẹ, a ṣọ lati foju awọn wọnyi bi wọn ṣe nigbagbogbo ko ni ojutu taara miiran ju awọn ibi-iṣẹ ti hacky.

Alalepo :hover/ :focuslori alagbeka

Paapaa botilẹjẹpe fifin gidi ko ṣee ṣe lori ọpọlọpọ awọn iboju ifọwọkan, ọpọlọpọ awọn aṣawakiri alagbeka ṣe afarawe atilẹyin fifin ati ṣe :hover“alalepo”. Ni awọn ọrọ miiran, :hoverawọn aza bẹrẹ lilo lẹhin titẹ nkan kan ati pe o da lilo nikan lẹhin ti olumulo ba tẹ nkan miiran. Eyi le fa ki awọn ipinlẹ Bootstrap :hoverdi “di” lainifẹ lori iru awọn aṣawakiri bẹ. Diẹ ninu awọn aṣawakiri alagbeka tun ṣe :focusalalepo bakanna. Lọwọlọwọ ko si adaṣe ti o rọrun fun awọn ọran wọnyi miiran ju yiyọ iru awọn aza kuro patapata.

Titẹ sita

Paapaa ni diẹ ninu awọn aṣawakiri ode oni, titẹ sita le jẹ ohun ti o wuyi.

Ni pataki, bi ti Chrome v32 ati laibikita awọn eto ala, Chrome nlo iwọn iwoye ni pataki dín ju iwọn iwe ti ara lọ nigba ti n ṣatunṣe awọn ibeere media lakoko titẹ oju opo wẹẹbu kan. Eyi le ja si ni afikun-kekere akoj Bootstrap ni muu ṣiṣẹ lairotẹlẹ nigbati titẹ sita. Wo atejade #12078 ati bug Chrome #273306 fun awọn alaye diẹ. Awọn adaṣe ti a daba:

• Gba ikojọpọ afikun-kekere ati rii daju pe oju-iwe rẹ dabi itẹwọgba labẹ rẹ.
• Ṣe akanṣe awọn iye ti @screen-*Awọn oniyipada Kere ki a ka iwe itẹwe rẹ tobi ju afikun-kekere lọ.
• Ṣafikun awọn ibeere media aṣa lati yi awọn aaye fifọ iwọn akoj pada fun media titẹjade nikan.

Paapaa, bi ti Safari v8.0, ti o wa titi-iwọn .containerle fa Safari lati lo iwọn font kekere ti kii ṣe deede nigba titẹ sita. Wo #14868 ati Bug WebKit #138192 fun awọn alaye diẹ sii. Iṣeduro agbara kan fun eyi n ṣafikun CSS atẹle:

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

Android iṣura kiri

Ninu apoti, Android 4.1 (ati paapaa diẹ ninu awọn idasilẹ tuntun ti o han gbangba) gbe ọkọ pẹlu ohun elo ẹrọ aṣawakiri bi aṣawakiri wẹẹbu aiyipada ti yiyan (ni idakeji si Chrome). Laanu, ohun elo aṣawakiri ni ọpọlọpọ awọn idun ati aiṣedeede pẹlu CSS ni gbogbogbo.

Yan awọn akojọ aṣayan

Lori <select>awọn eroja, ẹrọ aṣawakiri ọja iṣura Android kii yoo ṣe afihan awọn idari ẹgbẹ ti o ba wa border-radiusati/tabi borderlilo. (Wo ibeere StackOverflow yii fun awọn alaye.) Lo snippet ti koodu ni isalẹ lati yọ CSS ti o ṣẹ kuro ki o ṣe <select>bi ohun ti ko ni aṣa lori ẹrọ aṣawakiri ọja Android. Aṣoju aṣàmúlò ti nmi ni yago fun kikọlu pẹlu Chrome, Safari, ati awọn aṣawakiri 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>

Ṣe o fẹ lati ri apẹẹrẹ? Ṣayẹwo yi JS Bin demo.

Awọn olufọwọsi

Lati le pese iriri ti o dara julọ ti o ṣeeṣe si awọn aṣawakiri atijọ ati buggy, Bootstrap nlo awọn hakii ẹrọ aṣawakiri CSS ni awọn aaye pupọ lati fojusi CSS pataki si awọn ẹya aṣawakiri kan lati le ṣiṣẹ ni ayika awọn idun ninu awọn aṣawakiri funrararẹ. Awọn hakii wọnyi ni oye fa awọn olufọwọsi CSS lati kerora pe wọn ko wulo. Ni awọn aaye tọkọtaya kan, a tun lo awọn ẹya CSS eti-ẹjẹ ti ko tii diwọn ni kikun, ṣugbọn awọn wọnyi ni a lo fun imudara ilọsiwaju.

Awọn ikilọ afọwọsi wọnyi ko ṣe pataki ni iṣe nitori apakan ti kii ṣe hacky ti CSS wa ni ifọwọsi ni kikun ati awọn apakan hacky ko ni dabaru pẹlu iṣẹ ṣiṣe to dara ti apakan ti kii ṣe gige, nitorinaa kilode ti a mọọmọ foju foju kọ awọn ikilọ pato wọnyi.

Awọn iwe aṣẹ HTML wa bakanna ni diẹ ninu awọn ikilọ afọwọsi HTML ti ko ṣe pataki nitori ifisi wa ti ibi-iṣẹ fun kokoro Firefox kan .

Atilẹyin ẹnikẹta

Lakoko ti a ko ṣe atilẹyin ni ifowosi eyikeyi awọn afikun ẹnikẹta tabi awọn afikun, a funni ni imọran to wulo lati ṣe iranlọwọ yago fun awọn ọran ti o pọju ninu awọn iṣẹ akanṣe rẹ.

Apoti-iwọn

Diẹ ninu sọfitiwia ẹnikẹta, pẹlu Awọn maapu Google ati Ẹrọ Ṣiṣawari Aṣa Google, rogbodiyan pẹlu Bootstrap nitori * { box-sizing: border-box; }, ofin kan ti o jẹ ki paddingko ni ipa lori iwọn iṣiro ipari ti ohun kan. Kọ ẹkọ diẹ sii nipa awoṣe apoti ati iwọn ni Awọn ẹtan CSS .

Ti o da lori ọrọ-ọrọ, o le fagilee bi o ṣe nilo (Aṣayan 1) tabi tun iwọn apoti fun gbogbo awọn agbegbe (Aṣayan 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();
}

Wiwọle

Bootstrap tẹle awọn iṣedede wẹẹbu ti o wọpọ ati-pẹlu igbiyanju afikun diẹ — le ṣee lo lati ṣẹda awọn aaye ti o wa fun awọn ti nlo AT .

Rekọja lilọ kiri

Ti lilọ kiri rẹ ba ni ọpọlọpọ awọn ọna asopọ ati pe o wa ṣaaju akoonu akọkọ ninu DOM, ṣafikun ọna Skip to main contentasopọ kan ṣaaju lilọ kiri (fun alaye ti o rọrun, wo nkan A11Y Project yii lori awọn ọna asopọ lilọ kiri ). Lilo .sr-onlykilasi naa yoo fi oju pamọ ọna asopọ fo, ati .sr-only-focusablekilasi yoo rii daju pe ọna asopọ yoo han ni kete ti idojukọ (fun awọn olumulo keyboard ti o rii).

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

Awọn akọle itẹle

Nigbati awọn akọle itẹ-ẹiyẹ ( <h1>- <h6>), akọsori iwe akọkọ rẹ yẹ ki o jẹ <h1>. Awọn akọle ti o tẹle yẹ ki o lo ọgbọn <h2>- <h6>iru bẹ awọn oluka iboju le kọ tabili awọn akoonu fun awọn oju-iwe rẹ.

Kọ ẹkọ diẹ sii ni HTML CodeSniffer ati Agbara Wiwọle ti Ipinle Penn .

Iyatọ awọ

Lọwọlọwọ, diẹ ninu awọn akojọp��� awọ aiyipada ti o wa ni Bootstrap (gẹgẹbi awọn oriṣiriṣi awọn kilasi bọtini ara, diẹ ninu awọn koodu ti n ṣe afihan awọn awọ ti a lo fun awọn bulọọki koodu ipilẹ , kilasi oluranlọwọ .bg-primary ipilẹ ọrọ , ati awọ ọna asopọ aiyipada nigba lilo lori ipilẹ funfun) ni ipin itansan kekere (ni isalẹ ipin ti a ṣeduro ti 4.5: 1 ). Eyi le fa awọn iṣoro si awọn olumulo pẹlu iran kekere tabi ti o jẹ afọju awọ. Awọn awọ aiyipada wọnyi le nilo lati yipada lati mu iyatọ wọn pọ si ati legibility.

Awọn ohun elo afikun

• "HTML Codesniffer" bukumaaki fun idamo awọn oran iraye si
• Ifaagun Awọn irin-iṣẹ Olùgbéejáde Wiwọle ti Chrome
• Awọ Itansan Oluyanju
• A11Y Project
• Iwe iraye si MDN

Awọn ibeere iwe-aṣẹ

Bootstrap ti tu silẹ labẹ iwe-aṣẹ MIT ati pe o jẹ aṣẹ lori ara 2019 Twitter. Sise si isalẹ lati awọn ege kekere, o le ṣe apejuwe pẹlu awọn ipo wọnyi.

O nilo lati:

• Jeki iwe-aṣẹ ati akiyesi aṣẹ lori ara to wa ninu Bootstrap's CSS ati awọn faili JavaScript nigbati o ba lo wọn ninu awọn iṣẹ rẹ

O faye gba o lati:

• Ṣe igbasilẹ ni ọfẹ ati lo Bootstrap, ni odidi tabi ni apakan, fun ti ara ẹni, ikọkọ, inu ile-iṣẹ, tabi awọn idi iṣowo
• Lo Bootstrap ninu awọn akojọpọ tabi awọn pinpin ti o ṣẹda
• Ṣatunṣe koodu orisun
• Funni ni iwe-aṣẹ lati yipada ati pinpin Bootstrap si awọn ẹgbẹ kẹta ti ko si ninu iwe-aṣẹ naa

O kọ ọ lati:

• Mu awọn onkọwe ati awọn oniwun iwe-aṣẹ ṣe oniduro fun awọn bibajẹ bi a ti pese Bootstrap laisi atilẹyin ọja
• Di awọn olupilẹṣẹ tabi awọn onimu aṣẹ lori ara ti Bootstrap oniduro
• Tun kaakiri eyikeyi nkan ti Bootstrap laisi ikasi to dara
• Lo awọn aami eyikeyi ti Twitter ni eyikeyi ọna ti o le sọ tabi tumọ si pe Twitter fọwọsi pinpin rẹ
• Lo awọn aami eyikeyi ti Twitter ni eyikeyi ọna ti o le sọ tabi tumọ si pe o ṣẹda sọfitiwia Twitter ni ibeere

Ko nilo ki o:

• Ṣafikun orisun Bootstrap funrararẹ, tabi ti eyikeyi awọn iyipada ti o le ṣe si, ni eyikeyi atunpinpin o le pejọ ti o pẹlu rẹ
• Fi awọn ayipada silẹ ti o ṣe si Bootstrap pada si iṣẹ akanṣe Bootstrap (botilẹjẹpe iru esi ni iwuri)

Iwe-aṣẹ Bootstrap ni kikun wa ni ibi ipamọ iṣẹ akanṣe fun alaye diẹ sii.

Awọn itumọ

Awọn ọmọ ẹgbẹ agbegbe ti tumọ awọn iwe Bootstrap si awọn ede oriṣiriṣi. Ko si ọkan ti o ni atilẹyin ni ifowosi ati pe wọn le ma jẹ imudojuiwọn nigbagbogbo.

• Bootstrap 中文文档 (Chinese)
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (Faranse)
• Bootstrap auf Deutsch (German)
• Bootstrap ni Italiano (Itali)
• Bootstrap (Korea)
• Bootstrap em Português do Brasil (Brazil Portuguese)
• Bootstrap по-русски (Russian)
• Bootstrap ati Español (Spanish)
• Türkçe Bootstrap (Tọki)
• Bootstrap українською (Ukrainian)
• Bootstrap jẹ tiếng Việt (Vietnamese)

A ko ṣe iranlọwọ lati ṣeto tabi gbalejo awọn itumọ, a kan sopọ mọ wọn.

Ti pari titun tabi itumọ to dara julọ? Ṣii ibeere fifa lati ṣafikun si atokọ wa.