Att lägga till CSS-element som Tooltips, färgglada knappar och roll-over-effekter kan hjälpa ditt content att sticka ut. Problemet är att de flesta människor inte vet hur man använder CSS för att add to färgglada knappar, tabeller, etiketter, etc. Vi har visat you hur man add to 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 shortcodes.
Twitter Bootstrap är ett CSS- och JavaScript-ramverk som hjälper till att snabbt öka din sites design och funktionalitet. Det utvecklades av Mark Otto och Jacob Thornton på Twitter som ett ramverk för att uppmuntra konsekvens mellan deras interna tools. Senare släpptes det som ett open source tool. Det är beautiful, enkelt och kompatibelt med alla webbläsare.
Det första du behöver göra är att installera och aktivera WordPress Twitter Bootstrap CSS plugin. När du aktiverat pluginet kommer det att add to ett Twitter Bootstrap menu item i din WordPress admin. Om du klickar på det kommer du till plugins dashboard.
På dashpanelen kommer du att se en hel del annonser som lagts till av plugin-författaren. Rulla ner förbi dem, och du kommer att se shortcodes som du kan add to i dina posts. Varje shortcode är länkad till plugins supportsida där du kan se fler användningsexempel på dessa shortcodes.
Under Twitter Bootstrap menu item i din admin finns det en länk för att konfigurera Bootstrap CSS-inställningar. Om du klickar på den kommer du till konfigurera page där du kan ändra inställningarna så att de passar dina behov. Du har möjlighet att välja vilken version av Bootstrap CSS du gillar att använda. Under det hittar du alternativ som är mer lämpade för användare på avancerad nivå.
Nu när vi har tittat på konfigurationen, låt oss add to några bootstrap CSS-element till ett blogginlägg. Klistra bara in shortcodes som detta i ditt post eller page content:
<!--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 shortcodes att se ut i blogginlägget:
Det finns många fler CSS-element som du kan add to dina posts. Tooltips, dragspelsmenyer, popup-boxar, förloppsfält etc. Detta plugins website har mer documentation om hur man använder dessa funktioner. Om du är nyfiken på ikoner kan du titta på Twitter Bootstraps officiella site för den kompletta uppsättningen ikoner som du kan använda.
Vi vet att temaramar som Genesis och andra gillar kommer med sina egna alternativ. Använder du CSS-element i dina posts? Låt oss veta genom att lämna en comment under.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
kezzy
Thanks for this post. I have been using theme built on bootstrap framework and the process is straight forward rather than to input shortcodes here and there. Anyway will it not be easier to enqueue bootstrap script and style to a theme header and achieve the same result?
Thiago
Thank you so much! This can help me a lot.
Deprito
I’m using genesis, but when i try this plugin.. My css gone crazy..
How to fix it? little bit confuse..
WPBeginner Support
Deprito, Genesis is itself a Theme Framework and getting Twitter Bootstrap to work on Genesis would require additional steps. Try Genesis support forums, someone must have already done that.
Administratör
James Matthews
Amazing tutorial. Cleared up a lot of confusion that I had about twitter bootstrap. Parts of bootstrap are still difficult for me to understand, but this will definitely be really useful as I start to become more familiar with it.
Steven Blake mba
Thanks for what I am sure must be a good article. I find it quite frustrating the amount of articles I could really be interested in that forget or don’t realise that the use of buzz words that you deal with every day might not be understood by anyone who hasn’t come across it before. I try not to do this in my own work as a life coach, which if I advertised as being an NLP practitioner I would put off 90% of people who don’t know what that is.
So unfortunately until I understand what a twitter boot strap is I really don’t need the detail of how to install it. It may be I am missing out, but I don’t have the time to research any more than I already do and I did arrive here at your article, I just don’t want to have to look up several more before I return!
Just one line explaining what it does and the benefits of having a twitter boot strap would be the difference between me reading on instead of moving on.
This is constructive criticism by the way, add the description in this and any subsequent blogs and watch your outcomes improve. Best wishes, Steven
Noumaan Yaqoob
@Steven Twitter bootstrap is a set of predefined design tools which helps other designers and developers to use those elements in their own projects.
The purpose of this article and the plugin is to help users like yourself to use twitter bootstrap without learning code or css.
Richie
Great tutorial.
craig grella
great post, thanks. I’ve used bootstrap and ported it for thesis and a few other themes, but this will be handy for sites that dont need the framework – just the buttons and icons.
nice catch!