Hoe Twitter Bootstrap CSS toe te voegen in WordPress met behulp van Shortcodes

Door CSS-elementen zoals tooltips, kleurrijke knoppen en roll-over-effecten toe te voegen, kunt u uw inhoud opvallen. Het probleem is dat de meeste mensen niet weten hoe ze CSS moeten gebruiken om kleurrijke knoppen, tabellen, labels, enz. Toe te voegen. We hebben je laten zien hoe je kleurrijke widgets en tabellen in WordPress kunt toevoegen. In dit artikel laten we u zien hoe u Twitter Bootstrap CSS in WordPress gebruikt met behulp van shortcodes.

Twitter Bootstrap is een CSS- en JavaScript-raamwerk dat u snel helpt bij het verbeteren van het ontwerp en de functionaliteit van uw site. Het werd ontwikkeld door Mark Otto en Jacob Thornton op Twitter als een raamwerk om de samenhang tussen hun interne tools te bevorderen. Later werd het vrijgegeven als een open source tool. Het is mooi, eenvoudig en compatibel in alle browsers.

Allereerst moet je de WordPress Twitter Bootstrap CSS-plug-in installeren en activeren. Na activering zal de plug-in een Twitter Bootstrap-menu-item toevoegen aan uw WordPress-beheerder. Als u hierop klikt, gaat u naar het dashboard van de plug-in.

Op het dashboard ziet u heel veel advertenties toegevoegd door de maker van de plug-in. Scroll naar beneden langs hen en je ziet de shortcodes die je in je berichten kunt toevoegen. Elke shortcode is gekoppeld aan de ondersteuningspagina van de plug-in, waar u meer gebruiksvoorbeelden van deze shortcodes kunt zien.

Onder het menu-item Twitter Bootstrap in uw beheerder is er een koppeling om Bootstrap CSS-instellingen te configureren. Als u hierop klikt, gaat u naar de configuratiepagina waar u de instellingen kunt aanpassen aan uw behoeften. U hebt de mogelijkheid om te kiezen welke Bootstrap CSS-versie u wilt gebruiken. Hieronder vindt u opties die meer geschikt zijn voor gebruikers van geavanceerde niveaus.

Nu we naar de configuratie hebben gekeken, voegen we wat bootstrap css-elementen toe aan een blogpost. Plak de korte codes zoals deze in de inhoud van uw bericht of pagina:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Downloaden [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"] Cancel [/ TBS_BUTTON] [TBS_BUTTON color = "success" link = "http://example.com"] Meer informatie [/ TBS_BUTTON] Pictogrammen: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Waarschuwing : Label [/ TBS_LABEL] [TBS_LABEL] Gevaar: label [/ TBS_LABEL] [TBS_LABEL] Groen: label [/ TBS_LABEL] [TBS_ALERT] Instellingen opgeslagen [/ TBS_ALERT] 

Zo zien deze shortcodes eruit in de blogpost:

Er zijn veel meer CSS-elementen die u aan uw berichten kunt toevoegen. Tooltips, accordeonmenu's, pop-upvensters, voortgangsbalken, enz. De website van deze plug-in bevat meer documentatie over het gebruik van deze functies. Als je nieuwsgierig bent naar iconen, dan kun je de officiële site van Twitter Bootstrap bekijken voor de complete set iconen die je kunt gebruiken.

We weten dat themakaders zoals Genesis en anderen met hun eigen opties komen. Gebruik je CSS-elementen in je berichten? Laat het ons weten door hieronder een reactie achter te laten.