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

U kunt ook subkoppen toevoegen met de <strong>en<em>

Diversen elementen

Nadruk, adressen en afkortingen gebruiken

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

Wanneer te gebruiken

Nadruktags ( <strong>en <em>) moeten worden gebruikt om een ​​visueel onderscheid toe te voegen tussen een woord of zinsdeel en de omringende kopie. Gebruik <strong>voor gewone aandacht en <em>voor gladde aandacht en titels.

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.

Adressen

Het addresselement wordt gebruikt voor - je raadt het al! - adressen. 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 addressmoet eindigen met een regeleinde ( <br />) om de inhoud correct te structureren zoals deze in het echte leven wordt gelezen zonder dat er stijlen worden toegepast.

Afkortingen

Gebruik voor afkortingen en acroniemen de abbrtag ( acronymis verouderd in HTML5 ). Plaats het stenoformulier in de tag en stel een titel in voor de volledige naam.

Blok citaten

<blockquote> <p> <cite>

Zorg ervoor dat je je blockquoterond paragraphen citetags wikkelt. Gebruik bij het citeren van een bron het citeelement. De CSS zal een naam automatisch laten voorafgaan door een em-streepje (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

ongeordend<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mijn teamgenoten
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Nieuwe man
• Johannes Jacob
• Paul Pierce
• Kevin Garnett

niet gestyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mijn teamgenoten
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Nieuwe man
• Johannes Jacob
• Paul Pierce
• Kevin Garnett

Besteld<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Mijn teamgenoten
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Nieuwe man
6. Johannes Jacob
7. Paul Pierce
8. Kevin Garnett

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 theadzo 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, tbodyzodat 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" > 
  ...
</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

<table class = "common-table zebra-striped" > 
...
</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

< scripttype = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<scripttype = " tekst/javascript" > 
  $ ( document ). klaar ( 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

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

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.

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.

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" type = "text/css" href    = "less/bootstrap.less" media = "all" />  
< scripttype =  "text/javascript" 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 te downloaden en meer 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 inclusief of gedeeltelijke onderdelen voor CSS, waardoor je een codeblok tot één blok kunt combineren. Ze zijn geweldig voor eigenschappen met een voorvoegsel van een leverancier, zoals:box-shadow , cross-browser verlopen, 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 ;          
}