Kas yra bootstrap? - puslapių kūrimas (1a dalis)

Web puslapių kūrimas Publikuota prieš 5 mėnesius


Įvadinėse pomokose:

  1. Išmokome HTML pagrindų.
  2. Pasirinkome kodo redaktorių.

Dabar metas išmokti kažko visiškai naujo ir pradėti konstruoti profesionaliai atrodantį puslapį. Šių pamokų metu sugebėsite sukonstruoti puslapį, kurį matote nuotraukoje. Taigi, pradėkime! Pamoką galite sekti šiame video: https://youtu.be/OJXFSit0LSs

Pirmoji tema yra bootstrap naudojimas ir dabar paaiškinsiu kodėl bootstrap yra taip svarbu. Web puslapiai yra prieinami tolygiai nuo kompiuterių, kaip nuo telefonų, kaip nuo planšetinių kompiuterių. Bootstrap padeda pakeisti puslapio elementų plotį ir aukštį, kad prisitaikyti prie ekrano dydžio.

Šiuo metu turime šitą puslapio "skeletą" sukonstruotą per įvadinius video:

<!DOCTYPE html>
<html>
	<head>
		<title>Mano puslapis</title>
	</head>
	<body>
	
  	</body>
  	
</html>

Kad galėtume naudotis bootstrap, <head> sekcijoje turime pridėti meta etiketes į bootstrap kodus. Meta etiketės įtrauks bootstrap kodą į mūsų puslapį. Bootstrap meta ekiketės gali būti rastos šiame puslapyje: http://getbootstrap.com/getting-started/

Ir jos atrodo štai taip:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Kartą įdėję bootstrap etiketes į mūsų puslapį galime pradėti naudoti bootstrap klases mūsų puslapyje. Boostrap klasės nurodys web elementų didį ir charakteristikas. Taip pat patartina tarp "head" etikečių įdėti sekantčių trijų eilučių kodą:

<meta charset="utf-8">

Reiškia, kad puslapyje yra raidžių su specialiais simboliais. Be jos mūsų lietuviškos raidės nebūtų visose naršyklėse.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Ši eilutė reiškia, kad bootstrap kodas turi būti suderinamas su Internet Explorer naršykle.

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

Trečioji eilutė pasako, kad puslapis turi būti pritaikytas prie bet kurio prietaiso ekrano dydžio.

Tai tiek šioje pamokoje. Sekančioje pamokoje pradėsime naudoti bootstarp klases ir matyti elementus mūsų puslapyje.


Peržiūrų:
246

Lukas Kulevičius
Lukas Kulevičius

Pasekėjų skaičius: 1
Studijavau verslo vadybą ir bestudijuodamas rinkdavau naudingą mano ateičiai informaciją ir ją perrašydavau savo žodžiais. O sukūriau Milijonierius.com, kad galėčiau dėti mano atrastą naudingą informaciją vienoje vietoje ir visada viską turėti po ranka.


Registruoti vartotojai gali sekti publikacijas.

Komentuoti

Registruokis dabar! Tik registruoti vartotojai gali komentuoti.

Kolkas komentarų nėra, būkite pirmas!

Ieškoti straipsnio

Sekite Milijonierius.com!