Att lägga till CSS-element som verktygstips, färgglada knappar och rullningseffekter kan hjälpa ditt innehåll att sticka ut. Problemet är att de flesta inte vet hur man använder CSS för att lägga till färgglada knappar, tabeller, etiketter etc. Vi har visat dig hur du lägger till färgglada widgets och tabeller i WordPress. I den här artikeln visar vi dig hur du använder Twitter Bootstrap CSS i WordPress med hjälp av kortkoder.
Twitter Bootstrap är ett CSS- och JavaScript-ramverk som hjälper till att snabbt förbättra din webbplats design och funktionalitet. Det utvecklades av Mark Otto och Jacob Thornton på Twitter som ett ramverk för att uppmuntra konsekvens i deras interna verktyg. Senare släpptes det som ett open source-verktyg. Det är vackert, enkelt och kompatibelt i alla webbläsare.
Det första du behöver göra är att installera och aktivera WordPress Twitter Bootstrap CSS-pluginet. Efter aktivering kommer pluginet att lägga till ett Twitter Bootstrap-menyalternativ i din WordPress-admin. Att klicka på det tar dig till pluginets instrumentpanel.
På instrumentpanelen kommer du att se en hel del annonser som lagts till av plugin-utvecklaren. Skrolla förbi dem, och du kommer att se kortkoderna som du kan lägga till i dina inlägg. Varje kortkod är länkad till pluginets supportsida där du kan se fler användningsexempel för dessa kortkoder.
Under menyalternativet Twitter Bootstrap i din admin finns en länk för att konfigurera Bootstrap CSS-inställningar. Om du klickar på den kommer du till konfigurationssidan där du kan ändra inställningarna för att passa dina behov. Du har möjlighet att välja vilken Bootstrap CSS-version du vill använda. Nedanför hittar du alternativ som är mer lämpade för avancerade användare.
Nu när vi har tittat på konfigurationen, låt oss lägga till några bootstrap css-element till ett blogginlägg. Klistra helt enkelt in kortkoderna så här i ditt inlägg eller sidinnehåll:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]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]
Så här kommer dessa kortkoder att se ut i blogginlägget:
Det finns många fler CSS-element som du kan lägga till i dina inlägg. Verktygstips, dragspelsmenyer, popup-rutor, förloppsindikatorer, etc. Denna plugins webbplats har mer dokumentation om hur du använder dessa funktioner. Om du är nyfiken på ikoner kan du titta på Twitters officiella webbplats för Bootstrap för kompletta uppsättningen av ikoner som du kan använda.
Vi vet att temaramverk som Genesis och andra kommer med sina egna alternativ. Använder du CSS-element i dina inlägg? Låt oss veta genom att lämna en kommentar nedan.
kezzy
Tack för det här inlägget. Jag har använt ett tema byggt på bootstrap-ramverket och processen är enkel snarare än att mata in kortkoder här och där. Blir det inte ändå enklare att köa bootstrap-skript och stil till ett temahuvud och uppnå samma resultat?
Thiago
Tack så mycket! Detta kan hjälpa mig mycket.
Deprito
Jag använder genesis, men när jag provar det här pluginet.. Mina css har blivit galna..
Hur fixar jag det? lite förvirrad..
WPBeginner Support
Deprito, Genesis är i sig ett temaramverk och att få Twitter Bootstrap att fungera på Genesis skulle kräva ytterligare steg. Prova Genesis supportforum, någon måste redan ha gjort det.
Admin
James Matthews
Fantastisk handledning. Rensade upp mycket av den förvirring jag hade om twitter bootstrap. Delar av bootstrap är fortfarande svåra för mig att förstå, men detta kommer definitivt att vara riktigt användbart när jag börjar bli mer bekant med det.
Steven Blake mba
Tack för vad jag är säker på måste vara en bra artikel. Jag tycker att det är ganska frustrerande mängden artiklar som jag verkligen skulle kunna vara intresserad av som glömmer eller inte inser att användningen av buzzwords som du hanterar varje dag kanske inte förstås av någon som inte har stött på det tidigare. Jag försöker att inte göra detta i mitt eget arbete som livscoach, som om jag annonserade som en NLP-utövare skulle jag stöta bort 90% av människor som inte vet vad det är.
Så tyvärr tills jag förstår vad en twitter bootstrap är, behöver jag verkligen inte detaljerna om hur man installerar den. Det kan vara att jag missar något, men jag har inte tid att forska mer än jag redan gör och jag kom hit till din artikel, jag vill bara inte behöva slå upp flera innan jag återvänder!
Bara en rad som förklarar vad det gör och fördelarna med att ha en twitter bootstrap skulle vara skillnaden mellan att jag läser vidare istället för att gå vidare.
Detta är konstruktiv kritik för övrigt, lägg till beskrivningen i detta och alla efterföljande blogginlägg och se dina resultat förbättras. Bästa hälsningar, Steven
Noumaan Yaqoob
@Steven Twitter bootstrap är en uppsättning fördefinierade designverktyg som hjälper andra designers och utvecklare att använda dessa element i sina egna projekt.
Syftet med den här artikeln och pluginet är att hjälpa användare som du att använda twitter bootstrap utan att lära sig kod eller css.
Richie
Bra handledning.
craig grella
bra inlägg, tack. Jag har använt bootstrap och portat det för avhandlingar och några andra teman, men detta kommer att vara användbart för webbplatser som inte behöver ramverket – bara knapparna och ikonerna.
bra fångst!