Hasierako adibideak

Txantiloi azkar batzuk behar dituzu? Begira ezazu bildu ditugun oinarrizko adibide hauek:

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

Habia-zutabeak

.rowHabiaratu zure edukia behar izanez gero lehendik dagoen zutabe baten barruan sortuz .

Habiaratutako zutabeen adibidea

<div class = "errenkada" > 
  <div class = "span12" > 
    Zutabearen 1. maila
    <div class = "errenkada" > 
      <div class = "span6" > 
        2. maila
      </div>
      <div class = "span6" > 
        2. maila
      </div>
    </div>
  </div>
</div>

Biratu zure sareta

Bootstrap-en barnean aldagai batzuk daude 940px sareta sistema lehenetsia pertsonalizatzeko. Pertsonalizazio pixka batekin, zutabeen tamaina, haien erretenak eta bizi diren edukiontzia alda ditzakezu.

Sarearen barruan

Une honetan sare-sistema aldatzeko behar diren aldagai guztiak variables.less.

Orain pertsonalizatzeko

Sarea aldatzeak hiru @grid-*aldagaiak aldatu eta Gutxiago fitxategiak berriro konpilatzea dakar.

Bootstrap-ek 24 zutabe arteko sare-sistema kudeatzeko hornituta dator; lehenetsia 16 besterik ez da. Hona hemen zure sareko aldagaiak 24 zutabeko sareta batean pertsonalizatuta nola itxura izango luketen.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Behin birkonpilatuta egongo zara!

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 aldagaietako bi aldagai Gutxiagotan oinarritzen da.fitxategirik gabe: @basefonteta @baseline. Lehenengoa zehar erabilitako oinarrizko letra-tamaina 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 semantikoagoa badago, 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 nola erabil daitekeen bi adibide:

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

<blokeoa>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Julius Hibbert doktorea </small>
</blockquote>

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.

Kodea

<code> <pre>

Pimptu zure kodea estiloz bi etiketa soilekin. Javascript-en bidez are zoragarriagoa izateko, sartu Google-ren code prettify liburutegian eta listo.

Kodea aurkeztea

Kodea, blokeak edo lerroko zatiak, estiloarekin bistaratu daitezke etiketa egokian bilduta. Hainbat lerro hartzen dituzten kode blokeetarako, erabili <pre>elementua. Sareko kodea egiteko, erabili <code>elementua.

<div>
  <h1>Goiburua</h1>
  <p>Zerbait hemen...</p>
</div>

<div> <h1> Goiburua </h1> <p> Hemen zerbait... </p> </div>
  
  

Lineako etiketak

<span class="label">

Deitu arreta edo marka ezazu zure gorputzeko testuko edozein esaldi.

Etiketatu edozer gauza

Inoiz behar izan du Berri dotore horietakoren bat ! edo Bandera garrantzitsuak kodea idaztean? Tira, orain dituzu. Hona hemen lehenespenez sartzen dena:

Hedabideen sarea

Erakutsi tamaina ezberdinetako miniaturak HTML aztarna txikia eta estilo minimoak dituzten orrialdeetan.

Irudi txikien adibideak

Miniaturak .media-gridedozein tamainakoak izan daitezke, baina hobeto funtzionatzen dute Bootstrap sare-sisteman zuzenean mapatzen direnean. 90, 210 eta 330 bezalako irudien zabalerak betegarri pixel batzuekin konbinatzen dira .span2, .span4, eta .span6zutabeen tamainak berdintzeko.

Handia

Ertaina

Txikia

Horiek kodetzea

Multimedia-sareak erabiltzeko errazak eta nahiko sinpleak dira markatze aldetik. Beren dimentsioak sartzen diren irudien tamainan oinarritzen dira.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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: taula kondentsatua

Espazio estuagoetan datu gehiago behar dituzten tauletarako, erabili betegarria erdira murrizten duen zapore kondentsatua. Ertzekin eta zebra-marrarekin batera ere erabil daiteke, mahai-estilo lehenetsiekin bezala.

Adibidea: ertzadun taula

Egin zure mahaiak apur bat dotoreagoak izkinak biribilduz eta alde guztietatik ertzak gehituz.

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

Inprimaki-eremuen tamainak

Pertsonalizatu edozein inprimaki input, select, edo textareazabalera zure markaketari klase batzuk gehituta.

1.3.0 bertsiotik aurrera, sarean oinarritutako tamaina-klaseak gehitu ditugu inprimaki-elementuetarako. Mesedez, erabili hauek lehendik dauden .mini, .small, etab klaseen gainean.

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.

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. Goitibeherako lietiketak .activeuneko orrialdearen hautaketa erakusteko ere onartzen du.

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.

Oinarrizko fitxak adibidea

Fitxak ohiko nabigazio gisa erabil daitezke (kanpoko orriak fitxa berean kargatuz) edo tabulatzeko eduki-eremu gisa, edukiaren panelak aldatzeko. Azken hau integratzeko erabil daitekeen fitxen plugin bat dugu .

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

Oinarrizko pilulen adibidea

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

Ogi birrindua

Breadcrumb nabigazioa erabiltzaileei aplikazio edo gune batean non dauden erakusteko modu gisa erabiltzen da, baina ez nabigazio nagusirako.

• Hasiera

• Hasiera /
• Erdiko orrialdea

• Hasiera /
• Erdiko orrialdea /
• Beste bat

• Hasiera /
• Erdiko orrialdea /
• Beste bat /
• Hemen zaude

<ul class = "ogi birrindua" > 
  <li><a href = "#" > Hasiera </a> <span class = "banatzailea" > / </span></li>   
  <li><a href = "#" > Erdiko orria </a> <span class = "banatzailea" > / </span></li>   
  <li><a href = "#" > Beste bat </a> <span class = "banatzailea" > / </span></li>   
  <li class = "active" > Hemen zaude </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 = "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 = "hurrengoa" ><a href = "#" > Hurrengoa → </a></li>  
  </ul>
</div>

Oinarrizko alertak

.alert-message

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

Lortu javascript-a »

Adibide kodea

<div class = "alerta-mezuaren abisua" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole santua! </strong> Egiaztatu zure burua, ez zara itxura onegia. </p>
</div>

Blokeatu mezuak

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

Lortu javascript-a »

Adibide kodea

<div class = "alerta-mezu blokeo-mezuaren abisua" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole santua! Hau abisua da! </strong> Egiaztatu zure burua, ez zara itxura onegia. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alerta-ekintzak" > 
    <a class = "btn small" href = "#" > Egin ekintza hau </a> <a class = "btn small" href = "#" > Edo egin hau </a>     
  </div>
</div>

Modalak

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

Lortu javascript-a »

Erreminta-aholkuak

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

Lortu javascript-a »

Popovers

Erabili popover-ak orrialde bati azpitestua emateko informazioa diseinuari eragin gabe.

Lortu javascript-a »

Hasten

Javascript Bootstrap liburutegiarekin integratzea oso erraza da. Jarraian oinarriak aztertuko ditugu eta plugin ikaragarri batzuk eskaintzen dizkizugu hasteko!

Ikusi javascript dokumentuak »

Zer sartzen den

Eman Bootstrap-en osagai nagusi batzuk jQuery eta Ender -ekin lan egiten duten plugin pertsonalizatu berriekin . Haiek luzatzera eta aldatzera animatzen zaituztegu, zure garapen-behar zehatzetara egokitzeko.

JavaScript beharrezkoa al da?

Ez! Bootstrap CSS liburutegi bat izateko diseinatuta dago. Javascript honek oinarrizko geruza interaktibo bat eskaintzen du sartutako estiloen gainean.

Hala ere, javascript behar dutenentzat, goiko pluginak eman ditugu Bootstrap javascript-ekin nola integratzen den ulertzen laguntzeko eta oinarrizko funtzionalitaterako aukera azkar eta arin bat emateko.

Informazio gehiago lortzeko eta zuzeneko demo batzuk ikusteko, ikusi gure pluginaren dokumentazio orrira .