Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap Twitterren tresna-kit bat da, web-aplikazioen eta guneen garapena abiarazteko diseinatua.
Oinarrizko CSS eta HTML barne hartzen ditu tipografia, inprimakiak, botoiak, taulak, saretak, nabigazioa eta abar.
Nerd alerta: Bootstrap Gutxiagorekin eraikita dago eta arakatzaile modernoak kontuan izanda atetik lan egiteko diseinatu zen.
Hasteko azkarrena eta errazena izateko, kopiatu zati hau zure web orrian.
Gutxiago erabiltzearen zalea? Ez dago arazorik, klonatu repo eta gehitu lerro hauek:
Deskargatu, bideratu, atera, fitxategi-arazoak eta gehiago Github-eko Bootstrap repositegi ofizialarekin.
Twitterren lehen egunetan, ingeniariek ezagutzen zuten ia edozein liburutegi erabiltzen zuten front-end baldintzak betetzeko. Bootstrap Twitterren lehen Hackweek-ean aurkeztutako eta garapena azkar bizkortu zen erronken 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 ›
Bootstrap Chrome, Safari, Internet Explorer eta Firefox bezalako arakatzaile moderno nagusietan probatu eta onartzen da.
Bootstrap CSS konpilatuekin, konpilatu gabekoekin eta adibideekin osatuta dator.
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.
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>
940 px-ko zabalerako diseinu lehenetsia, zentratua, ia edozein webgune edo orrialderako <div.container>
.
- <gorputza>
- <div class = "edukiontzi" >
- ...
- </div>
- </body>
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>
Zure web-orriak egituratzeko hierarkia tipografiko estandarra.
Sare tipografiko osoa gure preboot.less fitxategiko Less bi aldagaitan oinarritzen da: @basefont
eta @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.
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.
Azpimarra, helbideak eta laburdurak erabiliz
<strong>
<em>
<address>
<abbr>
Azpimarratzeko 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 .
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.
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.
Laburdura eta akronimoetarako, erabili <abbr>
etiketa ( HTML5<acronym>
- en zaharkituta dago ). Jarri laburdura-inprimakia etiketaren barruan eta ezarri izenburu bat izen osoari.
<blockquote>
<p>
<small>
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
.
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 |
- <taula>
- ...
- </table>
Sortu pixka bat zure mahaiekin zebra-marra gehituz, gehitu .zebra-striped
klasea.
# | Izena | Abizena | Hizkuntza |
---|---|---|---|
1 | Batzuk | Bat | ingelesa |
2 | Joe | Sixpack | ingelesa |
3 | Stu | Dent | Kodea |
Oharra: Zebra-striping hobekuntza progresibo bat da, ez dago erabilgarri IE8 eta beheko arakatzaile zaharrentzako.
- <table class = "zebra marradun" >
- ...
- </table>
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 src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <gidoia >
- $ ( funtzioa () {
- $ ( "taula#sortTableExample" ). taula -sortzailea ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra marradun" >
- ...
- </table>
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.
Gehitu .form-stacked
inprimakiaren 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.
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 .success
eta klase gorria dira .danger
. Gainera, zure estiloak jaurtitzea erraza da.
Botoien estiloak aplikatuta dagoen edozertan .btn
aplika daitezke. <a>
Normalean , <button>
, eta hautatutako <input>
elementuetan soilik aplikatu nahi dituzu . Hona hemen nolakoa den:
Botoi handiagoak edo txikiagoak nahi dituzu? Izan ezazu!
Aktibatuta ez dauden edo aplikazioak arrazoi bategatik edo besteagatik desgaituta dauden botoietarako, erabili desgaitutako egoera. Hori .disabled
esteketarako eta elementuetarako :disabled
da .<button>
div.alert-message
Lerro bakarreko mezuak ekintza baten porrota, porrot posiblea edo arrakasta nabarmentzeko. Inprimakietarako bereziki erabilgarria.
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 (elkarrizketa edo argi-koadroak) oso egokiak dira testuinguruko ekintzetarako atzeko testuingurua mantentzea garrantzitsua den egoeretan.
Gorputz fin bat...
Twipsiak oso erabilgarriak dira erabiltzaile nahasi bati laguntzeko eta norabide egokian zuzentzeko.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo azaldu, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Erabili popover-ak orrialde bati azpitestua emateko informazioa diseinuari eragin gabe.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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.
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.
Hona hemen Twitter Bootstrap-en Bootstrap-en parte gisa sartzen denaren aipagarrietako batzuk. Joan Bootstrap webgunera edo Github proiektuaren orrira deskargatzeko eta gehiago ikasteko.
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 ;
/* ... */
Less-ek beste iruzkin estilo bat ere eskaintzen du CSS-ren sintaxi normalaz gain .
- // Hau iruzkin bat da
- /* Hau ere iruzkin bat da */
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.
- #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 ;
- }
- }
- #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
- }
- . norabidea ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . bertikala - hiru kolore ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: % 50, @endColor: #c3325f) {
- ...
- }
- }
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 ;
- }