TICK Logo
Banner

Bootstrap Pjesa III – Tipografia I – Pjesë nga Trajnimi Aplikacion Real “DEMO CMS – WEB Development III”

Në bootstrap 4.0 font-size është 16px – që aplikohet në të gjitha elementet brenda <html>, dhe linë-height është 1.5 – që aplikohet në të gjitha elementet brenda <body>, font-family është “Helvetica Neue”, Helvetica, Arial, sans-serif dhe hapësira poshtë tagut <p> është 16 px. Këto vlera mund të ndryshohen sipas nevojës.

Në vijim po ofrojmë disa informata për tagjet bazë:

Heading – Në Bootstrap madhësia e heading tagjeve është si në vijim:

Madhësia e heading tagjeve Madhësia e heading tagjeve si class
<h1>h1 (Semibold 36px)</h1>

<h2>h2 (Semibold 30px)</h2>

<h3>h3 (Semibold 24px)</h3>

<h4>h4 (Semibold 18px)</h4>

<h5>h5 (Semibold 14px)</h5>

<h6>h6 (Semibold 12px)</h6>

 <p class=”h1″>.h1 (Semibold 36px)</p>

<p class=”h2″>.h2 (Semibold 30px)</p>

<p class=”h3″>.h3 (Semibold 24px)</p>

<p class=”h4″>.h4 (Semibold 18px)</p>

<p class=”h5″>.h5 (Semibold 14px)</p>

<p class=”h6″>.h6 (Semibold 12px)</p>

Nëse përdorim tagun <small> brenda tekstit në heading  përgjysmohet  madhësia e shkronjave.
Disa tagje të tjera dhe specifikat për to:

<mark>(Marked) – tekstit i jep theksim – <mark>teksti</mark>
<abbr>(Abbreviations) – mundëson në Maus Hover të ofroj përshkrim të gjatë për tekstin.
<abbr title=”Training Institute&Center Of Kosova”>TICK</abbr>
<code>(Code Snippets) – për paraqitjen e kodit që duhet dalluar nga teksti normal
<dl>(Description Lists) – ofron mundësi për përshkrim të elementeve të listës:
<dl> <dt>Kafe</dt><dd>- Espressoe e shkurt </dd><dt>Qumësht</dt>
<dd>- Qumësht i ftohtë </dd></dl>
<kbd>(Keyboard Inputs) – për paraqitje të informatave që ofrojnë udhëzime për kombinim të shenjave në tastierë.
<blockquote> – rregullon stilin e HTML elementit në mënyrë kur dëshirojmë të njoftojmë që përmbajtja e sajtit është marr nga një burim tjetër.
<pre> – rregullon stilin e HTML elementit kur kemi disa rreshta. Hapësira, rreshti i ri dhe specifikat të tjera.

Ushtrime me tagjet të ndryshme

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.col-sm-4,.col-sm-6, .col-sm-8, .col-sm-3,.col-sm-1{ border:1px solid black;}
.row{margin-bottom:1em;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Heading<small> 1-3 </small></h1>
<p class="h1"><small>.h1 (Semibold 36px/2)</small></p>
<p class="h2"><small>.h2 (Semibold 30px/2)</small></p>
<p class="h3"><small>.h3 (Semibold 24px/2)</small></p>
</div>
<div class="col-sm-6">
<h1>Heading <small> 3-6 </small></h1>
<br>
<p class="h4">.h4 (Semibold 18px</p>
<p class="h5">.h5 (Semibold 14px)</p>
<p class="h6">.h6 (Semibold 12px)</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Highlight Text</h1>
<p>Përdorimi i elementit për <mark>theksimin</mark> e tekstit.</p>
</div>
<div class="col-sm-4">
<h1>Abbreviations</h1>
<p>Kompania <abbr title="Training Institute&Center Of Kosova">TICK</abbr> ofron trajnime profesionale.</p>
</div>
<div class="col-sm-4">
<h1>Code</h1>
<p>PHP Sintaksa: <code>$emri=""; $mysqli_query($conn,$sql);</code></p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1>Description Lists</h1>
<dl><dt>Web Development</dt><dd>- HTML, CSS, jQuery, PHP, MySQL </dd></dl>
</div>
<div class="col-sm-4">
<h1>Keyboard Inputs</h1>
<p>Përdor <kbd>ctrl + p</kbd> për të hapur dialogun për Printim.</p>
<p>Përdor <kbd>ctrl + s</kbd> për të ruajtur një dokument</p>
</div>
<div class="col-sm-4">
<h1>Blockquotes</h1>
<blockquote>
<p> Blockquote element  përdorët për të paraqitur përmbajtje nga një burim tjetër.</p>
<footer>Nga w3schools website</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>

Ushtrimi 1 – tipografia.html
Detajet e trajnimit: Aplikacion Real – DEMO CMS – WEB Development III