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