Styles
Icons
Portlets
Form Zeilen
Code

Master Template

<!DOCTYPE html>
<html lang="de">
	<head>
		<?php include($__bb__templatePath.'/page_includes/htmlHead.php'); ?> 
	</head>
	<body>
		<?php include($__bb__templatePath.'/page_includes/header.php'); ?>
		<div class="container-fluid">
			<div class="row">
				<div class="col-12 firstrow">
					<h4><?php echo $pageTitle; ?></h4>
					<div class="ml-auto">
						<a href="" class="btn btn-link">Neu</a>
						<a href="javascript:;" class="text-muted mb-3" data-toggle="dropdown">
							<svg class="bi bi-2x" fill="currentColor"><use xlink:href="/lib/sprites.svg#menue-h"></use></svg>
						</a>
						<div class="dropdown-menu dropdown-menu-sm  dropdown-menu-right">
							<a class="dropdown-item" href="javascript:;"> Kopieren </a>
							<a class="dropdown-item" href="javascript:;" data-gmodal-url="/projekte/ajax/board/loeschen.php" data-gmodal-id="modal_board_loeschen" data-gmodal-class="modal-lg"> Löschen </a>
						</div>
						<div class="mt-3">
							Geändert am 27.04.2022 16:48 h
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="bb-portlet">
						<div class="bb-portlet-header">
							portlet header
						</div>
						<div class="bb-portlet-body">
							portlet content
						</div>
						<div class="bb-portlet-footer">
							portlet footer
						</div>
					</div>
				</div>
			</div>
		</div>

		<?php include($__bb__templatePath.'/page_includes/footer.php'); ?> 
		<?php include($__bb__templatePath.'/page_includes/jsFooter.php'); ?> 
	</body>
</html>

Formulare

We'll never share your email with anyone else. 
<div class="form-group">
	<label for="email">Email address</label>
	<input type="email" class="form-control" id="email">
	<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
	<label for="pwd">Password</label>
	<input type="password" class="form-control" id="pwd">
</div>
.input-group-append .icon 
<div class="input-group mb-3">
	<input type="text" name="web" value="" class="form-control" placeholder="Webadresse">
	<div class="input-group-append icon">
		<a href="javascript:" class="btn btn-outline-primary" title="URL im neuen Fenster öffnen"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#linkextern"></use></svg></a>
	</div>
	<div class="input-group-append icon">
		<a href="javascript:;" class="btn btn-outline-primary" title="Neu"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg></a>
	</div>
</div>
.input-group-prepend/append .icon 
<div class="input-group mb-3">
	<div class="input-group-prepend icon">
		<a href="javascript:" class="btn btn-outline-primary" title="URL im neuen Fenster öffnen"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#linkextern"></use></svg></a>
	</div>
	<input type="text" name="web" value="" class="form-control" placeholder="Webadresse">
	<div class="input-group-append icon">
		<a href="javascript:;" class="btn btn-outline-primary" title="Neu"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg></a>
	</div>
</div>
.icon-over-input 
<div class="icon-over-input">
	<span class="btn icon-right cursor-default"><svg class="bi bi-1x" fill="currentColor"><use xlink:href="/lib/sprites.svg#suche"></use></svg></span>
	<input class="form-control" type="text">
</div>
<div class="icon-over-input">
	<span class="btn icon-left cursor-default"><svg class="bi bi-1x" fill="currentColor"><use xlink:href="/lib/sprites.svg#suche"></use></svg></span>
	<input class="form-control" type="text">
</div>
<div class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" value="" id="defaultCheck1">
	<label class="custom-control-label" for="defaultCheck1">
		Default checkbox
	</label>
</div>
<div class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" value="" id="defaultCheck2" disabled>
	<label class="custom-control-label" for="defaultCheck2">
		Disabled checkbox
	</label>
</div>
<div class="custom-control custom-radio mt-3">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
	<label class="custom-control-label" for="exampleRadios1">
		Default radio
	</label>
</div>
<div class="custom-control custom-radio">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
	<label class="custom-control-label" for="exampleRadios2">
		Second default radio
	</label>
</div>
<div class="custom-control custom-radio">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
	<label class="custom-control-label" for="exampleRadios3">
		Disabled radio
	</label>
</div>
.custom-checkbox ohne label 
<div class="custom-control custom-checkbox">
	<input type="checkbox" class="custom-control-input" id="singleCustomCheck">
	<label class="custom-control-label" for="singleCustomCheck">&nbsp;</label>
</div>
.custom-radio ohne label 
<div class="custom-control custom-radio">
	<input type="radio" name="a" class="custom-control-input" id="singleRadioCheck">
	<label class="custom-control-label" for="singleRadioCheck">&nbsp;</label>
</div>
<div class="custom-control custom-radio">
	<input type="radio" name="a" class="custom-control-input" id="singleRadioCheck2">
	<label class="custom-control-label" for="singleRadioCheck2">&nbsp;</label>
</div>
<div class="custom-control custom-radio custom-control-inline mt-3">
	<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline mt-3">
	<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
<select class="custom-select">
	<option selected>Wählen...</option>
	<option value="1">Eins</option>
	<option value="2">Zwei</option>
	<option value="3">Drei</option>
</select>
.input-group .dropdown prepend
weitere Textbausteine mit Angebotsnummer/-name-Platzhaltern ... 
<div class="input-group mb-4">
	<div class="input-group-prepend">
		<button class="btn btn-icon" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<svg class="bi bi-sm" fill="currentColor"><use xlink:href="/lib/sprites.svg#angle-down"></use></svg>
		</button>
		<div class="dropdown-menu dropdown-anim">
			<a class="dropdown-item" href="#">weitere Textbausteine mit Angebotsnummer/-name-Platzhaltern</a>
			<a class="dropdown-item" href="#">...</a>
		</div>
	</div>
	<input type="text" class="form-control" name="send[subject]" id="send_subject" value="Textbaustein mit Angebotsnummer/-name-Platzhaltern">
</div>
.input-group .dropdown append
weitere Textbausteine mit Angebotsnummer/-name-Platzhaltern ... 
<div class="input-group mb-4">
	<input type="text" class="form-control" name="send[subject]" id="send_subject" value="Textbaustein mit Angebotsnummer/-name-Platzhaltern">
	<div class="input-group-append">
		<button class="btn btn-icon" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<svg class="bi bi-sm" fill="currentColor"><use xlink:href="/lib/sprites.svg#angle-down"></use></svg>
		</button>
		<div class="dropdown-menu dropdown-menu-right dropdown-anim">
			<a class="dropdown-item" href="#">weitere Textbausteine mit Angebotsnummer/-name-Platzhaltern</a>
			<a class="dropdown-item" href="#">...</a>
		</div>
	</div>
</div>
.select2 - single
<select class="form-control select2" name="value" data-placeholder="Eine Auswahl möglich" data-allow-clear="true">
	<option></option>
	<option value="eins">Eins</option>
	<option value="zwei">Zwei</option>
	<option value="drei">Drei</option>
	<option value="vier">Vier</option>
	<option value="fünf">Fünf</option>
	<option value="sechs">Sechs</option>
</select>
.select2 - multi 
<select class="form-control select2" name="values[]" multiple="multiple" data-placeholder="Mehrere möglich">
	<option></option>
	<option value="eins">Eins</option>
	<option value="zwei">Zwei</option>
	<option value="drei">Drei</option>
	<option value="vier">Vier</option>
	<option value="fünf">Fünf</option>
	<option value="sechs">Sechs</option>
</select>
.selectpicker 
<select name="" class="selectpicker form-control">
	<option value="227" data-content="<span class='color-dot' style='background-color:#ffffff'></span> weiß AB_201">weiß AB_201</option>
	<option value="1545" data-content="<span class='color-dot' style='background-color:#f7f7f7'></span> cremeweiß AB_202">cremeweiß AB_202</option>
	<option value="1568" data-content="<span class='color-dot' style='background-color:#fafaf7'></span> cremeweiß GW_100">cremeweiß GW_100</option>
	<option value="1569" data-content="<span class='color-dot' style='background-color:#f5f3f0'></span> cremeweiß GW_906">cremeweiß GW_906</option>
	<option value="1546" data-content="<span class='color-dot' style='background-color:#c7c5c3'></span> hellgrau AB_236">hellgrau AB_236</option>
	<option value="1570" data-content="<span class='color-dot' style='background-color:#d1cfcb'></span> hellgrau GW_408">hellgrau GW_408</option>
	<option value="1547" data-content="<span class='color-dot' style='background-color:#999796'></span> grau AB_237">grau AB_237</option>
	<option value="1548" data-content="<span class='color-dot' style='background-color:#636363'></span> dunkelgrau AB_238">dunkelgrau AB_238</option>
	<option value="1571" data-content="<span class='color-dot' style='background-color:#52504e'></span> grau GW_396">grau GW_396</option>
</select>
.bb-datepicker 
<input class="form-control bb-datepicker">
.bb-datetimepicker mit Uhrzeit
<input class="form-control bb-datepicker hasTime">
.bb-datetimepicker datat-attribut, zb. wochentage
<input class="form-control bb-datepicker hasWeeks">
.bb-hover-show .bb-hover-spot
show me on hover 
<div class="bb-hover-show" style="width: 100%; height:20px; background-color: #eee;">
	<span class="bb-hover-spot">show me on hover</span>
</div>
<button type="submit" class="btn btn-primary"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#check"></use></svg> Speichern</button>
form button anordnungdirekt unter portlet ohne .col-12
abbrechen 
<div class="col-12 bb-portlet-prepend">
	<button type="button" class="btn btn-danger ml-3" id=""> <svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#close"></use></svg> löschen </button>
	<div class="ml-auto mr-3">
		<a href="" class="btn btn-link mr-3">abbrechen</a>
		<button type="submit" class="btn btn-success"> <svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#check"></use></svg> sichern </button>
	</div>
</div>
kleines dropdown
Option1 Option2 Option... 
<a href="javascript:;" data-toggle="dropdown" data-offset="0,0" aria-expanded="false">
	dropdown 
	<svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#angle-down"></use></svg>
</a>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="">Option1</a>
	<a class="dropdown-item" href="">Option2</a>
	<a class="dropdown-item" href="">Option...</a>
</div>
Action Another action Something else here 
<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		.dropdown
	</button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a class="dropdown-item" href="javascript:;">Action</a>
		<a class="dropdown-item" href="javascript:;">Another action</a>
		<a class="dropdown-item" href="javascript:;">Something else here</a>
	</div>
</div>
.dropdown-menu
neu duplizieren leer duplizieren nachkalkulieren löschen
mehrere Positionen zusammenfügen Summe/Differenz
Nach dieser Positionen Link ohne Icon Zwischenüberschrift Seitenumbruch 
<div class="dropdown-anim">
	<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="0,4.5">
		.dropdown-menu
	</a>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> neu</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#copy"></use></svg> duplizieren</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#copy-empty"></use></svg> leer duplizieren</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#calculator"></use></svg> nachkalkulieren</a>
		<a class="dropdown-item text-danger" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#close"></use></svg> löschen</a>
		<div class="dropdown-divider"></div>
		<small class="dropdown-item-text text-muted text-uppercase">mehrere Positionen</small>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#indent"></use></svg> zusammenfügen</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#euro"></use></svg> Summe/Differenz</a>
		<div class="dropdown-divider"></div>
		<small class="dropdown-item-text text-muted text-uppercase">Nach dieser Positionen</small>
		<a class="dropdown-item" href="javascript:;">Link ohne Icon</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> Zwischenüberschrift</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#return"></use></svg> Seitenumbruch</a>
	</div>
</div>
.dropdown-menu-sm
neu duplizieren leer duplizieren nachkalkulieren löschen
mehrere Positionen zusammenfügen Summe/Differenz
Nach dieser Positionen Link ohne Icon Zwischenüberschrift Seitenumbruch 
<div class="dropdown-anim">
	<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="0,4.5">
		.dropdown-menu-sm
	</a>
	<div class="dropdown-menu dropdown-menu-sm">
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> neu</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#copy"></use></svg> duplizieren</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#copy-empty"></use></svg> leer duplizieren</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#calculator"></use></svg> nachkalkulieren</a>
		<a class="dropdown-item text-danger" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#close"></use></svg> löschen</a>
		<div class="dropdown-divider"></div>
		<small class="dropdown-item-text text-muted text-uppercase">mehrere Positionen</small>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#indent"></use></svg> zusammenfügen</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#euro"></use></svg> Summe/Differenz</a>
		<div class="dropdown-divider"></div>
		<small class="dropdown-item-text text-muted text-uppercase">Nach dieser Positionen</small>
		<a class="dropdown-item" href="javascript:;">Link ohne Icon</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> Zwischenüberschrift</a>
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#return"></use></svg> Seitenumbruch</a>
	</div>
</div>
.dropdown-keep-open
schließt nicht bei Klick 
<div class="dropdown-anim">
	<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="0,4.5">
		.dropdown-keep-open
	</a>
	<div class="dropdown-menu dropdown-keep-open">
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> schließt nicht bei Klick</a>
	</div>
</div>
.dropdown-hover .dropdown-keep-open
hover und schließt nicht bei Klick 
<div class="dropdown-anim">
	<a href="javascript:;" class="btn btn-primary dropdown-toggle dropdown-hover" data-toggle="dropdown" data-offset="0,4.5">
		.dropdown-hover .dropdown-keep-open
	</a>
	<div class="dropdown-menu dropdown-keep-open">
		<a class="dropdown-item" href="javascript:;"><svg class="bi" fill="currentColor"><use xlink:href="/lib/sprites.svg#plus"></use></svg> hover und schließt nicht bei Klick</a>
	</div>
</div>
spinner
<div class="spinner-border my-3" role="status"></div>
loading spinner
show | hide
bb.loadingSpinner.show(selector);
bb.loadingSpinner.hide(selector);

Kein alert(), wenn Seite mit geänderten Formular Einträgen verlassen wird: .no-submit-check | <form class="no-submit-check">...</form>

Toasts

bb.toast.success.show();
bb.toast.alert.show();
Custom Toasts
bb.toast.success.show('Custom Text lorem ipsum', 'CUSTOM HEADER', '4000', 'bg-warning');
bb.toast.alert.show('Custom alert lorem ipsum', 'ALERT HEADER');