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"> osztály = "sor" >
  <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éldacímsor Alcíme van...

Alcímeket is hozzáadhat a <strong>és a gombbal<em>

Egyéb elemeket

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

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

Mikor kell használni

Kiemelési címkéket ( <strong>és <em>) kell használni, hogy vizuális különbséget tegyen egy szó vagy kifejezés és a környező másolat között. Használja <strong>egyszerű régi figyelemre <em>, sima figyelemre és címekre.

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.

Címek

Az addresselemet – kitaláltad! – címekre használják. Így néz ki:

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

Megjegyzés: Az addressegy sor minden sorának sortöréssel ( ) kell végződnie, <br />hogy a tartalom megfelelően strukturálódjon, ahogyan az a valóságban is olvasható, bármilyen stílus alkalmazása nélkül.

Rövidítések

A rövidítésekhez és mozaikszavakhoz használja a ( HTML5 -ben elavult ) abbrcí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> <cite>

Ügyeljen arra, hogy tekerje blockquotekörbe paragraphés citecímkéket. Forrásra hivatkozva használja az citeelemet. A CSS automatikusan egy em kötőjelet (—) ír a név elé.

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

Dr. Julius Hibbert

Rendeletlen<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• A csapattársaim
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Új ember
• János Jákob
• Paul Pierce
• Kevin Garnett

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

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• A csapattársaim
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Új ember
• János Jákob
• Paul Pierce
• Kevin Garnett

Rendelve<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. A csapattársaim
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Új ember
6. János Jákob
7. Paul Pierce
8. Kevin Garnett

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

<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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( dokumentum ). kész ( function () { 
    $ ( "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

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 aa , buttonés a kiválasztott inputelemekre 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 buttonelemekre 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" > 
  <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 = "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 = "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.

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ú mixin- és változócsomag, amelyet a Less -sel , egy 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" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" 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@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, mint plbox-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 ; 
  úszó : balra ;
  szélesség : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margó - bal : @gridGutterWidth ; 
  &: első - gyermek {
    margó - bal : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margó - balra : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! fontos ;          
}