Sare lehenetsia

Bootstrap-en parte gisa eskaintzen den sareta-sistema lehenetsia 940 px zabaleko 16 zutabeko sareta da. 960 sareta sistema ezagunaren zaporea da, baina ezkerreko eta eskuineko alboetan marjina/betegarri gehigarririk gabe.

Sarearen markaketa adibidea

Hemen erakusten den moduan, oinarrizko diseinu bat sor daiteke bi "zutabeekin", bakoitza gure sareta-sistemaren parte gisa definitu ditugun oinarrizko 16 zutabeetako batzuk barne hartuta. Ikus beheko adibideak aldakuntza gehiago ikusteko.

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

Diseinu finkoa

940 px zabaleko oinarrizko edukiontzi-diseinua ia edozein gune edo orrialdetarako.

<gorputza>
  <div class = "edukiontzi" > 
    ...
  </div>
</body>

Jariakinaren diseinua

Orrialde fluido edo likidoaren egitura malgua, gutxieneko eta gehienezko zabalerak dituena eta ezkerreko alboko barra batekin. Aplikazioetarako bikaina.

<gorputza>
  <div class = "edukiontzi-fluidoa" > 
    <div class = "alboko barra" > 
      ...
    </div>
    <div class = "edukia" > 
      ...
    </div>
  </div>
</body>

Izenburuak eta kopia

Zure web-orriak egituratzeko hierarkia tipografiko estandarra.

h1. 1. goiburua

h2. 2. goiburua

h3. 3. goiburua

h4. 4. goiburua

h5. 5. goiburua

h6. 6. goiburua

Paragrafo adibidea

Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Adibide-izenburua Azpi-izenburua du...

Eta azpitituluak ere gehi ditzakezu <strong>eta<em>

Misc. elementuak

Azpimarra, helbideak eta laburdurak erabiliz

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

Noiz erabili

Enfasi etiketak ( <strong>eta <em>) erabili behar dira hitz edo esaldi baten eta inguruko kopiaren arteko bereizketa bisuala gehitzeko. Erabili <strong>antzinako arretarako eta arreta eta izenburuak<em> egiteko .

Azpimarra paragrafo batean

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.

Helbideak

Elementua address—asmatu duzu!— helbideetarako erabiltzen da. Hona hemen nolakoa den:

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

Oharra: lerro bakoitza lerro address-jauzi batekin bukatzen da ( <br />) bizitza errealean irakurtzen den moduan edukia behar bezala egituratzeko, estilorik aplikatu gabe.

Laburdurak

Laburdura eta akronimoetarako, erabili abbretiketa ( HTML5acronym - en zaharkituta dago ). Jarri laburdura-inprimakia etiketaren barruan eta ezarri izenburu bat izen osoari.

Blokeko komatxoak

<blockquote> <p> <cite>

Ziurtatu zure blockquoteinguruan bilduta paragrapheta citeetiketak. Iturburu bat aipatzerakoan, erabili citeelementua. CSS-k automatikoki izena emango dio marratxo batekin (—).

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

Julius Hibbert doktorea

Ordenatu gabe<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Nire taldekideak
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Estilorik gabekoa<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Nire taldekideak
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Agindua<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Nire taldekideak
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Deskribapenadl

Deskribapen zerrendak

Deskribapen zerrenda ezin hobea da terminoak definitzeko.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Mahaiak eraikitzea

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

Mahaiak bikainak dira, gauza askotarako. Taula bikainek, ordea, markatze-maitasun pixka bat behar dute erabilgarriak, eskalagarriak eta irakurgarriak izateko (kode mailan). Hona hemen aholku batzuk laguntzeko.

Bilatu beti zure zutabeen goiburuak theadhierarkia thead> tr> moduan th.

Zutabeen goiburuen antzera, zure taularen gorputz-eduki guztia modu batean bildu behar da, tbodyzure hierarkia tbody> tr> izan dadin td.

Adibidez: taula-estilo lehenetsiak

Taula guztiak automatikoki moldatuko dira ezinbesteko ertzekin soilik irakurgarritasuna bermatzeko eta egitura mantentzeko. Ez dago klase edo atributu gehigarririk gehitu beharrik.

#	Izena	Abizena	Hizkuntza
1	Batzuk	Bat	ingelesa
2	Joe	Sixpack	ingelesa
3	Stu	Dent	Kodea

<table class="common-table"> class = "common-table" >
  ...
</table>

Adibidea: Zebra-marraduna

Sortu pixka bat zure mahaiekin zebra-marra gehituz, gehitu .zebra-stripedklasea.

#	Izena	Abizena	Hizkuntza
1	Batzuk	Bat	ingelesa
2	Joe	Sixpack	ingelesa
3	Stu	Dent	Kodea

<table class="common-table zebra-striped"> class = "mahai arrunteko zebra marradun" >
...
</table>

Adibidea: Zebra-marradunarekin TableSorter.js

Aurreko adibidea hartuta, gure taulen erabilgarritasuna hobetzen dugu jQuery eta Tablesorter pluginaren bidez ordenatzeko funtzionaltasuna eskainiz. Egin klik edozein zutabeen goiburuan ordena aldatzeko.

#	Izena	Abizena	Hizkuntza
1	Zure	Bat	ingelesa
2	Joe	Sixpack	ingelesa
3	Stu	Dent	Kodea

<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 = "testua/javascript" > 
  $ ( dokumentua ). prest ( funtzioa () { 
    $ ( "taula#sortTableExample" ). taula -sortzailea ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "mahai arrunteko zebra marradun" > 
  ...
</table>

Estilo lehenetsiak

Inprimaki guztiei estilo lehenetsiak ematen zaizkie, modu irakurgarri eta eskalagarrian aurkezteko. Estiloak testua sartzeko, hautatze-zerrendak, testu-eremuak, irrati-botoiak eta kontrol-laukiak eta botoiak eskaintzen dira.

Inprimakiaren kondaira adibidea

X-Large Sarrera

Hautatu

1 2 3 4 5

Hautatu

1 2 3 4 5

Sarrera editaezina

Balio batzuk hemen

Sarrera desgaituta

X-Large Sarrera

Laguntza testuaren zati txikia

Inprimakiaren kondaira adibidea

Aurrez aurreko testua

@

Aurrez jarritako kontrol-laukia

Erantsitako kontrol-laukia

Fitxategi Sarrera

Inprimakiaren kondaira adibidea

Aukeren zerrenda

• Lehenengo aukera hau eta bestea da; ziurtatu zergatik den bikaina sartzen duzula
• Bigarren aukera ere egiaztatu eta inprimakiaren emaitzetan sar daiteke
• Hiru aukera —bai, asmatu duzu— ere egiaztatu eta inprimakiaren emaitzetan sar daiteke
• Lau aukera ezin da egiaztatu, desgaituta dagoelako.

Oharra: etiketak aukera guztiak inguratzen ditu klik eremu askoz handiagoak eta forma erabilgarriagoa lortzeko.

Data-tartea

to Ordu guztiak Pazifikoko ordu estandarra bezala erakusten dira (GMT -08:00).

Testu-eremua

Behar izanez gero, goiko eremua deskribatzeko laguntza-testu blokea.

Aukeren zerrenda

• Lehenengo aukera hau eta bestea da; ziurtatu zergatik den bikaina sartzen duzula
• Bigarren aukera ere egiaztatu eta inprimakiaren emaitzetan sar daiteke

Aldaketak gorde Utzi

Inprimaki pilatuak

Gehitu .form-stackedinprimakiaren HTMLra eta etiketak izango dituzu haien eremuen gainean ezkerrean egon beharrean. Honek ondo funtzionatzen du zure inprimakiak laburrak badira edo bi sarrera-zutabe badituzu inprimaki astunetarako.

Inprimakiaren kondaira adibidea

X-Large Sarrera

Hautatu

1 2 3 4 5

Inprimakiaren kondaira adibidea

Aukeren zerrenda

• Lehenengo aukera hau eta bestea da; ziurtatu zergatik den bikaina sartzen duzula
• Bigarren aukera ere egiaztatu eta inprimakiaren emaitzetan sar daiteke

Oharra: etiketak aukera guztiak inguratzen ditu klik eremu askoz handiagoak eta forma erabilgarriagoa lortzeko.

Aldaketak gorde Utzi

Botoiak

Konbentzio gisa, botoiak ekintzetarako erabiltzen dira, eta estekak objektuetarako erabiltzen dira. Adibidez, "Deskargatu" botoi bat izan daiteke eta "azken jarduerak" esteka.

Botoi guztiek estilo gris argia dute lehenetsita, baina .primaryklase urdin bat dago eskuragarri. Gainera, zure estiloak jaurtitzea erraza da.

Adibide-botoiak

Botoien estiloak aplikatuta dagoen edozertan .btnaplika daitezke. aNormalean , button, eta hautatutako inputelementuetan soilik aplikatu nahi dituzu . Hona hemen nolakoa den:

Ordezko tamainak

Botoi handiagoak edo txikiagoak nahi dituzu? Izan ezazu!

Ezindu egoera

Aktibatuta ez dauden edo aplikazioak arrazoi bategatik edo besteagatik desgaituta dauden botoietarako, erabili desgaitutako egoera. Hori .disabledesteketarako eta elementuetarako :disabledda .button

Estekak

Botoiak

Zer da hori

Gure goiko barra webgune baten logotipoa edo izena, nabigazio nagusia eta bilaketa-inprimakia biltzen dituen barra finko bat da.

Pertsonalizagarria

Barruko elementu guztiak eta goiko barra osoa ere aukerakoak dira. Logotipoa/izen bat, nabigazioa, bilaketa eta bigarren mailako nabigazio bat sartzea aukera dezakezu, edo horren konbinazioren bat.

Goitibeherak barne

Nabigazio nagusiaren zati gisa, zure nabigazioan goitibehurrak gehitzeko aukera sartu dugu. Begiratu goiko bigarren mailako nabigazioa (eskuinean lerrokatuta) nola egiten den ikusteko.

Tabletak eta pilulak

Sortu bigarren mailako nabigazio sinplea ul. Txandakatu fitxa edo pilulen artean dagokion klasea gehituz.

Aproposa edukiaren azpiataletarako, hala nola gure kontuaren ezarpenen orriak eta erabiltzaileen denbora-lerroak, antzeko edukiaren orrien artean aldatzeko. Fitxa edo pilula estiloetan eskuragarri.

• Hasiera
• Profila
• Mezuak
• Ezarpenak
• Kontaktua

<ul class="tabs"> class = "fitxak" >
  <li class = "active" ><a href = "" > Hasiera </a></li>  
  <li><a href = "" > Profila </a></li> 
  <li><a href = "" > Mezuak </a></li> 
  <li><a href = "" > Ezarpenak </a></li> 
  <li><a href = "" > Harremanetarako </a></li> 
</ul>

• Hasiera
• Profila
• Mezuak
• Ezarpenak
• Kontaktua

<ul class="pilulak"> klase = "pilulak" >
  <li class = "active" ><a href = "" > Hasiera </a></li>  
  <li><a href = "" > Profila </a></li> 
  <li><a href = "" > Mezuak </a></li> 
  <li><a href = "" > Ezarpenak </a></li> 
  <li><a href = "" > Harremanetarako </a></li> 
</ul>

Paginazioa

Rdio-n inspiratu den orrialdea ultra sinplista eta estilo minimoa. Bloke handia galtzen zaila da, erraz eskala daiteke eta klik eremu handiak eskaintzen ditu.

<div class="pagination"> class = "paginazioa" >
  <ul>
    <li class = "aurrekoa desgaituta" ><a href = "" > ← Aurreko </a></li>  
    <li class = "aktiboa" ><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 = "hurrena" ><a href = "" > Hurrengoa → </a></li>  
  </ul>
</div>

Oinarrizko alertak

Lerro bakarreko mezuak ekintza baten porrota, porrot posiblea edo arrakasta nabarmentzeko. Inprimakietarako bereziki erabilgarria.

Blokeatu mezuak

Azalpen apur bat eskatzen duten mezuetarako, paragrafo estiloko alertak ditugu. Hauek ezin hobeak dira errore-mezu luzeagoak biltzeko, erabiltzaileari zain dagoen ekintzaren bat abisatzeko edo orrialdeari enfasi gehiago emateko informazioa aurkezteko.

Modalak

Modalak (elkarrizketa edo argi-koadroak) oso egokiak dira testuinguruko ekintzetarako atzeko testuingurua mantentzea garrantzitsua den egoeretan.

Popovers

Erabili popover-ak orrialde bati azpitestu-informazioa emateko diseinua eragin gabe.

Bootstrap Preboot -ekin eraiki zen, kode irekiko mixin eta aldagaien paketea Less -ekin batera erabiltzeko , CSS aurreprozesadorearekin web garapen azkarrago eta errazagoa izateko.

Begiratu nola erabili dugun Preboot Bootstrap-en eta nola erabil dezakezun Less zure hurrengo proiektuan exekutatu nahi baduzu.

Nola erabili

Erabili aukera hau Bootstrap-en Less aldagaiak, nahasketak eta habiak CSS-n zure arakatzailean javascript bidez guztiz erabiltzeko.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "gutxiago/bootstrap.less" media = "guztiak" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Ez duzu .js irtenbidea sentitzen? Probatu Less Mac aplikazioa edo erabili Node.js zure kodea zabaltzen duzunean konpilatzeko.

Zer sartzen den

Hona hemen Twitter Bootstrap-en Bootstrap-en parte gisa sartzen denaren aipagarrietako batzuk. Joan Bootstrap webgunera edo Github proiektuaren orrira deskargatzeko eta gehiago ikasteko.

Kolore-aldagaiak

Less-eko aldagaiak ezin hobeak dira zure CSS buruko mina mantentzeko eta eguneratzeko. Kolore-balio bat edo maiz erabiltzen den balio bat aldatu nahi duzunean, eguneratu leku bakarrean eta prest zaude.

// Estekak
@linkColor : #8b59c2;         
@linkColorHover :     ilundu ( @linkColor , 10 ); 
// Grisak
@beltza : #000;             
@grayDark :           argitu ( @beltza , % 25 ); 
@grisa :               argitu ( @beltza , % 50 ); 
@grayLight :          argitu ( @beltza , % 70 ); 
@grayLighter :        argitu ( @beltza , % 90 ); 
@zuria : #fff;             
// Azentu koloreak
@urdina : #08b5fb;              
@berdea : #46a546;             
@gorria : #9d261d;               
@horia : #ffc40d;            
@laranja : #f89406;            
@arrosa : #c3325f;              
@morea : #7a43b6;            
// Oinarrizko lerroa
@baseline : 20px ;          

Komentatzen

/* ... */Less-ek beste iruzkin estilo bat ere eskaintzen du CSS-ren sintaxi normalaz gain .

// Hau iruzkin bat da
/* Hau ere iruzkin bat da */

Nahastu wazoo

Mixin-ak CSSrako barne edo partzialak dira, eta kode bloke bat bakarrean konbinatzeko aukera ematen du. Bikainak dira hornitzaileen aurrizkiaren propietateetarako, hala nola box-shadow, arakatzaileen arteko gradienteak, letra-tipo-pilak eta abar. Jarraian Bootstrap-ekin sartzen diren mixinen lagin bat dago.

Letra-tipo pilak

#font {
  . laburdura ( @pisua : normala , @tamaina : 14px , @lineHeight : 20px ) {     
    letra - tamaina : @tamaina ; 
    letra- tipoa - pisua : @pisua ; 
    line - altuera : @lineHeight ; 
  }
  . sans - serif ( @pisua : normala , @tamaina : 14px , @lineHeight : 20px ) {     
    letra -tipo - familia : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    letra - tamaina : @tamaina ; 
    letra- tipoa - pisua : @pisua ; 
    line - altuera : @lineHeight ; 
  }
  . serif ( @pisua : normala , @tamaina : 14px , @lineHeight : 20px ) {     
    letra -tipo - familia : "Georgia" , Times New Roman , Times , sans - serif ;     
    letra - tamaina : @tamaina ; 
    letra- tipoa - pisua : @pisua ; 
    line - altuera : @lineHeight ; 
  }
  . espazio bakarrekoa ( @pisua : normala , @tamaina : 12px , @lineHeight : 20px ) {     
    letra -tipo - familia : "Monaco" , Courier New , monospace ;   
    letra - tamaina : @tamaina ; 
    letra- tipoa - pisua : @pisua ; 
    line - altuera : @lineHeight ; 
  }
}

Gradienteak

#gradiente {
  . horizontala ( @startColor : #555, @endColor: #333) { 
    atzeko planoa - kolorea : @endColor ; 
    atzeko planoa - errepikatu : errepikatu - x ;
    atzeko planoa - irudia : - khtml - gradientea ( lineala , ezkerreko goiko aldean , eskuineko goiko aldean , ( @startColor ), to ( @endColor ) ); // Konqueror   
    atzeko planoa - irudia : - moz - lineala - gradientea ( ezkerrean , @startColor , @endColor ); // FF 3.6+    
    atzeko planoa - irudia : - ms - lineala - gradientea ( ezkerra , @startColor , @endColor ); // IE10    
    atzeko planoa - irudia : - webkit - gradientea ( lineala , ezkerreko goialdean , eskuineko goialdean , kolorea - gelditu ( % 0 , @startColor ), kolorea - gelditu ( % 100 , @endColor )); // Safari 4+, Chrome 2+    
    atzeko planoa - irudia : - webkit - lineala - gradientea ( ezkerrean , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    atzeko planoa - irudia : - o - lineala - gradientea ( ezkerrean , @startColor , @endColor ); // Opera 11.10    
    - ms - iragazkia : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    iragazkia : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1))" , @startColor , @endColor )); // IE6 eta IE7 
    atzeko planoa - irudia : lineala - gradientea ( ezkerrean , @startColor , @endColor ); // Le standard   
  }
  . bertikala ( @startColor : #555, @endColor: #333) { 
    atzeko planoa - kolorea : @endColor ; 
    atzeko planoa - errepikatu : errepikatu - x ;
    atzeko planoa - irudia : - khtml - gradientea ( lineala , ezkerreko goiko ezkerreko , ezkerreko beheko , ( @startColor ), to ( @endColor ) ); // Konqueror   
    atzeko planoa - irudia : - moz - lineala - gradientea ( @startColor , @endColor ); // FF 3.6+   
    atzeko planoa - irudia : - ms - lineala - gradientea ( @startColor , @endColor ); // IE10   
    atzeko planoa - irudia : - webkit - gradientea ( lineala , ezkerreko goiko , ezkerreko beheko , kolorea - gelditu ( % 0 , @startColor ), kolorea - gelditu ( % 100 , @endColor )); // Safari 4+, Chrome 2+    
    atzeko planoa - irudia : - webkit - lineala - gradientea ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    atzeko planoa - irudia : - o - lineala - gradientea ( @startColor , @endColor ); // Opera 11.10   
    - ms - iragazkia : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    iragazkia : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0))" , @startColor , @endColor )); // IE6 eta IE7 
    atzeko planoa - irudia : lineala - gradientea ( @startColor , @endColor ); // Estandarra  
  }
  . norabidea ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . bertikala - hiru kolore ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Eragiketak eta sare-sistema

Lortu dotorea eta egin matematika batzuk behean bezalako nahasketa malgu eta indartsuak sortzeko.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sare sistema
. edukiontzi {
  zabalera : @siteWidth ; 
  marjina : 0 auto ;  
  . garbitu ();
}
. zutabeak ( @columnSpan : 1 ) {  
  bistaratzea : lerroan ; 
  float : ezkerrera ;
  zabalera : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marjina - ezkerra : @gridGutterWidth ; 
  &: lehena - umea {
    marjina - ezkerrekoa : 0 ; 
  }
}
. desplazamendua ( @columnOffset : 1 ) {  
  marjina - ezkerrekoa : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! garrantzitsua ;          
}