Ajalugu

Twitteri varasematel päevadel kasutasid insenerid kasutajaliidese nõuete täitmiseks peaaegu kõiki neile tuttavaid raamatukogusid. Bootstrap sai alguse vastusest väljakutsetele, mis Twitteri esimese Hackweeki ajal kiiresti kiirenes.

Paljude Twitteri inseneride abiga ja tagasisidega on Bootstrap märkimisväärselt kasvanud, et hõlmata mitte ainult põhistiile, vaid ka elegantsemaid ja vastupidavamaid esiotsa disainimustreid.

Lisateavet leiate saidilt dev.twitter.com ›

Brauseri tugi

Bootstrapi testitakse ja toetatakse suuremates kaasaegsetes brauserites, nagu Chrome, Safari, Internet Explorer ja Firefox.

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

Mis on kaasas

Bootstrap on koos kompileeritud CSS-i, kompileerimata ja näidismallidega.

• Kõik algsed .vähem failid
• Täielikult kompileeritud ja minimeeritud CSS
• Täielik stiilijuhendi dokumentatsioon
• Lehemalli näidis (varsti tuleb rohkem)

Vaikimisi ruudustik

Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 16 veeruga ruudustik. See on populaarse 960 ruudustiku süsteemi maitse, kuid ilma täiendava veeriseta/polsterduseta vasakul ja paremal küljel.

Võrgumärgistuse näide

Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 16 põhiveeru, mille määratlesime oma ruudustikusüsteemi osana. Rohkemate variatsioonide nägemiseks vaadake allolevaid näiteid.

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

Fikseeritud paigutus

Põhiline 940 piksli laiune tsentreeritud konteinerpaigutus peaaegu iga saidi või lehe jaoks.

<keha>
  <div class = "konteiner" > 
    ...
  </div>
</body>

Vedeliku paigutus

Paindlik vedel või vedel lehe struktuur minimaalse ja maksimaalse laiusega ning vasakpoolse külgribaga. Suurepärane rakenduste jaoks.

<keha>
  <div class = "container-fluid" > 
    <div class = "külgriba" > 
      ...
    </div>
    <div class = "sisu" > 
      ...
    </div>
  </div>
</body>

Pealkirjad ja koopia

Standardne tüpograafiline hierarhia teie veebilehtede struktureerimiseks.

h1. Pealkiri 1

h2. 2. pealkiri

h3. 3. pealkiri

h4. 4. pealkiri

h5. 5. pealkiri

h6. 6. pealkiri

Näidislõik

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.

Näidispealkirjal on alampealkiri…

Muu elemendid

Rõhu, aadresside ja lühendite kasutamine

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

Millal kasutada

Rõhumärke ( <strong>ja <em>) tuleks kasutada, et näidata sõna või fraasi täiendavat tähtsust või rõhuasetust ümbritseva koopia suhtes. Kasutage <strong>tähtsuse ja <em>stressi rõhutamiseks .

Rõhuasetus lõigus

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, a pharetra augue.

Märkus . HTML5 -s on endiselt lubatud kasutada <b>ja <i>silte, kuid neil ei ole enam omaseid stiile. <b>on mõeldud sõnade või fraaside esiletõstmiseks ilma täiendavat tähtsust andmata, samas kui <i>see on enamasti mõeldud hääle, tehniliste terminite jms jaoks.

Aadressid

Elementi <address>kasutatakse selle lähima esivanema või kogu töö kontaktteabe saamiseks. See näeb välja järgmiselt:

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

Märkus . Sisu õigeks struktureerimiseks peab iga rida <address>lõppema reavahetusega ( <br />) või olema ümbritsetud plokitasemel märgendiga (nt ).<p>

Lühendid

Lühendite ja akronüümide jaoks kasutage <abbr>märgendit ( <acronym>on HTML5- s aegunud ). Pange stenogrammi vorm sildi sisse ja määrake täielikule nimele pealkiri.

Plokktsitaadid

<blockquote> <p> <small>

Kuidas tsiteerida

Tsitaadi lisamiseks mähkige <blockquote>ümber <p>ja <small>sildid. Kasutage <small>elementi allika viitamiseks ja selle ette kuvatakse kriips —.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

Tellimata<ul>

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

Stiilita<ul.unstyled>

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

Tellitud<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Täisarv molestie lorem ja mass
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

Kirjeldusdl

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Euismod

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

Donec id elit non mi porta gravida ja eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ehituslauad

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

Tabelid on suurepärased - paljude asjade jaoks. Suurepärased tabelid vajavad aga veidi märgistusarmastust, et olla kasulikud, skaleeritavad ja loetavad (koodi tasemel). Siin on mõned näpunäited, mis aitavad.

Mähkige veerupäised alati <thead>nii, et hierarhia oleks <thead>> <tr>> <th>.

Sarnaselt veerupäistele tuleks kogu tabeli põhisisu mähitud a-sse, <tbody>nii et teie hierarhia oleks <tbody>> <tr>> <td>.

Näide: tabeli vaikelaadid

Kõik tabelid kujundatakse automaatselt ainult oluliste ääristega, et tagada loetavus ja säilitada struktuur. Täiendavaid klasse ega atribuute pole vaja lisada.

#	Eesnimi	Perekonnanimi	Keel
1	Mõned	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

<table class="common-table"> klass = "ühine tabel" >
  ...
</table>

Näide: sebratriibuline

Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .zebra-stripedklass.

#	Eesnimi	Perekonnanimi	Keel
1	Mõned	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

Märkus. Sebra-triibutamine on progresseeruv täiustus, mis pole saadaval vanematele brauseritele, nagu IE8 ja vanemad.

<table class="common-table zebra-striped"> klass = "hariliku laua sebratriibuline" >
...
</table>

Näide: sebratriibuline koos TableSorter.js-iga

Eelneva näite puhul parandame oma tabelite kasulikkust, pakkudes sortimisfunktsiooni jQuery ja Tablesorteri pistikprogrammi kaudu. Sordi muutmiseks klõpsake mis tahes veeru päist.

#	Eesnimi	Perekonnanimi	Keel
1	Sinu	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( funktsioon () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "tavalaud sebratriibuline" > 
  ...
</table>

Vaikimisi stiilid

Kõigile vormidele antakse vaikestiilid, et neid loetaval ja skaleeritaval viisil esitada. Tekstisisestuse, valikuloendite, tekstialade, raadionuppude ja märkeruutude ning nuppude stiilid on saadaval.

Näidisvormi legend

X-Large sisend

Valige

1 2 3 4 5

Valige

1 2 3 4 5

Redigeerimata sisend

Mingi väärtus siin

Keelatud sisend

X-Large sisend

Väike jupp abitekstist

Näidisvormi legend

Lisatud tekst

@

Lisatud märkeruut

Lisatud märkeruut

Faili sisend

Näidisvormi legend

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata
• Kolmandat valikut saab ka kontrollida ja vormitulemustesse kaasata – jah, arvasite ära
• Neljandat valikut ei saa kontrollida, kuna see on keelatud.

Märkus. Sildid ümbritsevad kõiki võimalusi palju suuremate klõpsamisalade ja kasutatavama vormi jaoks.

Kuupäevavahemik

juurde Kõik ajad on näidatud Vaikse ookeani standardajana (GMT -08:00).

Tekstiala

Abiteksti plokk ülaltoodud välja kirjeldamiseks, kui vaja.

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata

Salvesta muudatused  Tühista

Virnastatud vormid

Lisage .form-stackedoma vormi HTML-i ja teil on sildid nende väljade kohal, mitte vasakul. See toimib suurepäraselt, kui teie vormid on lühikesed või kui teil on raskemate vormide jaoks kaks sisendi veergu.

Näidisvormi legend

X-Large sisend

Valige

1 2 3 4 5

Näidisvormi legend

X-Large sisend

Väike jupp abitekstist

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata

Märkus. Sildid ümbritsevad kõiki võimalusi palju suuremate klõpsamisalade ja kasutatavama vormi jaoks.

Salvesta muudatused  Tühista

Nupud

Tavapäraselt kasutatakse nuppe toimingute jaoks, linke aga objektide jaoks. Näiteks "Laadi alla" võib olla nupp ja "hiljutine tegevus" võib olla link.

Kõik nupud on vaikimisi helehalli stiiliga, kuid .primarysaadaval on ka sinine klass. Lisaks on oma stiilide loomine lihtne.

Näidisnupud

Nupu stiile saab rakendusega kõigele .btnrakendada. Tavaliselt soovite neid rakendada ainult <a>, <button>ja valitud <input>elementidele. See näeb välja järgmiselt:

Alternatiivsed suurused

Kas soovite suuremaid või väiksemaid nuppe? Tehke seda!

Puudega olek

Nuppude puhul, mis ei ole aktiivsed või mille rakendus ühel või teisel põhjusel keelab, kasutage keelatud olekut. Seda .disabledlinkide ja elementide :disabledjaoks .<button>

Lingid

Nupud

Mis see on

Meie ülemine riba on fikseeritud riba, millel on veebisaidi logo või nimi, peamine navigeerimine ja otsinguvorm.

Kohandatav

Kõik sees olevad elemendid ja ka kogu ülemine riba on valikulised. Saate valida, kas lisada logo/nime, navi, otsingu ja teisese navi – või nende mis tahes kombinatsiooni.

Kaasas rippmenüüd

Põhinavigeerimise osana oleme lisanud võimaluse lisada oma navigeerimisseadmele rippmenüüd. Vaadake ülaltoodud teisest navigeerimisnuppu (paremale joondatud), et näha, kuidas see on tehtud.

Vahelehed ja pillid

Looge lihtne sekundaarne navigeerimine <ul>. Vahetage vahekaarte või tablette, lisades sobiva klassi.

Suurepärane sisu alamjaotiste jaoks, nagu meie konto seadete lehed ja kasutajate ajaskaala sarnase sisuga lehtede vahel liikumiseks. Saadaval sakkide või pillidega.

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust

<ul class="tabs"> klass = "tabs" >
  <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
  <li><a href = "#" > Profiil </a></li> 
  <li><a href = "#" > Sõnumid </a></li> 
  <li><a href = "#" > Seaded </a></li> 
  <li><a href = "#" > Võtke ühendust </a></li> 
</ul>

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust

<ul class="pills"> klass = "pillid" >
  <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
  <li><a href = "#" > Profiil </a></li> 
  <li><a href = "#" > Sõnumid </a></li> 
  <li><a href = "#" > Seaded </a></li> 
  <li><a href = "#" > Võtke ühendust </a></li> 
</ul>

Leheküljed

Rdiost inspireeritud ülilihtsustatud ja minimaalse stiiliga lehekülgede lehekülg. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

<div class="pagination"> klass = "lehekülgede jagamine" >
  <ul>
    <li class = "eelmine keelatud" ><a href = "#" > ← Eelmine </a></li>  
    <li class = "aktiivne" ><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 = "#" > Järgmine → </a></li>  
  </ul>
</div>

Põhilised hoiatused

Üherealised sõnumid toimingu ebaõnnestumise, võimaliku ebaõnnestumise või õnnestumise esiletõstmiseks. Eriti kasulik vormide jaoks.

Blokeeri sõnumid

Pisut selgitust vajavate sõnumite jaoks on meil lõigu stiili hoiatused. Need sobivad suurepäraselt pikemate veateadete esilekutsumiseks, kasutaja hoiatamiseks ootel oleva toimingu eest või lihtsalt teabe esitamiseks, et lehel rohkem rõhku panna.

Modaalid

Modaalid – dialoogid või valguskastid – sobivad suurepäraselt kontekstuaalsete toimingute jaoks olukordades, kus on oluline säilitada taustakontekst.

Tööriistade näpunäited

Twipsid on väga kasulikud segaduses kasutaja abistamiseks ja õiges suunas suunamiseks.

Popovers

Kasutage hüpikaknaid, et anda lehele subtekstilist teavet ilma paigutust mõjutamata.

Bootstrap loodi Prebootiga , avatud lähtekoodiga segude ja muutujate paketiga, mida kasutatakse koos Lessiga , CSS-i eelprotsessoriga, mis võimaldab veebiarendust kiiremaks ja lihtsamaks muuta.

Vaadake, kuidas me Bootstrapis Prebooti kasutasime ja kuidas saate seda kasutada, kui otsustate järgmises projektis Less'i käivitada.

Kuidas seda kasutada

Kasutage seda suvandit, et kasutada täielikult ära Bootstrapi vähem muutujaid, segusid ja pesastamist CSS-is brauseris JavaScripti kaudu.

<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "laadileht/vähem" href = "vähem/bootstrap.less" media = "kõik" />   
<script src = "js/less-1.0.41.min.js" ></script> 

Kas te ei tunne .js-lahendust? Proovige rakendust Less Mac või kasutage koodi juurutamisel kompileerimiseks Node.js -i.

Mis on kaasas

Siin on mõned Twitteri Bootstrapi osana Bootstrapis sisalduva esiletõstmised. Allalaadimiseks ja lisateabe saamiseks minge Bootstrapi veebisaidile või Githubi projekti lehele.

Värvi muutujad

Muutujad in Less sobivad suurepäraselt teie CSS-i peavaludeta hooldamiseks ja värskendamiseks. Kui soovite muuta värviväärtust või sageli kasutatavat väärtust, värskendage seda ühes kohas ja oletegi valmis.

// Lingid
@linkColor : #8b59c2;         
@linkColorHover :     tumedamaks ( @linkColor , 10 ); 
// Hallid
@must : #000;             
@grayDark :           heledamaks ( @must , 25 %); 
@hall :               heledamaks ( @must , 50 %); 
@grayLight :          heledamaks ( @must , 70 %); 
@grayLighter :        heledamaks ( @must , 90 %); 
@valge : #fff;             
// Aktsentvärvid
@sinine : #08b5fb;              
@roheline : #46a546;             
@punane : #9d261d;               
@kollane : #ffc40d;            
@oranž : #f89406 ;            
@roosa : #c3325f;              
@lilla : #7a43b6;            
// Lähtejoon
@baseline : 20px ;          

Kommenteerides

Less pakub lisaks CSS-i tavalisele /* ... */süntaksile ka teist kommenteerimisstiili.

// See on kommentaar
/* See on ka kommentaar */

Segab wazoo kokku

Mixinid on CSS-i jaoks põhiliselt sisaldavad või osalised, mis võimaldavad teil koodiploki üheks ühendada. Need sobivad suurepäraselt müüja eesliitega atribuutide jaoks, nagu box-shadow, brauseriülesed gradiendid, fondivirnad ja palju muud. Allpool on näide Bootstrapiga kaasas olevatest miksinidest.

Fondivirnad

#font {
  . stenogramm ( @weight : tavaline , @size : 14px , @lineHeight : 20px ) {     
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : normaalne , @size : 14px , @lineHeight : 20px ) {     
    fondiperekond : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : normaalne , @size : 14px , @lineHeight : 20px ) {     
    font - perekond : "Georgia" , Times New Roman , Times , sans - serif ;     
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : tavaline , @size : 12px , @lineHeight : 20px ) {     
    font - perekond : "Monaco" , Courier New , monospace ;   
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradiendid

#gradient {
  . horisontaalne ( @startColor : #555, @endColor: #333) { 
    taustavärv : @endColor ; _ _ 
    taust - kordamine : kordus - x ;
    taust - pilt : - khtml - gradient ( lineaarne , vasak ülemine , parem ülemine , alates ( @startColor ), kuni ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( vasakul , @startColor , @endColor ); // FF 3,6+    
    background - image : - ms - linear - gradient ( vasakul , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( lineaarne , vasak ülemine , parem ülemine , värv - stop ( 0 % , @startColor ), värv - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( vasakul , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( vasakul , @startColor , @endColor ); // Ooper 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 ja IE7 
    taust - pilt : lineaarne - gradient ( vasak , @startColor , @endColor ); // Le standard   
  }
  . vertikaalne ( @startColor : #555, @endColor: #333) { 
    taustavärv : @endColor ; _ _ 
    taust - kordamine : kordus - x ;
    taust - pilt : - khtml - gradient ( lineaarne , vasak ülemine , vasak alumine , alates ( @startColor ), kuni ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3,6+   
    taust - pilt : - ms - lineaarne - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineaarne , vasak ülemine , vasak alumine , värv - stop ( 0 % , @startColor ), värv - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    taust - pilt : - o - lineaarne - gradient ( @startColor , @endColor ); // Ooper 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 ja IE7 
    taust - pilt : lineaarne - gradient ( @startColor , @endColor ); // Standard  
  }
  . suunaline ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikaalne - kolm - värvi ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

Toimingud ja võrgusüsteem

Olge väljamõeldud ja tehke matemaatikat, et luua paindlikke ja võimsaid mikse, nagu allpool näidatud.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Võrgusüsteem
. konteiner {
  laius : @siteWidth ; 
  marginaal : 0 auto ;  
  . clearfix ();
}
. veerud ( @columnSpan : 1 ) {  
  ekraan : inline ; 
  ujuk : vasak ;
  laius : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  veeris - vasak : @gridGutterWidth ; 
  &: esimene - laps {
    veeris - vasak : 0 ; 
  }
}
. nihe ( @columnOffset : 1 ) {  
  veeris - vasak : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! oluline ;          
}