Kaip sukurti web puslapio turinį? - web puslapių kūrimas (3ia dalis)

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


Jau išmokome kelias boostrap klases ir sukonstravome viršutinę web puslapio dalį. Šioje pamokoje išmoksime dar pora bootstrap klasių, kad sumontuoti pradinio puslapio turinį.

Bootstrap naudoja Div elementus ir mes jiems galime duoti skirtingą didį nurodydami specifinę klasę. Pavyzdžiui, šioje pamokoje naudosime klasę col-lg-4. Šios klasės Div užims vieną trečiają horizontinę puslapio dalį.

Row iš anglų kalbos eilė yra horizontali stulpelių grupė, kuri užtikrina, kad tavo stulpeliai yra vienoje linijoje. Taip pat užtikrina, kad tarpai būtų koreguoti taisyklingai, kai div blokai pakeičia savo dydžius. Daugiau apie eiles gali skaityti čia: https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works, čia pavyzdys:

<div class="row">

    Stulpeliai...

</div>

Bootstrap taip pat duoda ikonų rinkinį, kurį iškart gali naudoti savo puslapyje. Tiesiog reikia įdėti į span elementą ikonos klasę, kurią galite rasti čia: http://getbootstrap.com/components/, o dabar, pavizdys:

<span class="glyphicon glyphicon-asterisk"></span>

Čia yra visas kodas, kurį naudosime šioje pamokoje:

 <div class="container text-center">
    	<div class="row" style="margin-top: 50px; margin-bottom: 50px;">
    		<h1>Mūsų paslaugos</h1>
    		<h3>Męs teikiame labai labai labai labai geras paslaugas.</h3>
    	</div>
    	<div class="row" style="margin-bottom: 100px;">
	    	<div class="col-lg-4">
	    		<div class="clearfix">
	    			<span style="font-size: 80px;" class="glyphicon glyphicon-home"></span>
	    		</div>
		     	<h3>Paslauga</h3>
		     	<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, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>
	     	</div>

	     	<div class="col-lg-4">

	     		<div class="clearfix">
	    			<span style="font-size: 80px;" class="glyphicon glyphicon-heart"></span>
	    		</div>

		     	<h3>Paslauga</h3>
		     	<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, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>
	     	</div>

	     	<div class="col-lg-4">

	     		<div class="clearfix">
	    			<span style="font-size: 80px;" class="glyphicon glyphicon-leaf"></span>
	    		</div>

		     	<h3>Paslauga</h3>
		     	<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, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>
	     	</div>
     	</div>
     </div>

asdad


Peržiūrų:
169

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!