Hur man lägger till Twitter Bootstrap CSS i WordPress med hjälp av kortnummer

Att lägga till CSS-element som verktygstips, färgglada knappar och överrullningseffekter 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 hur du använder Twitter Bootstrap CSS i WordPress med hjälp av kortnummer.

Twitter Bootstrap är en CSS och JavaScript-ram som hjälper dig att snabbt förbättra din webbplatsdesign och funktionalitet. Det utvecklades av Mark Otto och Jacob Thornton på Twitter som ett ramverk för att uppmuntra konsistens över sina interna verktyg. Senare släpptes det som ett open source-verktyg. Det är vackert, enkelt och kompatibelt på alla webbläsare.

Det första du behöver göra är att installera och aktivera CSS-plugin för WordPress Twitter Bootstrap. Vid aktivering kommer pluginet att lägga till ett Twitter Bootstrap-menyalternativ i din WordPress-admin. Genom att klicka på det tar du dig till pluginens instrumentpanel.

På instrumentbrädan ser du en massa annonser som läggs till av plugin-författaren. Bläddra ner förbi dem, och du kommer att se de kortnummer som du kan lägga till i dina inlägg. Varje kortkod är länkad till plugins supportsida där du kan se fler användningsexempel på dessa kortkoder.

Under menyalternativet Twitter Bootstrap i din admin finns en länk för att konfigurera Bootstrap CSS-inställningarna. Genom att klicka på det tar du dig till konfigurationssidan där du kan ändra inställningarna så att de passar dina behov. Du har möjlighet att välja vilken Bootstrap CSS-version du vill använda. Nedan 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 in kortkoderna så här i ditt inlägg eller sidinnehåll:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Hämta [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com") Avbryt [/ TBS_BUTTON] [TBS_BUTTON] color = "success" link = "http://example.com") Läs mer [/ TBS_BUTTON] Ikoner: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Varning : Etikett [/ TBS_LABEL] [TBS_LABEL] Fara: Etikett [/ TBS_LABEL] [TBS_LABEL] Grön: Etikett [/ TBS_LABEL] [TBS_ALERT] Inställningar sparade [/ TBS_ALERT] 

Så här ser dessa kortkoder ut i blogginlägget:

Det finns många fler CSS-element som du kan lägga till i dina inlägg. Verktygstips, accordian menyer, popup-lådor, framstegsfält, etc. Denna plugin hemsida har mer dokumentation om hur man använder dessa funktioner. Om du är nyfiken på ikoner kan du titta på Twitter Bootstraps officiella webbplats för hela uppsättningen ikoner som du kan använda.

Vi vet att tematiska ramar 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.