Kartên Bootstrap bi gelek guherto û vebijarkan konteynirek naverokek maqûl û berfireh peyda dikin.
Ji dor
Kart konteynirek naverokek maqûl û berfireh e . Ew vebijarkên ji bo sernav û pêlavan, cûrbecûr naverok, rengên paşnavê yên naverokê, û vebijarkên pêşandana hêzdar vedihewîne. Heke hûn bi Bootstrap 3-ê dizanin, kartên şûna panelên me yên kevn, kanî û piçûkan digirin. Karbidestên mîna wan pêkhateyan wekî dersên guhêrbar ji bo qertan hene.
Mînak
Kart bi hindik nîşankirin û şêwazên ku gengaz têne çêkirin têne çêkirin, lê dîsa jî rê didin ku tonek kontrol û xwerûkirinê radest bikin. Bi flexbox-ê ve hatî çêkirin, ew lihevhatina hêsan pêşkêşî dikin û bi pêkhateyên din ên Bootstrap re baş tevdigerin. Ew ji marginhêla xwerû ve tune ne, ji ber vê yekê wekî ku hewce be karûbarên valahiyê bikar bînin.
Li jêr mînakek qertek bingehîn bi naverokek tevlihev û firehiyek sabît heye. Kart ji bo destpêkirina firehiya sabît tune, ji ber vê yekê ew ê bi xwezayî tevahî firehiya hêmana dêûbav tijî bikin. Ev bi vebijarkên meyên cûrbecûr yên mezinbûnê re bi hêsanî tête xweş kirin .
Sernavê karta
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Kart cûrbecûr naverok piştgirî dikin, di nav de wêne, nivîs, komên navnîşan, girêdan, û hêj bêtir. Li jêr mînakên ku piştgirî têne kirin hene.
Beden
Bingeha avakirina kartê ye .card-body. Dema ku hûn di hundurê qertê de hewceyê beşek pêvekirî hewce bikin, wê bikar bînin.
Ev çend nivîsek di nav laşek qertaf de ye.
Sernav, nivîs û girêdan
Sernavên qertê bi lêzêdekirina tagê têne bikar .card-titleanîn <h*>. Bi heman awayî, girêdan têne zêdekirin û bi lêzêdekirina tagek .card-linkli kêleka hev têne danîn .<a>
Binnivîs bi lê zêdekirina a .card-subtitleli <h*>tagekê tê bikaranîn. Ger tişt .card-titleû .card-subtitletişt di babetekê de werin danîn .card-body, sernav û jêrnivîsa qertê bi rengek xweş têne rêz kirin.
Sernavê karta
binnivîsa kartê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
.card-img-topwêneyek li serê qertê bi cih dike. Bi .card-text, nivîs dikare li qertê were zêdekirin. Nivîsar di hundurê de .card-textdikare bi tagên HTML-ê standard jî were şêwaz kirin.
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Lîsteya komên
Di qertek bi komek navnîşa flush re navnîşên naverokê biafirînin.
Cras justo odio
Dapibus ac facilisis in
Vestibulum li eros
Featured
Cras justo odio
Dapibus ac facilisis in
Vestibulum li eros
Cras justo odio
Dapibus ac facilisis in
Vestibulum li eros
Lavaboka metbexê
Gelek cûreyên naverokê tevlihev bikin û li hev bikin da ku qerta ku hûn hewce ne biafirînin, an her tiştî bavêjin wir. Li jêr şêwazên wêneyê, blokan, şêwazên nivîsê, û komek navnîşê têne xuyang kirin - hemî di qertek bi firehiya sabît de hatine pêçan.
Sernavê karta
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Kart ji widthbo destpêkirinê ne diyar in, ji ber vê yekê ew ê 100% fireh bin heya ku wekî din neyê gotin. Hûn dikarin vê yekê wekî ku hewce bike bi CSS-ya xwerû, dersên torê, mîksên Sass-a grid, an karûbaran biguhezînin.
Bikaranîna nîşankirina torê
Bi karanîna torê, li gorî hewcedariyê qertan di stûn û rêzan de bipêçin.
Dermankirina sernavê taybetî
Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.
Kartên ji bo xebata bi wêneyan re çend vebijark vedigirin. Ji pêvekirina "capên wêneyê" li her du dawiya qertekê hilbijêrin, wêneyan bi naveroka qertê ve girêbidin, an jî bi tenê wêneyê di qertê de bihêlin.
Caps Wêne
Mîna sernivîs û pêlavan, kartên dikarin "kapên wêneyê" yên jorîn û jêrîn -wêneyên li jor an binê qertê bihewînin.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
Zêdekirina wêneyan
Wêneyek veguherînin paşpirtûka qerta xwe û nivîsa qerta xwe bixin. Bi wêneyê ve girêdayî, dibe ku hûn hewceyê şêwaz an karûbarên zêde nebin an ne hewce ne.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
Têbînî ku naverok divê ji bilindahiya wêneyê mezintir nebe. Ger naverok ji wêneyê mezintir be dê naverok li derveyî wêneyê were xuyang kirin.
Asumane
Bi karanîna berhevokek grîd û dersên karûbar, kart dikarin bi rengek mobîl-heval û bersivdar werin çêkirin. Di mînaka li jêr de, em gemarên torê bi dersan radikin .no-guttersû bi kar tînin .col-md-*da ku qertê li xala mdveqetînê horizontî bikin. Dibe ku li gorî naveroka qerta we verastkirinên din hewce bibin.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
şêwazên kartê
Kart vebijarkên cihêreng ên ji bo xweşkirina paşeroj, sînor û rengê wan vedigirin.
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta duyemîn
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta Serkeftinê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta xeterê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta hişyariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta agahdariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta ronahî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta tarî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Veguheztina wateya teknolojiyên arîkar
Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.
Hidûd
Karûbarên sînor bikar bînin da ku tenê qertek biguhezînin border-color. Bala xwe bidinê ku hûn dikarin .text-{color}dersên li ser dêûbav .cardan binekomek naveroka qertê bidin wekî ku li jêr tê xuyang kirin.
Header
Sernavê karta seretayî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta duyemîn
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta Serkeftinê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta xeterê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta hişyariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta agahdariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta ronahî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Header
Sernavê karta tarî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Karûbaran tevlihev dike
Her weha hûn dikarin li gorî hewcedariyê tixûbên li ser serê kartê û pêlavê biguhezînin, û tewra wan jî background-colorbi .bg-transparent.
Header
Sernavê karta Serkeftinê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
layout karta
Ji bilî şêwaza naverokê di nav qertafan de, Bootstrap çend vebijarkan ji bo danîna rêzikên qertan vedihewîne. Heya nuha, van vebijarkên sêwiranê hîna ne bersivdar in.
Komên karta
Komên kartê bikar bînin da ku qertan wekî hêmanek yekane, pêvekirî bi stûnên pehnahî û bilindahiyê wekhev bikin. Komên qertê bi hev ve dest pê dikin û bikar tînin display: flex;da ku bi pîvanên yekreng ên ku ji xala smveqetînê dest pê dikin ve girêdayî bibin.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
Herî dawî 3 deqîqe berê hate nûkirin
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.
Herî dawî 3 deqîqe berê hate nûkirin
Dema ku komên qerta bi pêpelokan re bikar bînin, naveroka wan dê bixweber rêz bibe.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.
Decks karta
Pêdivî ye ku komek kartên firehî û bilindahiya wekhev ên ku bi hev ve neyên girêdan? Kartên kartê bikar bînin.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Herî dawî 3 deqîqe berê hate nûkirin
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
Herî dawî 3 deqîqe berê hate nûkirin
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.
Herî dawî 3 deqîqe berê hate nûkirin
Mîna komên qertê, pêlavên qerta di deqan de dê bixweber rêz bibin.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
Sernavê karta
Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.
kartên Grid
Pergala torê ya Bootstrap û .row-colsçînên wê bikar bînin da ku hûn li ser rêzek çend stûnên torê (li dora qertên xwe pêça ne) kontrol bikin. Mînakî, li vir .row-cols-1qertan li ser yek stûnê danîne, û .row-cols-md-2çar qertan bi firehiya wekhev li ser çend rêzan, ji xala veqetandina navîn ber bi jor ve dabeş dike.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Wê biguhezînin .row-cols-3û hûn ê qerta çaremîn pêça bibînin.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Gava ku hûn hewceyê bilindahiya wekhev be, .h-100li qertan zêde bikin. Heke hûn ji hêla xwerû ve bilindahiyên wekhev dixwazin, hûn dikarin $card-height: 100%li Sass saz bikin.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Sernavê karta
Ev kartek kurt e.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.
Sernavê karta
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
stûnên karta
Kartên tenê bi CSS-ê bi pêçandina wan di nav stûnên mîna Masonrî de têne organîze.card-columns kirin . Kart bi taybetmendiyên CSS-ê columnli şûna flexbox-ê ji bo lihevhatina hêsantir têne çêkirin. Kart ji serî heta binî û çep ber rast têne rêz kirin.
Serê xwe! Rêjeya weya bi stûnên kartê dibe ku cûda bibe. Ji bo ku rê li ber şikandina qertan li ser stûnan bigirin, divê em wan saz bikin display: inline-blockwekî column-break-inside: avoidku hêj ne çareseriyek gulebaranê ye.
Sernavê qertê ku bi rêzek nû ve girêdayî ye
Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
Herî dawî 3 deqîqe berê hate nûkirin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Sernavê karta
Vê kartê sernavek birêkûpêk û paragrafek kurt a nivîsê li binê wê heye.
Herî dawî 3 deqîqe berê hate nûkirin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Sernavê karta
Ev qertek din a bi sernav û nivîsa piştgirî ya li jêr e. Vê qertê hin naverokek zêde heye da ku wê bi giştî hinekî dirêjtir bike.
Herî dawî 3 deqîqe berê hate nûkirin
Stûnên qertê jî dikarin bi hin kodên din ve werin dirêj kirin û xweş kirin. Li jêr tê xuyang kirin dirêjkirinek .card-columnspolê ye ku bi karanîna heman CSS-a ku em bikar tînin-stûnên CSS- bikar tîne da ku komek rêzikên bersivdar ji bo guheztina hejmara stûnan biafirînin.