Zgodovina

V zgodnjih dneh Twitterja so inženirji uporabljali skoraj vsako knjižnico, ki so jo poznali, da bi izpolnili zahteve za front-end. Bootstrap se je začel kot odgovor na izzive, ki so se pojavili, razvoj pa se je hitro pospešil med prvim Twitterjevim Hackweekom.

S pomočjo in povratnimi informacijami številnih inženirjev pri Twitterju je Bootstrap močno zrasel, tako da ne vključuje le osnovnih stilov, temveč tudi elegantnejše in trajnejše vzorce oblikovanja sprednjega dela.

Preberite več na dev.twitter.com ›

Podpora za brskalnik

Bootstrap je preizkušen in podprt v večjih sodobnih brskalnikih, kot so Chrome, Safari, Internet Explorer in Firefox.

• Najnovejši Safari
• Najnovejši Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Kaj je vključeno

Bootstrap je opremljen s prevedenimi CSS, neprevedenimi in vzorčnimi predlogami.

• Vse izvirne datoteke .less
• Popolnoma preveden in zmanjšan CSS
• Celotna dokumentacija vodnika po slogu
• Primer predloge strani (več sledi kmalu)

Privzeta mreža

Privzeti mrežni sistem, ki je del Bootstrapa, je 940 slikovnih pik široka mreža s 16 stolpci. Je okus priljubljenega sistema mreže 960, vendar brez dodatnih robov/oblazinjenja na levi in ​​desni strani.

Primer označevanja mreže

Kot je prikazano tukaj, je mogoče ustvariti osnovno postavitev z dvema "stolpcema", od katerih vsak zajema več od 16 temeljnih stolpcev, ki smo jih definirali kot del našega mrežnega sistema. Oglejte si spodnje primere za več različic.

<div class = "row" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Fiksna postavitev

Privzeta in preprosta 940 slikovnih pik široka, sredinska postavitev za skoraj vsako spletno mesto ali stran, ki jo ponuja en sam <div.container>.

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

Tekoča postavitev

Alternativna, prilagodljiva tekoča struktura strani z najmanjšo in največjo širino ter levo stransko vrstico. Odlično za aplikacije in dokumente.

<telo>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Naslovi in ​​kopija

Standardna tipografska hierarhija za strukturiranje vaših spletnih strani.

Celotna tipografska mreža temelji na dveh spremenljivkah Less v naši datoteki preboot.less: @basefontin @baseline. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice.

Te spremenljivke in nekaj matematike uporabljamo za ustvarjanje robov, oblazinjenj in višin vrstic vseh naših vrst in še več.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5

h6. Naslov 6

Primer odstavka

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.

Primer naslova Ima podnaslov ...

razno elementi

Uporaba poudarkov, naslovov in okrajšav

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

Kdaj uporabiti

Oznaki za poudarjanje ( <strong>in <em>) je treba uporabiti za označevanje dodatnega pomena ali poudarka besede ali besedne zveze glede na njeno okoliško kopijo. Uporabite <strong>za pomembnost in <em>za poudarjanje poudarka.

Poudarek v odstavku

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

Opomba:<b> uporaba oznak in v HTML5 je še vedno v redu <i>in ni jim treba oblikovati krepko oziroma ležeče (čeprav obstaja bolj semantičen element, ga uporabite). <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.

Naslovi

Element <address>se uporablja za kontaktne informacije njegovega najbližjega prednika ali celotnega dela. Tako je videti:

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

Opomba: vsaka vrstica v se <address>mora končati s prelomom vrstice ( <br />) ali biti zavita v oznako na ravni bloka (npr. <p>), da pravilno strukturirate vsebino.

Okrajšave

Za okrajšave in akronime uporabite <abbr>oznako ( <acronym>je zastarelo v HTML5 ). Skrajšan obrazec postavite znotraj oznake in nastavite naslov za celotno ime.

Blockquotes

<blockquote> <p> <small>

Kako citirati

Če želite vključiti navedbo bloka, zavijte <blockquote>okoli <p>in <small>oznake. Uporabite <small>element za navajanje vira in pred njim boste dobili pomišljaj —.

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

Dr. Julius Hibbert

Neurejeno<ul>

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

Brez sloga<ul.unstyled>

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

Naročeno<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molesteie lorem in masa
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

Opisdl

Seznami opisov

Opisni seznam je kot nalašč za definiranje izrazov.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Gradbene mize

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

Mize so odlične - za veliko stvari. Odlične tabele pa potrebujejo malo ljubezni do označevanja, da so uporabne, razširljive in berljive (na ravni kode). Tukaj je nekaj nasvetov za pomoč.

Glave stolpcev vedno ovijte <thead>tako, da je hierarhija <thead>> <tr>> <th>.

Podobno kot pri naslovih stolpcev mora biti vsa vsebina telesa vaše tabele ovita v a <tbody>, tako da je vaša hierarhija <tbody>> <tr>> <td>.

Primer: privzeti slogi tabel

Vse tabele bodo samodejno oblikovane samo z bistvenimi robovi, da se zagotovi berljivost in ohrani struktura. Ni treba dodajati dodatnih razredov ali atributov.

#	Ime	Priimek	Jezik
1	nekaj	ena	angleščina
2	Joe	Sixpack	angleščina
3	Stu	Dent	Koda

<tabela>
  ...
</table>

Primer: Zebrasto črtasto

Bodite malo navdušeni nad svojimi mizami, tako da dodate zebraste črte – samo dodajte .zebra-stripedrazred.

#	Ime	Priimek	Jezik
1	nekaj	ena	angleščina
2	Joe	Sixpack	angleščina
3	Stu	Dent	Koda

Opomba: Zebra-striping je progresivna izboljšava, ki ni na voljo za starejše brskalnike, kot je IE8 in nižji.

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

Primer: Zebra-striped w/ TableSorter.js

Če vzamemo prejšnji primer, izboljšamo uporabnost naših tabel z zagotavljanjem funkcije razvrščanja prek jQuery in vtičnika Tablesorter . Kliknite glavo katerega koli stolpca, da spremenite razvrščanje.

#	Ime	Priimek	Jezik
1	Vaš	ena	angleščina
2	Joe	Sixpack	angleščina
3	Stu	Dent	Koda

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

Privzeti slogi

Vsi obrazci imajo privzete sloge, da so predstavljeni na berljiv in razširljiv način. Na voljo so slogi za vnose besedila, izbirne sezname, besedilna polja, izbirne gumbe in potrditvena polja ter gumbe.

Primer legende obrazca

X-Large Input

Izberite

1 2 3 4 5

Izberite

1 2 3 4 5

Vnos, ki ga ni mogoče urejati

Nekaj ​​vrednosti tukaj

Onemogočen vnos

X-Large Input

Majhen delček besedila pomoči

Primer legende obrazca

Predhodno besedilo

@

Dodano potrditveno polje

Dodano potrditveno polje

Vnos datoteke

Primer legende obrazca

Seznam možnosti

• Prva možnost je to in to – ne pozabite vključiti, zakaj je super
• Možnost dve je mogoče tudi preveriti in vključiti v rezultate obrazca
• Možnost tri je mogoče – da, uganili ste – prav tako preveriti in vključiti v rezultate obrazca
• Četrte možnosti ni mogoče označiti, ker je onemogočena.

Opomba: Oznake obdajajo vse možnosti za veliko večja področja klikanja in bolj uporaben obrazec.

Časovno obdobje

do Vsi časi so prikazani kot pacifiški standardni čas (GMT -08:00).

Textarea

Blok besedila pomoči za opis zgornjega polja, če je potrebno.

Seznam možnosti

• Prva možnost je to in to – ne pozabite vključiti, zakaj je super
• Možnost dve je mogoče tudi preveriti in vključiti v rezultate obrazca

Shrani spremembe  Prekliči

Zloženi obrazci

Dodajte .form-stackedv HTML svojega obrazca in imeli boste oznake na vrhu njihovih polj namesto na njihovi levi. To deluje odlično, če so vaši obrazci kratki ali imate dva stolpca vnosov za težje obrazce.

Primer legende obrazca

X-Large Input

Izberite

1 2 3 4 5

Primer legende obrazca

X-Large Input

Majhen delček besedila pomoči

Seznam možnosti

• Prva možnost je to in to – ne pozabite vključiti, zakaj je super
• Možnost dve je mogoče tudi preveriti in vključiti v rezultate obrazca

Opomba: Oznake obdajajo vse možnosti za veliko večja področja klikanja in bolj uporaben obrazec.

Shrani spremembe  Prekliči

Gumbi

Po dogovoru se gumbi uporabljajo za dejanja, medtem ko se povezave uporabljajo za predmete. Na primer, »Prenos« je lahko gumb, »nedavna dejavnost« pa povezava.

Vsi gumbi so privzeto nastavljeni na svetlo siv slog, vendar je mogoče uporabiti številne funkcionalne razrede za različne barvne sloge. Ti razredi vključujejo modri .primaryrazred, svetlo modri .inforazred, zeleni .successrazred in rdeči .dangerrazred. Poleg tega je rolanje lastnih stilov enostavno.

Primeri gumbov

Sloge gumbov je mogoče uporabiti za vse, kar ima .btnuporabljeno. Običajno jih boste želeli uporabiti samo <a>za , <button>in izbrane <input>elemente. Tako je videti:

Nadomestne velikosti

Ste všeč večji ali manjši gumbi? Imej to!

Onemogočeno stanje

Za gumbe, ki niso aktivni ali jih je aplikacija zaradi enega ali drugega razloga onemogočila, uporabite onemogočeno stanje. To velja za .disabledpovezave in elemente.:disabled<button>

Povezave

Gumbi

Kaj je to

Naša zgornja vrstica je fiksna vrstica, v kateri so logotip ali ime spletnega mesta, primarna navigacija in obrazec za iskanje.

Prilagodljiv

Vsi elementi znotraj in tudi celotna zgornja vrstica so neobvezni. Izberete lahko, da vključite logotip/ime, navigacijo, iskanje in sekundarno navigacijo ali katero koli kombinacijo tega.

Spustni meniji so vključeni

Kot del glavne navigacije smo vključili možnost dodajanja spustnih menijev v navigacijo. Oglejte si sekundarno krmarjenje zgoraj (desno poravnano), da vidite, kako je to narejeno.

Tablete in tablete

Ustvarite preprosto sekundarno navigacijo z <ul>. Zamenjajte med zavihki ali tabletami z dodajanjem ustreznega razreda.

Odlično za pododdelke vsebine, kot so naše strani z nastavitvami računa in uporabniške časovnice za preklapljanje med stranmi s podobno vsebino. Na voljo v obliki zavihkov ali tablet.

• domov
• Profil
• Sporočila
• nastavitve
• Kontakt

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Sporočila </a></li> 
  <li><a href = "#" > Nastavitve </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

• domov
• Profil
• Sporočila
• nastavitve
• Kontakt

<ul class = "tablete" > 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Sporočila </a></li> 
  <li><a href = "#" > Nastavitve </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Paginacija

Izjemno poenostavljeno in minimalistično oblikovano paginiranje po navdihu Rdio. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Prejšnji </a></li>  
    <li class = "active" ><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 = "next" ><a href = "#" > Naprej → </a></li>  
  </ul>
</div>

Osnovna opozorila

div.alert-message

Enovrstična sporočila za poudarjanje neuspeha, možnega neuspeha ali uspeha dejanja. Še posebej uporabno za obrazce.

Blokiraj sporočila

div.alert-message.block-message

Za sporočila, ki zahtevajo malo razlage, imamo opozorila o slogu odstavkov. Te so kot nalašč za prikazovanje daljših sporočil o napakah, opozarjanje uporabnika na čakajoče dejanje ali samo za predstavitev informacij za večji poudarek na strani.

Modali

Modali – pogovorna okna ali svetlobne škatle – so odlični za kontekstualna dejanja v situacijah, ko je pomembno ohraniti kontekst ozadja.

Nasveti za orodje

Twipsies so super uporabni za pomoč zmedenemu uporabniku in ga usmerijo v pravo smer.

Popoverji

Uporabite pojavne elemente, da strani zagotovite podbesedilne informacije, ne da bi to vplivalo na postavitev.

Bootstrap je bil zgrajen s Preboot , odprtokodnim paketom mixinov in spremenljivk, ki se uporabljajo v povezavi z Less , predprocesorjem CSS za hitrejši in enostavnejši spletni razvoj.

Preverite, kako smo uporabili predzagon v programu Bootstrap in kako ga lahko uporabite, če se pri naslednjem projektu odločite zagnati Less.

Kako ga uporabljati

Uporabite to možnost, če želite v celoti izkoristiti Bootstrapove spremenljivke Less, mešanice in gnezdenje v CSS prek javascripta v vašem brskalniku.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Ne čutite rešitve .js? Preizkusite aplikacijo Less Mac ali uporabite Node.js za prevajanje, ko uvedete kodo.

Kaj je vključeno

Tukaj je nekaj poudarkov tega, kar je vključeno v Twitter Bootstrap kot del Bootstrapa. Pojdite na spletno mesto Bootstrap ali stran projekta Github, da prenesete in izveste več.

Spremenljivke

Spremenljivke v Less so popolne za vzdrževanje in posodabljanje vašega CSS brez glavobola. Ko želite spremeniti vrednost barve ali pogosto uporabljeno vrednost, jo posodobite na enem mestu in pripravljeni ste.

// Povezave
@povezavaColor : #8b59c2;         
@linkColorHover :     potemni ( @linkColor , 10 ); 
 
// Sivi
@črna : #000;             
@grayDark :           osvetli ( @black , 25 %); 
@siva :               posvetli ( @črna , 50 %); 
@grayLight :          osvetli ( @black , 70 %); 
@grayLighter :        osvetli ( @black , 90 %); 
@bela : #fff;             
 
// Poudarjene barve
@modra : #08b5fb;              
@zeleno : #46a546;             
@rdeča : #9d261d ;               
@rumena : #ffc40d;            
@oranžna : #f89406 ;            
@roza : #c3325f;              
@vijolična : #7a43b6 ;            
 
// Osnovna mreža
@basefont : 13px ;          
@osnovna črta : 18px ;          

Komentiranje

Less poleg običajne /* ... */sintakse CSS ponuja še en slog komentiranja.

// To je komentar
/* To je tudi komentar */

Zmeša wazoo

Miksini so v bistvu vključeni ali delni za CSS, ki vam omogočajo združevanje bloka kode v enega. Odlični so za lastnosti s predpono prodajalca, kot box-shadowso , prelivi med brskalniki, skladi pisav in več. Spodaj je vzorec miksinov, ki so vključeni v Bootstrap.

Skladi pisav

#font {
  . skrajšano ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
velikost     pisave : @velikost ; _ 
teža     pisave : @ teža ; 
višina     vrstice : @lineHeight ; _ 
  }
  . sans - serif ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
družina     pisav : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
velikost     pisave : @velikost ; _ 
teža     pisave : @ teža ; 
višina     vrstice : @lineHeight ; _ 
  }
  . serif ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
družina     pisav : " Georgia" , Times New Roman , Times , sans - serif ;     
velikost     pisave : @velikost ; _ 
teža     pisave : @ teža ; 
višina     vrstice : @lineHeight ; _ 
  }
  . monospace ( @weight : normalno , @size : 12px , @lineHeight : 20px ) {     
družina     pisav : " Monaco" , Courier New , monospace ;   
velikost     pisave : @velikost ; _ 
teža     pisave : @ teža ; 
višina     vrstice : @lineHeight ; _ 
  }
}

Gradienti

#gradient {
  . vodoravno ( @startColor : #555, @endColor: #333) { 
barva     ozadja : @endColor ; _ 
    ozadje - ponovitev : ponovitev - x ;
    ozadje - slika : - khtml - gradient ( linearno , levo zgoraj , desno zgoraj , od ( @startColor ), do ( @endColor )); // Konqueror   
    ozadje - slika : - moz - linearno - gradient ( levo , @startColor , @endColor ); // FF 3.6+    
    ozadje - slika : - ms - linearno - gradient ( levo , @startColor , @endColor ); // IE10    
    ozadje - slika : - webkit - gradient ( linearno , levo zgoraj , desno zgoraj , barvno - stop ( 0 %, @startColor ), barvno - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ozadje - slika : - webkit - linearno - gradient ( levo , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ozadje - slika : - o - linearno - preliv ( levo , @startColor , @endColor ); // Opera 11.10    
    ozadje - slika : linearno - preliv ( levo , @startColor , @endColor ); // Le standard   
  }
  . navpično ( @startColor : #555, @endColor: #333) { 
barva     ozadja : @endColor ; _ 
    ozadje - ponovitev : ponovitev - x ;
    ozadje - slika : - khtml - preliv ( linearno , levo zgoraj , levo spodaj , od ( @startColor ), do ( @endColor )); // Konqueror   
    ozadje - slika : - moz - linearno - gradient ( @startColor , @endColor ); // FF 3.6+   
    ozadje - slika : - ms - linearno - gradient ( @startColor , @endColor ); // IE10   
    ozadje - slika : - webkit - preliv ( linearno , levo zgoraj , levo spodaj , barvno - stop ( 0 %, @startColor ), barvno - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ozadje - slika : - webkit - linearno - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ozadje - slika : - o - linearno - gradient ( @startColor , @endColor ); // Opera 11.10   
    ozadje - slika : linearno - preliv ( @startColor , @endColor ); // Standard  
  }
  . usmerjen ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . navpično - tri - barve ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operacije in mrežni sistem

Bodite navdušeni in izvedite nekaj matematike, da ustvarite prilagodljive in zmogljive miksine, kot je spodnji.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Mrežni sistem
. vsebnik {
  širina : @siteWidth ; 
  rob : 0 samodejno ;  
  . clearfix ();
}
. stolpci ( @columnSpan : 1 ) {  
  širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. odmik ( @columnOffset : 1 ) {  
  rob - levo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}