%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/bootstrap.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
  \LARGE % Schriftgröße
  \bfseries % Fettdruck
  \sffamily % Serifenlose Schrift
  Bootstrap 5
\end{center}

\subsection*{Container}
\begin{verbatim}
<div class="container"> </div>
\end{verbatim}

\subsection*{Alert}
\begin{verbatim}
<div class="alert alert-primary">Text</div>
\end{verbatim}


\subsection*{Texteingabefeld}
\begin{verbatim}
<div>
    <label class="form-label" for="idInput">Eingabe</label>
    <input class="form-control" id="idInput" type="text">
</div>
\end{verbatim}

\subsection*{Dropdown}
\begin{verbatim}
<select class="form-select">
    <option>A</option>
    <option>B</option>
</select>
\end{verbatim}

\subsection*{Checkbox}
\begin{verbatim}
<div class="form-check">
    <input class="form-check-input" id="idCheck" type="checkbox">
    <label class="form-check-label" for="idCheck">Check</label>
</div>
\end{verbatim}

\subsection*{Radiobuttons}
\begin{verbatim}
<div class="form-check">
    <input class="form-check-input" id="idRadioA" type="radio" name="gruppe">
    <label class="form-check-label" for="idRadioA">A</label>
</div>
<div class="form-check">
    <input class="form-check-input" id="idRadioB" type="radio" name="gruppe">
    <label class="form-check-label" for="idRadioB">B</label>
</div>
\end{verbatim}

\subsection*{Slider}
\begin{verbatim}
<input class="form-range" type="range">
\end{verbatim}


\subsection*{Button}
\begin{verbatim}
<button class="btn btn-primary">Hier klicken</button>
\end{verbatim}


\noindent
\begin{minipage}{10cm}
\subsection*{Abstände, Rahmen, Farben}
  \begin{tabular}{l | l}
    CSS                       & Bootstrap-Klasse               \\ \hline \hline
    \texttt{margin-bottom}    & \texttt{mb-3}                  \\
    \texttt{padding}          & \texttt{p-3}                   \\ \hline
    \texttt{border}           & \texttt{border border-primary} \\ \hline
    \texttt{color}            & \texttt{text-primary}          \\
    \texttt{background-color} & \texttt{bg-primary}            \\
  \end{tabular}
  \end{minipage}
  \begin{minipage}{6cm}
    \begin{tabular}{l | l}
      Bootstrap-Klasse    & Farbe    \\ \hline \hline
      \texttt{-primary}   & blau     \\
      \texttt{-secondary} & grau     \\
      \texttt{-success}   & grün     \\
      \texttt{-danger}    & rot      \\
      \texttt{-warning}   & orange   \\
      \texttt{-info}      & türkis   \\
      \texttt{-light}     & hellgrau \\
      \texttt{-dark}      & schwarz  \\
    \end{tabular}
  \end{minipage}




\noindent




\end{document}
