Twitter bootstrap, css en structuur

Vandaag een korte introductie betreffende het gebruik van Twitter bootstrap. Om te starten heb je de bootstrap files nodig die eenvoudig zijn te downloaden via deze link.

Vervolgens worden de files in de root van de website geplaatst en wordt er een verwijzing naar die files geplaatst in de head-sectie van de website.

Wat betreft structuur gebruiken we (bijvoorbeeld) de volgende html:

<div id='content' class='row-fluid'>
      <div class='span9 main'>
        <h2>Main Content Section</h2>
      </div>
      <div class='span3 sidebar'>
        <h2>Sidebar</h2>
      </div>
</div>

Deze code geeft aan dat de main content 9 kolommen breed is en door de main content op te delen in kolommen, kunnen we ook een sidebar plaatsen. Dat is gedaan via de <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> code. Dit alles betekent: van de 9 kolommen zijn er 3 een sidebar. Kortom 1/3 deel is sidebar.

Bij gebruik van de code is het belangrijk om op te merken dat de sidebar code in zijn geheel na de main-content code komt en dus niet is opgenomen in de main-content. De sidebar maakt geen onderdeel uit van de main-content structuur maar staat er dus gewoon naast. Een voorbeeld van de toepassing van deze code is te vinden op:

http://dewebmeester.nl/nl/

Daar heb ik overigens deze code geplaatst binnen de html code van een Joomla artikel. Het artikel binnen Joomla krijgt nu een  bootstrap sidebar opmaak en niet de gehele webpagina.

Tot zover.