Historia

Twitterren lehen egunetan, ingeniariek ezagutzen zuten ia edozein liburutegi erabiltzen zuten front-end baldintzak betetzeko. Bootstrap Twitterren lehen Hackweek-en zehar aurkeztutako erronkei eta garapena azkar azkartu zen erantzun gisa hasi zen.

Twitter-eko ingeniari askoren laguntzarekin eta iritziekin, Bootstrap-ek nabarmen hazi da oinarrizko estiloak ez ezik, diseinu-eredu dotoreagoak eta iraunkorragoak ere barne hartzen dituena.

Irakurri gehiago dev.twitter.com webgunean ›

Arakatzailearen laguntza

Bootstrap Chrome, Safari, Internet Explorer eta Firefox bezalako arakatzaile moderno nagusietan probatu eta onartzen da.

• Azken Safari
• Azken Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Zer sartzen den

Bootstrap CSS konpilatuekin, konpilatu gabekoekin eta adibideekin osatuta dator.

• Jatorrizko fitxategi guztiak
• CSS guztiz konpilatua eta txikitua
• Estilo-gidaren dokumentazio osoa
• Orrialdearen adibidea txantiloia (laster gehiago izango dira)

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 = "errenkada" > 
  <div class = "span6 zutabe" > 
    ...
  </div>
  <div class = "span10 zutabe" > 
    ...
  </div>
</div>

Diseinu finkoa

940 px-ko zabalerako diseinu lehenetsia, zentratua, ia edozein webgune edo orrialderako <div.container>.

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

Jariakinaren diseinua

Orrialde-egitura alternatibo eta malgua, gutxieneko eta gehienezko zabalerak eta ezkerreko alboko barra dituena. Aplikazio eta dokumentuetarako 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.

Sare tipografiko osoa gure preboot.less fitxategiko Less bi aldagaitan oinarritzen da: @basefonteta @baseline. Lehenengoa oinarrizko letra-tamaina erabiltzen da eta bigarrena oinarrizko lerroaren altuera da.

Aldagai horiek eta matematika batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko.

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...

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 garrantzia edo enfasi gehigarria adierazteko bere inguruko kopiarekiko. Erabili <strong>garrantzia eta <em>estresa nabarmentzeko .

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.

Oharra: oraindik ere ondo dago eta HTML5-en etiketak erabiltzea <b>eta <i>ez dute zertan lodia eta etzana izan, hurrenez hurren (nahiz eta elementu semantikoagorik egon, erabili). <b>Hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, <i>batez ere ahotsa, termino teknikoak, etab.

Helbideak

Elementua <address>bere arbaso hurbilenaren edo lan-talde osoaren kontaktu-informazioan erabiltzen da. Hona hemen nolakoa den:

Oharra: lerro bakoitza lerro <address>-jauzi batekin amaitu behar da ( <br />) edo bloke-mailako etiketa batean bilduta egon behar da (adibidez, <p>) edukia behar bezala egituratzeko.

Laburdurak

Laburdura eta akronimoetarako, erabili <abbr>etiketa ( HTML5<acronym> - en zaharkituta dago ). Jarri laburdura-inprimakia etiketaren barruan eta ezarri izenburu bat izen osoari.

Blokeko komatxoak

<blockquote> <p> <small>

Nola aipatu

Blokeoa sartzeko, bildu <blockquote>eta <p>etiketatu <small>. Erabili <small>elementua zure iturria aipatzeko eta marratxo bat jasoko duzu —aurretik.

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

Julius Hibbert doktorea

Ordenatu gabe<ul>

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

Estilorik gabekoa<ul.unstyled>

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

Agindua<ol>

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

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 <thead>hierarkia <thead>> <tr>> moduan <th>.

Zutabeen goiburuen antzera, zure taularen gorputz-eduki guztia modu batean bildu behar da, <tbody>zure 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.

<taula>
  ...
</table>

Adibidea: Zebra-marraduna

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

Oharra: Zebra-striping hobekuntza progresibo bat da, ez dago erabilgarri IE8 eta beheko arakatzaile zaharrentzako.

<table class = "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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<gidoia > 
  $ ( funtzioa () { 
    $ ( "taula#sortTableExample" ). taula -sortzailea ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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.

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.

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 hainbat klase funtzional aplika daitezke kolore-estilo desberdinetarako. Klase hauek klase urdina .primary, klase urdin argia .info, klase berdea .successeta klase gorria dira .danger. Gainera, zure estiloak jaurtitzea erraza da.

Adibide-botoiak

Botoien estiloak aplikatuta dagoen edozertan .btnaplika daitezke. <a>Normalean , <button>, eta hautatutako <input>elementuetan 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
• Goitibehera
  • Bigarren mailako lotura
  • Hemen beste zerbait
  • Beste esteka bat

<ul 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" > 
  <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 = "paginazioa" > 
  <ul>
    <li class = "aurreko desgaituta" ><a href = "#" > ← Aurreko </a></li>  
    <li class = "aktibo" ><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 = "hurrengoa" ><a href = "#" > Hurrengoa → </a></li>  
  </ul>
</div>

Oinarrizko alertak

div.alert-message

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

Blokeatu mezuak

div.alert-message.block-message

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.

Erreminta-aholkuak

Twipsiak oso erabilgarriak dira erabiltzaile nahasi bati laguntzeko eta norabide egokian zuzentzeko.

Popovers

Erabili popover-ak orrialde bati azpitestua emateko informazioa diseinuari 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" href = "gutxiago/bootstrap.less" media = "guztiak" />    
<script src = "js/less-1.1.3.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.

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 sarea
@basefont : 13px ;          
@baseline : 18px ;          

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    
    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   
    atzeko planoa - irudia : lineala - gradientea ( @startColor , @endColor ); // Estandarra  
  }
  . noranzkoa ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . bertikala - hiru kolore ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: % 50, @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 ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sare sistema
. edukiontzi {
  zabalera : @siteWidth ; 
  marjina : 0 auto ;  
  . garbitu ();
}
. zutabeak ( @columnSpan : 1 ) {  
  zabalera : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. desplazamendua ( @columnOffset : 1 ) {  
  marjina - ezkerra : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}