REFERAT KURS JUMISI / 5lab-1
.docx5 – Laboratoriya jumisi
Tema:Bootstrap tiykarinda adaptive saytlardi islep shig’iw.
Ju’mistin’ orinlaniw tartibi:
Teoriyaliq bo’lim: Bootstrap texnologiysi haqqinda magliwmat beriw.
A’meliy bo’lim: Sayt jaratiwda Bootstrap texnologiyasin qollaniw.
Teoriyaliq bo’lim
Bootstrap - bul jańa web texnologiya bolıp, bul texnologiyanı Twitter kompaniyası dizayner programmashilari jaratqan. Usı texnologiya tek ǵana Twitterni óziniń programmashilari ushın jaratılǵan edi. Búgingi kunge kelip bolsa Bootstrap dúnya ushın biymálel paydalanıp bolatuǵın web framework sıpatında usınıs etilgen.
Bootstrap házirgi kúnde eń kóp isletilip atirg’an framework esaplanadı. Ol jaǵdayda HTML, CSS hám JavaScript tolıq jaylastırılǵan hám usı framework járdeminde ózińiz qálegen sayt kórinisin bir neshe minutalarda, qıyınshılıqlarsız tayarlab alıwıńız múmkin.
Bootstrap sistemasınıń abzallıqları:
Saytdaǵı bet tártipleriniń joqarı tezlikde rawajlanıwı. Bootstrap kóplegen tayın sheshimler hám elementlerdi óz ishine aladı.
Sayttıń maslasıwshılıǵı. Barlıq elementler barlıq apparatlar ushın maslastıirilg’an hám barlıq zamanagóy brauzerlerde tuwrı kórsetiledi.
Paydalanıw ańsat. Hátte HTML hám CSS-ga tiykarlanǵan tiykarǵı bilimge iye bolǵan shaxs da ramka járdeminde veb -betlerdi erkin tárzde jaratıwı múmkin.
Tálim qolaylıǵı. Bootstrap tayın kodlı kóplegen úlgiler menen hújjet bar
To’mendegi shablonlarg’a iye:
Shriftler
Tuymeler
Formalar
Metkalar
Navigatsiya
Setka
JavaScript keńeytpeleri
Bootstrap-da komponentler hám ásbaplar
Bootstrap programmashinin’ jumisin ańsatlastiratug’in keń qóllanbalar dizimine iye:
1.Setka - kolonkalari ólshemleri fikserlengen adaptivlik 12 kolonkali setka.
2.Shablon - bul soziliwshan’ yamasa fikserlengen bolıwı múmkin.
3.Media - súwret hám videolardı shıraylı tárzde sızıw imkaniyatın beredi.
4.Kesteler - kesteni tártipke salıp qoyıwıńız, atap aytqanda, tártiplew qábiletin qosıwıńız múmkin. 5.Navigatsiya - saytda jaqsi navigatsiya menyusın jaratıw.
6.Formalar - hár qıylı formalar jaratıwg’a múmkinshilik beredi: bir yamasa bir neshe qatarlarda, máslahátlar , radio- yamasa checkboxlar, label hám tuymeler menen.
7.Alertler - dialog aynalarin bezew ushın. Olar ádetde pop-up aynasi yamasa podskazkalar- qáte (danger), eskertiw (warning), tabıs (success), járdem (info). Hám olardan paydalanıw ańsat, tek kerekli klass jazilsa boldi, hámmesi tayın.
8.Tuymeler - sol qatari “Ashılatuǵın” tuymeler.
9.Progress-barlar
10.Belgiler shrift - sayt dizayni ushın shıraylı elementlerdi qosıwg’a ájayıp múmkinshilik bolıp tabıladı.
Maslenin’ qoyiliwi:Aling’an bilimlerden paydalanip HTML gipertekstli tili jardeminde vep-bet jaratiw.
Maslenin’ sheshiliwi:
Daslep index.html fayilin jaratip og’an HTML kodlardi jazamiz:
<!DOCTYPE html>
<html>
<head>
<title>Guller Du'nyasi'</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style5.css">
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="font-family: Cambria; font-size: 17px; background: pink;">
<br>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Gu'ller Du'nyasi'</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Xizmetler</a></li>
<li><a href="#">Jetkerip beriw</a></li>
<li><a href="#">Bizlerdin salon</a></li>
<li><a href="#">Baylanis</a></li>
<li><a href="#">Bizler haqqinda</a></li>
</ul>
</ul>
<form style="padding: 0;" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Izlew...">
</div>
<button type="submit" class="btn btn-default">Tabiw</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="main col-md-12">
<a href="#">
<h1>Usi'ni's etiletug'i'nlar</h1>
<img src="assets/images/main.jpg">
<h1>Ko'p sati'lg'anlar</h1>
</a>
</div>
<div class="co_main col-md-3">
<a href="#">
<img src="assets/images/n1.jpg">
<h3>Buket №1</h3>
</a>
</div>
<div class="co_main col-md-3">
<a href="#">
<img src="assets/images/n2.jpg">
<h3>Buket №2</h3>
</a>
</div>
<div class="co_main col-md-3">
<a href="#">
<img src="assets/images/n3.jpg">
<h3>Buket №3</h3>
</a>
</div>
<div class="co_main col-md-3">
<a href="#">
<img src="assets/images/n4.jpg">
<h3>Buket №4</h3>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
<div class="col-md-3">
<a href="#">gullerdunyasi.uz</a>
</div>
<div class="col-md-9">
<a href="#"><p style="text-align: right;">Sayt haqqi'nda mag'li'wmat</p></a>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
style.css fayilin jaratip og’an CSS kodlarin jazamiz:
.main img {
width: 100%;
border-radius: 7px;
}
.main a {
text-decoration: none;
color: white;
}
.main h1 {
display: block;
float: left;
background: red;
padding: 10px;
border-radius: 5px;
font-size: 22px;
}
.co_main {
display: block;
float: left;
border-radius: 5px;
height: 400px;
padding: 10px;
text-align: center;
}
.co_main img {
width: 100%;
border-radius: 8px;
}
.co_main a{
text-decoration: none;
color: white;
}
.co_main h3 {
display: block;
background: red;
border-radius: 5px;
padding: 8px;
}
Na’tiyje:
