Snelstartvoorbeelden

Snel wat sjablonen nodig? Bekijk deze basisvoorbeelden die we hebben samengesteld:

Standaardraster

Het standaardrastersysteem dat wordt geleverd als onderdeel van Bootstrap is een 940px breed raster met 16 kolommen. Het is een smaak van het populaire 960-rastersysteem, maar zonder de extra marge/opvulling aan de linker- en rechterkant.

Voorbeeld rasteropmaak

Zoals hier wordt getoond, kan een basislay-out worden gemaakt met twee "kolommen", die elk een aantal van de 16 fundamentele kolommen beslaan die we hebben gedefinieerd als onderdeel van ons rastersysteem. Zie de voorbeelden hieronder voor meer variaties.

<div class = "rij" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Kolommen nesten

Nest uw inhoud indien nodig door een .rowin een bestaande kolom te maken.

Voorbeeld van geneste kolommen

<div class = "rij" > 
  <div class = "span12" > 
    Niveau 1 van kolom
    <div class = "rij" > 
      <div class = "span6" > 
        Level 2
      </div>
      <div class = "span6" > 
        Level 2
      </div>
    </div>
  </div>
</div>

Rol je eigen rooster

In Bootstrap zijn een handvol variabelen ingebouwd voor het aanpassen van het standaard 940px-rastersysteem. Met een beetje maatwerk kunt u de grootte van kolommen, hun dakgoten en de container waarin ze zich bevinden, wijzigen.

Binnen het raster

De variabelen die nodig zijn om het rastersysteem te wijzigen, bevinden zich momenteel allemaal in variables.less.

Nu om aan te passen

Het wijzigen van het raster betekent het wijzigen van de drie @grid-*variabelen en het opnieuw compileren van de Less-bestanden.

Bootstrap is uitgerust om een ​​rastersysteem met maximaal 24 kolommen aan te kunnen; de standaard is slechts 16. Hier ziet u hoe uw rastervariabelen eruit zouden zien als ze zijn aangepast aan een raster met 24 kolommen.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Eenmaal opnieuw gecompileerd, bent u klaar!

Vaste lay-out

De standaard en eenvoudige 940px-brede, gecentreerde lay-out voor zowat elke website of pagina die door een enkele <div.container>.

<lichaam>
  <div class = "container" > 
    ...
  </div>
</body>

Vloeiende lay-out

Een alternatieve, flexibele, vloeiende paginastructuur met min- en max-breedten en een linkerzijbalk. Geweldig voor apps en documenten.

<lichaam>
  <div class = "containervloeistof" > 
    <div class = "zijbalk" > 
      ...
    </div>
    <div class = "inhoud" > 
      ...
    </div>
  </div>
</body>

Koppen en kopiëren

Een standaard typografische hiërarchie voor het structureren van uw webpagina's.

Het hele typografische raster is gebaseerd op twee Less-variabelen in ons bestand variables.less: @basefonten @baseline. De eerste is de basislettergrootte die overal wordt gebruikt en de tweede is de basisregelhoogte.

We gebruiken die variabelen, en wat wiskunde, om de marges, opvullingen en regelhoogtes van al ons type en meer te maken.

h1. Koptekst 1

h2. Kop 2

h3. Kop 3

h4. Rubriek 4

h5. Kop 5

h6. Kop 6

Voorbeeld paragraaf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Voorbeeldkop Heeft een onderkop...

Diversen elementen

Nadruk, adressen en afkortingen gebruiken

<strong> <em> <address> <abbr>

Wanneer te gebruiken

Nadruktags ( <strong>en <em>) moeten worden gebruikt om het extra belang of de nadruk van een woord of zinsdeel ten opzichte van de omringende kopie aan te geven. Gebruik <strong>voor belangrijkheid en <em>voor nadruk op stress .

Nadruk in een alinea

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, een pharetra augue.

Opmerking: het is nog steeds goed om <b>en <i>tags in HTML5 te gebruiken en ze hoeven niet respectievelijk vet en cursief te zijn (hoewel als er een meer semantisch element is, gebruik het dan). <b>is bedoeld om woorden of zinsdelen te markeren zonder extra belang over te brengen, terwijl <i>het meestal is voor stem, technische termen, enz.

Adressen

Het <address>element wordt gebruikt voor contactgegevens voor de naaste voorouder of het hele oeuvre. Hier zijn twee voorbeelden van hoe het kan worden gebruikt:

Opmerking: elke regel in een <address>moet eindigen met een regeleinde ( <br />) of worden ingepakt in een tag op blokniveau (bijv. <p>) om de inhoud goed te structureren.

Afkortingen

Gebruik voor afkortingen en acroniemen de <abbr>tag ( <acronym>is verouderd in HTML5 ). Plaats het stenoformulier in de tag en stel een titel in voor de volledige naam.

Blok citaten

<blockquote> <p> <small>

Hoe te citeren?

Om een ​​blockquote op te nemen, wrap <blockquote>around <p>en <small>tags. Gebruik het <small>element om je bron te citeren en je krijgt er een em-streepje —voor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<blokquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

ongeordend<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem bij massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricieën
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

niet gestyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem bij massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricieën
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Besteld<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem bij massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Beschrijvingdl

Beschrijvingslijsten

Een beschrijvingslijst is perfect voor het definiëren van termen.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida bij eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimp je code in stijl met twee simpele tags. Voor nog meer awesomeness door middel van javascript, drop in Google's code mooier bibliotheek en je bent klaar.

Code presenteren

Code, blokken of alleen fragmenten inline, kunnen met stijl worden weergegeven door de juiste tag in te pakken. <pre>Gebruik het element voor codeblokken die meerdere regels overspannen . Gebruik voor inline code het <code>element.

<div>
  <h1>Kop</h1>
  <p>Iets hier...</p>
</div>

<div> <h1> Kop </h1> <p> Iets hier... </p> </div>
  
  

Inline-labels

<span class="label">

Vestig de aandacht op of markeer een zin in uw hoofdtekst.

Label alles

Ooit een van die fancy New nodig gehad! of Belangrijke vlaggen bij het schrijven van code? Nou, nu heb je ze. Dit is wat er standaard is inbegrepen:

Mediaraster

Geef miniaturen van verschillende formaten weer op pagina's met een lage HTML-voetafdruk en minimale stijlen.

Voorbeeldminiaturen

Miniaturen in de .media-gridkunnen elke grootte hebben, maar ze werken het beste wanneer ze rechtstreeks worden toegewezen aan het ingebouwde Bootstrap-rastersysteem. Afbeeldingsbreedten zoals 90, 210 en 330 worden gecombineerd met een paar pixels opvulling om de kolomgrootten .span2, .span4, en te evenaren..span6

Groot

Medium

Klein

Ze coderen

Mediarasters zijn gemakkelijk te gebruiken en vrij eenvoudig aan de kant van de opmaak. Hun afmetingen zijn puur gebaseerd op de grootte van de opgenomen afbeeldingen.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Tafels bouwen

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tafels zijn geweldig - voor veel dingen. Geweldige tabellen hebben echter een beetje opmaakliefde nodig om nuttig, schaalbaar en leesbaar te zijn (op codeniveau). Hier zijn een paar tips om te helpen.

Wikkel uw kolomkoppen altijd <thead>zo in dat de hiërarchie <thead>> <tr>> is <th>.

Net als bij de kolomkoppen, moet alle hoofdtekst van uw tabel in een a worden verpakt, <tbody>zodat uw hiërarchie <tbody>> <tr>> is <td>.

Voorbeeld: Standaard tabelstijlen

Alle tabellen worden automatisch opgemaakt met alleen de essentiële randen om de leesbaarheid te garanderen en de structuur te behouden. Het is niet nodig om extra klassen of attributen toe te voegen.

<tafel>
  ...
</table>

Voorbeeld: Verkorte tabel

Voor tabellen waarvoor meer gegevens in krappere ruimtes nodig zijn, gebruikt u de gecondenseerde smaak die de opvulling in tweeën snijdt. Het kan ook worden gebruikt in combinatie met randen en zebrastrepen, net als de standaard tabelstijlen.

Voorbeeld: Tabel met randen

Laat je tafels er net iets strakker uitzien door de hoeken af ​​te ronden en aan alle kanten randen toe te voegen.

<table class = "bordered-table" > 
  ...
</table>

Voorbeeld: Zebra-gestreept

Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .zebra-stripedklasse toe.

Opmerking: Zebra-striping is een progressieve verbetering die niet beschikbaar is voor oudere browsers zoals IE8 en lager.

<table class = "zebra-gestreept" > 
  ...
</table>

Voorbeeld: zebrastrepen met TableSorter.js

Door het vorige voorbeeld te nemen, verbeteren we de bruikbaarheid van onze tabellen door sorteerfunctionaliteit te bieden via jQuery en de Tablesorter- plug-in. Klik op de kop van een kolom om de sortering te wijzigen.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( functie () { 
    $ ( "tabel#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-gestreept" > 
  ...
</table>

Standaard stijlen

Alle formulieren krijgen standaardstijlen om ze op een leesbare en schaalbare manier te presenteren. Er zijn stijlen beschikbaar voor tekstinvoer, selectielijsten, tekstgebieden, keuzerondjes en selectievakjes en knoppen.

Gestapelde formulieren

Voeg toe .form-stackedaan de HTML van je formulier en je hebt labels bovenaan hun velden in plaats van links. Dit werkt prima als je formulieren kort zijn of als je twee kolommen met invoer hebt voor zwaardere formulieren.

Formulierveldformaten

Pas elke vorm input, select, of textareabreedte aan door slechts een paar klassen aan uw opmaak toe te voegen.

Vanaf v1.3.0 hebben we de op rasters gebaseerde grootteklassen voor formulierelementen toegevoegd. Gebruik deze over de bestaande .mini, .small, etc klassen.

Toetsen

Als conventie worden knoppen gebruikt voor acties, terwijl links worden gebruikt voor objecten. 'Download' kan bijvoorbeeld een knop zijn en 'recente activiteit' kan een link zijn.

Alle knoppen hebben standaard een lichtgrijze stijl, maar er kunnen een aantal functionele klassen worden toegepast voor verschillende kleurstijlen. Deze klassen omvatten een blauwe .primaryklasse, een lichtblauwe .infoklasse, een groene .successklasse en een rode .dangerklasse.

Voorbeeld knoppen

Knopstijlen kunnen worden toegepast op alles met de .btntoegepaste. Meestal wilt u deze alleen toepassen op <a>, <button>, en geselecteerde <input>elementen. Hier is hoe het eruit ziet:

Alternatieve maten

Zin in grotere of kleinere knopen? Probeer maar!

Uitgeschakelde staat

Gebruik de uitgeschakelde status voor knoppen die niet actief zijn of om de een of andere reden door de app zijn uitgeschakeld. Dat is .disabledvoor links en :disabledvoor <button>elementen.

Links

Toetsen

Wat is het

Onze bovenbalk is een vaste balk met het logo of de naam van een website, de primaire navigatie en het zoekformulier.

Aanpasbaar

Alle elementen erin, en ook de hele bovenbalk, zijn optioneel. U kunt ervoor kiezen om een ​​logo/naam, navigatie, zoekopdracht en een secundaire navigatie op te nemen, of een combinatie daarvan.

Dropdownmenu's inbegrepen

Als onderdeel van de hoofdnavigatie hebben we de mogelijkheid voor u toegevoegd om vervolgkeuzelijsten aan uw navigatiesysteem toe te voegen. Bekijk de secundaire navigatie hierboven (rechts uitgelijnd) om te zien hoe het werkt. Dropdown - litags ondersteunen ook het .activeweergeven van de huidige paginaselectie.

Tabs en pillen

Maak eenvoudige secundaire navigatie met een <ul>. Wissel tussen tabbladen of pillen door de juiste klasse toe te voegen.

Geweldig voor subsecties van inhoud zoals onze pagina's met accountinstellingen en gebruikerstijdlijnen om te schakelen tussen pagina's met vergelijkbare inhoud. Verkrijgbaar in tabbladen of pilstijlen.

Voorbeeld van basistabbladen

Tabbladen kunnen worden gebruikt als normale navigatie (het laden van externe pagina's in hetzelfde tabblad) of als tabbare inhoudsgebieden voor het verwisselen van deelvensters met inhoud. We hebben een plug-in voor tabbladen die kan worden gebruikt om de laatste te integreren.

• Huis
• Profiel
• Berichten
• Instellingen
• Contact
• Laten vallen
  • Secundaire link
  • Iets anders hier
  • Nog een link

<ul class = "tabbladen" > 
  <li class = "actief" ><a href = "#" > Startpagina </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Berichten </a></li> 
  <li><a href = "#" > Instellingen </a></li> 
  <li><a href = "#" > Contact </a></li> 
</ul>

Voorbeeld basispillen

• Huis
• Profiel
• Berichten
• Instellingen
• Contact

<ul class = "pillen" > 
  <li class = "actief" ><a href = "#" > Startpagina </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Berichten </a></li> 
  <li><a href = "#" > Instellingen </a></li> 
  <li><a href = "#" > Contact </a></li> 
</ul>

Paneermeel

Breadcrumb-navigatie wordt gebruikt om gebruikers te laten zien waar ze zich in een app of een site bevinden, maar niet voor primaire navigatie.

• Huis

• Home /
• Middelste pagina

• Home /
• middelste pagina /
• Nog een

• Home /
• middelste pagina /
• nog een /
• Je bent hier

<ul class = "broodkruimel" > 
  <li><a href = "#" > Startpagina </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Middelste pagina </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Nog een </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Je bent hier </li> 
</ul>

Paginering

Ultrasimplistische en minimaal gestileerde paginering geïnspireerd door Rdio. Het grote blok is moeilijk te missen, gemakkelijk schaalbaar en biedt grote klikgebieden.

<div class = "paginering" > 
  <ul>
    <li class = "vorige uitgeschakeld" ><a href = "#" > ← Vorige </a></li>  
    <li class = "actief" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "volgende" ><a href = "#" > Volgende → </a></li>  
  </ul>
</div>

Basismeldingen

.alert-message

Berichten in één regel om de mislukking, mogelijke mislukking of het succes van een actie te markeren. Vooral handig voor formulieren.

Download het javascript »

Voorbeeldcode:

<div class = "alert-bericht waarschuwing" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilige guacamole! </strong> Kijk zelf maar, je ziet er niet al te best uit. </p>
</div>

Berichten blokkeren

.alert-message.block-message

Voor berichten die een beetje uitleg nodig hebben, hebben we waarschuwingen voor alineastijlen. Deze zijn perfect voor het opborrelen van langere foutmeldingen, het waarschuwen van een gebruiker voor een lopende actie of het presenteren van informatie om meer nadruk op de pagina te leggen.

Download het javascript »

Voorbeeldcode:

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilige guacamole! Dit is een waarschuwing! </strong> Kijk zelf maar, je ziet er niet al te best uit. Nulla vitae elit libero, een pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Onderneem deze actie </a> <a class = "btn small" href = "#" > Of doe dit </a>     
  </div>
</div>

modaliteiten

Modals - dialoogvensters of lightboxes - zijn geweldig voor contextuele acties in situaties waarin het belangrijk is dat de achtergrondcontext behouden blijft.

Download het javascript »

Knopinfo

Twipsies zijn super handig om een ​​verwarde gebruiker te helpen en in de goede richting te wijzen.

Download het javascript »

Popovers

Gebruik popovers om subtekstuele informatie aan een pagina te geven zonder de lay-out te beïnvloeden.

Download het javascript »

Aan de slag

Het integreren van javascript met de Bootstrap-bibliotheek is supereenvoudig. Hieronder bespreken we de basisprincipes en bieden we u een aantal geweldige plug-ins om u op weg te helpen!

Javascript-documenten bekijken »

Wat is inbegrepen

Breng enkele van de primaire componenten van Bootstrap tot leven met nieuwe aangepaste plug-ins die werken met jQuery en Ender . We moedigen u aan om ze uit te breiden en aan te passen aan uw specifieke ontwikkelingsbehoeften.

Is javascript nodig?

Nee! Bootstrap is in de eerste plaats ontworpen als een CSS-bibliotheek. Dit javascript biedt een interactieve basislaag bovenop de meegeleverde stijlen.

Voor degenen die javascript wel nodig hebben, hebben we de bovenstaande plug-ins geleverd om u te helpen begrijpen hoe u Bootstrap met javascript kunt integreren en om u meteen een snelle, lichtgewicht optie voor de basisfunctionaliteit te geven.

Raadpleeg voor meer informatie en om enkele live demo's te zien onze pagina met plug-insdocumentatie .