Geschiedenis

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 ›

Browserondersteuning

Bootstrap is getest en ondersteund in de belangrijkste moderne browsers zoals Chrome, Safari, Internet Explorer en Firefox.

• Laatste Safari
• Nieuwste Google Chrome
• Firefox 4+
• Internet Explorer 7+

Wat is inbegrepen

Bootstrap wordt compleet geleverd met gecompileerde CSS, niet-gecompileerde en voorbeeldsjablonen.

• Alle originele .less bestanden
• Volledig gecompileerde en verkleinde CSS
• Volledige documentatie over de stijlgids
• Voorbeeld paginasjabloon (binnenkort meer)

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="row"> class = "rij" >
  <div class = "span6 kolommen" > 
    ...
  </div>
  <div class = "span10 kolommen" > 
    ...
  </div>
</div>

Vaste lay-out

Een standaard 940px brede, gecentreerde containerlay-out voor zowat elke site of pagina.

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

Vloeiende lay-out

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>

Koppen en kopiëren

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

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 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.

Adressen

Het <address>element wordt gebruikt voor contactgegevens voor de naaste voorouder of het hele oeuvre. Hier is hoe het eruit ziet:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

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 steno-formulier 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

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.

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.

#	Voornaam	Achternaam	Taal
1	Sommige	Een	Engels
2	Joe	Sixpack	Engels
3	Stu	Deuk	Code

<table class="common-table"> class = "gemeenschappelijke tabel" >
  ...
</table>

Voorbeeld: Zebra-gestreept

Geef je tafels een beetje luxe door zebrastrepen toe te voegen - voeg gewoon de .zebra-stripedklasse 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>

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.

#	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>

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.

Voorbeeld formulierlegenda

X-grote ingang

Selecteer

1 2 3 4 5

Selecteer

1 2 3 4 5

Niet-bewerkbare invoer

Enige waarde hier

Uitgeschakelde invoer

X-grote ingang

Klein stukje helptekst

Voorbeeld formulierlegenda

Voorgevoegde tekst

@

Vooraf geplaatst selectievakje

Bijgevoegd selectievakje

Bestandsinvoer

Voorbeeld formulierlegenda

Lijst met opties

• Optie één is dit en dat - vergeet niet te vermelden waarom het geweldig is
• Optie twee kan ook worden aangevinkt en worden opgenomen in formulierresultaten
• Optie drie kan - ja, je raadt het al - ook worden gecontroleerd en opgenomen in formulierresultaten
• Optie vier kan niet worden aangevinkt omdat deze is uitgeschakeld.

Opmerking: Labels omringen alle opties voor veel grotere klikgebieden en een meer bruikbare vorm.

Datumbereik

tot Alle tijden worden weergegeven als Pacific Standard Time (GMT -08:00).

Tekstgebied

Blok helptekst om het veld hierboven te beschrijven, indien nodig.

Lijst met opties

• Optie één is dit en dat - vergeet niet te vermelden waarom het geweldig is
• Optie twee kan ook worden aangevinkt en worden opgenomen in formulierresultaten

Wijzigingen opslaan  Annuleren

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.

Voorbeeld formulierlegenda

X-grote ingang

Selecteer

1 2 3 4 5

Voorbeeld formulierlegenda

X-grote ingang

Klein stukje helptekst

Lijst met opties

• Optie één is dit en dat - vergeet niet te vermelden waarom het geweldig is
• Optie twee kan ook worden aangevinkt en worden opgenomen in formulierresultaten

Opmerking: Labels omringen alle opties voor veel grotere klikgebieden en een meer bruikbare vorm.

Wijzigingen opslaan  Annuleren

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 .primaryis een blauwe klasse beschikbaar. Bovendien is het gemakkelijk om je eigen stijlen te rollen.

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 daarin 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.

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.

• Huis
• Profiel
• Berichten
• Instellingen
• Contact

<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>

• 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>

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

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

Berichten blokkeren

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.

modaliteiten

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

Gereedschapstips

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

Popovers

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

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.

Hoe te gebruiken

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.

Wat is inbegrepen

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.

Kleurvariabelen

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 ;          

Reageren

Less biedt naast de normale /* ... */syntaxis van CSS ook een andere stijl van commentaar.

// Dit is een reactie
/* Dit is ook een opmerking */

Mengt de wazoo

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.

Lettertypestapels

#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 ; _ _ 
  }
}

Verlopen

#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) { 
    ...
  }
}

Operaties en rastersysteem

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 ;          
}