TICK Logo
Banner

Bootstrap Pjesa VI – Custom Format – Pjesë nga Trajnimi WEB Development III

Me anën e klasave të përdorur te custom format mundësohet ri stilizimi i elementeve në kuadër të formës.

Checkboxes & Radio Buttons

<label> Elementi përdoret si mbështjellës për checkboxes, klasat që aplikohen janë .custom-control dhe .custom-checkbox.
Klasa .custom-control-input përdorët në <input> elementin aktual. Gjithashtu përdorën dy <span> elemente: një me klasën .custom-control-indicator , dhe një me klasën .custom-control-description.

<h2>Checkboxes & Radio Buttons</h2>
<label class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input">
	<span class="custom-control-indicator"></span>
	<span class="custom-control-description">Checkbox 1</span>
</label>

Custom Radio butonat janë të konfiguruar njëjtë si në checkboxes. Dallimi është se përdoret .custom-radio në vendë të .custom-input në <label> elementin.

<label class="custom-control custom-radio">
	<input id="radio1" name="radio" type="radio" class="custom-control-input">
	<span class="custom-control-indicator"></span>
	<span class="custom-control-description">Buka</span>
</label>

<label class="custom-control custom-radio">
	<input id="radio2" name="radio" type="radio" class="custom-control-input">
	<span class="custom-control-indicator"></span>
	<span class="custom-control-description">Qumshti</span>
</label>

Custom checkboxes dhe radio buttons fillimisht paraqitën në form horizontale. Për të paraqitur në formë vertikale shtohet .custom-controls-stacked.

<div class="custom-controls-stacked">
	<label class="custom-control custom-radio">
		<input id="radio1" name="radio" type="radio" class="custom-control-input">
		<span class="custom-control-indicator"></span>
		<span class="custom-control-description">Buka</span>
	</label>
	<label class="custom-control custom-radio">
		<input id="radio2" name="radio" type="radio" class="custom-control-input">
		<span class="custom-control-indicator"></span>
		<span class="custom-control-description">Qumshti</span>
	</label>
</div>

Select & File Upload Kontrollat

Në Bootstap 4 klasa .custom-select në tagun <select> përdorët për të krijuar custom select.
Në krijimin e “Uplad File” në <label> tagun  përdoret klasa  .custom-file, <input> element përdoret klasa .custom-control-input dhe në <span> element përdoret klasa .custom-file-control.

 

<h2>Select Controls & File Upload </h2>
<select class="custom-select">
	<option selected>Zgjedh një...</option>
	<option value="1">Buka</option>
	<option value="2">Qumshti</option>
	<option value="3">Pizza</option>
</select>
<br>
<label class=" custom-file">
	<input type="file" id="file" class="custom-file-input">
	<span class="custom-file-control"></span>
</label>

Ushtrimi për custom format – custom-forms

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