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
