TICK Logo
Banner

Bootstrap Pjesa V – Tabelat dhe Format – Pjesë nga Trajnimi WEB Development III

Tabelat në Bootstrap

Në bootstrap  kemi disa klasa, secila nga to ka stil të veçantë, në vijim po paraqesim klasat që përdorën për rregullimin e tabelave.

.table Shton stilin bazik për tabelë
.table-inverse Ndryshon ngjyrën e prapavijës në të zezë
.table-striped Alternativ për ngjyrën e prapavijës për rreshtë
.table-bordered Kufizimi i tabelës
. table-hover Ndryshon ngjyrën e prapavijës në kuadër të rreshtit kur përdoruesi kalon mausin mbi.
.thead-default ; .thead-invers Për të shtuar ngjyrën e prapavijës për rreshtin e parë në tabel
.table-condensed Fshin hapësirën për kolona
.table-responsive Tabela ndrron madhisin në bazë të pajisjes

Gjithashtu në tabela mund të përdorim klasat konceptuale për rresht ose kolonë. Në Botstrap 4 për tabela ato kanë në fillim dhe tabale shtesën, p.sh. .table-warning.

<div class="container">
	<div class="row">
		<div class="col-sm-6">
			<h2>Klasa <small>basic,striped</small> dhe klasat <small>konceptuale</small></h2>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Emri dhe Mbiemri</th>
						<th>Hyrja</th>
						<th>Dalja</th>
						<th>Dalja</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Florent Imeri</td>
						<td>08:00</td>
						<td>15:00</td>
						<td class="table-warning">-2orë</td>
					</tr>
					<tr>
						<td>Burim Avdiu</td>
						<td>08:00</td>
						<td>17:00</td>
						<td> 00 </td>
					</tr>
					<tr class="table-danger">
						<td>Berat Percuku</td>
						<td>00:00</td>
						<td>00:00</td>
						<td>mungesë</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-sm-6">
			<h2>Klasa <small>table-hover,table-bordered</small> </h2>
			<table class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>Emri dhe Mbiemri</th>
						<th>Hyrja</th>
						<th>Dalja</th>
						<th>Dalja</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Florent Imeri</td>
						<td>08:00</td>
						<td>15:00</td>
						<td class="table-warning">-2orë</td>
					</tr>
					<tr>
						<td>Burim Avdiu</td>
						<td>08:00</td>
						<td>17:00</td>
						<td> 00 </td>
					</tr>
					<tr class="table-danger">
						<td>Berat Percuku</td>
						<td>00:00</td>
						<td>00:00</td>
						<td>mungesë</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

Format në Bootstrap

Në bootstrap  kemi 3 llojet të paraqitjeve për forma: Vertikale, Horizontale dhe në një rresht.
Disa rregulla standarde për tre pamjet e formës: labelat dhe kontrollat e formes paraqiten brenda <div class=”form-group”> (për optimizimin e hapësirës)dhe .form-control për të gjithë <input>, <textarea> dhe <select> elementet.

.form-group Në seilin grup të kontrollave. Përdoret brenda <fieldset ose <div>
.form-control Përdoret për shënimin e teksteve <input> text, password, datetime-local , date, month, time, week, number, email, url, search, tel, color
Menyja zgjedhëse(Select menus) – multiple, size
Textareas -N/A
.form-control-file File inputs – file
.form-check
.form-check-inline
.form-check-label
.form-check-input
Checkboxes dhe radios

N/A

.col-form-label Labels me horizontal forms. – N/A
.col-form-legend Legends me horizontal forms. -N/A

 

 

Form Vertikale kjo është forma fillestare që aplikohet te format, secili element pozicionohet në një rresht si i vetëm.
Ushtrimi për formën vertikale:

<form>
	<div class="form-group">
		<label for="emri">Emri:</label>
		<input type="text" class="form-control" id="emri">
	</div>
	<div class="form-group">
		<label for="mbiemri">Mbiemri:</label>
		<input type="mbiemri" class="form-control" id="mbiemri">
	 </div>
	<div class="checkbox">
		<label><input type="checkbox"> Gjini(M/F)</label>
	</div>
	<button type="submit" class="btn btn-default">Ruaj</button>
</form>

Forma në rreshtë(Inline Form) –Përdorët klasa .form-inline e cila rendit elementet në një rresht. Pra deri sa të ketë hapësirë elementet renditën në një rresht dhe kalohet në rresht të ri kur nuk ka hapësirë më.

<form class="form-inline">
	<div class="form-group">
		<label for="emri">Emri:</label>
		<input type="text" class="form-control" id="emri">
	</div>
	<div class="form-group">
		<label for="mbiemri">Mbiemri:</label>
		<input type="mbiemri" class="form-control" id="mbiemri">
	 </div>
	<div class="checkbox">
		<label><input type="checkbox"> Gjini(M/F)</label>
	</div>
	<button type="submit" class="btn btn-default">Ruaj</button>
</form>

Forma horizontale – Forma horizontale krijohet me përdorimin e grid klasave(.row për rreshtin dhe .col-* kolonën).
Përdorët klasa .form-horitontal  brenda formës dhe .col-form-label përdorët për label elementet për renditjen në formë vertikale në qendër të labeles me input elementet tjera. –
– Në bootstrap 4 klasa
.form-horitontal nuk është e nevojshme të përdoret
– Në bootstrap 4 klasa .col-form-label në bootstrap 3 .control-label
– Përdoret .mr-sm-2 për të krijuar hapësirë mes elementeve

<form action="">
	<div class="form-group row">
		<label for="emri" class="col-xs-3 col-form-label mr-2">Emri</label>
		<div class="col-xs-9">
			<input type="text" class="form-control" id="emri" name="emri">
		</div>
	</div>
	<div class="form-group row">
		<label for="mbiemri" class="col-xs-3 col-form-label mr-2">Mbiemri</label>
		<div class="col-xs-9">
			<input type="text" class="form-control" id="mbiemri" name="mbiemri">
		</div>
	</div>
	<div class="form-group row">
		<div class="offset-xs-3 col-xs-9">
			<button type="submit" class="btn btn-default">Ruaj</button>
		</div>
	</div>
</form>

Fshehja e Labeles(Hidden Labels)| Legjenda | Madhësia e kontrollave | Teksti ndihmës | Checkboxes & Radio Buttons

-Labelat i përdorim për përshkrimin e informatave që plotësohen në input fields, në disa raste sidomos në pajisje të vogla kërkohet që ato të fshehën. Bootstrap ofron këtë mundësi përmes klasës .sr-only.Për përshkrim në raste të heqjes së labelave mund të përdorim atributin placeholder.
-Përmes klasës .col-form-legend në Bootstrap mund të bëjmë stilizimin e legjendës.
-Në Bootstrap 4 mund të caktojmë madhësinë e kontrollave përmes klasave .form-control-lg dhe .form-control-sm. Gjithashtu mund përmes grid klasave(.col-*) mund të caktojmë madhësinë e kolonave.
– Në Bootstrap me anë të klasës  .form-text  mund të vendosim tekstin përshkrues për një iput fields.
– Teksti ndihmës mundësohet përmes klasës .form-text  ajo mund të kombunohet me klasën kontekstuale .text-muted.Gjithashtu duhet të përdoret atributi .aria-describedby për të bashkangjitur tekstin ndihmës për kontrollën.
-Në Bootstrap 4 ofrohen klasat .form-check, .form-check-label, .form-check-input, dhe .form-check-inline për paraqitjen e checkboxes and radio buttons.
Për paraqitjen e checkboxes ose radio buttons grumbull, duhet të vendosen të gjitha brenda një div me klasën .form-check.
Gjithashtu shtojmë klasën .form-check-label për label tagun dhe .form-check-input për input tagun.

Stilet për Validim & Ikonat për njoftime

Bootstrap ofron dhe stile për validimin e form kontrollave. Këto përdorën për të paraqitur njërën nga gjendjet e validimit(success, danger, or warning).

Tre klasat janë .has-success, .has-warning, dhe .has-danger. Këto aplikohet si pjes se elementeve kryesore, si cdo .col-form-label, .form-control, dhe custom form elementet të ndërlidhura me këto elemente do të inheritojnë stilin për validim.
Gjithashtu input kontrollat mund të kenë dhe ikona(feedback icons). Për shtimin e ikonave përdorime klasave .form-control-success, .form-control-warning, ose .form-control-danger për .form-control input field.

 

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-4">
			<h3>Fshehja e Labeles | Madhësia e kontrollave </h3>
			<form action="">
				<label class="sr-only" for="emri">Emri</label>
				<input type="text" class="form-control" id="emri" name="emri" placeholder="Emri">
				
				<br>
				<div class="form-group">
					<input type="text" class="form-control form-control-sm" placeholder="Small">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Default size">
				</div>
				<div class="form-group">
					<input type="text" class="form-control form-control-lg"placeholder="Large">
				</div>
			</form>
		</div>
		<div class="col-sm-4">
			<h3>Madhësia e kolonave | Teksti ndihmës</h3>
			<div class="row">
				<div class="col-5">
					<input type="text" class="form-control" placeholder=".col-5">
				</div>
				<div class="col-3">
					<input type="text" class="form-control" placeholder=".col-3">
				</div>
			</div>
			<label for="studentiId">Studenti Id</label>
			<input type="text" id="studentiId" class="form-control" aria-describedby="helpStudentiIdId">
			<span id="helpStudentiIdId" class="form-text text-muted">StudentiId është kolona identifikuese për studentin.</span>
			<br>
			<!-- Checkboxes -->
			<div class="form-check">
				<label class="form-check-label">
					<input class="form-check-input" type="checkbox" id="chb1" value="1">
					Enabled Checkbox
				</label>
			</div>
			<div class="form-check disabled">
				<label class="form-check-label">
					<input class="form-check-input" type="checkbox" id="chb1" value="2" disabled>
					Disabled Checkbox
				</label>
			</div>

			<!-- Radio Buttons -->
			<div class="form-check">
				<label class="form-check-label">
					<input class="form-check-input" type="radio" name="rb" id="rb1" value="1" checked>
					Enabled Radio
				</label>
			</div>
			<div class="form-check disabled">
				<label class="form-check-label">
					<input class="form-check-input" type="radio" name="rb" id="rb2" value="2">
					Enabled Radio
				</label>
			</div>
		</div>
		<div class="col-sm-4">
			<h3>Stilet e validimit</h3>			
			<div class="form-group has-success">
				<label class="col-form-label" for="perdoruesi">Success</label>
				<input type="text" class="form-control form-control-success" id="perdoruesi" aria-describedby="perdoruesiStatus">
				<div class="form-control-feedback">Urime për shtimin e përdoruesit të ri!</div>
			</div>

			<div class="form-group has-warning">
				<label class="col-form-label" for="fjalekalimi">Warning</label>
				<input type="password" class="form-control form-control-warning" id="fjalekalimi" aria-describedby="fjalekalimiStatus">
				<div class="form-control-feedback">Fjalekalimi nuk mund te permbaj perdoruesin...</div>
			</div>

			<div class="form-group has-danger">
				<label class="col-form-label" for="tel">Danger</label>
				<input type="tel" class="form-control form-control-danger" id="tel" aria-describedby="telStatus">
				<div class="form-control-feedback">Telefoni ka format te gabuar.</div>
			</div>
		</div>
	</div>
</div>

Ushtrimi për tabela dhe format –  tables-forms

Detajet e trajnimit: Aplikacion Real – DEMO CMS – WEB Development III