Kaip sukurti viršutinę web puslapio dalį - headerį? - web puslapių kūrimas (2a dalis)

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


Praeitoje pamokoje išmokome įdėti bootstrap į web puslapį ir taip pat įdėjome kai kurias meta etiketes. Šioje pamokoje naudosime Bootstrap klases, kad sukurti responsyvę viršutinę puslapio dalį, kitaip vadinama Header. Galite sekti pamoką šiame video: https://youtu.be/AuypB0601PY

Pragal šaltinį, Div yra HTML etiketė, kuri nurodo sekciją dokumente, naudojama kaip konteineris kitiems elementams. Tai reiškia, kad div yra paprščiausias kvadratas į kurį męs galime rašyti tekstą, įdėti paveiklėlį ir panašiai. Štai taip yra rašomas div:

<div>
   
    Čia gali būti jūsų tekstas,
    kuris bus Div dežėje.

</div>

Taip pat išmoksime kas yra HTML nuorodos: jos yra sąsajos su kitais puslapiais, kitais žodžiais, paspaudus ant nuorodos peršokate į kitą dokumentą. HTML jos yra rašomos su "a href" elementu štai taip:

<a href="kitas-dokumentas.html">Nuorodos pavadinimas</a>

Taipogi išmoksime kaip sukonstruoti mygtuką. Tai labai paprastai padaroma su etikete "button", štai taip:

<button>Mygtuko tekstas</button>

Bootstrap keičia div kvadratų, mygtukų, nuorodų dydžius ir stilius automatiškai. Viską ką męs turime padaryti, tai pasakyti kokio dydžio elemento mes norime.

O tokiu būdu yra aplikuojamos klasės:

<div class="klasės-pavadinimas">

    Čia gali būti jūsų tekstas.

</div>

Štai bootstrap klasės kurias mes išmoksime šioje pamokoje:

  • Jumbotron: tai didelė dežė skirta dėmesio atkreipimui. Jumbotron klasė padidina teksto dydį ir duoda fonui lengvai pilką spalvą.
  • Container: tai dežė, kuri palieka proporcionalius tarpus šonuose.
  • Btn: tai mygtuko klasė
  • Btn-info: ši klasė pridedama po btn klasės ir tai yra mygtuko šviesiai mėlynos spalvos klasė.
  • Btn-default: ši klasė yra šviesiai pilkos spalvos mygtuko klasė.

 Čia yra visas viršutinės puslapio dalies (header) kodas:

<div class="jumbotron">
	<div class="container">

		<h1>Mano puslapis</h1>
		<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.</p>

		<hr>

		<p>
		<a href="pradinis.html"><button class="btn btn-info">Pradžia</button></a>
		<a href="apie-mus.html"><button class="btn btn-default">Apie mus</button></a>
		</p>

	</div>
</div>

Sekančioje pamokoje išmoksime publikuoti turinį. Tam išmoksime dar pora bootstrap klasių ir priartėsime prie pirmo puslapio kūrimo pabaigos.


Peržiūrų:
188

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!