Tema:Bootstrap tiykarinda adaptive saytlardı islep shıģıw.
Jumıstıń maqseti: Bootstrap tiykarinda adaptive saytlardı islewdi u’yreniw.
Laboratoriya jumısınıń orınlanıw tártibi
HTML fayldı jaratiw hám kodlarin jazıw
Tayar web betti brauzer arqali tekseriw
Teoriyaliq bólim: Bootstrap texnologiysi haqqinda maģlıwmat beriw.
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 atirģ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ıirilģ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 shablonlarģa iye:
Shriftler
Tuymeler
Formalar
Metkalar
Navigatsiya
Setka
JavaScript keńeytpeleri
Bootstrap-da komponentler hám ásbaplar
Bootstrap programmashiniń jumisin ańsatlastiratuģin keń qóllanbalar dizimine iye:
1.Setka - kolonkalari ólshemleri fikserlengen adaptivlik 12 kolonkali setka.
2.Shablon - bul soziliwshań 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ıwģ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ıwģa ájayıp múmkinshilik bolıp tabıladı.
Máseleniń qoyiliwi: Alınģan bilimlerden paydalanıp HTML gipertekstli tili járdeminde stillerdin kaskadli kestesinen (CSS ten) paydalanıp hám bootstrap tiykarinda adaptive web-bet jaratiw
Máseleniń sheshiliwi:
<html>
<head>
<title>
Web sayt
</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<style>
.jumbotron{
height: 500px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="jumbotron">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Menu</a></li>
<li role="presentation" class="active"><a href="#">Bas bo'lim</a></li>
<li role="presentation" class="active"><a href="#">Registrasiya</a></li>
<li role="presentation" class="active"><a href="#">Admin</a></li>
<li role="presentation" class="active"><a href="#">Kerekli mag'liwmatlar</a></li>
<li role="presentation" class="active"><a href="#">Skachat etiw</a></li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Kompyuter haqqinda mag'liwmatlar</a></li>
</ul>
<h3>Protsessordi mikroprotsessor yaki CPU( Central Processing Unit – orayliq protsessor) dep te ataydi.
Protsessor arifmetikaliq ha’m logikaliq a’mellerdi orinlaydi,
yad penen baylanisadi ha’m barliq qurilmalar jumisin basqaradi.
Intel – INTegrated Electronics korporatsiyasi 1968 jili Robert Noyce
ha’m Gordon Moore ta’repinen jaratilg’an bolip, olarg’a keyinshelik
Intel Korporatsiyasinin’ Direktorlar ken’esi baslig’i lawazimina shekem
ko’terilgen Andrew Grove de qosildi.
</h3>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</nav>
</body>
</html>
Brauzerdegi kórinisi:
6- Laboratoriya jumısı