SÄ hÀr lÀgger du till Twitter Bootstrap CSS i WordPress med hjÀlp av kortkoder

SÄ hÀr lÀgger du till Twitter Bootstrap CSS i WordPress med hjÀlp av kortkoder

LÀgga till CSS-element som verktygstips, fÀrgglada knappar och roll-over-effekter 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 hur man 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 dig att snabbt förbÀttra din webbdesign 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 den 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-plugin. Efter aktivering lÀgger plugin till ett Twitter Bootstrap-menyalternativ i din WordPress-administratör. Om du klickar pÄ den kommer du till plugin-instrumentpanelen.

PÄ instrumentbrÀdan ser du vÀldigt mÄnga annonser som lÀggs till av pluginförfattaren. BlÀddra ner förbi dem sÄ ser du kortkoderna som du kan lÀgga till i dina inlÀgg. Varje kortkod Àr lÀnkad till plugins supportsida dÀr du kan se fler exempel pÄ anvÀndning av dessa kortkoder.

Exempel pÄ anvÀndning av Bootstrap-kortkod

Under Twitter Bootstrap-menyalternativet i din administratör finns det en lÀnk för att konfigurera Bootstrap CSS-instÀllningar. Genom att klicka pÄ det 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. 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 i ett blogginlÀgg. Klistra bara 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:

Twitter bootstrap css-element har lagts till i ett inlÀgg

Det finns mÄnga fler CSS-element som du kan lÀgga till i dina inlÀgg. Verktygstips, dragspelmenyer, popup-rutor, framstegsfÀlt osv. Denna plugins webbplats har mer dokumentation om hur du anvÀnder dessa funktioner. Om du Àr nyfiken pÄ ikoner kan du titta pÄ Twitter Bootstraps officiella webbplats för den kompletta uppsÀttningen ikoner som du kan anvÀnda.

Vi vet att temaramar som Genesis och andra har sina egna alternativ. AnvÀnder du CSS-element i dina inlÀgg? LÄt oss veta genom att lÀmna en kommentar nedan.