Történelem

A Twitter korábbi napjaiban a mérnökök szinte minden ismert könyvtárat használtak a front-end követelmények teljesítésére. A Bootstrap a Twitter első Hackweek-én jelentkező kihívásokra adott válaszként kezdődött, és a fejlődés gyorsan felgyorsult.

A Twitter számos mérnökének segítségével és visszajelzéseivel a Bootstrap jelentősen megnőtt, és nemcsak az alapvető stílusokat foglalja magában, hanem az elegánsabb és tartósabb front-end tervezési mintákat is.

További információ a dev.twitter.com oldalon ›

Böngésző támogatás

A Bootstrap tesztelve van és támogatja a főbb modern böngészőkben, mint például a Chrome, a Safari, az Internet Explorer és a Firefox.

• Legújabb Safari
• A legújabb Google Chrome
• Firefox 4+
• Internet Explorer 7+

Amit tartalmaz

A Bootstrap lefordított CSS-sel, lefordítatlan és példasablonokkal érkezik.

• Minden eredeti .less fájl
• Teljesen lefordított és minimalizált CSS
• Teljes stílusútmutató dokumentáció
• Példa oldalsablonra (hamarosan több lesz)

Alapértelmezett rács

A Bootstrap részeként biztosított alapértelmezett rácsrendszer egy 940 képpont széles, 16 oszlopos rács. Ez a népszerű 960-as rácsrendszer egy íze, de a bal és a jobb oldalon lévő további margó/párnázás nélkül.

Példa rácsjelölésre

Amint az itt látható, egy alapvető elrendezés két „oszlopból” is létrehozható, amelyek mindegyike a rácsrendszerünk részeként meghatározott 16 alaposzlop közül többen átfogható. További változatokért tekintse meg az alábbi példákat.

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

Fix elrendezés

Alapvető, 940 képpont széles, középre állított tárolóelrendezés szinte bármilyen webhelyhez vagy oldalhoz.

<test>
  <div class = "tároló" > 
    ...
  </div>
</body>

Folyékony elrendezés

Rugalmas folyékony vagy folyékony oldalszerkezet minimális és maximális szélességekkel és bal oldali oldalsávval. Nagyszerű alkalmazásokhoz.

<test>
  <div class = "container-fluid" > 
    <div class = "oldalsáv" > 
      ...
    </div>
    <div class = "tartalom" > 
      ...
    </div>
  </div>
</body>

Címsorok és másolat

Szabványos tipográfiai hierarchia a weboldalak strukturálásához.

h1. 1. címsor

h2. 2. címsor

h3. 3. címsor

h4. 4. címsor

h5. 5. címsor

h6. 6. címsor

Példa bekezdés

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.

Példa címsornak van alcíme…

Egyéb elemeket

Hangsúlyok, címek és rövidítések használata

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

Mikor kell használni

A kiemelő címkéket ( <strong>és <em>) kell használni egy szó vagy kifejezés további fontosságának vagy hangsúlyozásának jelzésére a környező példányhoz képest. Használja <strong>fontosságra és <em>stressz hangsúlyozására .

Kiemelés egy bekezdésben

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.

Megjegyzés: Továbbra is használható <b>és <i>címkék a HTML5-ben, de ezek már nem tartoznak az eredendő stílusokhoz. <b>célja, hogy szavakat vagy kifejezéseket emeljen ki anélkül, hogy további jelentőséget tulajdonítana, míg <i>többnyire hang, szakkifejezések stb.

Címek

Az <address>elemet a legközelebbi ősének vagy a munka egészének elérhetőségi adataihoz használják. Így néz ki:

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

Megjegyzés: A tartalom megfelelő felépítése érdekében minden <address>sornak sortöréssel ( ) kell végződnie, <br />vagy blokkszintű címkébe kell csomagolnia (pl. ).<p>

Rövidítések

A rövidítésekhez és mozaikszavakhoz használja a ( HTML5 -ben elavult ) <abbr>címkét . Helyezze a gyorsított űrlapot a címkébe, és adjon meg egy címet a teljes névhez.<acronym>

Blokkidézetek

<blockquote> <p> <small>

Hogyan kell idézni

Idézet beillesztéséhez csavarja <blockquote>körbe <p>és <small>címkézze. Használja az <small>elemet a forrás hivatkozására, és előtte egy em kötőjelet kap —.

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

Dr. Julius Hibbert

Rendeletlen<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem és massa
• 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

Stílus nélküli<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem és massa
• 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

Rendelve<ol>

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

Leírásdl

Leírás listák

A leírások listája tökéletes a kifejezések meghatározásához.

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.

Építőasztalok

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

Az asztalok nagyszerűek – sok mindenre. A nagyszerű tábláknak azonban egy kis jelölési szeretetre van szükségük ahhoz, hogy hasznosak, méretezhetők és olvashatóak legyenek (kódszinten). Íme néhány tipp a segítségedre.

Az oszlopfejléceket mindig <thead>úgy csomagolja be, hogy a hierarchia <thead>> <tr>> legyen <th>.

Az oszlopfejlécekhez hasonlóan a táblázat összes törzstartalmát a-ba kell csomagolni, <tbody>így a hierarchia <tbody>> <tr>> <td>.

Példa: Alapértelmezett táblázatstílusok

Az olvashatóság és a szerkezet fenntartása érdekében minden táblázat automatikusan stílusossá válik, csak a lényeges szegélyekkel. Nincs szükség extra osztályok vagy attribútumok hozzáadására.

#	Keresztnév	Vezetéknév	Nyelv
1	Néhány	Egy	angol
2	Joe	Hatos csomag	angol
3	Stu	Horpadás	Kód

<table class="common-table"> osztály = "közös táblázat" >
  ...
</table>

Példa: Zebracsíkos

Tegye egy kicsit divatosabbá az asztalait zebracsíkok hozzáadásával – csak adja hozzá az .zebra-stripedosztályt.

#	Keresztnév	Vezetéknév	Nyelv
1	Néhány	Egy	angol
2	Joe	Hatos csomag	angol
3	Stu	Horpadás	Kód

Megjegyzés: A zebracsíkozás egy progresszív továbbfejlesztés, amely nem érhető el régebbi böngészőkhöz, például IE8-hoz és régebbiekhez.

<table class="common-table zebra-striped"> osztály = "közös asztali zebracsíkos" >
...
</table>

Példa: Zebra-csíkos w/ TableSorter.js

Az előző példát figyelembe véve javítjuk táblázataink hasznosságát azáltal, hogy rendezési funkciót biztosítunk a jQuery és a Tablesorter bővítmény segítségével. Kattintson bármelyik oszlop fejlécére a rendezés módosításához.

#	Keresztnév	Vezetéknév	Nyelv
1	A te	Egy	angol
2	Joe	Hatos csomag	angol
3	Stu	Horpadás	Kód

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( függvény () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "közös asztali zebracsíkos" > 
  ...
</table>

Alapértelmezett stílusok

Minden űrlap alapértelmezett stílust kapott, hogy olvasható és méretezhető módon jelenítse meg őket. Stílusok állnak rendelkezésre a szövegbevitelhez, a kiválasztási listákhoz, a szövegterületekhez, a rádiógombokhoz és a jelölőnégyzetekhez, valamint a gombokhoz.

Példa űrlap jelmagyarázat

X-Large bemenet

Válassza ki

1 2 3 4 5

Válassza ki

1 2 3 4 5

Nem szerkeszthető bevitel

Némi érték itt

Letiltott bemenet

X-Large bemenet

Kis részlet a súgószövegből

Példa űrlap jelmagyarázat

Szöveg elé

@

Elöl jelölőnégyzet

Hozzáfűzött jelölőnégyzet

Fájlbevitel

Példa űrlap jelmagyarázat

Opciók listája

• Az első lehetőség ez és az – feltétlenül írja le, miért nagyszerű
• A második lehetőség is bejelölhető, és szerepelhet az űrlap eredményeiben
• A harmadik lehetőség – igen, kitalálta – szintén ellenőrizhető, és szerepelhet az űrlap eredményeiben
• A negyedik lehetőség nem ellenőrizhető, mivel le van tiltva.

Megjegyzés: A címkék körülveszik az összes lehetőséget a sokkal nagyobb kattintási területek és a használhatóbb forma érdekében.

Időintervallum

nak nek Minden időpont csendes-óceáni idő szerint (GMT -08:00) látható.

Textarea

Súgó szövegblokk a fenti mező leírásához, ha szükséges.

Opciók listája

• Az első lehetőség ez és az – feltétlenül írja le, miért nagyszerű
• A második lehetőség is bejelölhető, és szerepelhet az űrlap eredményeiben

Változtatások mentése  Megszünteti

Halmozott űrlapok

Adja .form-stackedhozzá az űrlap HTML-kódjához, és a címkék a mezők tetején jelennek meg, nem pedig a bal oldalon. Ez nagyszerűen működik, ha az űrlapok rövidek, vagy ha két oszlopot tartalmaz a nehezebb űrlapokhoz.

Példa űrlap jelmagyarázat

X-Large bemenet

Válassza ki

1 2 3 4 5

Példa űrlap jelmagyarázat

X-Large bemenet

Kis részlet a súgószövegből

Opciók listája

• Az első lehetőség ez és az – feltétlenül írja le, miért nagyszerű
• A második lehetőség is bejelölhető, és szerepelhet az űrlap eredményeiben

Megjegyzés: A címkék körülveszik az összes lehetőséget a sokkal nagyobb kattintási területek és a használhatóbb forma érdekében.

Változtatások mentése  Megszünteti

Gombok

Konvencióként a gombokat műveletekhez, míg a hivatkozásokat objektumokhoz használják. Például a „Letöltés” ​​lehet egy gomb, a „legutóbbi tevékenység” pedig egy hivatkozás.

Alapértelmezés szerint minden gomb világosszürke stílus, de .primaryelérhető kék osztály is. Ráadásul a saját stílusok görgetése egyszerű.

Példa gombok

A gombstílusok bármire alkalmazhatók az .btnalkalmazottal. Ezeket általában csak <a>a , <button>és a kiválasztott <input>elemekre szeretné alkalmazni. Így néz ki:

Alternatív méretek

Nagyobb vagy kisebb gombokat szeretne? Fogadd el!

Letiltott állapot

Azoknál a gomboknál, amelyek nem aktívak, vagy amelyeket az alkalmazás valamilyen okból letilt, használja a letiltott állapotot. Ez .disableda linkekre és :disabledaz <button>elemekre vonatkozik.

Linkek

Gombok

Mi az

Felső sávunk egy rögzített sáv, amely egy webhely logójának vagy nevének, elsődleges navigációjának és keresési űrlapjának ad helyet.

Testreszabható

A benne lévő összes elem és a teljes felső sáv is opcionális. Választhat, hogy belefoglal-e egy logót/nevet, navigációt, keresést és másodlagos navigációt – vagy ezek bármilyen kombinációját.

A legördülő listákat tartalmazza

A fő navigáció részeként lehetőséget adtunk legördülő menük hozzáadására a navigációhoz. Tekintse meg a fenti másodlagos navigációt (jobbra igazítva), hogy megtudja, hogyan működik.

Fülek és tabletták

Hozzon létre egyszerű másodlagos navigációt a <ul>. A megfelelő osztály hozzáadásával válthat a lapok vagy tabletták között.

Kiválóan alkalmas tartalom alszakaszaihoz, például fiókbeállítási oldalainkhoz és felhasználói idővonalainkhoz a hasonló tartalmú oldalak közötti váltáshoz. Kapható füles vagy tabletta stílusban.

• itthon
• Profil
• üzenetek
• Beállítások
• Kapcsolatba lépni

<ul class="tabs"> class = "lapok" >
  <li class = "aktív" ><a href = "#" > Kezdőlap </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Üzenetek </a></li> 
  <li><a href = "#" > Beállítások </a></li> 
  <li><a href = "#" > Kapcsolatfelvétel </a></li> 
</ul>

• itthon
• Profil
• üzenetek
• Beállítások
• Kapcsolatba lépni

<ul class="pills"> osztály = "tabletták" >
  <li class = "aktív" ><a href = "#" > Kezdőlap </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Üzenetek </a></li> 
  <li><a href = "#" > Beállítások </a></li> 
  <li><a href = "#" > Kapcsolatfelvétel </a></li> 
</ul>

Lapszámozás

Rendkívül leegyszerűsített és minimális stílusú oldalszámozás, amelyet az Rdio ihletett. A nagy blokkot nehéz kihagyni, könnyen méretezhető, és nagy kattintási területeket biztosít.

<div class="lapozás"> osztály = "oldalszámozás" >
  <ul>
    <li class = "előző letiltva" ><a href = "#" > ← Előző </a></li>  
    <li class = "aktív" ><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 = "#" > Következő → </a></li>  
  </ul>
</div>

Alapvető figyelmeztetések

Egysoros üzenetek egy művelet kudarcának, lehetséges kudarcának vagy sikerének kiemelésére. Formáknál különösen hasznos.

Üzenetek blokkolása

A kis magyarázatot igénylő üzenetekhez bekezdésstílus-figyelmeztetéseink vannak. Ezek tökéletesek arra, hogy hosszabb hibaüzeneteket bugyborékoljanak, figyelmeztessék a felhasználót egy függőben lévő műveletre, vagy egyszerűen csak információkat mutassanak be, hogy nagyobb hangsúlyt kapjanak az oldalon.

Modálok

A modálok – párbeszédpanelek vagy átvilágítódobozok – kiválóan alkalmasak a kontextuális műveletekhez olyan helyzetekben, ahol fontos a háttér kontextusának megőrzése.

Eszköztippek

A Twipsiek rendkívül hasznosak abban, hogy segítsenek a zavarodott felhasználónak, és a helyes irányba tereljék őket.

Popovers

Használjon felugró ablakokat, hogy szöveg alatti információkat biztosítson az oldalnak az elrendezés befolyásolása nélkül.

A Bootstrap a Preboot -tal készült, amely egy nyílt forráskódú keverőkből és változókból álló csomag, amelyet a Less CSS-előfeldolgozóval együtt használunk a gyorsabb és egyszerűbb webfejlesztés érdekében.

Nézze meg, hogyan használtuk a Prebootot a Bootstrapban, és hogyan használhatja azt, ha a Less alkalmazást választja a következő projektben.

Hogyan kell használni

Használja ezt a lehetőséget, hogy teljes mértékben kihasználja a Bootstrap Less változóit, mixinjeit és a CSS-be ágyazást JavaScripten keresztül a böngészőjében.

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

Nem érzi a .js megoldást? Próbálja ki a Less Mac alkalmazást , vagy használja a Node.js -t a fordításhoz, amikor telepíti a kódot.

Amit tartalmaz

Íme néhány kiemelés abból, amit a Twitter Bootstrap a Bootstrap részeként tartalmaz. Látogasson el a Bootstrap webhelyére vagy a Github projekt oldalára a letöltéshez és további információkért.

Színváltozók

A Less változók tökéletesek a CSS fejfájásmentes karbantartásához és frissítéséhez. Ha módosítani szeretne egy színértéket vagy egy gyakran használt értéket, frissítse azt egy helyen, és már kész is.

// Linkek
@linkColor : #8b59c2;         
@linkColorHover : sötétít (     @linkColor , 10 ); 
// Szürkék
@fekete : #000;             
@grayDark :           világosít ( @fekete , 25 %); 
@ szürke :               világosít ( @fekete , 50 %); 
@grayLight :          világosít ( @fekete , 70 %); 
@grayLighter :        világosít ( @fekete , 90 %); 
@fehér : #fff ;             
// Kiemelt színek
@kék : #08b5fb ;              
@zöld : #46a546 ;             
@piros : #9d261d;               
@sárga : #ffc40d ;            
@narancs : #f89406;            
@rózsaszín : #c3325f ;              
@lila : #7a43b6;            
// Alapállapot
@alapvonal : 20px ;          

Hozzászólás

/* ... */A Less a CSS normál szintaxisa mellett egy másik megjegyzési stílust is biztosít .

// Ez egy megjegyzés
/* Ez is egy megjegyzés */

Összekeveri a wazoo-t

A mixinek alapvetően tartalmazzák vagy részlegesek a CSS-hez, lehetővé téve egy kódblokk egyesítését. Kiválóan alkalmasak a szállítói előtaggal ellátott tulajdonságokhoz, például a box-shadow, a böngészők közötti színátmenetekhez, a betűkészletekhez és egyebekhez. Az alábbiakban egy minta látható a Bootstraphez mellékelt mixinekből.

Betűkészletek

#font {
  . gyorsírás ( @súly : normál , @méret : 14 képpont , @vonalmagasság : 20 képpont ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : normál , @size : 14px , @lineHeight : 20px ) {     
    betűtípus család : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @súly : normál , @méret : 14 képpont , @vonalmagasság : 20 képpont ) {     
    betűtípus család : " Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : normál , @size : 12px , @lineHeight : 20px ) {     
    font - család : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Színátmenetek

#gradiens {
  . vízszintes ( @startColor : #555, @endColor: #333) { 
    háttér - szín : @endColor ; 
    háttér - ismétlés : ismétlés - x ;
    background - image : - khtml - gradiens ( lineáris , bal felső , jobb felső , innen ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( balra , @startColor , @endColor ); FF 3.6+    
    background - image : - ms - linear - gradient ( balra , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( lineáris , bal felső , jobb felső , szín - stop ( 0 % , @startColor ), szín - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( balra , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( balra , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    szűrő : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 és IE7 
    background - image : linear - gradient ( balra , @startColor , @endColor ); // Le standard   
  }
  . függőleges ( @startColor : #555, @endColor: #333) { 
    háttér - szín : @endColor ; 
    háttér - ismétlés : ismétlés - x ;
    background - image : - khtml - gradiens ( lineáris , bal felső , bal alsó , innen ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineáris , bal felső , bal alsó , color - stop ( 0 % , @startColor ), color - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    szűrő : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 és IE7 
    background - image : linear - gradient ( @startColor , @endColor ); // A szabvány  
  }
  . irányított ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . függőleges - három - szín ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

Műveletek és rácsrendszer

Tedd jól magad, és végezd el a matematikát az alábbihoz hasonló rugalmas és erőteljes mixek létrehozásához.

// Griditude
@rácsColumns : 16 ;       
@rácsColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Rács rendszer
. konténer {
  sz é less é g : @siteWidth ; 
  marg ó: 0 auto ;  
  . clearfix ();
}
. oszlopok ( @columnSpan : 1 ) {  
  kijelz ő: inline ; 
  balra lebeg ;
  sz é less é g : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margó - bal : @gridGutterWidth ; 
  &: els ő gyerek {
    marg ó- bal : 0 ; 
  }
}
. offset ( @oszlopeltol á s : 1 ) {  
  margó - balra : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! fontos ;          
}