twitter bootstrap. layout

dewebmeester.nlGratisHostingScriptsSnelheid website

Bootstrap: een zeer snelle, hoog kwalitatieve en heel erg goedkope website!

Als lezer van dewebkrant.nl bent u waarschijnlijk al veel eerder geconfronteerd met het verschijnsel “Bootstrap”. Hieronder een definitie uit Wikipedia:

[box title=”Boostrap” style=”glass”]Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.[/box]

bootstrap-html-template-00Maar hier wil ik niet teveel ingaan op de technische kanten wat betreft Bootstrap, maar wil ik even snel laten zien hoe makkelijk, ook u een zeer goedkope en tegelijkertijd een hoog kwalitatieve website kunt krijgen vanwege Bootstrap. Wat me vooral opvalt bij een bootstrapped website is dat hij enorm snel geladen wordt in de browser en ik denk dat dit een eerste … Lees verder.

Lees meer
CSSLayoutScriptsTweaks

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 … Lees verder.

Lees meer