Oleme igal pool Sinu lähedal - ka 2017. aastal!
Twitter | Github | phpBB.com - Eesti | phpBBeesti.eu Foorum | Facebook

demo32 (3.2 on arenduses) - demo31 (3.1 on praegune live versioon)

phpBB - 1 tarkvara - üle 100 laienduse - eesti keeles - t a s u t a
phpBB - lokaliseeritud aastast 2008*!
*Erinevate haldajate käe all. Vaata lehekülge meist.


Tähtis! Alates 01.01.2017 on lõppenud phpBB 3.0.X tugi. On soovitatav mitte paigaldada ja kasutada 3.0 versiooni. Samuti me tungivalt soovitame uuendada oma foorumitarkvara 3.0 versioon uuemale 3.1 versioonile nii kiirelt kui võimalik, et mitte seada ohtu oma veebileht.

Tähelepanu! Kui kasutad phpBB tarkvara, siis teavita vigadest, ning soovi korral ka tee ettepanekuid tõlkefaili täiustamiseks. Kasuta hastagi sotsiaalvõrgustikus - #phpbbeest >> @phpBBeesti - twitter, @phpBBeesti - github, et.translations [märk] phpbbeesti.net

[Õpetus] Bootstrap

Arutelud veebidisaini teemadel, mis kasutavad HTML / XHTML ja CSSi, ning üldistel graafika teemadel, nagu näiteks Photoshop ja teised.

Moderaator: Tugi

doozy
Postitusi: 409
Liitunud: 13 Mai 2014, 08:00
Asukoht: Tallinn
Sugu: Määratlemata

[Õpetus] Bootstrap

PostitusPostitas doozy » 20 Juul 2015, 18:53

Bootstrap

Kirjutas: W3Schools.com
Tõlkinud: http://www.phpbbeesti.com
Kirjeldus: Bootstrap on üks populaarseimatest HTML, CSS ja JavaScripti raamistik, et arendada dünaamilisi ja mobiilide sõbralikke veebilehti.

  • Bootstrap, I osa
    Esimeses osas kirjutame üldisemalt, ning koos näidetega, millega tegemist üldse on.

Kasutaja avatar
Mikk
Postitusi: 164
Liitunud: 22 Aug 2015, 18:02
Sugu: Määratlemata
Kontakt:

Re: [Õpetus] Bootstrap

PostitusPostitas Mikk » 19 Okt 2016, 16:46

Bootstrap, I osa

I osas kirjutame Bootstrapist üldisemalt koos näidetaga.

Bootstrap on täiesti tasuta allalaadimiseks, ning kasutamiseks!

Proovi Seda Ise näidis

Kood: Vali kõik

<div class="container">
  <div class="jumbotron">
    <h1>Minu esimene Bootstrap lehekülg</h1>
    <p>Muuda oma brauseri suurust, et lehekülg võtaks tulemuse!</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Kolumn 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolumn 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolumn 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>


Mis on Bootstrap?

  • Bootstrap on tasuta veebilehe esipoole raamistik kiiremaks ja lihtsamaks veebiarendamiseks.
  • Bootstrap sisaldab HTML ja CSS põhist disaini tüpograafia, vormide, tabelite, nuppude, navigatsiooni, piltide ja paljude muude asjade jaoks.
  • Bootstrap annab sulle ka võimaluse lihtsalt luua dünaamilise disaini erinevate seademete jaoks

Mis on dünaamiline veebidisain?

Dünaamiline veebidisaini all mõeldakse seda, et luuakse veebileht, mis kohandub automaatselt kõigi seadmetega nuhvlid, tahvlid, PC-d, nutifonidega.

Bootstrap ajalugu

Bootstrap oli arendatud Mark Otto ja Jacob Thornton poolt Twitteris, ning väljalasti see avatud lähtekoodina 2011. aasta augustis GitHubis.

2014. juunis oli Bootstrap nr. 1 projekt GitHubis!

Miks kasutada Bootstrapi?

Bootstrapi eelised on:

  • Lihtne kasutada: Igaüks koos mõningate teadmistega HTML ja CSSist saavad hakata lihtsasti kasutama bootstrapi
  • Dünaamilisuse funktsioon: Bootstrapi dünaamilisuse CSS kohandub nii telefonide tahvlite ja PC-de jaoks
  • Esmalt mobiilne lähenemine: Bootstrap 3-s on esmalt mobiilne lähenemine osa raamistiku tuumast
  • Brauserite ühildumine: Bootstrap ühildub kõigi modernsete brauseritega (Chrome, Firefox, Internet Explorer, Safari ja Opera)

Kust on võimalik saada Bootstrapi?

Siinkohal on kaks võimalust bootstrapi kasutamise alustamiseks oma veebilehel.

Sa võid:

  • Laadi alla getbootstrap.com veebilehelt.
  • hõlma Bootstrap CDN-ist

Bootstrapi allalaadimine

Kui sa soovid alla laadida ja paigaldada bootstrapi ise, siis mine veebilehele getbootstrap.com ja järgi sealseid juhiseid.

Bootstrap CDN

Kui sa aga ei soovi ise alla laadida, ning paigaldada serverisse, siis võid ka selle lisada CDN (Content Delivery Network) kaudu.

MaxCDN varustab CDN tuge Bootstrap CSS ja JavaScriptidele. Lisaks see sisaldab jQueryt:

MaxCDN

Kood: Vali kõik

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


Loo esimene veebileht koos bootstrapiga

1. Lisa HTML5 doctype

Bootstrap kasutab HTML elemente ja CSS omadusi, mida nõuab HTML5 doctype.

Alati lisa HTML5 doctype kõige algusesse esimeseks reaks faili, kaasa koos lang attribuudi ja korrektse karakter "set"iga:

Kood: Vali kõik

<!DOCTYPE html>
<html lang="et">
  <head>
    <meta charset="utf-8">
  </head>
</html>


2. Bootstrap 3 on esmalt mobiilsed seadmed

Bootstrap 3 on disainitud dünaamiliseks mobiilsete seadmete jaoks. Esmalt mobiilsed seadmed on osa raamistiku tuumast.

Et tagada õige muutumine ja puutega suurendamine, lisa järgnev <meta> märgend <head> elemendi sisse:

Kood: Vali kõik

<meta name="viewport" content="width=device-width, initial-scale=1">


width=device-width osa seadistab laiuse leheküljele, et järgida seadme ekraani laiust (see on vägagi sõltuv seadmest).

initial-scale=1 osa seadistab esialgse suuruse taseme, kui lehekülge esimest korda laaditakse brauseris.

3. Konteinerid

On kaks konteinerite klassi, mille vahel saab valida:

  • .container class annab dünaamilise konteineri fikseeritud laiusega
  • .container-fluid klass annab täieliku laiusega konteineri, toestades kogu laiust vaateaknas
Märkus: Konteinerid ei ole liibuvad (sa ei saa panna konteinerit teise konteineri sisse).

Kaks algelist Bootstrap lehekülge

Järgnev näide näitab koodi algelisest bootstrap leheküljest (koos dünaamilise konteineri fikseeritud laiusega):

Kood: Vali kõik

<!DOCTYPE html>
<html lang="et">
<head>
  <title>Bootstrap näide</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Minu esimene Bootstrap lehekülg</h1>
  <p>Suvaline tekst.</p>
</div>

</body>
</html>


Järgnev näide näitab koodi algelisest bootstrap leheküljest (koos täielikku laiusega konteineriga):

Kood: Vali kõik

<!DOCTYPE html>
<html lang="et">
<head>
  <title>Bootstrap näide</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Minu esimene Bootstrap lehekülg</h1>
  <p>Suvaline tekst.</p>
</div>

</body>
</html>
Twitter @phpBBEesti | Tõlkefailide päringud ja kontakt et.translations<at>phpbbeesti.net | Lokaliseerimine @Github


Mine “Veebidisain ja graafika.”

Kes on foorumil

Kasutajad foorumit lugemas: Registreeritud kasutajaid pole ja 1 külaline

phpBB Eesti : Lahtiütlus