Tutmondaj CSS-agordoj, fundamentaj HTML-elementoj stiligitaj kaj plibonigitaj per etendeblaj klasoj, kaj altnivela kradsistemo.
Superrigardo
Akiru informojn pri la ĉefaj pecoj de la infrastrukturo de Bootstrap, inkluzive de nia aliro al pli bona, pli rapida, pli forta retejo-disvolviĝo.
HTML5-dokumentotipo
Bootstrap uzas iujn HTML-elementojn kaj CSS-ecojn, kiuj postulas la uzon de la HTML5-dokumentotipo. Enmetu ĝin komence de ĉiuj viaj projektoj.
Poŝtelefono unue
Kun Bootstrap 2, ni aldonis laŭvolajn poŝtelefonajn amikajn stilojn por ŝlosilaj aspektoj de la kadro. Kun Bootstrap 3, ni reverkis la projekton por esti movebla amika de la komenco. Anstataŭ aldoni laŭvolajn moveblajn stilojn, ili estas bakitaj ĝuste en la kernon. Fakte, Bootstrap unue estas movebla . Poŝtelefonaj unuaj stiloj troveblas tra la tuta biblioteko anstataŭ en apartaj dosieroj.
Por certigi taŭgan bildigon kaj tuŝan zomon, aldonu la meta-etikedon de vidpunkto al via <head>.
Vi povas malŝalti zomigajn kapablojn ĉe porteblaj aparatoj aldonante user-scalable=noal la meta-etikedo de la vidfenestro. Ĉi tio malŝaltas zomi, kio signifas, ke uzantoj nur povas rulumi, kaj rezultigas vian retejon sentiĝi iom pli kiel denaska aplikaĵo. Ĝenerale, ni ne rekomendas ĉi tion en ĉiu retejo, do atentu!
Bootstrap postulas enhavan elementon por envolvi retejan enhavon kaj gastigi nian kradsistemon. Vi povas elekti unu el du ujoj por uzi en viaj projektoj. Rimarku ke, pro paddingkaj pli, neniu ujo estas enŝlosebla.
Uzu .containerpor respondema fiksa larĝa ujo.
Uzu .container-fluidpor plenlarĝa ujo, ampleksanta la tutan larĝon de via vidfenestro.
Kradsistemo
Bootstrap inkluzivas respondeman, moveblan unuan fluidan kradsistemon, kiu taŭge skalas ĝis 12 kolumnojn laŭ la grandeco de la aparato aŭ vidfenestro pliiĝas. Ĝi inkluzivas antaŭdifinitajn klasojn por facilaj aranĝaj opcioj, kaj ankaŭ potencajn miksaĵojn por generi pli semantikajn aranĝojn .
Enkonduko
Kradaj sistemoj estas uzataj por krei paĝajn aranĝojn per serio de vicoj kaj kolumnoj, kiuj enhavas vian enhavon. Jen kiel funkcias la kradsistemo Bootstrap:
Vicoj devas esti metitaj ene de .container(fiks-larĝo) aŭ .container-fluid(plen-larĝo) por taŭga vicigo kaj kompletigo.
Uzu vicojn por krei horizontalajn grupojn de kolumnoj.
Enhavo devas esti metita ene de kolumnoj, kaj nur kolumnoj povas esti tujaj filoj de vicoj.
Antaŭdifinitaj kradaj klasoj ŝatas .rowkaj .col-xs-4estas disponeblaj por rapide fari kradajn aranĝojn. Malpli da miksaĵoj ankaŭ povas esti uzataj por pli semantikaj aranĝoj.
Kolumnoj kreas defluojn (interspacoj inter kolumnenhavo) per padding. Tiu kompletigo estas kompensita en vicoj por la unua kaj lasta kolumno per negativa marĝeno sur .rows.
La negativa marĝeno estas kial la ekzemploj malsupre estas maldentaj. Estas tiel ke enhavo en kradaj kolumnoj estas vicigita kun ne-krada enhavo.
Kradaj kolumnoj estas kreitaj specifante la nombron de dek du disponeblaj kolumnoj, kiujn vi volas enhavi. Ekzemple, tri egalaj kolumnoj uzus tri .col-xs-4.
Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.
Kradklasoj validas por aparatoj kun ekranlarĝoj pli grandaj ol aŭ egalaj al la rompopunktograndecoj, kaj superregas kradklasojn celitajn ĉe pli malgrandaj aparatoj. Tial, ekz. apliki ajnan .col-md-*klason al elemento ne nur influos ĝian stilon ĉe mezaj aparatoj sed ankaŭ ĉe grandaj aparatoj se .col-lg-*klaso ne ĉeestas.
Rigardu la ekzemplojn por apliki ĉi tiujn principojn al via kodo.
Demandoj pri amaskomunikiloj
Ni uzas la sekvajn amaskomunikilajn demandojn en niaj Malpli dosieroj por krei la ŝlosilajn rompopunktojn en nia kradsistemo.
Ni foje plivastigas ĉi tiujn amaskomunikilajn demandojn por inkluzivi max-widthpor limigi CSS al pli mallarĝa aro da aparatoj.
Kradaj opcioj
Vidu kiel aspektoj de la Bootstrap kradsistemo funkcias tra pluraj aparatoj kun oportuna tablo.
Ekstra malgrandaj aparatoj Telefonoj (<768px)
Malgrandaj aparatoj Tablojdoj (≥768px)
Mezaj aparatoj Labortabloj (≥992px)
Grandaj aparatoj Labortabloj (≥1200px)
Krada konduto
Horizontale ĉiam
Kolapsis por komenci, horizontale super rompopunktoj
Larĝo de ujo
Neniu (aŭtomata)
750 px
970 px
1170 px
Klasprefikso
.col-xs-
.col-sm-
.col-md-
.col-lg-
nombro da kolumnoj
12
Larĝo de kolumno
Aŭtomate
~62px
~81px
~97px
Larĝo de kanaleto
30 px (15 px sur ĉiu flanko de kolono)
Nestebla
Jes
Ofsetoj
Jes
Kolumna ordigo
Jes
Ekzemplo: Stakitaj-al-horizontalaj
Uzante ununuran aron de .col-md-*kradklasoj, vi povas krei bazan kradsistemon, kiu komenciĝas stakigita sur porteblaj aparatoj kaj tablojdaj aparatoj (la ekstra malgranda ĝis malgranda gamo) antaŭ iĝi horizontala sur labortablaj (mezaj) aparatoj. Metu kradkolumnojn en iu ajn .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Ekzemplo: Fluida ujo
Turnu ajnan fikslarĝan kradan aranĝon en plenlarĝan aranĝon ŝanĝante vian plej eksteran .containeral .container-fluid.
Ekzemplo: Poŝtelefono kaj labortablo
Ĉu vi ne volas, ke viaj kolumnoj simple stakiĝas en pli malgrandaj aparatoj? Uzu la ekstrajn malgrandajn kaj mezajn aparatojn kradklasojn aldonante .col-xs-*.col-md-*al viaj kolumnoj. Vidu la ekzemplon sube por pli bona ideo pri kiel ĉio funkcias.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Ekzemplo: Poŝtelefono, tablojdo, labortablo
Konstruu sur la antaŭa ekzemplo kreante eĉ pli dinamikajn kaj potencajn aranĝojn kun tablojdaj .col-sm-*klasoj.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Ekzemplo: Kolumna envolvado
Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.
.col-xs-9
.col-xs-4
Ekde 9 + 4 = 13 > 12, ĉi tiu 4-kolumna larĝa div estas envolvita al nova linio kiel unu apuda unuo.
.col-xs-6
Postaj kolumnoj daŭras laŭ la nova linio.
Respondema kolumno rekomencigas
Kun la kvar niveloj de kradoj disponeblaj, vi nepre renkontos problemojn, kie, ĉe certaj rompopunktoj, viaj kolumnoj ne tute klariĝas, ĉar unu estas pli alta ol la alia. Por ripari tion, uzu kombinaĵon de a .clearfixkaj niaj respondemaj utilecaj klasoj .
.col-xs-6 .col-sm-3
Regrandigu vian vidfenestron aŭ kontrolu ĝin en via telefono por ekzemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Krom kolumnpurigo ĉe respondemaj rompopunktoj, vi eble bezonos restarigi kompensojn, puŝojn aŭ tirojn . Vidu ĉi tion en ago en la kradekzemplo .
Forigi kanalojn
Forigu la kanalojn de vico kaj ĝiaj kolumnoj kun la .row-no-guttersklaso.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Ofsecaj kolumnoj
Movu kolumnojn dekstren uzante .col-md-offset-*klasojn. Ĉi tiuj klasoj pliigas la maldekstran marĝenon de kolono per *kolumnoj. Ekzemple, .col-md-offset-4moviĝas .col-md-4super kvar kolumnoj.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Vi ankaŭ povas superregi kompensojn de pli malaltaj kradaj niveloj kun .col-*-offset-0klasoj.
Nestokolumnoj
Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .rowkaj aron da .col-sm-*kolumnoj en ekzistanta .col-sm-*kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj kiuj sumiĝas ĝis 12 aŭ malpli (ne necesas, ke vi uzu ĉiujn 12 disponeblajn kolumnojn).
Nivelo 1: .col-sm-9
Nivelo 2: .col-xs-8 .col-sm-6
Nivelo 2: .col-xs-4 .col-sm-6
Kolumna ordigo
Facile ŝanĝu la ordon de niaj enkonstruitaj kradaj kolumnoj kun .col-md-push-*kaj .col-md-pull-*modifklasoj.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Malpli miksaĵoj kaj variabloj
Krom antaŭkonstruitaj kradaj klasoj por rapidaj aranĝoj, Bootstrap inkluzivas Malpli da variabloj kaj miksaĵoj por rapide generi viajn proprajn simplajn, semantikajn aranĝojn.
Variabloj
Variabloj determinas la nombron da kolumnoj, la defluillarĝon, kaj la amaskomunikilaron demandpunkton ĉe kiu komenci flosajn kolumnojn. Ni uzas ĉi tiujn por generi la antaŭdifinitajn kradklasojn dokumentitajn supre, same kiel por la kutimaj miksaĵoj listigitaj sube.
Miksinoj
Miksinoj estas uzitaj lige kun la kradvariabloj por generi semantikan CSS por individuaj kradkolumnoj.
Ekzempla uzado
Vi povas modifi la variablojn al viaj propraj kutimaj valoroj, aŭ simple uzi la miksaĵojn kun iliaj defaŭltaj valoroj. Jen ekzemplo de uzado de la defaŭltaj agordoj por krei du-kolumnan aranĝon kun interspaco.
Tipografio
Titoloj
Ĉiuj HTML-titoloj, <h1>tra <h6>, estas haveblaj. .h1tra .h6klasoj ankaŭ haveblas, por kiam vi volas kongrui kun la tiparo de titolo sed ankoraŭ volas ke via teksto estu montrata enlinie.
h1. Bootstrap-titolo
Duongrasa 36px
h2. Bootstrap-titolo
Duongrasa 30px
h3. Bootstrap-titolo
Duongrasa 24px
h4. Bootstrap-titolo
Duongrasa 18px
h5. Bootstrap-titolo
Duongrasa 14px
h6. Bootstrap-titolo
Duongrasa 12px
Kreu pli malpezan, sekundaran tekston en iu ajn titolo kun ĝenerala <small>etikedo aŭ la .smallklaso.
h1. Bootstrap-titolo Malĉefa teksto
h2. Bootstrap-titolo Malĉefa teksto
h3. Bootstrap-titolo Malĉefa teksto
h4. Bootstrap-titolo Malĉefa teksto
h5. Bootstrap-titolo Malĉefa teksto
h6. Bootstrap-titolo Malĉefa teksto
Korpa kopio
La tutmonda defaŭlto de Bootstrap font-sizeestas 14px , kun a line-heightde 1.428 . Ĉi tio estas aplikata al la <body>kaj ĉiuj alineoj. Krome, <p>(alineoj) ricevas malsupran marĝenon de duono de ilia komputita linio-alteco (10px defaŭlte).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Ĉefa korpokopio
Elstarigu alineon aldonante .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Konstruita kun Malpli
La tipografia skalo baziĝas sur du Malpli variabloj en variabloj.malpli : @font-size-basekaj @line-height-base. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco. Ni uzas tiujn variablojn kaj iun simplan matematikon por krei la randojn, remburaĵojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli. Agordu ilin kaj Bootstrap adaptiĝas.
Enliniaj tekstaj elementoj
Markita teksto
Por reliefigi tekston pro ĝia graveco en alia kunteksto, uzu la <mark>etikedon.
Vi povas uzi la marketikedon porreliefigiteksto.
Forigita teksto
Por indiki blokojn de teksto kiuj estis forigitaj uzu la <del>etikedon.
Ĉi tiu linio de teksto estas traktata kiel forigita teksto.
Striita teksto
Por indiki tekstoblokojn kiuj ne plu rilatas uzu la <s>etikedon.
Ĉi tiu linio de teksto estas traktata kiel ne plu preciza.
Enmetita teksto
Por indiki aldonojn al la dokumento uzu la <ins>etikedon.
Ĉi tiu linio de teksto estas traktata kiel aldono al la dokumento.
Substrekita teksto
Por substreki tekston uzu la <u>etikedon.
Ĉi tiu linio de teksto prezentiĝos kiel substrekita
Uzu la defaŭltajn emfazajn etikedojn de HTML kun malpezaj stiloj.
Malgranda teksto
Por malemfazi enliniajn aŭ blokojn de teksto, uzu la <small>etikedon por agordi tekston je 85% la grandeco de la gepatro. Titolelementoj ricevas sian propran font-sizepor nestitaj <small>elementoj.
Vi povas alternative uzi enlinian elementon kun .smallanstataŭ iu ajn <small>.
Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.
Aŭdaca
Por emfazi fragmenton de teksto kun pli peza tiparo.
La sekva fragmento de teksto estas prezentita kiel grasa teksto .
Kursivo
Por emfazi fragmenton de teksto kun kursivo.
La sekva fragmento de teksto estas prezentita kiel kursiva teksto .
Alternaj elementoj
Bonvolu uzi <b>kaj <i>en HTML5. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.
Alineaj klasoj
Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj.
Maldekstre vicigita teksto.
Centra vicigita teksto.
Dekstre vicigita teksto.
Pravigita teksto.
Neniu envolvi tekston.
Transformaj klasoj
Transformu tekston en komponantojn kun klasoj de tekstaj majuskloj.
Minuskla teksto.
Majuskla teksto.
Majuskla teksto.
Mallongigoj
Stiligita efektivigo de HTML-a <abbr>elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj kun titleatributo havas malpezan punktitan malsupran randon kaj helpkursoron sur ŝvebado, provizante plian kuntekston dum ŝvebado kaj al uzantoj de helpaj teknologioj.
Baza mallongigo
Mallongigo de la vorto atributo estas attr .
Inicialismo
Aldonu .initialismal mallongigo por iomete pli malgranda tiparo.
HTML estas la plej bona afero ekde tranĉaĵigita pano.
Adresoj
Prezentu kontaktinformojn por la plej proksima prapatro aŭ la tuta laboro. Konservu formatadon finante ĉiujn liniojn per <br>.
Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103 P: (123) 456-7890
Plena Nomo [email protected]
Blokcitaĵoj
Por citado de enhavoblokoj de alia fonto ene de via dokumento.
Defaŭlta blokcitaĵo
Envolvi <blockquote>ajnan HTML kiel la citaĵo. Por rektaj citaĵoj, ni rekomendas <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Opcioj de blokquotetoj
Stilo kaj enhavo ŝanĝas por simplaj varioj sur normo <blockquote>.
Nomante fonton
Aldonu <footer>por identigi la fonton. Envolvu la nomon de la fontverko en <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alternaj ekranoj
Aldonu .blockquote-reversepor blokcitaĵo kun dekstre vicigita enhavo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Listoj
Neordigita
Listo de eroj en kiuj la ordo ne eksplicite gravas.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Ordonita
Listo de eroj en kiuj la ordo eksplicite gravas .
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Senstila
Forigu la defaŭltan list-stylekaj maldekstran marĝenon sur listaĵoj (nur tujaj infanoj). Ĉi tio validas nur por tujaj filaj listeroj , kio signifas, ke vi devos aldoni la klason ankaŭ por iuj nestitaj listoj.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
En linio
Metu ĉiujn listaĵojn sur unu linion kun display: inline-block;iom da malpeza kompletigo.
Lorem ipsum
Phasellus iaculis
Nulla volutpat
Priskribo
Listo de terminoj kun iliaj rilataj priskriboj.
Priskribolistoj
Priskriba listo estas perfekta por difini terminojn.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Horizontala priskribo
Faru terminojn kaj priskribojn en <dl>linio flank-al-flanke. Komencas stakigita kiel defaŭlta <dl>s, sed kiam la navbar pligrandiĝas, do ĉi tiuj faru.
Priskribolistoj
Priskriba listo estas perfekta por difini terminojn.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Aŭto-tranĉiga
Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumno kun text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝiĝos al la defaŭlta staplita aranĝo.
Kodo
En linio
Envolvu enliniajn fragmentojn de kodo per <code>.
Ekzemple,
<section>devus esti envolvita kiel enlinia.
Enigo de la uzanto
Uzu la <kbd>por indiki enigon kiu estas kutime enigita per klavaro.
Por ŝanĝi dosierujojn, tajpu
cdsekvate de la nomo de la dosierujo.
Por redakti agordojn, premu
ctrl + ,
Baza bloko
Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.
<p>Ekzempla teksto ĉi tie...</p>
Vi povas laŭvole aldoni la.pre-scrollable klason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulobreton.
Variabloj
Por indiki variablojn uzu la <var>etikedon.
y = m x + b
Specimena eligo
Por indiki blokojn specimeno eligo de programo uzu la <samp>etikedon.
Ĉi tiu teksto estas traktata kiel specimena eligo de komputila programo.
Tabeloj
Baza ekzemplo
Por baza stilo—malpeza remburaĵo kaj nur horizontalaj disigiloj—aldonu la bazan klason .tableal iu ajn <table>. Eble ŝajnas super redunda, sed konsiderante la vastan uzadon de tabeloj por aliaj kromprogramoj kiel kalendaroj kaj dato-elektiloj, ni elektis izoli niajn kutimajn tabelstilojn.
Laŭvola tabelteksto.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Striitaj vicoj
Uzu .table-stripedpor aldoni zebro-striadon al iu tabelvico ene de la <tbody>.
Inter-retumila kongruo
Striitaj tabloj estas stilitaj per la :nth-childCSS-elektilo, kiu ne estas disponebla en Internet Explorer 8.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Bordita tablo
Aldonu .table-borderedpor randoj sur ĉiuj flankoj de la tablo kaj ĉeloj.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Ŝvebi vicojn
Aldoni .table-hoverpor ebligi ŝveban staton sur tabelvicoj ene de <tbody>.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Kondensita tablo
Aldonu .table-condensedpor fari tablojn pli kompaktajn tranĉante ĉela remburaĵo en duono.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry la Birdo
@twitter
Kuntekstaj klasoj
Uzu kuntekstajn klasojn por kolorigi tabelvicojn aŭ individuajn ĉelojn.
Klaso
Priskribo
.active
Aplikas la ŝveban koloron al aparta vico aŭ ĉelo
.success
Indikas sukcesan aŭ pozitivan agon
.info
Indikas neŭtralan informan ŝanĝon aŭ agon
.warning
Indikas averton, kiu eble bezonas atenton
.danger
Indikas danĝeran aŭ eble negativan agon
#
Kolumna titolo
Kolumna titolo
Kolumna titolo
1
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
2
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
3
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
4
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
5
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
6
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
7
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
8
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
9
Kolumna enhavo
Kolumna enhavo
Kolumna enhavo
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon al tabelvico aŭ individua ĉelo nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (la videbla teksto en la koncerna tabelvico/ĉelo), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.
Respondema tabeloj
Kreu respondemajn tabelojn envolvante iujn ajn .tablepor .table-responsivefari ilin rulumi horizontale sur malgrandaj aparatoj (sub 768px). Vidante sur io ajn pli granda ol 768px larĝa, vi ne vidos diferencon en ĉi tiuj tabeloj.
Vertikala tondado/tranĉado
Respondema tabeloj uzas overflow-y: hidden, kiu detranĉas ajnan enhavon kiu iras preter la malsupraj aŭ supraj randoj de la tabelo. Aparte, ĉi tio povas detranĉi falmenuojn kaj aliajn triajn fenestraĵojn.
Fajrovulpo kaj kamparo
Fajrovulpo havas iun mallertan kamparan stilon implikantan widthtion malhelpas la respondeman tabelon. Ĉi tio ne povas esti anstataŭita sen specifa hako de Firefox, kiun ni ne provizas en Bootstrap:
Individuaj formularaj kontroloj aŭtomate ricevas iun tutmondan stilon. Ĉiuj tekstaj <input>, <textarea>kaj <select>elementoj kun .form-controlestas width: 100%;defaŭlte agordita. Envolvu etikedojn kaj kontrolojn .form-grouppor optimuma interspaco.
Ne miksu formgrupojn kun eniggrupoj
Ne miksu formgrupojn rekte kun eniggrupoj . Anstataŭe, nestu la eniggrupon ene de la formogrupo.
Enlinia formo
Aldonu .form-inlineal via formularo (kiu ne devas esti <form>) por maldekstre vicigitaj kaj enlini-blokaj kontroloj. Ĉi tio validas nur por formoj en vidfenestroj, kiuj estas almenaŭ 768px larĝaj.
Povas postuli kutimajn larĝojn
Enigaĵoj kaj elektoj width: 100%;aplikiĝis defaŭlte en Bootstrap. Ene de enliniaj formoj, ni rekomencigas tion por width: auto;ke pluraj kontroloj povu loĝi sur la sama linio. Depende de via aranĝo, aldonaj kutimaj larĝoj povas esti postulataj.
Ĉiam aldonu etikedojn
Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-onlyklason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label, aria-labelledbyaŭ titleatributo. Se neniu el ĉi tiuj ĉeestas, ekranlegantoj povas uzi la placeholderatributon, se ĉeestas, sed notu ke uzo de placeholderkiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.
Horizontala formo
Uzu la antaŭdifinitajn kradklasojn de Bootstrap por vicigi etikedojn kaj grupojn de formularaj kontroloj en horizontala aranĝo aldonante .form-horizontalal la formo (kiu ne devas esti <form>). Farante tion ŝanĝas .form-groups por konduti kiel kradaj vicoj, do ne bezonas .row.
Subtenataj kontroloj
Ekzemploj de normaj formularaj kontroloj subtenataj en ekzempla formo-aranĝo.
Enigaĵoj
Plej ofta formkontrolo, tekst-bazitaj enigkampoj. Inkluzivas subtenon por ĉiuj HTML5-tipoj: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, kaj color.
Tipo-deklaro necesas
Enigaĵoj nur estos plene stilitaj se ili typeestas ĝuste deklaritaj.
Formkontrolo kiu subtenas plurajn liniojn de teksto. Ŝanĝu rowsatributon laŭbezone.
Markobutonoj kaj radioj
Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo, dum radioj estas por elekti unu opcion el multaj.
Malebligitaj markobutonoj kaj radioj estas subtenataj, sed por provizi "ne permesitan" kursoron sur ŝvebado de la gepatro <label>, vi devos aldoni la .disabledklason al la gepatro .radio, .radio-inline, .checkbox, aŭ .checkbox-inline.
Defaŭlte (stakita)
Enliniaj markobutonoj kaj radioj
Uzu la .checkbox-inlineaŭ .radio-inlineklasojn sur serio de markobutonoj aŭ radioj por kontroloj kiuj aperas sur la sama linio.
Markobutonoj kaj radioj sen etikedo teksto
Se vi ne havas tekston ene de la <label>, la enigo estas poziciigita kiel vi atendus. Nuntempe nur funkcias ĉe ne-enliniaj markobutonoj kaj radioj. Memoru ankoraŭ provizi iun formon de etikedo por helpaj teknologioj (ekzemple, uzante aria-label).
Elektas
Notu, ke multaj denaskaj elektaj menuoj—nome en Safaro kaj Chrome—havas rondajn angulojn, kiuj ne povas esti modifitaj per border-radiuspropraĵoj.
Por <select>kontroloj kun la multipleatributo, pluraj opcioj estas montritaj defaŭlte.
Statika kontrolo
Kiam vi devas meti simplan tekston apud formularetikedo ene de formo, uzu la .form-control-staticklason sur <p>.
Fokuso stato
Ni forigas la defaŭltajn outlinestilojn en iuj formularaj kontroloj kaj aplikas a box-shadowen ĝia loko por :focus.
Demo :focus-ŝtato
La supra ekzempla enigo uzas kutimajn stilojn en nia dokumentaro por montri la :focusstaton sur .form-control.
Malfunkciigita ŝtato
Aldonu la disabledbulean atributon al enigo por malhelpi uzantinteragojn. Malebligitaj enigaĵoj aperas pli malpezaj kaj aldonas not-allowedkursoron.
Malebligitaj kampoj
Aldonu la disabledatributon al a <fieldset>por malŝalti ĉiujn kontrolojn ene de la <fieldset>samtempe.
Averto pri ligfunkcieco de<a>
Defaŭlte, retumiloj traktos ĉiujn denaskajn formkontrolojn ( <input>, <select>kaj <button>elementoj) ene de <fieldset disabled>kiel malŝaltitaj, malhelpante ambaŭ klavarajn kaj musajn interagojn sur ili. Tamen, se via formo ankaŭ inkluzivas <a ... class="btn btn-*">elementojn, ĉi tiuj nur ricevos stilon pointer-events: none. Kiel notite en la sekcio pri malfunkciigita stato por butonoj (kaj specife en la subsekcio por ankroelementoj), ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Opera 18 kaj sube, aŭ en Internet Explorer 11, kaj gajnis ne malhelpas klavaruzantojn povi enfokusigi aŭ aktivigi ĉi tiujn ligilojn. Do por esti sekura, uzu kutiman JavaScript por malŝalti tiajn ligilojn.
Inter-retumila kongruo
Dum Bootstrap aplikos ĉi tiujn stilojn en ĉiuj retumiloj, Internet Explorer 11 kaj sube ne plene subtenas la disabledatributon sur <fieldset>. Uzu kutiman JavaScript por malŝalti la kamparon en ĉi tiuj retumiloj.
Nur legebla ŝtato
Aldonu la readonlybulean atributon al enigo por malhelpi modifon de la valoro de la enigo. Nurlegeblaj enigaĵoj ŝajnas pli malpezaj (same kiel malebligitaj enigaĵoj), sed konservas la norman kursoron.
Helpa teksto
Bloknivela helpteksto por formularaj kontroloj.
Asocii helpan tekston kun formularaj kontroloj
Helpteksto devus esti eksplicite asociita kun la formo-kontrolo al kiu ĝi rilatas uzante la aria-describedbyatributon. Ĉi tio certigos, ke helpaj teknologioj - kiel ekranlegiloj - anoncos ĉi tiun helptekston kiam la uzanto enfokusigas aŭ eniras la kontrolon.
Konvalidaj ŝtatoj
Bootstrap inkluzivas validigajn stilojn por eraroj, avertoj kaj sukcesaj statoj sur formularaj kontroloj. Por uzi, aldonu .has-warning, .has-error, aŭ .has-successal la gepatra elemento. Ajna .control-label, .form-control, kaj .help-blockene de tiu elemento ricevos la validigajn stilojn.
Transdonante validuman staton al helpaj teknologioj kaj kolorblindaj uzantoj
Uzi ĉi tiujn validigajn stilojn por indiki la staton de formo-kontrolo nur provizas vidan, kolor-bazitan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj - aŭ al kolorblindaj uzantoj.
Certigu, ke alternativa indiko de ŝtato ankaŭ estas provizita. Ekzemple, vi povas inkluzivi sugeston pri stato en la <label>teksto de la formo-kontrolo mem (kiel estas la kazo en la sekva kodekzemplo), inkluzivi Glyphicon (kun taŭga alternativa teksto uzante la .sr-onlyklason - vidu la Glyphicon-ekzemploj ), aŭ disponigante aldona helpa tekstobloko. Specife por helpaj teknologioj, malvalidaj formkontroloj ankaŭ povas esti asignitaj aria-invalid="true"atributo.
Kun laŭvolaj ikonoj
Vi ankaŭ povas aldoni laŭvolajn rimarkigajn ikonojn kun la aldono de .has-feedbackkaj la dekstra ikono.
Reago-ikonoj funkcias nur kun tekstaj <input class="form-control">elementoj.
Ikonoj, etikedoj kaj eniggrupoj
Mana poziciigado de reago-ikonoj estas postulata por enigaĵoj sen etikedo kaj por eniggrupoj kun aldonaĵo dekstre. Vi estas forte instigitaj provizi etikedojn por ĉiuj enigaĵoj pro alireblaj kialoj. Se vi volas malhelpi etikedojn montriĝi, kaŝu ilin kun la .sr-onlyklaso. Se vi devas fari sen etikedoj, ĝustigu la topvaloron de la sugesta ikono. Por eniggrupoj, alĝustigu la rightvaloron al taŭga piksela valoro depende de la larĝo de via aldonaĵo.
Transdonante la signifon de la ikono al helpaj teknologioj
Por certigi, ke helpaj teknologioj - kiel ekranlegiloj - ĝuste transdonas la signifon de ikono, kroma kaŝita teksto devus esti inkludita kun la .sr-onlyklaso kaj eksplicite asociita kun la formokontrolo al kiu ĝi rilatas uzante aria-describedby. Alternative, certigu, ke la signifo (ekzemple, la fakto ke estas averto por aparta tekst-enirkampo) estas transdonita en iu alia formo, kiel ekzemple ŝanĝado de la teksto de la reala <label>asociita kun la formularkontrolo.
Kvankam la sekvaj ekzemploj jam mencias la validigan staton de siaj respektivaj formkontroloj en la <label>teksto mem, la supra tekniko (uzante .sr-onlytekston kaj aria-describedby) estis inkluzivita por ilustraj celoj.
Laŭvolaj ikonoj en horizontalaj kaj enliniaj formoj
Laŭvolaj ikonoj kun kaŝitaj .sr-onlyetikedoj
Se vi uzas la .sr-onlyklason por kaŝi formularan kontrolon <label>(prefere ol uzi aliajn etikedajn opciojn, kiel la aria-labelatributon), Bootstrap aŭtomate ĝustigos la pozicion de la ikono post kiam ĝi estas aldonita.
(sukceso)
@
(sukceso)
Kontrolu grandecon
Agordu altecojn uzante klasojn kiel .input-lg, kaj agordu larĝojn per kradaj kolumnaj klasoj kiel .col-lg-*.
Alteco grandeco
Kreu pli altajn aŭ pli mallongajn formkontrolojn, kiuj kongruas kun butongrandoj.
Horizontala formo grupgrandoj
Rapide grandumi etikedojn kaj formkontrolojn ene .form-horizontalaldonante .form-group-lgaŭ .form-group-sm.
Kolumna grandeco
Envolvu enigaĵojn en kradaj kolumnoj, aŭ iu ajn kutima gepatra elemento, por facile devigi deziratajn larĝojn.
Butonoj
Butonetikedoj
Uzu la butonklasojn sur <a>, <button>, aŭ <input>elemento.
Kunteksta uzado
Dum butonklasoj povas esti uzataj sur <a>kaj <button>elementoj, nur <button>elementoj estas subtenataj ene de niaj nav kaj navbar-komponentoj.
Ligiloj agante kiel butonoj
Se la <a>elementoj estas uzataj por funkcii kiel butonoj - ekigante enpaĝan funkcion, anstataŭ navigi al alia dokumento aŭ sekcio ene de la nuna paĝo - ili ankaŭ devus ricevi taŭgan role="button".
Trans-retumila bildigo
Kiel plej bona praktiko, ni tre rekomendas uzi la <button>elementon kiam ajn eblas por certigi kongruan trans-retumilon bildigon.
Interalie, estas cimo en Fajrovulpo <30 , kiu malhelpas al ni agordi la butonojn bazitajn sur, kaŭzante, ke ili ne precize kongruas kun la alteco de aliaj butonoj en Fajrovulpo line-height.<input>
Opcioj
Uzu iun ajn el la disponeblaj butonklasoj por rapide krei stilitan butonon.
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon al butono nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (la videbla teksto de la butono), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.
Grandecoj
Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-lg, .btn-sm, aŭ .btn-xspor pliaj grandecoj.
Kreu bloknivelajn butonojn—tiujn kiuj ampleksas la tutan larĝon de gepatro— aldonante .btn-block.
Aktiva stato
Butonoj aperos premitaj (kun pli malhela fono, pli malhela rando kaj enmetita ombro) kiam aktivaj. Por <button>elementoj, ĉi tio estas farita per :active. Por <a>elementoj, ĝi estas farita per .active. Tamen, vi povas uzi .activesur <button>s (kaj inkluzivi la aria-pressed="true"atributon) se vi bezonas reprodukti la aktivan staton programe.
Butona elemento
Ne necesas aldoni :activeĉar ĝi estas pseŭdoklaso, sed se vi bezonas devigi la saman aspekton, daŭrigu kaj aldonu .active.
Ni uzas .disabledĉi tie kiel utilan klason, similan al la komuna .activeklaso, do ne necesas prefikso.
Ligo-funkcieca averto
Ĉi tiu klaso uzas pointer-events: nonepor provi malŝalti la ligan funkcion de <a>s, sed tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Opera 18 kaj sube, aŭ en Internet Explorer 11. Krome, eĉ en retumiloj kiuj subtenas pointer-events: noneklavaron. navigado restas netuŝita, kio signifas, ke videblaj klavaruzantoj kaj uzantoj de helpaj teknologioj ankoraŭ povos aktivigi ĉi tiujn ligilojn. Do por esti sekura, uzu kutiman JavaScript por malŝalti tiajn ligilojn.
Bildoj
Respondema bildoj
Bildoj en Bootstrap 3 povas fariĝi respondemaj amika per aldono de la .img-responsiveklaso. Ĉi tio validas max-width: 100%;, height: auto;kaj display: block;al la bildo tiel ke ĝi skalas bele al la gepatra elemento.
Por centri bildojn kiuj uzas la .img-responsiveklason, uzu .center-blockanstataŭ .text-center. Vidu la sekcion de helpklasoj por pliaj detaloj pri .center-blockuzado.
SVG-bildoj kaj IE 8-10
En Internet Explorer 8-10, SVG-bildoj kun .img-responsiveestas misproporcie grandaj. Por ripari ĉi tion, aldonu width: 100% \9;kie necese. Bootstrap ne aplikas ĉi tion aŭtomate ĉar ĝi kaŭzas komplikaĵojn al aliaj bildformatoj.
Bildaj formoj
Aldonu klasojn al <img>elemento por facile stiligi bildojn en iu ajn projekto.
Inter-retumila kongruo
Memoru, ke Interreto Explorer 8 mankas subteno por rondigitaj anguloj.
Helpklasoj
Kuntekstaj koloroj
Transdonu signifon per koloro per manpleno da emfazaj utilaj klasoj. Ĉi tiuj ankaŭ povas esti aplikataj al ligiloj kaj mallumiĝos dum ŝvebado same kiel niaj defaŭltaj ligaj stiloj.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Mecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Traktante specifecon
Foje emfazaj klasoj ne povas esti aplikataj pro la specifeco de alia elektilo. Plejofte, sufiĉa solvo estas envolvi vian tekston en <span>kun la klaso.
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj de la enhavo mem (la kontekstaj koloroj estas nur uzataj por plifortigi signifon kiu jam ĉeestas en la teksto/markado), aŭ estas inkluditaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso . .
Kuntekstaj fonoj
Simile al la kuntekstaj tekstaj kolorklasoj, facile agordu la fonon de elemento al iu ajn kunteksta klaso. Ankraj komponantoj mallumiĝos dum ŝvebado, same kiel la tekstaj klasoj.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Mecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Traktante specifecon
Foje kontekstaj fonklasoj ne povas esti aplikataj pro la specifeco de alia elektilo. En iuj kazoj, sufiĉa solvo estas envolvi la enhavon de via elemento en <div>kun la klaso.
Transdonante signifon al helpaj teknologioj
Kiel kun kuntekstaj koloroj , certigu, ke ajna signifo transdonita per koloro ankaŭ estas transdonita en formato kiu ne estas pure prezenta.
Fermu ikonon
Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.
Carets
Uzu signojn por indiki falmenuman funkcion kaj direkton. Rimarku, ke la defaŭlta kamero inversiĝos aŭtomate en falmenuoj .
Rapidaj flosas
Flosigu elementon maldekstren aŭ dekstren kun klaso. !importantestas inkluzivita por eviti specifecajn problemojn. Klasoj ankaŭ povas esti uzataj kiel miksinoj.
Ne por uzo en navbaroj
Por vicigi komponantojn en navbaroj kun utilaj klasoj, uzu .navbar-leftaŭ .navbar-rightanstataŭe. Vidu la navbar-dokumentojn por detaloj.
Centri enhavblokojn
Agordu elementon al display: blockkaj centri per margin. Havebla kiel miksaĵo kaj klaso.
Clearfix
Facile malplenigu floats aldonante .clearfixal la gepatra elemento . Utiligas la mikroklaran fiksaĵon kiel popularigitan de Nicolas Gallagher. Povas ankaŭ esti uzata kiel miksaĵo.
Montri kaj kaŝi enhavon
Devigi elementon esti montrita aŭ kaŝita ( inkluzive por ekranlegiloj ) per la uzo de .showkaj .hiddenklasoj. Ĉi tiuj klasoj uzas !importantpor eviti specifajn konfliktojn, same kiel la rapidaj flosiloj . Ili estas disponeblaj nur por bloknivela ŝanĝado. Ili ankaŭ povas esti uzataj kiel miksinoj.
.hidedisponeblas, sed ĝi ne ĉiam influas ekranlegilojn kaj estas malrekomendita ekde v3.0.1. Uzu .hiddenaŭ .sr-onlyanstataŭe.
Krome, .invisiblepovas esti uzata por ŝanĝi nur la videblecon de elemento, tio signifas, ke displayĝi ne estas modifita kaj la elemento ankoraŭ povas influi la fluon de la dokumento.
Ekranlegilo kaj klavara navigado enhavo
Kaŝi elementon al ĉiuj aparatoj krom ekranlegiloj kun .sr-only. Kombinu .sr-onlykun .sr-only-focusablepor montri la elementon denove kiam ĝi estas fokusita (ekz. de klavara uzanto). Necesas por sekvi plej bonajn praktikojn pri alirebleco . Povas ankaŭ esti uzata kiel miksaĵoj.
Anstataŭigo de bildo
Uzu la .text-hideklason aŭ miksaĵon por helpi anstataŭigi la tekstan enhavon de elemento per fonbildo.
Respondema utilecoj
Por pli rapida evoluado por poŝtelefono, uzu ĉi tiujn utilajn klasojn por montri kaj kaŝi enhavon per aparato per amaskomunikila demando. Ankaŭ inkluzivitaj utilaj klasoj por ŝanĝi enhavon kiam presite.
Provu uzi ĉi tiujn sur limigita bazo kaj eviti krei tute malsamajn versiojn de la sama retejo. Anstataŭe, uzu ilin por kompletigi la prezenton de ĉiu aparato.
Disponeblaj klasoj
Uzu ununuran aŭ kombinaĵon de la disponeblaj klasoj por ŝanĝi enhavon tra vidpunktoj.
Ekstra malgrandaj aparatojTelefonoj (<768px)
Malgrandaj aparatojTablojdoj (≥768px)
Mezaj aparatojLabortabloj (≥992px)
Grandaj aparatojLabortabloj (≥1200px)
.visible-xs-*
Videbla
Kaŝita
Kaŝita
Kaŝita
.visible-sm-*
Kaŝita
Videbla
Kaŝita
Kaŝita
.visible-md-*
Kaŝita
Kaŝita
Videbla
Kaŝita
.visible-lg-*
Kaŝita
Kaŝita
Kaŝita
Videbla
.hidden-xs
Kaŝita
Videbla
Videbla
Videbla
.hidden-sm
Videbla
Kaŝita
Videbla
Videbla
.hidden-md
Videbla
Videbla
Kaŝita
Videbla
.hidden-lg
Videbla
Videbla
Videbla
Kaŝita
Ekde v3.2.0, la .visible-*-*klasoj por ĉiu rompopunkto venas en tri varioj, unu por ĉiu CSS- displayposedaĵvaloro listigita malsupre.
Grupo de klasoj
CSSdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
Do, por ekstra malgrandaj ( xs) ekranoj ekzemple, la disponeblaj .visible-*-*klasoj estas: .visible-xs-block, .visible-xs-inline, kaj .visible-xs-inline-block.
La klasoj .visible-xs, .visible-sm, .visible-md, kaj .visible-lgankaŭ ekzistas, sed estas malrekomenditaj ekde v3.2.0 . Ili estas proksimume ekvivalentaj al .visible-*-block, krom kun aldonaj specialaj kazoj por ŝanĝantaj <table>-rilataj elementoj.
Presaj klasoj
Simile al la regulaj respondemaj klasoj, uzu ĉi tiujn por ŝanĝi enhavon por presado.
La klaso .visible-printankaŭ ekzistas sed estas malrekomendita ekde v3.2.0. Ĝi estas proksimume ekvivalenta al .visible-print-block, krom kun kromaj specialaj kazoj por <table>-rilataj elementoj.
Testkazoj
Regrandigu vian retumilon aŭ ŝarĝu sur malsamaj aparatoj por testi la respondemajn utilajn klasojn.
Videbla sur...
Verdaj markmarkoj indikas, ke la elemento estas videbla en via nuna vidfenestro.
Ekstra malgranda✔ Videbla sur x-malgranda
Malgranda✔ Videbla sur malgranda
Meza✔ Videbla sur mediumo
Granda✔ Videbla sur granda
Ekstra malgranda kaj malgranda✔ Videbla sur x-malgranda kaj malgranda
Mezaj kaj grandaj✔ Videbla sur meza kaj granda
Ekstra malgranda kaj meza✔ Videbla sur x-malgranda kaj meza
Malgranda kaj granda✔ Videbla sur malgranda kaj granda
Ekstre malgranda kaj granda✔ Videbla sur x-malgranda kaj granda
Malgranda kaj meza✔ Videbla sur malgrandaj kaj mezaj
Kaŝita sur...
Ĉi tie, verdaj markmarkoj ankaŭ indikas, ke la elemento estas kaŝita en via nuna vidfenestro.
Ekstra malgranda✔ Kaŝita sur x-malgranda
Malgranda✔ Kaŝita sur malgranda
Meza✔ Kaŝita sur mediumo
Granda✔ Kaŝita sur granda
Ekstra malgranda kaj malgranda✔ Kaŝita sur x-malgranda kaj malgranda
Mezaj kaj grandaj✔ Kaŝita sur meza kaj granda
Ekstra malgranda kaj meza✔ Kaŝita sur x-malgranda kaj meza
Malgranda kaj granda✔ Kaŝita sur malgranda kaj granda
Ekstre malgranda kaj granda✔ Kaŝita sur x-malgranda kaj granda
Malgranda kaj meza✔ Kaŝita sur malgrandaj kaj mezaj
Uzante Malpli
La CSS de Bootstrap estas konstruita sur Less, antaŭprocesoro kun plia funkcieco kiel variabloj, miksaĵoj kaj funkcioj por kompili CSS. Tiuj, kiuj serĉas uzi la fonton Malpli dosierojn anstataŭ niaj kompilitaj CSS-dosieroj, povas uzi la multajn variablojn kaj miksaĵojn, kiujn ni uzas tra la kadro.
Bootstrap povas esti uzata en almenaŭ du manieroj: kun la kompilita CSS aŭ kun la fonto Malpli dosieroj. Por kompili la Malpli dosierojn, konsultu la sekcion Komenci pri kiel agordi vian evoluan medion por ruli la necesajn komandojn.
Triaj kompililoj povas funkcii kun Bootstrap, sed ili ne estas subtenataj de nia kerna teamo.
Variabloj
Variabloj estas uzataj tra la tuta projekto kiel maniero por centralizi kaj dividi ofte uzatajn valorojn kiel koloroj, interspaco aŭ tiparstakoj. Por kompleta paneo, bonvolu vidi la Customizer .
Koloroj
Facile uzu du kolorskemojn: grizskalo kaj semantika. Grizskalaj koloroj disponigas rapidan aliron al ofte uzataj nigraj nuancoj dum semantikaj inkluzivas diversajn kolorojn asignitajn al signifaj kontekstaj valoroj.
Uzu iun el ĉi tiuj koloraj variabloj kiel ili estas aŭ reasignu ilin al pli signifaj variabloj por via projekto.
Skafaldo
Manpleno da variabloj por rapide agordi ŝlosilajn elementojn de la skeleto de via retejo.
Ligiloj
Facile stilu viajn ligilojn kun la ĝusta koloro kun nur unu valoro.
Notu, ke la @link-hover-coloruzas funkcion, alian mirindan ilon de Less, por aŭtomate krei la ĝustan ŝveban koloron. Vi povas uzi darken, lighten, saturate, kaj desaturate.
Tipografio
Facile agordu vian tiparon, tekstograndecon, gvidadon kaj pli per kelkaj rapidaj variabloj. Bootstrap uzas ĉi tiujn ankaŭ por provizi facilajn tipografiajn miksaĵojn.
Ikonoj
Du rapidaj variabloj por agordi la lokon kaj dosiernomon de viaj ikonoj.
Komponentoj
Komponantoj ĉie en Bootstrap uzas iujn defaŭltajn variablojn por fiksi komunajn valorojn. Jen la plej ofte uzataj.
Vendistaj miksaĵoj
Vendistaj miksaĵoj estas miksaĵoj por helpi subteni plurajn foliumilojn inkluzivante ĉiujn koncernajn vendistajn prefiksojn en via kompilita CSS.
Skatolo-grandeco
Restarigu la skatolan modelon de viaj komponantoj per unuopa miksaĵo. Por kunteksto, vidu ĉi tiun helpeman artikolon de Mozilo .
La miksaĵo estas malrekomendita ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵon interne ĝis Bootstrap v4.
Rondigitaj anguloj
Hodiaŭ ĉiuj modernaj retumiloj subtenas la ne-prefiksan border-radiusposedaĵon. Kiel tia, ne ekzistas .border-radius()miksaĵo, sed Bootstrap inkluzivas ŝparvojojn por rapide rondigi du angulojn sur aparta flanko de objekto.
Skatolo (Faligi) ombroj
Se via celgrupo uzas la plej novajn kaj plej bonegajn retumilon kaj aparatojn, nepre nur uzi la box-shadowposedaĵon memstare. Se vi bezonas subtenon por pli malnovaj Android (antaŭ-v4) kaj iOS-aparatoj (antaŭ iOS 5), uzu la malrekomenditan miksaĵon por preni la postulatan -webkitprefikson.
La miksaĵo estas malrekomendita ekde v3.1.0, ĉar Bootstrap ne oficiale subtenas la malmodernajn platformojn, kiuj ne subtenas la norman posedaĵon. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵon interne ĝis Bootstrap v4.
Nepre uzu rgba()kolorojn en viaj skatolaj ombroj, por ke ili miksu kiel eble plej perfekte kun fonoj.
Transiroj
Multoblaj miksaĵoj por fleksebleco. Agordu ĉiujn transirajn informojn per unu, aŭ specifu apartan prokraston kaj daŭron laŭbezone.
La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis Bootstrap v4.
Transformoj
Rotacii, skali, traduki (movu), aŭ deklini ajnan objekton.
La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis Bootstrap v4.
Animacioj
Ununura miksaĵo por uzi ĉiujn animaciajn ecojn de CSS3 en unu deklaro kaj aliajn miksaĵojn por individuaj propraĵoj.
La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis Bootstrap v4.
Opakeco
Agordu la opakecon por ĉiuj retumiloj kaj provizi filterrezervilon por IE8.
Anstataŭilo teksto
Provizu kuntekston por formularaj kontroloj ene de ĉiu kampo.
Kolumnoj
Generu kolumnojn per CSS ene de ununura elemento.
Gradientoj
Facile turnu iujn ajn du kolorojn en fonan gradienton. Pli progresiĝu kaj starigu direkton, uzu tri kolorojn aŭ uzu radialan gradienton. Per unuopa miksaĵo vi ricevas ĉiujn prefiksajn sintaksojn, kiujn vi bezonos.
Vi ankaŭ povas specifi la angulon de norma dukolora, linia gradiento:
Se vi bezonas barbir-strian stilan gradienton, ankaŭ tio estas facila. Nur specifu ununuran koloron kaj ni supermetos diafanan blankan strion.
Pliigu la antaŭan kaj uzu tri kolorojn anstataŭe. Agordu la unuan koloron, la duan koloron, la kolorhalton de la dua koloro (procentvaloro kiel 25%) kaj la trian koloron per ĉi tiuj miksaĵoj:
Atentu! Se vi iam bezonos forigi gradienton, nepre forigi ajnan IE-specifan filter, kiun vi eble aldonis. Vi povas fari tion uzante la .reset-filter()miksaĵon apud background-image: none;.
Utilaj miksaĵoj
Utilaj miksinoj estas miksinoj kiuj kombinas alie senrilatajn CSS-ecojn por atingi specifan celon aŭ taskon.
Clearfix
Forgesu aldoni class="clearfix"al iu ajn elemento kaj anstataŭe aldonu la .clearfix()miksaĵon kie konvene. Uzas la mikroklarfikson de Nicolas Gallagher .
Horizontala centrado
Rapide centri ajnan elementon ene de sia patro. Postulas widthaŭ max-widthagordas.
Dimensigaj helpantoj
Specifu la dimensiojn de objekto pli facile.
Regrandigeblaj tekstaroj
Facile agordu la opciojn de regrandigo por iu ajn tekstareo aŭ iu ajn alia elemento. Defaŭlte al normala retumila konduto ( both).
Detranĉante tekston
Facile detranĉu tekston per elipso per unuopa miksaĵo. Postulas elementon esti blockaŭ inline-blocknivelo.
Bildoj de retino
Specifu du bildvojojn kaj la @1x bildajn dimensiojn, kaj Bootstrap provizos @2x amaskomunikilan demandon. Se vi havas multajn bildojn por servi, konsideru skribi vian retinan bildon CSS permane en ununura amaskomunikila demando.
Uzante Sass
Dum Bootstrap estas konstruita sur Less, ĝi ankaŭ havas oficialan Sass-havenon . Ni konservas ĝin en aparta GitHub-deponejo kaj pritraktas ĝisdatigojn per konverta skripto.
Kio estas inkluzivita
Ĉar la Sass-haveno havas apartan repo kaj servas iomete malsaman publikon, la enhavo de la projekto multe diferencas de la ĉefa Bootstrap-projekto. Ĉi tio certigas, ke la Sass-haveno estas tiel kongrua kun kiel eble plej multaj Sass-bazitaj sistemoj.
Vojo
Priskribo
lib/
Ruby-gemkodo (Sass-agordo, Rails kaj Compass-integriĝoj)
tasks/
Konvertilaj skriptoj (fariĝante kontraŭflue Less al Sass)
Por informoj pri kiel instali kaj uzi Bootstrap por Sass, konsultu la GitHub-deponejon readme . Ĝi estas la plej ĝisdata fonto kaj inkluzivas informojn por uzi kun Rails, Compass kaj normaj Sass-projektoj.