Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum bij eros.
Bootstrap is een toolkit van Twitter die is ontworpen om de ontwikkeling van webapps en sites een kickstart te geven.
Het bevat basis-CSS en HTML voor typografie, formulieren, knoppen, tabellen, rasters, navigatie en meer.
Nerd-waarschuwing: Bootstrap is gebouwd met Less en is ontworpen om out-of-the-gate te werken met moderne browsers in gedachten.
Kopieer dit fragment naar uw webpagina voor de snelste en gemakkelijkste start.
Een fan van het gebruik van Less? Geen probleem, kloon gewoon de repo en voeg deze regels toe:
Download, fork, pull, bestandsproblemen en meer met de officiële Bootstrap-repo op Github.
In de begindagen van Twitter gebruikten ingenieurs bijna elke bibliotheek die ze kenden om aan de front-endvereisten te voldoen. Bootstrap begon als een antwoord op de uitdagingen die zich voordeden en de ontwikkeling versnelde snel tijdens de eerste Hackweek van Twitter.
Met de hulp en feedback van veel ingenieurs bij Twitter is Bootstrap aanzienlijk gegroeid en omvat het niet alleen basisstijlen, maar ook elegantere en duurzamere front-end-ontwerppatronen.
Lees meer op dev.twitter.com ›
Bootstrap is getest en ondersteund in de belangrijkste moderne browsers zoals Chrome, Safari, Internet Explorer en Firefox.
Bootstrap wordt compleet geleverd met gecompileerde CSS, niet-gecompileerde en voorbeeldsjablonen.
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.
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="row"> class = "rij" >
- <div class = "span6 kolommen" >
- ...
- </div>
- <div class = "span10 kolommen" >
- ...
- </div>
- </div>
Een standaard 940px brede, gecentreerde containerlay-out voor zowat elke site of pagina.
- <lichaam>
- <div class = "container" >
- ...
- </div>
- </body>
Een flexibele vloeiende of vloeibare paginastructuur met min- en max-breedten en een linkerzijbalk. Geweldig voor apps.
- <lichaam>
- <div class = "containervloeistof" >
- <div class = "zijbalk" >
- ...
- </div>
- <div class = "inhoud" >
- ...
- </div>
- </div>
- </body>
Een standaard typografische hiërarchie voor het structureren van uw webpagina's.
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.
Nadruk, adressen en afkortingen gebruiken
<strong>
<em>
<address>
<abbr>
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 .
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 oké om <b>
en <i>
tags in HTML5 te gebruiken, maar ze hebben geen inherente stijlen meer. <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.
Het <address>
element wordt gebruikt voor contactgegevens voor de naaste voorouder of het hele oeuvre. Hier is hoe het eruit ziet:
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.
Gebruik voor afkortingen en acroniemen de <abbr>
tag ( <acronym>
is verouderd in HTML5 ). Plaats het steno-formulier in de tag en stel een titel in voor de volledige naam.
<blockquote>
<p>
<small>
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
.
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.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
- <table class="common-table"> class = "gemeenschappelijke tabel" >
- ...
- </table>
Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .zebra-striped
klasse toe.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
Opmerking: Zebra-striping is een progressieve verbetering die niet beschikbaar is voor oudere browsers zoals IE8 en lager.
- <table class="common-table zebra-striped"> class = "gewone tafel zebra-gestreept" >
- ...
- </table>
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.
# | Voornaam | Achternaam | Taal |
---|---|---|---|
1 | Uw | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Deuk | Code |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( functie () {
- $ ( "tabel#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "common-table zebra-striped" >
- ...
- </table>
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.
Voeg toe .form-stacked
aan 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.
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 .primary
is een blauwe klasse beschikbaar. Bovendien is het gemakkelijk om je eigen stijlen te rollen.
Knopstijlen kunnen worden toegepast op alles met de .btn
toegepaste. Meestal wilt u deze alleen toepassen op <a>
, <button>
, en geselecteerde <input>
elementen. Hier is hoe het eruit ziet:
Zin in grotere of kleinere knopen? Probeer maar!
Gebruik de uitgeschakelde status voor knoppen die niet actief zijn of om de een of andere reden door de app zijn uitgeschakeld. Dat is .disabled
voor links en :disabled
voor <button>
elementen.
Berichten in één regel om de mislukking, mogelijke mislukking of het succes van een actie te markeren. Vooral handig voor formulieren.
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.
Modals - dialoogvensters of lightboxes - zijn geweldig voor contextuele acties in situaties waarin het belangrijk is dat de achtergrondcontext behouden blijft.
Een fijn lichaam…
Twipsies zijn super handig om een verwarde gebruiker te helpen en in de goede richting te wijzen.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatum odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt dicta quae quae cumsantium fugit nemo voluptas .
Gebruik popovers om subtekstuele informatie aan een pagina te geven zonder de lay-out te beïnvloeden.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum bij eros.
Bootstrap is gebouwd met Preboot , een open-sourcepakket met mixins en variabelen voor gebruik in combinatie met Less , een CSS-preprocessor voor snellere en eenvoudigere webontwikkeling.
Bekijk hoe we Preboot in Bootstrap hebben gebruikt en hoe u er gebruik van kunt maken als u ervoor kiest om Less op uw volgende project uit te voeren.
Gebruik deze optie om volledig gebruik te maken van Bootstrap's Less-variabelen, mixins en nesting in CSS via javascript in uw browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.0.41.min.js" ></script>
Voel je de .js-oplossing niet? Probeer de Less Mac-app of gebruik Node.js om te compileren wanneer u uw code implementeert.
Hier zijn enkele van de hoogtepunten van wat is opgenomen in Twitter Bootstrap als onderdeel van Bootstrap. Ga naar de Bootstrap-website of Github-projectpagina om meer te downloaden en te leren.
Variabelen in Less zijn perfect om uw CSS hoofdpijnvrij te onderhouden en bij te werken. Als u een kleurwaarde of een veelgebruikte waarde wilt wijzigen, werkt u deze op één plek bij en bent u klaar.
- // Links
- @linkColor : #8b59c2;
- @linkColorHover : donkerder maken ( @linkColor , 10 );
- // Grijzen
- @zwart : #000;
- @grayDark : lichter maken ( @black , 25 %);
- @grijs : lichter maken ( @zwart , 50 %);
- @grayLight : lichter maken ( @black , 70 %);
- @grayLighter : lichter maken ( @black , 90 %);
- @wit : #fff;
- // Accentkleuren
- @blauw : #08b5fb;
- @groen : #46a546;
- @rood : #9d261d;
- @geel : #ffc40d;
- @oranje : #f89406;
- @roze : #c3325f;
- @paars : #7a43b6;
- // Basislijn
- @basislijn : 20px ;
Less biedt naast de normale /* ... */
syntaxis van CSS ook een andere stijl van commentaar.
- // Dit is een reactie
- /* Dit is ook een opmerking */
Mixins zijn in feite omvat of gedeeltelijke onderdelen voor CSS, waardoor u een codeblok in één kunt combineren. Ze zijn geweldig voor eigenschappen die voorafgaan aan leveranciers, zoals box-shadow
, cross-browser gradiënten, font-stacks en meer. Hieronder vindt u een voorbeeld van de mixins die bij Bootstrap worden geleverd.
- #lettertype {
- . steno ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- . schreefloos ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _
- font - familie : " Helvetica Neue " , Helvetica , Arial , schreefloos ;
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - familie : " Georgia " , Times New Roman , Times , schreefloos ;
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- lettergrootte : @grootte ; _ _
- lettertype - gewicht : @weight ;
- regelhoogte : @lineHeight ; _ _
- }
- }
- #gradiënt {
- . horizontaal ( @startColor : #555, @endColor: #333) {
- achtergrondkleur : @endColor ; _ _
- achtergrond - herhalen : herhalen - x ;
- background - image : - khtml - verloop ( lineair , links boven , rechts boven , van ( @startColor ), naar ( @endColor )); // Konqueror
- achtergrond - afbeelding : - moz - lineair - verloop ( links , @startColor , @endColor ); // FF 3.6+
- achtergrond - afbeelding : - ms - lineair - verloop ( links , @startColor , @endColor ); // IE10
- achtergrond - afbeelding : - webkit - verloop ( lineair , links boven , rechts boven , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- achtergrond - afbeelding : - webkit - lineair - verloop ( links , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- achtergrond - afbeelding : - o - lineair - verloop ( links , @startColor , @endColor ); // Opera 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- achtergrond - afbeelding : lineair - verloop ( links , @startColor , @endColor ); // Le standaard
- }
- . verticaal ( @startColor : #555, @endColor: #333) {
- achtergrondkleur : @endColor ; _ _
- achtergrond - herhalen : herhalen - x ;
- background - image : - khtml - verloop ( lineair , links boven , links onder , van ( @startColor ), naar ( @endColor )); // Konqueror
- achtergrond - afbeelding : - moz - lineair - verloop ( @startColor , @endColor ); // FF 3.6+
- achtergrond - afbeelding : - ms - lineair - verloop ( @startColor , @endColor ); // IE10
- achtergrond - afbeelding : - webkit - verloop ( lineair , links boven , links onder , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- achtergrond - afbeelding : - webkit - lineair - verloop ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- achtergrond - afbeelding : - o - lineair - verloop ( @startColor , @endColor ); // Opera 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- achtergrond - afbeelding : lineair - verloop ( @startColor , @endColor ); // De standaard
- }
- . directioneel ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . verticaal - drie - kleuren ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Word fantasie en voer wat wiskunde uit om flexibele en krachtige mixins te genereren zoals die hieronder.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Grid-systeem
- . houder {
- breedte : @siteWidth ;
- marge : 0 automatisch ;
- . clearfix ();
- }
- . kolommen ( @columnSpan : 1 ) {
- weergave : inline ;
- zweven : links ;
- breedte : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- marge - links : @gridGutterWidth ;
- &: eerste - kind {
- marge - links : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! belangrijk ;
- }