TICK Logo
Banner

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

Përpos tagjeve të shumët që përdoren në Bootstrap për rregullimin e tekstit kemi dhe një numër të madhe të class të cilat rregullojnë pamjen e HTLM elementeve të ndryshme. Në vijim po paraqesim disa nga to.

Class Përshkrimi
.lead Bën një paragraf të dalë jashtë formës së tij standarde
.small Tregon tekstin më të vogël ( e bënë 85% të madhësisë së prindit)
.text-left Pozicionon tekstin nga e majta
.text-center Pozicionon tekstin nga e qendra
.text-right Pozicionon tekstin nga e djathta
.text-justify Pozicionin tekstin justified
.text-nowrap Pozicionon tekstin no wrap
.text-lowercase Kthen tekstin në shkronja të vogla
.text-uppercase Kthen tekstin në shkronja të mëdha
.text-capitalize Kthen shkronjat e para në të mëdha
.initialism Paraqet tekstin brenda <abbr> elementit në madhësi më të vogël.
.list-unstyled Fshin stilin fillestar të listës heq margjinën majtas. Kjo klasë vlenë vetëm për fëmijët a parë, përdor klasën edhe në listat ndër listën kryesore nëse dëshironi të aplikohet.
.list-inline Paraqet të gjithë elementet e listës në vij horizontale
.dl-horizontal Fillon së <dl> në fillim, kur kemi pajisje më të vogël ajo kalon në  rresht të ri detajet elementit.
.pre-scrollable Benë <pre> HTML Element të lëvizshëm(scrollable)

Klasat Konceptuale (Contextual classes)

Gjithashtu kemi disa klasa kur dëshirojmë që teksti të jetë njoftim më i theksuar.
Përdorimi i klasave konceptuale ofron njoftimin se çfarë përmbajtje kemi përmes ngjyrave.

.text-muted Teksti është i mbyllur.
.text-primary Teksti është i rëndësishëm.
.text-success Teksti njofton për sukses.
.text-info Teksti paraqet disa informata.
.text-warning Teksti njofton për vërejtjeje.
.text-danger Teksti njofton për rrezik.

Të ngjashme me këto lartë po në këtë raste kemi ndryshimin e prapavijës.

.bg-primary Teksti është i rëndësishëm.
.bg-success Teksti njofton për sukses.
.bg-info Teksti paraqet disa informata.
.bg-warning Teksti njofton për vërejtjeje.
.bg-danger Teksti njofton për rrezik.

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">
				<h2>Ngjyrat kontekstuale</h2>
				<p>Përdorimi i klasave konceptuale ofron njoftimin se çfarë përmbajtje kemi përmes ngjyrave.</p>
				<p class="text-muted">Teksti është i mbyllur.</p>
				<p class="text-primary">Teksti është i rëndësishëm.</p>
				<p class="text-success">Teksti njofton për sukses.</p>
				<p class="text-info">Teksti paraqet disa informata.</p>
				<p class="text-warning">Teksti njofton për vërejtjeje.</p>
				<p class="text-danger">Teksti njofton për rrezik.</p>
			</div>
			<div class="col-sm-6">
				<h2>Prapavijat kontekstuale</h2>
				<p>
				Përdorimi i klasave konceptuale për parpavijat ofron njoftimin se çfarë përmbajtje kemi përmes ngjyrave.<br>
				Të ngjashme me këto lartë po në këtë raste kemi ndryshimin e prapavijës.
				<p class="bg-primary">Teksti është i rëndësishëm.</p>
				<p class="bg-success">Teksti njofton për sukses.</p>
				<p class="bg-info">Teksti paraqet disa informata.</p>
				<p class="bg-warning">Teksti njofton për vërejtjeje.</p>
				<p class="bg-danger">Teksti njofton për rrezik.</p>
			</div>
		</div>
	</div>
	<div class="container">
	  <div class="row">
		<div class="col-sm-4">
			<h3>Përdor .lead class për bërë paragrafin të "qëndroj jashta"</h3>
			<p class="lead">Ky paragraf qëndron jashta.</p>
			<p>Paragraf i zakonshëm.</p>
			<p class="small">Ky paragraf ka shkronja më të vogla.</p>
			  <p class="text-left">Teksti left-aligned.</p>
			  <p class="text-right">Teksti right-aligned.</p>      
			  <p class="text-center">Teksti center-aligned.</p>
			  <p class="text-justify">Teksti justified.  Teksti justified. Teksti justified. Teksti justified. Teksti justified. Teksti justified.</p>      
			  <p class="text-nowrap">Teksti no wrap. Teksti no wrap. Teksti no wrap. Teksti no wrap.</p>

		</div>
		<div class="col-sm-4">
			<h1>Abbreviations</h1>
			<p class="text-lowercase">Teksti lowercased.</p>
			<p class="text-uppercase">Teksti uppercased.</p>      
			<p class="text-capitalize">Teksti capitalized.</p>
			<p>Kompania <abbr title="Training Institute&Center Of Kosova">TICK</abbr> ofron trajnime profesionale. (abbr normale)</p>      
			<p>Kompania <abbr title="Training Institute&Center Of Kosova">TICK</abbr> ofron trajnime profesionale. (abbr me madhësi pak më të vogël)</p>
			<ul class="list-unstyled">
				<li>SQL Server</li>
				<li>WEB
				  <ul>
					<li>WEB I</li>
					<li>WEB II</li>
				  </ul>
				</li>
				<li>C#</li>
			</ul>
		</div>
		<div class="col-sm-4">
			<h1>Code</h1>
			<ul class="list-inline">
				<li>WEB</li>
				<li>C#</li>
				<li>Java</li>
			</ul>
			<dl class="dl-horizontal">
				<dt>WEB I</dt>
				<dd>- HTML, CSS, jQuery</dd>
				<dt>WEB II</dt>
				<dd>- PHP dhe MySQL</dd>
			</dl>
			<pre class="pre-scrollable">Teksti në elemntin pre paraqitet në gjirsi fikse të fontit, 
			  dhe ruan 
			  të dya      hapësirën dhe
			  daljen në rresht të ri.</pre>
		</div>
	  </div>
	  
	</div>
</body>
</html>

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