REFERAT KURS JUMISI / 5lab
.docx5-laboratoriyalıq jumıs
Tema: Bootstrap tiykarinda adaptiv saytlardi islep shiģiw.
Jumıstıń maqsetı: Bootstrap tiykarinda adaptive saytlardi islewdi úyreniw.
Laboratoriya jumısın orınlaw tártibi:
HTML fayldı jaratıw hám kodların jazıw;
CSS fayldi jaratıw hám kodların jazıw hám bootstrap texnologiyasınan paydalanıw;
Tayar web betti brauzer arqalı tekseriw;
Teoriyalıq bólim:
Bara-bara veb sayt úlkeygen sayın HTML de har bir teg ushın stil jaratıp, hár bir element ústinde klasslar jartıw qolaysızlasadı hám qıyınlasadı. Sonın ushın biz web bet jaratıwģa qolaylılıq hám ańsaqlıq jaratatugın bir neshe texnologiyalar bar. Olardan biri bul Bootstrap texnologiyası esaplanadı. Bootstrap arqalı biz adaptiv, iqsham veb bet jaratıwımız múmkin. Bootstrap bul aldınnan jazılģan stil klassları bolıp tabıladı. Biz ózimiz jazıp otırmay tayar klasslardan paydalansaq boladı.
Máseleniń qoyılıwı: Alinģan bilimlerden paydalanıp HTML gipertekstli tili járdeminde stillerdiń kaskadlı kestesinen (CSS ten) paydalanıp hám bootstrap tiykarında adaptiv web-bet jaratıw.
Máseleniń sheshiliwi:
Dáslep index.html faylın jaratıp oģan HTML hám bootstrap kodlardı jazamız:
HTML kod:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class = "container">
<a class="navbar-brand" href="#"><strong>Miyman</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Bas bet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Miymanxanalar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Restorantlar</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Izlew.." aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Izlew</button>
</form>
</div>
</div>
</nav>
<div class = "container">
<h1 align="center" class = "welcome">Xosh kelibsiz</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/tashkentcaru.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Tashkent miymanxanasi</h3>
<p>Qaraqalpaqstan Respublikasi, Nókis qalasi</p>
</div>
</div>
<div class="carousel-item">
<img src="img/nukuscaru.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Nukus miymanxanasi</h3>
<p>Qaraqalpaqstan Respublikasi, Nókis qalasi</p>
</div>
</div>
<div class="carousel-item">
<img src="img/tashkentcaru.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Tashkent miymanxanasi</h3>
<p>Qaraqalpaqstan Respublikasi, Nókis qalasi</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class = "row body">
<div class = "col-md-9">
<div class = "row">
<div class = "col-md-6">
<h3>Tashkent miymanxanasi</h3>
<small><em>Ortasha bahasi (1 kun) 150000 som</em></small>
</div>
<div class = "col-md-6">
<small align="right"><a class = "cat" href = "#">miymanxana haqqinda</a></small>
</div>
</div>
<img src="img/tashkent.jpg" width="100%">
<hr>
<div class = "row">
<div class = "col-md-6">
<h3>Nukus miymanxanasi</h3>
<small><em>Ortasha bahasi (1 kun) 150000 som</em></small>
</div>
<div class = "col-md-6">
<small align="right"><a class = "cat" href = "#">miymanxana haqqinda</a></small>
</div>
</div>
<img src="img/nukus.jpg" width="100%">
</div>
<div class = "col-md-3">
<form action = "#" method="post">
<h6>Saytqa kiriw</h6>
<p><input type="text" class = "form-control" placeholder="Atińiz"></p>
<p><input type="password" class = "form-control" placeholder="Parol"></p>
<p>Eslep qal <input type="checkbox"></p>
<p><button class = "btn btn-primary">Kiriw</button>
<a href = "#" class = "btn btn-success">Dizimnen ótiw</a></p>
</form>
<div class = "breadcrumb">
<h4>Basqa miymanxanalar</h4>
<a class = "badge cat badge-primary" href = "#">Uzbekistan</a>
<a class = "badge cat badge-primary" href = "#">Plaza</a>
<a class = "badge cat badge-primary" href = "#">Rahnamo</a>
<a class = "badge cat badge-primary" href = "#">Shifokor</a>
<a class = "badge cat badge-primary" href = "#">Burj-al-Arab</a>
<a class = "badge cat badge-primary" href = "#">Tashkent</a>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Biz jaratqan style.css faylımız.
body {
background: #EBEDEF;
}
.caru {
height: 200px;
}
.body {
margin-top: 30px;
background: white;
padding: 20px;
}
.cat {
margin: 5px;
}
.welcome {
margin: 10px;
font-size: 50px;
}
Brauzerdegi kórinisi:
