Source

U guuraya v4

Bootstrap 4 waa dib-u-qoris weyn oo mashruuca oo dhan ah. Isbeddelada ugu caansan ayaa lagu soo koobay hoos, oo ay ku xigto isbeddello gaar ah oo lagu sameeyo qaybaha khuseeya.

Isbeddellada deggan

Ka guurista Beta 3 una guuraya v4.0 siideyntayada, ma jiraan wax isbeddelo ah, laakiin waxaa jira isbeddello muuqda.

Daabacaadda

  • Utility daabac go'an. Markii hore, isticmaalka .d-print-*fasalka ayaa si lama filaan ah u burinaya .d-*fasal kasta. Hadda, waxay ku habboon yihiin agabkayada kale ee bandhigga waxayna khuseeyaan oo keliya warbaahintaas ( @media print).

  • Utility bandhigay daabac ee la heli karo oo la fidiyay si ay ugu dhigmaan yutiilitida kale. Beta 3 iyo wixii ka weyn waxay lahaayeen kaliya block, inline-block, inline, iyo none. Xasilooni v4 lagu daray flex, inline-flex, table, table-rowiyo table-cell.

  • Daabacado go'an oo horudhac u ah samaynta daalacashada oo dhan leh qaabab daabac cusub oo tilmaamaya @page size.

Beta 3 isbedel

Halka Beta 2 uu arkay badi isbeddelladayada jabintu intii lagu jiray marxaladdii beta, laakiin waxaan weli haysanaa kuwo yar oo u baahan in wax laga qabto siideynta Beta 3. Isbeddelladani waxay khuseeyaan haddii aad u cusboonaysiinayso Beta 3 ka Beta 2 ama nooc kasta oo ka weyn Bootstrap.

Kala duwan

  • Meesha laga saaray $thumbnail-transitiondoorsoomaha aan la isticmaalin Waxba ma aannu wareejin, markaa waxay ahayd kood dheeraad ah.
  • Xirmada npm kuma jiraan wax faylal ah oo aan ka ahayn ishayada iyo faylalka fogaanta; Haddii aad iyaga ku tiirsan tahay oo aad ku socodsiinaysay qoraalladayada node_modulesgalka, waa inaad la qabsato socodkaaga shaqada.

Foomamka

  • Dib u qor sanduuqyada saxda ah iyo kuwa caadiga ah iyo raadiyaha. Hadda, labaduba waxay leeyihiin qaab-dhismeed u dhigma HTML (direed <div>oo walaal <input>iyo <label>) iyo qaabab isku mid ah (qaab la isku dhejiyay, oo la jaan qaadaya fasalka beddelka). Tani waxay noo ogolaanaysaa in aan qaabaynno summada ku salaysan gobolka gelinta, fududaynta taageerada disabledsifada (horey u baahnayd fasalka waalidka) iyo si wanaagsan u taageerta ansixinta foomka.

    Iyada oo qayb ka ah tan, waxaan u bedelnay CSS si loo maareeyo sanduuqyo badan background-imageoo qaab-caadi ah iyo raadiyaha. Markii hore, curiyaha hadda la saaray .custom-control-indicatorwuxuu lahaa midabka asalka, gradient, iyo astaanta SVG. Habaynta jaan-goynta asalka waxay la macno tahay inaad bedesho dhammaan kuwan mar kasta oo aad u baahato inaad beddesho mid keliya. Hadda, waxaanu haysanaa .custom-control-label::beforebuuxinta iyo gradient oo waxaanu .custom-control-label::aftergacanta ku haynaa astaanta.

    Si aad u samayso jeeg khaas ah khadka, ku dar .custom-control-inline.

  • Xulashada la cusboonaysiiyay ee kooxaha badhanka ku-salaysan. Halkii laga [data-toggle="buttons"] { }isticmaali lahaa qaabka iyo dhaqanka, waxaan u isticmaalnaa datasifada kaliya dabeecadaha JS waxaanan ku tiirsanahay .btn-group-togglefasal cusub qaabeynta.

  • Meesha laga saaray .col-form-legendsi loo helo wax yar oo la hagaajiyay .col-form-label. Habkan .col-form-label-smiyo .col-form-label-lgwaxaa loo isticmaali karaa on <legend>curiyeyaasha si fudud.

  • Gelida faylka gaarka ah waxay heshay isbeddel ku yimid $custom-file-textdoorsoomahooda Sass. Hadda ma ahan khariidad Sass buul leh oo hadda waxay awoodaysaa hal xadhig - Browsebadhanka maadaama uu hadda yahay walxaha been abuurka ah ee laga soo saaray Sass-keena. Qoraalku Choose filehadda wuxuu ka yimid .custom-file-label.

Kooxaha wax gelinta

  • Addons-ka kooxda gelinta ayaa hadda gaar u ah meelayntooda marka loo eego gelinta Waxaan ka tagnay .input-group-addoniyo .input-group-btnlaba fasal oo cusub, .input-group-prependiyo .input-group-append. Waa inaad si cad u isticmaashaa lifaaqa ama prepend hadda, adoo fududaynaya in badan oo CSS ah. Gudaha lifaaqa ama diyaarinta, dhig badhamada sida ay uga jiraan meel kale, laakiin ku duub qoraalka .input-group-text.

  • Qaababka xaqiijinta hadda waa la taageerayaa, si la mid ah agabyo badan (inkasta oo aad hal koox kaliya xaqiijin karto).

  • Casharrada cabbiridda waa in ay ahaadaan waalidka ee .input-groupmaaha in ay ku jiraan qaybaha gaarka ah.

Beta 2 ayaa isbedelay

Inta aan ku jirno beta, waxaan hiigsaneynaa inaanan helin wax isbedel ah. Si kastaba ha ahaatee, arrimuhu had iyo jeer uma socdaan sidii la qorsheeyay. Hoos waxaa ah isbeddelada jebinta ee maskaxda lagu hayo markaad ka guurayso Beta 1 una socoto Beta 2.

Jebinta

  • Doorsoomayaasha meesha laga saaray $badge-coloriyo isticmaalkeeda .badge. Waxaan isticmaalnaa shaqada isbarbardhigga midabka si aan u soo qaadanno colorku saleysan background-color, markaa doorsoomuhu waa mid aan loo baahnayn.
  • Shaqada dib loo magacaabay grayscale()si gray()looga fogaado jebinta isku dhaca grayscaleshaandhada CSS ee asalka ah.
  • Dib loo magacaabay .table-inverse, .thead-inverse, iyo .thead-defaultilaa .*-darkiyo .*-light, oo ku habboon nidaamkayaga midabka ee meelo kale lagu isticmaalo.
  • Miisaska ka jawaabaya hadda waxay abuuraan xiisado goob kasta oo jajab ah. Tani waxay ka jebisay Beta 1 in ka .table-responsiveaad isticmaalaysay uu la mid yahay .table-responsive-md. Waxaad hadda isticmaali kartaa .table-responsiveama .table-responsive-{sm,md,lg,xl}haddii loo baahdo.
  • Taageerada Bower ee la tuuray maadaama maareeyaha xirmada loo diiday beddelka (tusaale, Yarn ama npm). Faahfaahinta eeg qaansada/ qaansada#2298
  • Bootstrap wali waxay u baahan tahay jQuery 1.9.1 ama ka sareeya, laakiin waxaa lagugula talinayaa inaad isticmaasho nooca 3.x maadaama v3.x daalacashada ay taageerto ay yihiin kuwa Bootstrap ay taageerto oo lagu daray v3.x ayaa leh qaar hagaajin amniga ah.
  • .form-control-labelLaga saaray fasalka aan la isticmaalin . Haddii aad isticmaashay fasalkan, waxa uu ahaa nuqul ka mid ah .col-form-labelfasalka kaas oo si toos ah u dhexeyay a <label>oo ay la socoto wax gelinta la xidhiidha qaab-dhismeedka qaab toosan.
  • Waxa uu ka beddelay color-yiqisku-dhafka ay ku jirto colorhantida una beddelo shaqo soo celisa qiime, taas oo kuu oggolaanaysa inaad u isticmaasho hanti kasta oo CSS ah. Tusaale ahaan, halkii color-yiq(#000)aad ka qori lahayd color: color-yiq(#000);.

Tilmaamaha

  • Soo bandhigay pointer-eventsisticmaalka cusub ee moodooyinka. Banaanka .modal-dialogwuxuu dhex maraa dhacdooyinka iyadoo pointer-events: nonesi gaar ah loogu maamulayo dhagsi (ka dhigaysa in la dhageysto kaliya .modal-backdropdhagsi kasta), ka dibna wuxuu ka hortagaa sida dhabta .modal-contentah pointer-events: auto.

Soo koobid

Waa kuwan waxyaabaha tigidhada waaweyn ee aad rabto inaad ka warqabto markaad ka guureyso v3 una guureyso v4.

Taageerada browserka

  • La tuuray taageerada IE8, IE9, iyo iOS 6. v4 hadda waa kaliya IE10+ iyo iOS 7+. Goobaha u baahan midkoodna, isticmaal v3.
  • Waxaa lagu daray taageerada rasmiga ah ee Android v5.0 Lollipop's Browser iyo WebView. Noocyadii hore ee Browser-ka Android iyo WebView waxa ay ahaanayaan kaliya si aan rasmi ahayn oo la taageero.

Isbeddellada caalamiga ah

  • Flexbox waa la dajiyay. Guud ahaan tani waxay la macno tahay ka guurista sabbaynta iyo in badan oo ka mid ah qaybahayada.
  • Waxa laga beddelay wax ka yar oo loo beddelay Sass ilahayaga faylasha CSS.
  • pxLaga soo beddelay unuggeena remCSS-ta aasaasiga ah, in kasta oo pixels weli loo isticmaalo weydiimaha warbaahinta iyo hab-dhaqanka xarkaha maaddaama qalabka daawashada aanay saamaynin cabbirka nooca.
  • Cabbirka farta caalamiga ah ayaa laga soo 14pxbilaabo 16px.
  • Heerarka shabakadaha dib loo habeeyey si loogu daro ikhtiyaarka shanaad (iyaga oo wax ka qabanaya aaladaha yaryar ee 576pxhoos iyo hoos) oo laga saaray -xsinfix-ka fasalladaas. Tusaale .col-6.col-sm-4.col-md-3:.
  • Ku beddeshay mawduuca ikhtiyaariga ah ee goonida ah oo leh xulashooyin la habeyn karo iyada oo loo marayo doorsoomayaasha SCSS (tusaale, $enable-gradients: true).
  • Dhis nidaamka dib-u-habayn lagu sameeyay si loo isticmaalo taxane taxane ah npm halkii Grunt. Eeg package.jsondhammaan qoraallada, ama akhrinta mashruucayaga baahiyaha horumarinta maxalliga ah.
  • Isticmaalka aan jawaab-celinta lahayn ee Bootstrap hadda lama taageero.
  • U tuuray Customizer-ka khadka tooska ah isaga oo door biday dukumeenti dejineed aad u ballaadhan iyo dhismo la habeeyey.
  • Waxaa lagu daray daraasiin fasallo tasiilaad ah oo loogu talagalay lammaane-qiimaha hantida CSS ee caadiga ah iyo marinnada kala dheereynta ee margin/padding.

Nidaamka grid

  • Loo guuray flexbox
    • Taageerada lagu daray flexbox ee isku dhafka shabakadaha iyo fasallada horay loo sii qeexay.
    • Sida qayb ka mid ah flexbox, waxaa ku jira taageerada fasalada toosinta toosan iyo toosan.
  • Magacyada fasalka la cusboonaysiiyay iyo heer cusub
    • Hoos waxaa lagu daray heer cusub oo smshabaq ah 768pxsi loo xakameeyo granular dheeraad ah. Hadda waxaan haysanaa xs, sm, md, lgiyo xl. Tani waxay sidoo kale ka dhigan tahay in heer kasta uu kor u kacay hal heer (marka .col-md-6v3 hadda waxay .col-lg-6ku jirtaa v4).
    • xsfasalada grid waa la bedelay si aan loogu baahnayn infix si ay si sax ah u matalaan inay bilaabayaan ku dhaqanka qaababka ee min-width: 0maaha qiime go'an. Halkii .col-xs-6, hadda waa .col-6. Dhammaan heerarka kale ee shabakada waxay u baahan yihiin infix (tusaale, sm).
  • La cusboonaysiiyay cabbirada shabakada, isku darka, iyo doorsoomayaasha
    • Biyo-mareenada xadhkaha goostay hadda waxay leeyihiin khariidad Sass si aad u qeexdo ballaadhka mareenka goynta kasta.
    • Isku darka shabakadaha la cusboonaysiiyay si loo isticmaalo isku darka make-col-readyudiyaarinta iyo a make-colsi loo dejiyo flexiyo max-widthcabbirka tiirka gaarka ah.
    • Beddelay habka grid-ka baraha warbahinta iyo ballaadhka weelka si loogu xisaabtamo heerka cusub ee shabakada iyo in la hubiyo in tiirarku si siman loo qaybsan karo marka loo 12eego ballaca ugu badan.
    • Baraha goynta iyo ballaca weelka waxaa hadda lagu maamulaa khariidadaha Sass ( $grid-breakpointsiyo $container-max-widths) halkii ay ka ahaan lahaayeen wax yar oo doorsoomayaal gaar ah Kuwani waxay bedelaan @screen-*doorsoomayaasha gabi ahaanba waxayna kuu oggolaanayaan inaad si buuxda u habayso heerarka xadhkaha.
    • Weydiimaha warbaahinta ayaa sidoo kale isbeddelay. Halkii aan ku celcelin lahayn ku dhawaaqida weydiimaha warbaahinta ee leh qiime isku mid ah mar kasta, hadda waxaan haysanaa @include media-breakpoint-up/down/only. Hadda, halkii aad wax qori lahayd @media (min-width: @screen-sm-min) { ... }, waad qori kartaa @include media-breakpoint-up(sm) { ... }.

Qaybaha

  • Dabaqyada la tuuray, sawir-gacmeedka, iyo ceelasha qayb cusub oo dhan walba ka kooban, kaadhadh .
  • Soo tuuray farta summada Glyphicons Haddii aad u baahan tahay calaamado, xulashooyinka qaar waa:
  • Soo tuuray Affix jQuery plugin
    • Waxaan ku talinaynaa in la isticmaalo position: stickybeddelkeeda. Fiiri HTML5 Fadlan geli faahfaahinta iyo talooyinka gaarka ah ee buuxinta. Mid talo soo jeedin ah ayaa ah in la isticmaalo @supportsxeer si loo hirgeliyo (tusaale, @supports (position: sticky) { ... })/
    • Haddii aad isticmaalaysay Affix si aad u codsato qaabab dheeraad ah oo aan ahayn position, polyfill-yada waxaa laga yaabaa inaanay taageerin kiiskaaga isticmaal. Mid ka mid ah ikhtiyaarka isticmaalka noocaas ah waa maktabadda ScrollPos-Styler qolo saddexaad .
  • Hoos u dhigay qaybta pager-ka maadaama ay asal ahaan ahayd badhamada wax yar la habeeyey.
  • Dib-u-habayn lagu sameeyay ku dhawaad ​​dhammaan qaybaha si loo isticmaalo xulashooyin badan oo fasallo aan buul lahayn halkii laga isticmaali lahaa xulashooyinka gaarka ah ee carruurta.

Qayb ahaan

Liiskani wuxuu muujinayaa isbeddellada muhiimka ah ee qayb ahaan u dhexeeya v3.xx iyo v4.0.0.

Dib u bilow

Ku cusub Bootstrap 4 waa Reboot - ka, xaashi cusub oo qaab cusub oo ku dhista Caadiye oo leh qaabab dib-u-dejin oo xoogaa ra'yi ah noo gaar ah. Xulashooyinka ka muuqda faylkan waxay isticmaalaan oo keliya curiyayaasha — halkan wax fasallo ah ma jiraan. Tani waxay ka soocdaa qaababkayada dib u dajinta ee qaababka qaybahayaga si loo helo hab habaysan. Qaar ka mid ah dib-u-dejinta ugu muhiimsan tan waxaa ka mid ah box-sizing: border-boxisbeddelka, ka guurista emunugyo remwalxo badan, qaababka isku xirka, iyo dib-u-dejinta walxaha badan.

Qoraalka qoraalka

  • U raray dhammaan .text-utility- _utilities.scssga faylka
  • Hoos u dhaca .page-headersida qaabkeeda lagu dabaqi karo adeegyada
  • .dl-horizontalwaa la tuuray. Taa beddelkeeda, isticmaal .rowoo <dl>isticmaal fasallada tiirarka (ama isku-dhafka) iyada <dt>iyo <dd>carruurtooda.
  • Xigashooyinka dib-u-qaabaynta, oo qaabkooda ka guuraya curiyaha una guuraya <blockquote>hal fasal, .blockquote. U tuuray wax ka .blockquote-reversebeddelka agabka qoraalka
  • .list-inlineHadda waxay u baahan tahay in carruurteedu ay liis gareeyaan alaabta .list-inline-itemfasalka cusub lagu dabaqo.

Sawirada

  • Loo .img-responsivemagacaabay .img-fluid.
  • Loo .img-roundedmagacaabay.rounded
  • Loo .img-circlemagacaabay.rounded-circle

Miisaska

  • Ku dhawaad ​​dhammaan xaaladaha >doorashada waa la saaray, taasoo la micno ah in miisaska buulka ah ay hadda si toos ah uga dhaxli doonaan qaababka waalidkood. Tani waxay si weyn u fududaynaysaa doorashadeena iyo habaynta suurtagalka ah.
  • Waxaa .table-condensedloogu .table-smmagac daray joogteynta
  • .table-inverseLagu daray doorasho cusub
  • Wax ka beddelayaasha miiska madaxa ee lagu daray: .thead-defaultiyo .thead-inverse.
  • Dib loo magacaabay fasallada macnaha guud si loo yeesho .table-horgale. Sidaa darteed .active, .success, iyo ku .warning, , , iyo ..danger.info.table-active.table-success.table-warning.table-danger.table-info

Foomamka

  • Cunsurka la guuray wuxuu dib u dejinayaa _reboot.scssfaylka.
  • Loo .control-labelmagacaabay .col-form-label.
  • La magacaabay .input-lgiyo .input-smku .form-control-lg, .form-control-smsiday u kala horreeyaan.
  • Fasalada loo tuuray fudaydnimada .form-group-*awgeed. Isticmaal .form-control-*fasalada hadda.
  • Hoos .help-blocku dhigay oo ku beddelay .form-textqoraalka caawinta heerka xannibaadda. Si aad u hesho qoraalka caawinta khadka ah iyo xulashooyinka kale ee dabacsan, isticmaal fasallada utility sida .text-muted.
  • Soo dhacay .radio-inlineiyo .checkbox-inline.
  • Isku-dhafka .checkboxiyo .radiogalay iyo fasallada .form-checkkala duwan ..form-check-*
  • Qaababka toosan ayaa dib loo habeeyay:
    • Hoos u dhigay .form-horizontalshuruudii fasalka
    • .form-groupmar dambe ma khusayso qaababka isku dhafka ah .row, markaa .rowhadda waxaa looga baahan yahay qaab-dhismeedka khadka toosan (tusaale, <div class="form-group row">).
    • Lagu daray .col-form-labelfasal cusub oo lagu dhejiyay summada dhexe ee toosan oo leh .form-controls.
    • Lagu daray cusub .form-rowoo loogu talagalay qaabaynta qaabka is haysta oo leh fasallada grid (ku beddel .rowoo .form-rowtag).
  • Taageerada foomamka gaarka ah ee lagu daray (loogu talagalay sanduuqyada hubinta, raadiyaha, xulashada, iyo galitaanka faylka).
  • Lagu bedelay .has-error, .has-warning, iyo .has-successfasalo leh HTML5 foomka ansaxinta iyadoo loo sii marayo fasalada CSS :invalidiyo :validbeen abuurka.
  • Loo .form-control-staticmagacaabay .form-control-plaintext.

Badhamada

  • Loo .btn-defaultmagacaabay .btn-secondary.
  • .btn-xsGebi ahaanba fasalka waa la tuuray sida saami .btn-smahaan aad uga yar v3's.
  • Habka badhanka gobolka ee button.jsplugin jQuery waa la tuuray. Tan waxaa ku jira hababka $().button(string)iyo $().button('reset')hababka. Waxaan kugula talineynaa inaad isticmaasho waxoogaa yar oo JavaScript ah, taas oo faa'iido u yeelan doonta inaad u dhaqdo sida saxda ah ee aad rabto.
    • Ogsoonow in sifooyinka kale ee plugin (badhannada hubinta, raadiyaha badhanka, badhamada hal toggle) lagu hayo v4.
  • U beddel badhamada sida IE9+ [disabled]u taageerto . Si kastaba ha ahaatee wali waa lagama maarmaan sababtoo ah goobaha naafada ee asalka ah ayaa wali ku dhibtoonaya IE11 .:disabled:disabledfieldset[disabled]

Kooxda badhanka

  • Dib ugu qor qaybta flexbox
  • Waa laga saaray .btn-group-justified. Beddel ahaan waxaad u isticmaali kartaa <div class="btn-group d-flex" role="group"></div>sida duub oo ku wareegsan walxaha leh .w-100.
  • Gebi .btn-group-xsahaanba fasalka la saaray .btn-xs.
  • Waxaa meesha laga saaray kala fogaanshiyaha cad ee u dhexeeya kooxaha badhanka ee ku jira baararka badhanka; isticmaal margin utilities hadda.
  • Dukumeenti la wanaajiyay si loogu isticmaalo qaybaha kale.
  • Waxa laga bedelay doorayaasha waalidka oo loo beddelay fasallo keli ah dhammaan qaybaha, wax ka beddelayaasha, iwm.
  • Hababka hoos u dhigista ee la fududeeyay si aan mardambe loo rarin fallaadho kor ama hoos u jeeda oo ku xidhan liiska hoos u dhaca.
  • Hoosudhaca waxaa lagu dhisi karaa <div>s ama <ul>s hadda.
  • Dib-u-dhisay qaababka hoos u dhaca iyo calaamadaynta si ay u bixiso taageero fudud, ku dhex dhisan <a>iyo <button>walxaha hoos u dhaca.
  • Loo .dividermagacaabay .dropdown-divider.
  • Alaabooyinka soo-dejinta hadda waxay u baahan yihiin .dropdown-item.
  • Toogashooyinka soo dejinta uma baahna cad <span class="caret"></span>; Tan hadda si toos ah ayaa loogu bixiyaa CSS's ::afteron .dropdown-toggle.

Nidaamka grid

  • Waxaa lagu soo daray barta 576pxjabinta sharoogga cusub sida sm, taasoo la micno ah inay hadda jiraan shan heerar ( xs, sm, md, lgiyo xl).
  • Waxaa loo magacaabay fasalada wax ka beddelka shabakadaha wax ka beddelka ah ee ka jawaabaya fasallada grid ka .col-{breakpoint}-{modifier}-{size}fudud .{modifier}-{breakpoint}-{size}.
  • orderRiix oo jiid fasalada wax ka beddelka ee fasalada cusub ee ku shaqeeya flexbox Tusaale ahaan, halkii .col-8.push-4iyo .col-4.pull-8, waxaad isticmaali lahayd .col-8.order-2iyo .col-4.order-1.
  • Fasalada utility flexbox ee lagu daray nidaamka grid iyo qaybaha

Liiska kooxaha

  • Dib ugu qor qaybta flexbox
  • Lagu bedelay a.list-group-itemfasal cad, .list-group-item-action, habaynta isku xidhka iyo noocyada badhanka ee liiska walxaha kooxda.
  • Fasalka lagu daray .list-group-flushisticmaalka kaararka.
  • Dib ugu qor qaybta flexbox
  • Marka la eego u guuritaanka flexbox, toosinta sumadaha shaqada ee madaxa waa la jabiyay maadaama aynaan hadda isticmaalin sabbooyin. Waxyaabaha sabbaynaya ayaa marka hore imanaya, laakiin leh flexbox taasi hadda maahan kiis. Cusbooneysii summadaada cayrinta si ay u yimaadaan cinwaannada qaab-dhismeedka si loo hagaajiyo.
  • Xulashada remote(kaas oo loo isticmaali karo in si toos ah loogu shubo oo lagu durayo nuxurka dibadda hab) iyo loaded.bs.modaldhacdada u dhiganta waa laga saaray. Waxaan kugula talineynaa taa beddelkeeda isticmaalka qaabaynta dhinaca macmiilka ama qaab-dhismeedka xogta, ama wac jQuery.load naftaada.
  • Dib ugu qor qaybta flexbox
  • U tuuray ku dhawaad ​​dhammaan >xulashooyinka qaabaynta fudud iyadoo loo marayo fasallo aan buul lahayn.
  • Halkii laga dooran lahaa HTML-ga u gaarka ah sida .nav > li > a, waxaan u isticmaalnaa fasallo gaar ah .navs, .nav-items, iyo .nav-links. Tani waxay ka dhigaysa HTML-kaaga mid dabacsan iyadoo la kordhinaysa kordhinta.

Navbar-ka gabi ahaanba waxa dib loogu qoray flexbox iyada oo la wanaajiyay taageerada toosinta, ka jawaabista, iyo habaynta.

  • Dabeecadaha navbar ee ka jawaabaya ayaa hadda lagu dabaqay .navbarfasalka iyada oo loo marayo baahida .navbar-expand-{breakpoint} meesha aad ka dooranayso meesha aad ku duminayso navbar. Markii hore tani waxay ahayd beddelaad doorsoomare yar oo loo baahnaa dib u habeyn.
  • .navbar-defaulthadda waa .navbar-light, in kastoo .navbar-darkweli sidii hore. Mid ka mid ah kuwan ayaa looga baahan yahay navbar kasta. Si kastaba ha ahaatee, fasalladani hadda ma dhigayaan background-colors; taas bedelkeeda waxay saameyn ku yeelanayaan oo kaliya color.
  • Navbars hadda waxay u baahan yihiin caddaynta asalka ah nooc ka mid ah. Ka dooro adeegyadayada asalka ah ( .bg-*) ama u deji kuwaaga fasallada iftiinka/rogadka ah ee kor ku xusan si loo habeeyo waalan .
  • Marka la eego qaababka flexbox, navbars hadda waxay isticmaali karaan yutiilitida flexbox si ay u fududaato isku xidhka.
  • .navbar-togglewaa hadda .navbar-toggleroo waxa uu leeyahay qaabab kala duwan iyo calaamad gudaha ah (aan ka badan saddex <span>s).
  • Gebi .navbar-formahaanba fasalka ayuu dhigay. Looma baahna hadda; Halkii, kaliya isticmaal .form-inlineoo ku dalbo utility margin sida loo baahdo.
  • Navbars hadda kuma jiraan margin-bottomama asal border-radiusahaan. Isticmaal utility sida loo baahdo.
  • Dhammaan tusaalooyinka muujinaya navbars waa la cusboonaysiiyay si loogu daro calaamadayn cusub.

Pagination

  • Dib ugu qor qaybta flexbox
  • Fasalo cad ( .page-item, .page-link) ayaa hadda looga baahan yahay faraca .paginations
  • Gebi ahaanba waa la tuuray .pagerqaybta maadaama ay ka yara badnayd badhamada sharraxaadda la habeeyey.
  • Fasal cad, .breadcrumb-item, ayaa hadda looga baahan yahay farcanka .breadcrumbs

Calaamadaha iyo calaamadaha

  • Isku dhafka .labeliyo .badgein laga saaro <label>curiyaha oo la fududeeyo qaybaha la xidhiidha.
  • Lagu darey .badge-pillsidii wax ka beddelka muuqaalka "pill" wareegsan.
  • Calaamadaha si toos ah uguma sabbeeyaan kooxaha liiska iyo qaybaha kale. Fasallada utility hadda waa loo baahan yahay taas.
  • .badge-defaultwaa la tuuray oo .badge-secondarylagu daray fasalada wax ka beddelka qaybta u dhigma ee meelo kale loo isticmaalo.

Panels, thumbnails, iyo ceelasha

Gebi ahaanba loo tuuray qaybta kaadhka cusub.

baalal

  • .panelku .card, hadda lagu dhisay flexbox.
  • .panel-defaultmeesha laga saaray oo la waayay.
  • .panel-groupmeesha laga saaray oo la waayay. .card-groupmaaha bedel, waa ka duwan yahay.
  • .panel-headingku.card-header
  • .panel-titleku .card-title. Iyada oo ku xidhan muuqaalka la doonayo, waxa kale oo aad rabi kartaa in aad isticmaasho curiyeyaasha ciwaanka ama fasalada (tusaale <h3>, .h3) ama walxo dhiirran ama fasalo (tusaale <strong>, <b>) .font-weight-bold. Ogsoonow .card-title, iyadoo si isku mid ah loo magacaabay, waxay soo saartaa muuqaal ka duwan kan .panel-title.
  • .panel-bodyku.card-body
  • .panel-footerku.card-footer
  • .panel-primary. .panel-success_ .panel-info_ .panel-warning_ .panel-danger_ .bg-_ .text-_ .border_ $theme-colors_

Horumar

  • .progress-bar-*Fasallada macnaha guud lagu beddelay .bg-*agabka. Tusaale ahaan, class="progress-bar progress-bar-danger"waxay noqotaa class="progress-bar bg-danger".
  • Lagu bedelay .activebaararka horumarka firfircoon ee leh .progress-bar-animated.
  • Dib-u-habayn lagu sameeyay dhammaan qaybta si loo fududeeyo naqshadaynta iyo habaynta. Waxa aanu kuu haynaa habab yar oo aad kaga gudbi karto, tilmaameyaal cusub, iyo astaamo cusub.
  • Dhammaan CSS waa la buunbuuniyay oo dib baa loo magacaabay, iyadoo la hubinayo in fasal kasta lagu horgalay .carousel-.
    • Alaabta carousel, .next, .prev, .leftiyo .righthadda .carousel-item-next, .carousel-item-prev, .carousel-item-left, iyo .carousel-item-right.
    • .itemsidoo kale hadda .carousel-item.
    • Koontaroolada hore/xiga, .carousel-control.rightiyo .carousel-control.lefthadda .carousel-control-nextiyo .carousel-control-prev, taasoo la micno ah inaysan u baahnayn fasal sal gaar ah.
  • Meesha laga saaray dhammaan habaynta jawaabaha leh, dib u dhigista yutiilitiyada (tusaale, muujinta qoraalada meelaha daawashada qaarkood) iyo qaababka caadada u ah hadba sida loogu baahdo.
  • Sawirka meesha laga saaray wuxuu meesha ka saarayaa sawirada alaabta carousel-ka, dib u dhigista tamarta
  • Wuxuu hagaajiyay tusaalaha Carousel si loogu daro calaamadaynta cusub iyo qaababka.

Miisaska

  • Taageerada la saaray ee miisaska buulka leh ee qaabaysan. Dhammaan qaababka miiska ayaa hadda laga dhaxlay v4 ee xulashada fudud.
  • Kala duwanaanshiyaha miiska oo lagu daray.

Utility

  • Muuji, qarsoon, iyo in ka badan:
    • Utility-yada bandhiga laga dhigay kuwo ka jawaabaya (tusaale, .d-noneiyo d-{sm,md,lg,xl}-none).
    • Utility-yada ugu badan ayaa u tuuray agabka soo bandhiga.hidden-* cusub . Tusaale ahaan, halkii aad isticmaali lahayd . Waxaa loo magacaabay yutiilitida si ay u isticmaalaan nidaamka magac bixinta utility-ga. Macluumaad dheeraad ah oo hoos timaada qaybta utility Responsive ee boggan..hidden-sm-up.d-sm-none.hidden-print
    • Casharro lagu daray sabbaynaysa .float-{sm,md,lg,xl}-{left,right,none}jawaab-celin ah oo laga saaray .pull-leftiyo .pull-rightmar haddii ay ka badan yihiin .float-leftiyo .float-right.
  • Nooca:
    • Lagu daray kala duwanaansho jawaab celin ah fasaladayada toosinta qoraalka .text-{sm,md,lg,xl}-{left,center,right}.
  • Toosinta iyo kala dheeraynta:
  • Clearfix waa la cusboonaysiiyay si ay u tuurto taageerada noocyadii browserka hore.

Horgalayaasha iibiyaha isku darka

Bootstrap 3's prefix mixins iibiyaha, kuwaas oo laga saaray v3.2.0, ayaa laga saaray Bootstrap 4. Tan iyo markii aan isticmaalno Autoprefixer , hadda lagama maarmaan maaha.

Waxaa meesha animationlaga saaray animation-delayisku dhafkan : ,,,,,,,,,,,,,,,,,,, animation-direction_ animation-duration_ animation-fill-mode_ animation-iteration-count_ animation-name_ animation-timing-function_ backface-visibility_ box-sizing_ content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_transition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dukumeenti

Dukumeentiyadayadu sidoo kale waxay heleen kor u kaca guud ahaan guddiga. Hoos waxaa ku qoran:

  • Waxaan wali isticmaaleynaa Jekyll, laakiin waxaan ku leenahay plugins isku dhafka:
    • bugify.rbwaxaa loo isticmaalaa in si hufan loo liis gareeyo gelinta boggayaga cilladaha browserka .
    • example.rbwaa fargeeto caadadii ah highlight.rbplugin-ka caadiga ah, taas oo u oggolaanaysa in si fudud loo maareeyo kood-ku-gudbinta.
    • callout.rbwaa fargeeto caadadii la mid ah taas, laakiin loogu talagalay wicitaanadayada dukumeentiyada gaarka ah.
    • jekyll-toc waxa loo isticmaalaa in lagu soo saaro tusmadayada.
  • Dhammaan dokumentiyada ku jira waxa dib loogu qoray Markdown (halkii HTML) si fudud loogu tafatiro.
  • Bogagga ayaa dib loo habeeyey si ay u helaan xog fudud iyo kala sareyn la taaban karo.
  • Waxaan ka soo guurnay CSS-ta caadiga ah una guurnay SCSS si aan si buuxda uga faa'iidaysano doorsoomayaasha Bootstrap, isku darka, iyo in ka badan.

Utility ka jawaabaya

Dhammaan @screen-doorsoomayaasha waa laga saaray v4.0.0. Isticmaal media-breakpoint-up(), media-breakpoint-down(), ama media-breakpoint-only()Sass mixins ama $grid-breakpointskhariidadda Sass beddelkeeda.

Fasalladayada utility ee ka jawaaba ayaa inta badan meesha laga saaray iyadoo loo door bidaayo displayyutiilitida cad.

  • Fasallada .hiddeniyo .showfasallada waa laga saaray sababtoo ah waxay khilaafeen jQuery's $(...).hide()iyo $(...).show()hababka. Taa beddelkeeda, isku day inaad beddesho sifada [hidden]ama isticmaal qaababka khadka sida style="display: none;"iyo style="display: block;".
  • Dhammaan .hidden-fasallada waa laga saaray, marka laga reebo yutiilitida daabacaadda ee magaca beddelka lagu sameeyay.
    • Laga saaray v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Laga saaray v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Daabacadu hadda kuma bilawdo .hidden-ama .visible-, laakiin waxay ku bilaabmaysaa .d-print-.
    • Magacyadii hore : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
    • Fasalo cusub : .d-print-block, .d-print-inline,.d-print-inline-block.d-print-none

Halkii aad isticmaali lahayd .visible-*fasallo cad, waxaad samaysaa shay la arki karo adiga oo aan si fudud ugu qarin cabbirkaas shaashadda. Waxaad isku dari kartaa hal .d-*-nonefasal iyo hal .d-*-blockfasal si aad u muujiso curiye kaliya inta u dhaxaysa cabbirka shaashadda (tusaale .d-none.d-md-block.d-xl-nonewuxuu ku tusayaa curiyaha kaliya aaladaha dhexe iyo kuwa waaweyn).

Ogsoonow in isbeddelada ku yimaadda dhibcaha goynta ee v4 ay ka dhigan tahay inaad u baahan doonto inaad tagto hal dhibic ka weyn si aad u gaadho natiijooyin isku mid ah. Fasalada tamarta cusub ee wax ka qabata iskuma dayaan in ay soo dhaweeyaan kiisas aan caadi ahayn halka muuqaalka curiyaha aan lagu tilmaami karin mid iskuxiran oo cabbirrada daawashada; waxaad u baahan doontaa inaad isticmaasho CSS caado ah xaaladahan oo kale.