Slik legger du til Twitter Bootstrap CSS i WordPress ved hjelp av kortkoder

Legge til CSS-elementer som verktøytips, fargerike knapper og overføringseffekter kan bidra til at innholdet ditt skiller seg ut. Problemet er at folk flest ikke vet hvordan man bruker CSS til å legge til fargerike knapper, tabeller, etiketter, etc. Vi har vist deg hvordan du legger til fargerike widgets og tabeller i WordPress. I denne artikkelen vil vi vise deg hvordan du bruker Twitter Bootstrap CSS i WordPress ved hjelp av kortkoder.

Twitter Bootstrap er en CSS og JavaScript rammeverk som bidrar til å øke nettstedet design og funksjonalitet raskt. Det ble utviklet av Mark Otto og Jacob Thornton på Twitter som et rammeverk for å oppmuntre konsistens på tvers av sine interne verktøy. Senere ble det utgitt som et åpen kildekodeverktøy. Det er vakkert, enkelt og kompatibelt på alle nettlesere.

Første du trenger å gjøre er å installere og aktivere CSS plugin for WordPress Twitter Bootstrap. Ved aktivering vil plugin legge til et Twitter Bootstrap menyelement i WordPress admin. Ved å klikke på det, tar du deg til pluginets dashbord.

På dashbordet ser du en forferdelig masse annonser lagt til av pluginforfatteren. Rull ned forbi dem, og du vil se kortkodene du kan legge til i innleggene dine. Hver kortkode er knyttet til pluginens supportside der du kan se flere brukseksempler på disse kortkodene.

Under menyelementet for Twitter Bootstrap i admin, er det en lenke for å konfigurere Bootstrap CSS-innstillinger. Hvis du klikker på det, tar du deg til konfigurasjonssiden der du kan endre innstillingene for å dekke dine behov. Du har muligheten til å velge hvilken Bootstrap CSS versjon du vil bruke. Nedenfor finner du alternativer som er mer egnet for brukere på forhåndsnivå.

Nå som vi har sett på konfigurasjonen, la oss legge til noen bootstrap css-elementer til et blogginnlegg. Bare lim inn snarveiene som dette i ditt innlegg eller sideinnhold:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Last ned [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"] Avbryt [/ TBS_BUTTON] [TBS_BUTTON] color = "success" link = "http://example.com") Lær mer [/ TBS_BUTTON] Ikoner: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Advarsel : Etikett [/ TBS_LABEL] [TBS_LABEL] Fare: Etikett [/ TBS_LABEL] [TBS_LABEL] Grønn: Etikett [/ TBS_LABEL] [TBS_ALERT] Innstillinger lagret [/ TBS_ALERT] 

Slik ser disse kortkodene ut i blogginnlegget:

Det er mange flere CSS-elementer som du kan legge til i dine innlegg. Verktøytips, accordian-menyer, popup-bokser, fremdriftsfelt osv. Dette plugin-nettstedet har mer dokumentasjon om hvordan du bruker disse funksjonene. Hvis du er nysgjerrig på ikoner, kan du se på Twitter Bootstraps offisielle nettsted for det komplette settet av ikoner som du kan bruke.

Vi vet at temaer som Genesis og andre kommer med sine egne muligheter. Bruker du CSS-elementer i innleggene dine? Gi oss beskjed ved å legge igjen en kommentar nedenfor.