REFERAT KURS JUMISI / lab jumis 5
.docx5-laboratoriyali’q jumi’s
Tema: Bootstrap tiykarinda adaptiv saytlardi islep shig’iw.
Jumi’sti’n’ maqseti’: Bootstrap tiykarinda adaptive saytlardi islewdi u’yreniw.
Laboratoriya jumi’si’n ori’nlaw ta’rtibi:
HTML fayldi’ jarati’w ha’m kodlari’n jazi’w;
CSS fayldi jarati’w ha’m kodlari’n jazi’w ha’m bootstrap texnologiyasi’nan paydalani’w;
Tayar web betti brauzer arqali’ tekseriw;
Ma’selenin’ qoyi’li’wi’: Aling’an bilimlerden paydalani’p HTML gipertekstli tili ja’rdeminde stillerdin’ kaskadli’ kestesinen (CSS ten) paydalani’p ha’m bootstrap tiykari’nda adaptiv web-bet jarati’w.
Ma’selenin’ sheshiliwi:
Da’slep index.html fayli’n jarati’p og’an HTML ha’m bootstrap kodlardi’ jazami’z:
<html>
<head>
<title>lab 5 </title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body background="images/foto1.png">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a href="#">clublar dizimi <span class="sr-only">(current)</span></a></li>
<li><a href="#">Paydali maslahatlar</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">tildi saylan <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="izlew">
<div class="form-group">
<input type="text" class="form-control" placeholder="izlew">
</div>
<button type="submit" class="btn btn-default">Basin'</button>
</form>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<img src="images/foto2.png" style="margin: 50px 0 0 0">
</div>
</div>
<div class="row janaliqlar">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>Parhez</h3>
<p>2 hapte ishinde 7 kg salmaqtan qutiliw</p>
<p><a href="#" class="btn btn-primary" role="button">Kiriw</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>Qaddi qawmet</h3>
<p>Kelisken qaddi qawmetke iye boliw sirlari</p>
<p><a href="#" class="btn btn-primary" role="button">Kiriw</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>Qosimsha vitaminler</h3>
<p>Qosimsha vitaminlerden tuwra paydalaniw haqqinda</p>
<p><a href="#" class="btn btn-primary" role="button">Kiriw</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><div align="center">TATU 2018</div></div>
</div>
</div>
</body>
</html>
Brauzerdegi ko’rinisi:
