Lortzea · Bootstrap euskaraz

Deskargatu aurretik, ziurtatu kode-editore bat duzula ( Sublime Text 2 gomendatzen dugu ) eta HTML eta CSS-en laneko ezagutza batzuk. Ez dugu hemen iturburu-fitxategietan zehar ibiliko, baina deskargatu daitezke. Konpilatutako Bootstrap fitxategiekin hastea bideratuko dugu.

Deskarga konpilatua

Hasteko modurik azkarrena: lortu gure CSS, JS eta irudien bertsio konpilatu eta txikituak. Ez dago dokumenturik edo jatorrizko iturburu-fitxategirik.

Deskargatu Bootstrap

Deskargatu iturria

Lortu CSS eta JavaScript guztien jatorrizko fitxategiak, dokumentuen kopia lokalarekin batera, azken bertsioa GitHub-etik zuzenean deskargatuz.

Deskargatu Bootstrap iturria

Deskargaren barruan fitxategi-egitura eta eduki hauek aurkituko dituzu, aktibo komunak logikoki taldekatuz eta konpilatutako eta txikitutako aldaerak eskainiz.

Deskargatu ondoren, deskonprimitu karpeta Bootstrap-en (konpilatua) egitura ikusteko. Horrelako zerbait ikusiko duzu:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glifikoiak - erdiak . png
       └── glifikonoak - erdiak - zuriak . png

Hau da Bootstrap-en formarik oinarrizkoena: ia edozein web proiektutan azkar erabiltzeko fitxategi konpilatuak. CSS eta JS konpilatuak ( bootstrap.*) eskaintzen ditugu, baita CSS eta JS konpilatuak eta txikituak ( bootstrap.min.*). Irudi-fitxategiak ImageOptim erabiliz konprimitzen dira , PNGak konprimitzeko Mac aplikazioa.

Kontuan izan JavaScript plugin guztiek jQuery sartzea eskatzen dutela.

Bootstrap-ek HTML, CSS eta JS-ekin hornituta dator gauza guztietarako, baina Bootstrap dokumentazioaren goialdean ikusgai dauden kategoria gutxi batzuekin labur daitezke .

Docs atalak

Aldamioak

Gorputzaren estilo globalak mota eta atzeko planoa berrezartzeko, esteka estiloak, sareta sistema eta bi diseinu sinple.

Oinarrizko CSS

HTML elementu arruntentzako estiloak, hala nola tipografia, kodea, taulak, inprimakiak eta botoiak. Glyphicons ere barne hartzen du , ikono txiki handi bat.

Osagaiak

Interfazearen osagai arruntetarako oinarrizko estiloak, hala nola fitxak eta pilulak, nabigazio barra, alertak, orrien goiburuak eta abar.

JavaScript pluginak

Osagaien antzera, JavaScript plugin hauek osagai interaktiboak dira tresna-aholkuak, popovers, modalak eta abar bezalako gauzetarako.

Osagaien zerrenda

Elkarrekin, Osagaiak eta JavaScript pluginak atalek interfaze-elementu hauek eskaintzen dituzte:

Botoi-taldeak
Botoien goitibeherakoak
Nabigazio fitxak, pilulak eta zerrendak
Nabigazio barra
Etiketak
Txapak
Orriaren goiburuak eta heroi unitatea
Miniaturak
Alertak
Aurrerapen-barrak
Modalak
Goitibeherak
Erreminta-aholkuak
Popovers
Akordeoia
Karrusela
Idatzi aurretik

Etorkizuneko gidetan, osagai hauek banan-banan ibiliko gara xehetasun gehiagorekin. Ordura arte, bilatu horietako bakoitza dokumentazioan nola erabili eta pertsonalizatu jakiteko.

Edukien sarrera labur batekin, Bootstrap erabiltzera bideratu gaitezke. Horretarako, Fitxategiaren egituran aipatu dugun guztia biltzen duen oinarrizko HTML txantiloia erabiliko dugu .

Orain, hona hemen HTML fitxategi tipiko bati :

<!DOCTYPE html>
<html>
  <burua>
    <title> Bootstrap 101 txantiloia </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  </burua>
  <gorputza>
    <h1> Kaixo, mundua! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
  </body>
</html>

Hau Bootstrapped txantiloi bat izan dadin , sartu CSS eta JS fitxategi egokiak:

<!DOCTYPE html>
<html>
  <burua>
    <title> Bootstrap 101 txantiloia </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
    <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "estilo-orria" media = "pantaila" >   
  </burua>
  <gorputza>
    <h1> Kaixo, mundua! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
    <script src = "js/bootstrap.min.js" ></script> 
  </body>
</html>

Eta prest zaude! Bi fitxategi horiek gehituta, Bootstrap-ekin edozein gune edo aplikazio garatzen has zaitezke.

Mugitu oinarrizko txantiloitik haratago diseinu adibide batzuekin. Jendeak adibide hauek errepikatzera animatzen ditugu eta ez soilik azken emaitza gisa erabiltzera.

Hasierako txantiloia

Barebones HTML dokumentu bat Bootstrap CSS eta JavaScript guztiak barne.
Oinarrizko marketin gunea

Mezu nagusi baterako heroi-unitatea eta hiru elementu osagarri ditu.
Jariakinaren diseinua

Gure sare fluido eta sentikorren sistema berria erabiltzen du likido-diseinu bateratu bat sortzeko.
Marketin estua

Proiektu edo talde txikientzako marketin txantiloi arina eta arina.
Nabigazio justifikatua

Zabalera berdineko nabigazio estekak dituen marketin orria aldatutako nabigazio-barra batean.
Hasi saioa

Barebones-ek inprimakiaren saioa hasteko kontrol pertsonalizatu eta handiagoekin eta diseinu malguarekin.
Oin itsaskorra

Ainguratu altuera finkoko oin bat erabiltzailearen ikuspegiaren behealdean.
Karrusel jumbotron

Oinarrizko marketin guneko riff interaktiboagoa, karrusel nabarmena duena.