Geskiedenis

In die vroeër dae van Twitter het ingenieurs byna enige biblioteek gebruik waarmee hulle vertroud was om aan die voorkantvereistes te voldoen. Bootstrap het begin as 'n antwoord op die uitdagings wat aangebied is en ontwikkeling het vinnig versnel tydens Twitter se eerste Hackweek.

Met die hulp en terugvoer van baie ingenieurs by Twitter, het Bootstrap aansienlik gegroei om nie net basiese style in te sluit nie, maar meer elegante en duursame front-end ontwerppatrone.

Lees meer op dev.twitter.com ›

Blaaier ondersteuning

Bootstrap word getoets en ondersteun in groot moderne blaaiers soos Chrome, Safari, Internet Explorer en Firefox.

• Nuutste Safari
• Nuutste Google Chrome
• Firefox 4+
• Internet Explorer 7+

Wat ingesluit is

Bootstrap kom kompleet met saamgestelde CSS, ongekompileerde en voorbeeldsjablone.

• Alle oorspronklike .less lêers
• Volledig saamgestelde en verkleinde CSS
• Volledige stylgidsdokumentasie
• Voorbeeld bladsy sjabloon (meer sal binnekort kom)

Verstek rooster

Die verstek roosterstelsel wat as deel van Bootstrap verskaf word, is 'n 940px wye 16-kolom rooster. Dit is 'n geur van die gewilde 960-roosterstelsel, maar sonder die bykomende marge/opvulling aan die linker- en regterkant.

Voorbeeld roosteropmerking

Soos hier getoon, kan 'n basiese uitleg geskep word met twee "kolomme", wat elk oor 'n aantal van die 16 grondkolomme strek wat ons as deel van ons roosterstelsel gedefinieer het. Sien die voorbeelde hieronder vir meer variasies.

<div class="row"> klas = "ry" >
  <div klas = "span6 kolomme" > 
    ...
  </div>
  <div klas = "span10 kolomme" > 
    ...
  </div>
</div>

Vaste uitleg

'n Basiese 940px wye, gesentreerde houeruitleg vir omtrent enige werf of bladsy.

<liggaam>
  <div klas = "houer" > 
    ...
  </div>
</body>

Vloeibare uitleg

'n Buigsame vloeibare of vloeibare bladsystruktuur met min- en maksimum-wydtes en 'n linkerkantste sybalk. Ideaal vir toepassings.

<liggaam>
  <div klas = "houer-vloeistof" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div klas = "inhoud" > 
      ...
    </div>
  </div>
</body>

Opskrifte en kopie

'n Standaard tipografiese hiërargie vir die strukturering van jou webblaaie.

h1. Opskrif 1

h2. Opskrif 2

h3. Opskrif 3

h4. Opskrif 4

h5. Opskrif 5

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

Voorbeeldopskrif Het subopskrif...

Misc. elemente

Gebruik klem, adresse en afkortings

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

Wanneer om te gebruik

Klemmerkers ( <strong>en <em>) moet gebruik word om bykomende belangrikheid of klem van 'n woord of frase aan te dui relatief tot die omliggende kopie. Gebruik <strong>vir belangrikheid en <em>vir stresbeklemtoning .

Beklemtoning in 'n paragraaf

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

Let wel: Dit is steeds goed om <b>en <i>merkers in HTML5 te gebruik, maar hulle kom nie meer met inherente style nie. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.

Adresse

Die <address>element word gebruik vir kontakinligting vir sy naaste voorouer, of die hele liggaam van werk. Hier is hoe dit lyk:

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

Let wel: Elke reël in 'n <address>moet eindig met 'n reëlbreuk ( <br />) of toegedraai word in 'n blokvlakmerker (bv. <p>) om die inhoud behoorlik te struktureer.

Afkortings

Vir afkortings en akronieme, gebruik die <abbr>merker ( <acronym>is afgekeur in HTML5 ). Plaas die snelskrifvorm binne die etiket en stel 'n titel vir die volledige naam.

Blokaanhalings

<blockquote> <p> <small>

Hoe om aan te haal

Om 'n blokaanhaling in te sluit, draai <blockquote>om <p>en <small>merk. Gebruik die <small>element om jou bron aan te haal en jy sal 'n em-streep —voor dit kry.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

Ongeorden<ul>

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

Ongestileer<ul.unstyled>

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

Bestel<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heelgetal molestie lorem by 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

Beskrywingdl

Beskrywing lyste

'n Beskrywingslys is perfek om terme te definieer.

Euismod

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

Donec id elit non mi porta gravida by eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Die bou van tafels

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

Tafels is wonderlik - vir baie dinge. Groot tabelle het egter 'n bietjie opmaakliefde nodig om bruikbaar, skaalbaar en leesbaar te wees (op die kodevlak). Hier is 'n paar wenke om te help.

Draai altyd jou kolomopskrifte <thead>so in dat hiërargie <thead>> <tr>> is <th>.

Soortgelyk aan die kolomopskrifte, moet al jou tabel se liggaamsinhoud in 'n toegedraai word <tbody>sodat jou hiërargie <tbody>> <tr>> is <td>.

Voorbeeld: Verstek tabelstyle

Alle tabelle sal outomaties gestileer word met slegs die noodsaaklike grense om leesbaarheid te verseker en struktuur te behou. Dit is nie nodig om ekstra klasse of eienskappe by te voeg nie.

#	Eerste naam	Van	Taal
1	Sommige	Een	Engels
2	Joe	Sixpack	Engels
3	Stu	Duik	Kode

<table class="common-table"> klas = "gewone-tabel" >
  ...
</tabel>

Voorbeeld: Sebra-gestreepte

Raak 'n bietjie fyn met jou tafels deur sebrastrepe by te voeg—voeg net die .zebra-stripedklas by.

#	Eerste naam	Van	Taal
1	Sommige	Een	Engels
2	Joe	Sixpack	Engels
3	Stu	Duik	Kode

Let wel: Zebra-striping is 'n progressiewe verbetering wat nie beskikbaar is vir ouer blaaiers soos IE8 en onder nie.

<table class="common-table sebra-striped"> klas = "gewone tafel sebra-gestreepte" >
...
</tabel>

Voorbeeld: Sebra-gestreep met TableSorter.js

As ons die vorige voorbeeld neem, verbeter ons die bruikbaarheid van ons tabelle deur sorteerfunksies te verskaf via jQuery en die Tablesorter- inprop. Klik op enige kolom se opskrif om die sortering te verander.

#	Eerste naam	Van	Taal
1	Jou	Een	Engels
2	Joe	Sixpack	Engels
3	Stu	Duik	Kode

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<skrif > 
  $ ( funksie () { 
    $ ( "tabel#sorteerTabelVoorbeeld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "gewone-tafel sebra-gestreepte" > 
  ...
</tabel>

Verstek style

Alle vorms kry verstekstyle om dit op 'n leesbare en skaalbare manier aan te bied. Style word verskaf vir teksinvoere, kieslyste, teksareas, radioknoppies en merkblokkies, en knoppies.

Voorbeeld vorm legende

X-groot invoer

Kies

1 2 3 4 5

Kies

1 2 3 4 5

Onwysigbare invoer

Hier is 'n bietjie waarde

Gedeaktiveerde invoer

X-groot invoer

Klein brokkie hulpteks

Voorbeeld vorm legende

Voorgeskrewe teks

@

Voorgeskrewe merkblokkie

Aangehegte merkblokkie

Lêerinvoer

Voorbeeld vorm legende

Lys van opsies

• Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
• Opsie twee kan ook nagegaan en by vormresultate ingesluit word
• Opsie drie kan - ja, jy het dit reg geraai - ook nagegaan en by vormresultate ingesluit word
• Opsie vier kan nie gemerk word nie, aangesien dit gedeaktiveer is.

Let wel: Etikette omring al die opsies vir baie groter klikareas en 'n meer bruikbare vorm.

Datum reeks

aan Alle tye word getoon as Pacific Standard Time (GMT -08:00).

Teksarea

Blok hulpteks om die veld hierbo te beskryf indien nodig.

Lys van opsies

• Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
• Opsie twee kan ook nagegaan en by vormresultate ingesluit word

Stoor veranderinge  Kanselleer

Gestapelde vorms

Voeg .form-stackedby jou vorm se HTML en jy sal etikette bo-op hul velde hê in plaas van aan hul linkerkant. Dit werk wonderlik as jou vorms kort is of as jy twee kolomme insette het vir swaarder vorms.

Voorbeeld vorm legende

X-groot invoer

Kies

1 2 3 4 5

Voorbeeld vorm legende

X-groot invoer

Klein brokkie hulpteks

Lys van opsies

• Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
• Opsie twee kan ook nagegaan en by vormresultate ingesluit word

Let wel: Etikette omring al die opsies vir baie groter klikareas en 'n meer bruikbare vorm.

Stoor veranderinge  Kanselleer

Knoppies

As 'n konvensie word knoppies vir aksies gebruik terwyl skakels vir voorwerpe gebruik word. Byvoorbeeld, "Laai af" kan 'n knoppie wees en "onlangse aktiwiteit" kan 'n skakel wees.

Alle knoppies is standaard 'n liggrys styl, maar 'n blou .primaryklas is beskikbaar. Boonop is dit maklik om jou eie style te rol.

Voorbeeld knoppies

Knoppiestyle kan op enigiets met die .btntoegepaste toegepas word. Tipies sal jy dit net op <a>, <button>, en selekteer <input>-elemente wil toepas. Hier is hoe dit lyk:

Alternatiewe groottes

Lus vir groter of kleiner knoppies? Hou dit aan!

Gestremde toestand

Vir knoppies wat nie aktief is nie of om een ​​of ander rede deur die toepassing gedeaktiveer word, gebruik die gedeaktiveerde toestand. Dit is .disabledvir skakels en :disabledvir <button>elemente.

Skakels

Knoppies

Wat is dit

Ons boonste balk is 'n vaste balk wat 'n webwerf se logo of naam, primêre navigasie en soekvorm bevat.

Aanpasbaar

Alle elemente binne, en ook die hele boonste balk, is opsioneel. U kan kies om 'n logo/naam, navigasie, soektog en 'n sekondêre navigasie in te sluit—of enige kombinasie daarvan.

Aftrekkies ingesluit

As deel van die hoofnavigasie het ons die vermoë ingesluit vir jou om aftreklys by jou navigasie te voeg. Kyk na die sekondêre navigasie hierbo (regsbelyn) om te sien hoe dit gedoen word.

Tabs en pille

Skep eenvoudige sekondêre navigasie met 'n <ul>. Wissel tussen oortjies of pille deur die toepaslike klas by te voeg.

Ideaal vir onderafdelings van inhoud soos ons rekeninginstellingsbladsye en gebruikerstydlyne om tussen bladsye met soortgelyke inhoud te wissel. Beskikbaar in oortjies of pilstyle.

• Tuis
• Profiel
• Boodskappe
• Instellings
• Kontak

<ul klas = "tabs" > 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Boodskappe </a></li> 
  <li><a href = "#" > Instellings </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

• Tuis
• Profiel
• Boodskappe
• Instellings
• Kontak

<ul klas = "pille" > 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li><a href = "#" > Profiel </a></li> 
  <li><a href = "#" > Boodskappe </a></li> 
  <li><a href = "#" > Instellings </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Paginering

Ultra simplisties en minimaal gestileer paginering geïnspireer deur Rdio. Die groot blok is moeilik om te mis, maklik skaalbaar en bied groot klikareas.

<div klas = "paginering" > 
  <ul>
    <li class = "prev disabled" ><a href = "#"> & larr ; Vorige </a></li>  
    <li klas = "aktief" ><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 klas = "volgende" ><a href = "#" > Volgende → </a></li>  
  </ul>
</div>

Basiese waarskuwings

Eenlynboodskappe om die mislukking, moontlike mislukking of sukses van 'n aksie uit te lig. Veral nuttig vir vorms.

Blokkeer boodskappe

Vir boodskappe wat 'n bietjie verduideliking vereis, het ons paragraafstylwaarskuwings. Dit is perfek om langer foutboodskappe op te borrel, 'n gebruiker te waarsku oor 'n hangende handeling, of om net inligting aan te bied vir meer klem op die bladsy.

Modale

Modale—dialoë of ligkassies—is ideaal vir kontekstuele aksies in situasies waar dit belangrik is dat die agtergrondkonteks behou word.

Gereedskap Wenke

Twipsies is baie nuttig om 'n verwarde gebruiker te help en hulle in die regte rigting te wys.

Popovers

Gebruik opspringers om subtekstuele inligting aan 'n bladsy te verskaf sonder om uitleg te beïnvloed.

Bootstrap is gebou met Preboot , 'n oopbronpakket van mixins en veranderlikes om saam met Less gebruik te word gebruik kan word , 'n CSS-voorverwerker vir vinniger en makliker webontwikkeling.

Kyk hoe ons Preboot in Bootstrap gebruik het en hoe jy dit kan gebruik as jy kies om Less op jou volgende projek te laat loop.

Hoe om dit te gebruik

Gebruik hierdie opsie om ten volle gebruik te maak van Bootstrap se Less veranderlikes, mixins en nesting in CSS via javascript in jou blaaier.

<skakel rel = "stylesheet/less" href = "less/bootstrap.less" media = "alles" />    
<script src = "js/less-1.0.41.min.js" ></script> 

Voel u nie die .js-oplossing nie? Probeer die Less Mac-toepassing of gebruik Node.js om saam te stel wanneer jy jou kode ontplooi.

Wat ingesluit is

Hier is 'n paar van die hoogtepunte van wat by Twitter Bootstrap ingesluit is as deel van Bootstrap. Gaan na die Bootstrap-webwerf of Github-projekbladsy om af te laai en meer te wete te kom.

Kleur veranderlikes

Veranderlikes in Minder is perfek vir die instandhouding en opdatering van jou CSS-hoofpynvry. Wanneer jy 'n kleurwaarde of 'n gereeld gebruikte waarde wil verander, werk dit op een plek op en jy is gereed.

// Skakels
@linkColor : #8b59c2;         
@linkColorHover :     donkerder ( @linkColor , 10 ); 
 
// Grys
@swart : #000;             
@greyDark :           verlig ( @swart , 25 %); 
@grys :               verlig ( @swart , 50 %); 
@grayLight :          verlig ( @swart , 70 %); 
@grayLighter :        verlig ( @swart , 90 %); 
@wit : #fff;             
 
// Aksentkleure
@blou : #08b5fb;              
@groen : #46a546;             
@rooi : #9d261d;               
@geel : #ffc40d;            
@oranje : #f89406;            
@pienk : #c3325f;              
@pers : #7a43b6;            
 
// Basislyn
@basislyn : 20px ;          

Kommentaar

Less bied ook 'n ander styl van kommentaar bykomend tot CSS se normale /* ... */sintaksis.

// Hierdie is 'n opmerking
/* Hierdie is ook 'n opmerking */

Vermeng die wazoo

Mixins is basies ingesluit of gedeeltes vir CSS, sodat jy 'n blok kode in een kan kombineer. Hulle is ideaal vir eiendomsvoorvoegsels soos verkopersbox-shadow , kruisblaaiergradiënte, lettertipestapels en meer. Hieronder is 'n voorbeeld van die mengsels wat by Bootstrap ingesluit is.

Lettertipe stapels

#font {
  . snelskrif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {     
    lettergrootte : @grootte ; _ _ 
    lettertipe - gewig : @gewig ; 
    lyn - hoogte : @lynhoogte ; 
  }
  . sans - serif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    lettergrootte : @grootte ; _ _ 
    lettertipe - gewig : @gewig ; 
    lyn - hoogte : @lynhoogte ; 
  }
  . serif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    lettergrootte : @grootte ; _ _ 
    lettertipe - gewig : @gewig ; 
    lyn - hoogte : @lynhoogte ; 
  }
  . monospace ( @gewig : normaal , @grootte : 12px , @lynhoogte : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    lettergrootte : @grootte ; _ _ 
    lettertipe - gewig : @gewig ; 
    lyn - hoogte : @lynhoogte ; 
  }
}

Gradiënte

#gradiënt {
  . horisontaal ( @startColor : #555, @endColor: #333) { 
    agtergrond - kleur : @endColor ; 
    agtergrond - herhaal : herhaal - x ;
    agtergrond - beeld : - khtml - gradiënt ( lineêr , links bo , regs bo , van ( @startColor ), na ( @endColor )); // Konqueror   
    agtergrond - beeld : - moz - lineêr - gradiënt ( links , @startColor , @endColor ); // FF 3.6+    
    agtergrond - beeld : - ms - lineêr - gradiënt ( links , @startColor , @endColor ); // IE10    
    agtergrond - beeld : - webkit - gradiënt ( lineêr , links bo , regs bo , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    agtergrond - beeld : - webkit - lineêr - gradiënt ( links , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    agtergrond - beeld : - o - lineêre - gradiënt ( 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 
    agtergrond - beeld : lineêre - gradiënt ( links , @startColor , @endColor ); // Le standaard   
  }
  . vertikale ( @startColor : #555, @endColor: #333) { 
    agtergrond - kleur : @endColor ; 
    agtergrond - herhaal : herhaal - x ;
    agtergrond - beeld : - khtml - gradiënt ( lineêr , links bo , links onder , van ( @startColor ), na ( @endColor )); // Konqueror   
    agtergrond - beeld : - moz - lineêr - gradiënt ( @startColor , @endColor ); // FF 3.6+   
    agtergrond - beeld : - ms - lineêre - gradiënt ( @startColor , @endColor ); // IE10   
    agtergrond - beeld : - webkit - gradiënt ( lineêr , links bo , links onder , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    agtergrond - beeld : - webkit - lineêr - gradiënt ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    agtergrond - beeld : - o - lineêre - gradiënt ( @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 
    agtergrond - beeld : lineêre - gradiënt ( @startColor , @endColor ); // Die standaard  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikaal - drie - kleure ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Bedrywighede en roosterstelsel

Raak lus en voer 'n bietjie wiskunde uit om buigsame en kragtige mengsels soos die een hieronder te genereer.

// Gritude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Roosterstelsel
. houer {
  breedte : @siteWidth ; 
  marge : 0 outo ;  
  . clearfix ();
}
. kolomme ( @columnSpan : 1 ) {  
  vertoon : inlyn ; 
  dryf : links ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  kantlyn - links : @gridGutterWidth ; 
  &: eerste - kind {
    kantlyn - links : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  kantlyn - links : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! belangrik ;          
}