Bootstrap Pjesa VII – Butonat dhe Imazhet – Pjesë nga Trajnimi WEB Development III
Bootstrap ofron disa klasa për përdorim me <img> element. Shumica e këtyre klasave përdoren dhe në elemente të tjera po ka disa që përdoren vetëm për imazhet.
Responsive ImazhetÂ
Klasa .img-fluid mundëson që imazhi të paraqitet me madhësi varësisht sa është pajisja. Kjo aplikon max-width: 100% dhe height: auto për imazhet. Klasa në Bootstrap 3 ishte .img-responsive.
<div class="col-sm-8">
<h2>Responsive Imazhet</h2>
<img src="images/imgresponsive.jpg" class="img-fluid" alt="Foto moster">
</div>
Tehet dhe Thumbail për Imazhet
Në Bootstrap për rregullimin e teheve të imazheve përdorët klasa .rounded-*.
.rounded, rounded-top, .rounded-right,.rounded-bottom, .rounded-left, .rounded-circle, .rounded-0
Me anën e klasës .img-thumbnail krijom thmbnail për imazhin me një stil specifik.
<div class="col-sm-5">
<h2>Tehet dhe Thumbail</h2>
<img src="images/imgrounded.jpg" class="rounded" alt="Sample image">
<img src="images/imgrounded.jpg" class="rounded-circle" alt="Sample image">
<img src="images/imgrounded.jpg" class="img-thumbnail" alt="Sample image">
<img src="images/imgrounded.jpg" class="rounded-top" alt="Sample image">
</div>
Pozicionimi i Imazheve
Në Bootstrap me anën e klasave .float, .text mudësohet pozicionimi i imazheeve.
Float – Bootstrap përdor klasat .float-left, .float-right, .float-*-left, and .float-*-right pozicionimin majtas ose djathtas të imazhit. Për heqejen e pozicionimit përdoret .float-none.
Përdorimi I klasave .mx-auto dhe .d-block pozicionon imazhin në qënder.
Text – Bootstrap përdor gjithashtu klasat .text, ngjashëm si me float për pozicionimin e imazheve
Në rastin e pozicionimit të imazhit në qendër klasën .text e përdorim në elementin prind ku vendoset imazhi i cili duhet të paraqitet në qendër.
<div class="col-sm-6">
<h2>Pozicionimi i Imazheve në qender</h2>
<img src="images/imgr-small.jpg" class="rounded mx-auto d-block" alt="Foto moster">
</div>
<div class="col-sm-6 text-center">
<h2>Pozicionimi i Imazheve në qender</h2>
<img src="images/imgr-small.jpg" class="rounded mx-auto" alt="Foto moster">
</div>
Butonat – Bootstrap ofron 7 stile për butonat, secili stil ka qëllimin e caktuar. Në vijim po paraqesim shtatë stilet e butonave. .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link.
Këto klasa aplikohen në elementin <button> përpos kësaj ato aplikohen edhe në <input> dhe <a>. Gjithashtu mund ta përdorim në <label> kur punohet me checkboxes dhe radio buttons.
<div class="row">
<div class="col-sm-7">
<h2>7 llojet e stileve per butonat</h2>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="col-sm-5">
<h2>Aplikimi në tagun a dhe input</h2>
<a class="btn btn-primary" href="#" role="button">Anchor</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</div>
Klasa .btn-outline-* aplikohet për ngjyrat që ka vija kufizuese e butonit.
Klasat .btn-lg dhe .btn-sm e ndryshojnë madhësinë e imazhit.
<div class="row">
<div class="col-sm-8">
<h2>Kufizimi i butonave</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</div>
<div class="col-sm-4">
<h2>Madhësia e butonave</h2>
<button type="button" class="btn btn-success btn-sm">Small</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-success btn-lg">Large</button>
</div>
</div>
.btn-block |
Një buton i nivelit të bllokut ka gjerësinë e prindit të tij. Ai krijohet duke përdorur klasën btn-block. |
.disabled |
Klasa disabled përdoret nëse dëshirojmë të aplikojmë stil specifik kur butoni është jo aktiv. |
<div class="row">
<div class="col-sm-6">
<h2>Butonat në nivel të bllokut</h2>
<button type="button" class="btn btn-danger btn-lg btn-block">
Butonat në nivel të bllokut
</button>
</div>
<div class="col-sm-6 text-center">
<h2>Butonat jo aktiv</h2>
<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">
'a' Elementi
</a></p>
<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">
'button' Elementi
</button></p>
<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="'input' Elementi"></p>
</div>
</div>
Toggle Checkboxes & Radio Buttons
Bootstrap 4 mundëson që radio buttons dhe checkboxes të kene toggle funksionalitetin.
Për krijimi e këtij funksionaliteti checkboxes ose radio buttons vendosen brenda një <label> elementi që ka të aplikuar klasën e caktuar. Gjithashtu elementi që ka rrolin e grupit .btn-group element duhet të ketë dhe data-toggle=”buttons” të aplikuar.
<div class="row">
<div class="col-sm-6">
<h2>Checkboxes</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> HTML & CSS
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> PhP
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> MySQL
</label>
</div>
</div>
<div class="col-sm-6 text-center">
<h2>Radio Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="boots" autocomplete="off" checked> HTML & CSS
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="shoes" autocomplete="off"> PhP
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="feet" autocomplete="off"> MySQL
</label>
</div>
</div>
</div>
Ushtrimi për images – images
Ushtrimi për buttons – buttons
Detajet e trajnimit: Aplikacion Real – DEMO CMS – WEB Development III