\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Sara (lasago)}
\pdfinfo{
  /Title (diw.pdf)
  /Creator (Cheatography)
  /Author (Sara (lasago))
  /Subject (DIW Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{FFBFDF}
\definecolor{LightBackground}{HTML}{FFEFF7}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{DIW Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Sara (lasago)} via \textcolor{DarkBackground}{\uline{cheatography.com/70899/cs/18033/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Sara (lasago) \\
  \uline{cheatography.com/lasago} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 4th December, 2018.\\
   Updated 15th March, 2019.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.


\begin{tabularx}{17.67cm}{p{1.727 cm} x{15.543 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Vincular}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & \textless{} link href ="style.css"  rel ="stylesheet"\textgreater{} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
 & \textless{} link href ="default.css"  rel ="stylesheet"  title ="Estilo por defecto"\textgreater{} \textless{} link href ="lujo.css"  rel ="alternate stylesheet"  title ="Lujoso"\textgreater{} \textless{} link href ="basic9.css"  rel ="alternate stylesheet"  title ="Basico"\textgreater{} \tn 
% Row Count 9 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.5347 cm} x{6.7353 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Contenido}}  \tn
% Row 0
\SetRowColor{LightBackground}
El contenido que se sale se oculta & overflow: hidden; \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
El contenido que se sale se visualiza mediante scroll & overflow: scroll; \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Formato colapsado de una tabla & \seqsplit{border-collapse:} collapse; \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Tamaño del contenido}}  \tn
% Row 0
\SetRowColor{LightBackground}
Ancho & width: \seqsplit{medida|porcentaje|auto|inherit;} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Alto & height: \seqsplit{medida|porcentaje|auto|inherit;} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\emph{auto : se ajusta mediante el navegador; }}} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 5 (+ 0)
% Row 4
\SetRowColor{LightBackground}
 & padding: \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
Estilo del borde & `border-style: \seqsplit{none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;`} \tn 
% Row Count 11 (+ 5)
% Row 6
\SetRowColor{LightBackground}
Ancho del borde & border-width:; \tn 
% Row Count 12 (+ 1)
% Row 7
\SetRowColor{white}
Color del borde & border-color:; \tn 
% Row Count 13 (+ 1)
% Row 8
\SetRowColor{LightBackground}
Lados individuales: & border-top-style:; \seqsplit{border-bottom-style:;border-left-style:;border-right-style:;} \tn 
% Row Count 17 (+ 4)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 17 (+ 0)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\emph{Para centrar elemento horizontal y verticalmente: `margin: 0 auto;`}}} \tn 
% Row Count 19 (+ 2)
% Row 11
\SetRowColor{white}
Color de fondo & background-color \tn 
% Row Count 20 (+ 1)
% Row 12
\SetRowColor{LightBackground}
Imagen de fondo & background-image: url|none|inherit \tn 
% Row Count 22 (+ 2)
% Row 13
\SetRowColor{white}
=\textgreater{} & {\emph{url("images/carita.png");}} \tn 
% Row Count 24 (+ 2)
% Row 14
\SetRowColor{LightBackground}
Repetir susodicha imagen & background-repeat: \seqsplit{repeat|repeat-x|repeat-y|no-repeat|inherit} \tn 
% Row Count 28 (+ 4)
% Row 15
\SetRowColor{white}
La reacción de la susodicha al scrolling & \seqsplit{background-attachment:} \seqsplit{scroll|fixed|inherit;} \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Tamaño del contenido (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
=\textgreater{} & {\emph{fixed: imagen se mantiene en el lugar, }} \tn 
% Row Count 3 (+ 3)
% Row 17
\SetRowColor{white}
La posición de la susodicha en el espacio & \seqsplit{background-position:} left top|left center|left bottom|right top|right center|right bottom|center top|center|bottom {[}10\% 20\%{]}|{[}10px 20px{]} \tn 
% Row Count 10 (+ 7)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\emph{\textasciicircum{}El primer valor es horizontal y el segundo vertical. The top left corner is 0\% 0\%. The right bottom corner is 100\% 100\%. If you only specify one value, the other value will be 50\%. . Default value is: 0\% 0\%\textasciicircum{}}}} \tn 
% Row Count 15 (+ 5)
% Row 19
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 15 (+ 0)
% Row 20
\SetRowColor{LightBackground}
El margen & margin: \tn 
% Row Count 16 (+ 1)
% Row 21
\SetRowColor{white}
 & \seqsplit{margin-top|margin-bottom|margin-left|margin-right} \tn 
% Row Count 19 (+ 3)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{\textasciicircum{}Cuando dos margin entran en contacto verticalmente se fusionan. Incluso cuando un elemento está contenido dentro de otro.\textasciicircum{}}}} \tn 
% Row Count 22 (+ 3)
% Row 23
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 22 (+ 0)
% Row 24
\SetRowColor{LightBackground}
{\emph{El tamaño total será la suma de su width, padding y borde}} & Box-sizing: border-box; \tn 
% Row Count 26 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Disposición de elementos}}  \tn
% Row 0
\SetRowColor{LightBackground}
Elemento flota a la izq. & float: left; \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Elementos flotan izq. uno después de otro & float: left; \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\emph{Al usar float la caja deja de pertenecer al flujo normal de la página, las cajas ocupan su lugar}}} \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
 & clear: \seqsplit{none|left|right|both|inherit;} \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Position & position: \seqsplit{static|relative|absolute|fixed|inherit;} \tn 
% Row Count 12 (+ 3)
% Row 5
\SetRowColor{white}
=\textgreater{} & \textasciicircum{}{\emph{relativo: su posición no afecta a las cajas de su alrededor, se mantienen fijas; absoluto: su movimeinto afecta a su alrededor, las cajas ocuparían su lugar si hubiese espacio; fija:su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador; \textasciicircum{}}} \tn 
% Row Count 32 (+ 20)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Disposición de elementos (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\textasciicircum{}Para el posicionamiento relativo, absoluto y fijo se deben de indicar las propiedades top, right, bottom y left, que son las que indicarán la posición de la caja.\textasciicircum{}} \tn 
% Row Count 4 (+ 4)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 4 (+ 0)
% Row 8
\SetRowColor{LightBackground}
Acercar unos elementos más que otros, sobre todo en acso de solapamiento & z-index: 1|2|3|...; \tn 
% Row Count 8 (+ 4)
% Row 9
\SetRowColor{white}
Elemento ocupa todo el espacio de la ventana y se mueve con ella & width: 100\%; \tn 
% Row Count 12 (+ 4)
% Row 10
\SetRowColor{LightBackground}
+1 elementos van seguidos los unos de los otros & \seqsplit{float:left;|float:right;} en todos \tn 
% Row Count 15 (+ 3)
% Row 11
\SetRowColor{white}
el elemento que el sigue no flota a su lado, lo queremos debajo; no admite un elemento flotante a su izquierda & clear: left; \tn 
% Row Count 21 (+ 6)
% Row 12
\SetRowColor{LightBackground}
El elemento está centrado & margin: 0 auto; \tn 
% Row Count 23 (+ 2)
% Row 13
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{Para que float seguidos no se empujen hacia abajo, hay que tener en cuenta el espacio. Dividir 100\% entre nº de partes, o 980 en px.} \tn 
% Row Count 26 (+ 3)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{A veces aunque exista un clear, no se efectúa del todo. para eso posicionamos debajo de las cajas flotanets un \textless{}div\textgreater{} vacío, a veces con un clear.} \tn 
% Row Count 29 (+ 3)
% Row 15
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 29 (+ 0)
% Row 16
\SetRowColor{LightBackground}
hacer que elementos se comporten como inline, block, o inline-block; & display: \seqsplit{inline|block|inline-block;} \tn 
% Row Count 33 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Disposición de elementos (cont)}}  \tn
% Row 17
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 0 (+ 0)
% Row 18
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{display: flex;}}} \tn 
% Row Count 1 (+ 1)
% Row 19
\SetRowColor{LightBackground}
Elección del eje (horizontal o vertical) & flex-direction: row | row-reverse | column | column-reverse; \tn 
% Row Count 4 (+ 3)
% Row 20
\SetRowColor{white}
Más de una línea & flex-wrap:nowrap, wrap, wrap-reverse: Cada elemento se ajusta en una sola línea. wrap: los elementos se envuelven alrededor de líneas adicionales. wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales \tn 
% Row Count 16 (+ 12)
% Row 21
\SetRowColor{LightBackground}
Centrar horizontalmente & justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; \tn 
% Row Count 21 (+ 5)
% Row 22
\SetRowColor{white}
Centrar verticalmente & align-items: flex-start | flex-end | center | baseline |stretch;\{\{nl\}\}`cuando ya centramos y queremos mover arriba o abajo` \tn 
% Row Count 28 (+ 7)
% Row 23
\SetRowColor{LightBackground}
align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto. & align-content: flex-start | flex-end | center | space-between | space-around | stretch; \tn 
% Row Count 40 (+ 12)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Disposición de elementos (cont)}}  \tn
% Row 24
\SetRowColor{LightBackground}
Trata al elemento como si no existiese & display: none; \tn 
% Row Count 2 (+ 2)
% Row 25
\SetRowColor{white}
flex-direction y flex-wrap & flex-flow: column wrap; \tn 
% Row Count 4 (+ 2)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Para los elementos individuales:} \tn 
% Row Count 5 (+ 1)
% Row 27
\SetRowColor{white}
 & flex-grow: \tn 
% Row Count 6 (+ 1)
% Row 28
\SetRowColor{LightBackground}
Cambia el orden natural de los elementos & order: 3, +1, -1 \tn 
% Row Count 8 (+ 2)
% Row 29
\SetRowColor{white}
the order property controls the order in which they appear in the flex container. & order: \textless{}integer\textgreater{}; /{\emph{ default is 0 }}/ \tn 
% Row Count 13 (+ 5)
% Row 30
\SetRowColor{LightBackground}
Alinear elementos individuales & align-self: auto; align-self: flex-start; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch;  /{\emph{ Valores globales }}/ align-self: inherit; align-self: initial; align-self: unset; \tn 
% Row Count 24 (+ 11)
% Row 31
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 24 (+ 0)
% Row 32
\SetRowColor{LightBackground}
Esconde el elemento & visibility:hidden; \tn 
% Row Count 25 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\seqsplit{https://flexboxfroggy.com/\#es}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{justify-content}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1544014748_justify-content.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{align-items}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1547657685_Captura.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{align-content:}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1547657743_align-content.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{vertical-align}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1543923762_vertical-align.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Disposición del texto respecto a un elemento.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Selectores}}  \tn
% Row 0
\SetRowColor{LightBackground}
Elemento de clase "clase" & \textless{}div class=""/\textgreater{} \& .clase\{\} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Todos los \textless{}a\textgreater{} de clase .clase & a.clase\{\} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
 & a\#id\{\} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 5 (+ 0)
% Row 4
\SetRowColor{LightBackground}
Con el atributo (href p.e.) & a{[}href="a"{]} \tn 
% Row Count 7 (+ 2)
% Row 5
\SetRowColor{white}
\textless{}a\textgreater{} descendiente de \textless{}p\textgreater{} & p a\{\} \tn 
% Row Count 9 (+ 2)
% Row 6
\SetRowColor{LightBackground}
Hijo directo \textless{}a\textgreater{} de \textless{}p\textgreater{} (hijo inmediato, no nieto) & p\textgreater{}a\{\} \tn 
% Row Count 12 (+ 3)
% Row 7
\SetRowColor{white}
Hermano directo de \textless{}p\textgreater{}, uno después de otro & p+a\{\} \tn 
% Row Count 15 (+ 3)
% Row 8
\SetRowColor{LightBackground}
Elementos hermanos de \textless{}p\textgreater{} a continuación suya & p\textasciitilde{}a\{\} \tn 
% Row Count 18 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 18 (+ 0)
% Row 10
\SetRowColor{LightBackground}
Link que no ha sido visitado & a:link\{\} \tn 
% Row Count 20 (+ 2)
% Row 11
\SetRowColor{white}
Link que ha sido visitado & a:visited\{\} \tn 
% Row Count 22 (+ 2)
% Row 12
\SetRowColor{LightBackground}
Al pasar el ratón por encima & a:hover\{\} \tn 
% Row Count 24 (+ 2)
% Row 13
\SetRowColor{white}
Cuando el elemento se activa al pulsar click & a:active\{\} \tn 
% Row Count 27 (+ 3)
% Row 14
\SetRowColor{LightBackground}
Cuando el elemento tiene el foco & a:focus\{\} \tn 
% Row Count 29 (+ 2)
% Row 15
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 29 (+ 0)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{:nth-child(n)} \tn 
% Row Count 30 (+ 1)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Selectores (cont)}}  \tn
% Row 17
\SetRowColor{LightBackground}
Los hijos directos de, no nietos \textless{}p\textgreater{} & p:nth-child(1)\{ \tn 
% Row Count 2 (+ 2)
% Row 18
\SetRowColor{white}
Todos los \textless{}p\textgreater{} pares & p:nth-child(2n)\{\} \tn 
% Row Count 3 (+ 1)
% Row 19
\SetRowColor{LightBackground}
Todos los \textless{}p\textgreater{} impares & p:nth-child(2n+1)\{\} \tn 
% Row Count 5 (+ 2)
% Row 20
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 5 (+ 0)
% Row 21
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{/{\emph{ Todos los \textless{}p\textgreater{} hijos de algún elemento los agrupamos de tres en tres y a cada uno le asignamos un color de fondo. A los primeros amarillo, a los segundos rojo y a los terceros azul}}/} \tn 
% Row Count 9 (+ 4)
% Row 22
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 9 (+ 0)
% Row 23
\SetRowColor{LightBackground}
La primera línea de cada párrafo & a::first-line\{\} \tn 
% Row Count 11 (+ 2)
% Row 24
\SetRowColor{white}
La primera letra de cada párrafo & ::first-letter \tn 
% Row Count 13 (+ 2)
% Row 25
\SetRowColor{LightBackground}
ponerle antes del texto & ::before \tn 
% Row Count 15 (+ 2)
% Row 26
\SetRowColor{white}
ponerle después del texto & ::after \tn 
% Row Count 17 (+ 2)
% Row 27
\SetRowColor{LightBackground}
 & ::selection \tn 
% Row Count 18 (+ 1)
% Row 28
\SetRowColor{white}
A los \textless{}p\textgreater{} pares de la clase "especial" hijos directos del \textless{}div\textgreater{} con id="pie" & div \#pie \textgreater{} \seqsplit{p.especial:nth-child(2n)} \{\} \tn 
% Row Count 23 (+ 5)
% Row 29
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 23 (+ 0)
% Row 30
\SetRowColor{white}
 & /{\emph{ \#pie p:nth-child(1) selecciona el primer hijo p aunque no es \#pie, pero su npadre sí -\textgreater{} hereda id}}/ \tn 
% Row Count 29 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Imágenes}}  \tn
% Row 0
\SetRowColor{LightBackground}
Insertar imagen & content: \seqsplit{url(../imagenes/pingui.png);} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 2 (+ 0)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Fondos}}} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
Imagen de fondo & background-image: url|none|inherit \tn 
% Row Count 6 (+ 3)
% Row 4
\SetRowColor{LightBackground}
=\textgreater{} & {\emph{url("images/carita.png");}} \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
Repetir susodicha imagen & background-repeat: \seqsplit{repeat|repeat-x|repeat-y|no-repeat|inherit;} \tn 
% Row Count 13 (+ 5)
% Row 6
\SetRowColor{LightBackground}
La reacción de la susodicha al scrolling & \seqsplit{background-attachment:} \seqsplit{scroll|fixed|inherit;} \tn 
% Row Count 16 (+ 3)
% Row 7
\SetRowColor{white}
=\textgreater{} & {\emph{fixed: imagen se mantiene en el lugar}} \tn 
% Row Count 18 (+ 2)
% Row 8
\SetRowColor{LightBackground}
La posición de la susodicha en el espacio & \seqsplit{background-position:} left top|left center|left bottom|right top|right center|right bottom|center top|center|bottom {[}10\% 20\%{]}|{[}10px 20px{]} \tn 
% Row Count 26 (+ 8)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\emph{\textasciicircum{}El primer valor es horizontal y el segundo vertical. The top left corner is 0\% 0\%. The right bottom corner is 100\% 100\%. If you only specify one value, the other value will be 50\%. . Default value is: 0\% 0\%\textasciicircum{}}}} \tn 
% Row Count 31 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Imágenes (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
Usar más de un fondo & ` background-image :  url(flores.gif), url(papel.gif) ;  background-position :  right bottom, left top ;  background-repeat :  no-repeat, repeat ;  background-size :  100px 80px ; ` \tn 
% Row Count 10 (+ 10)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\emph{`La última imagen se posicionará debajo de la anterior`}}} \tn 
% Row Count 12 (+ 2)
% Row 12
\SetRowColor{LightBackground}
El tamaño de un fondo & background-size: {[}{]}|contain|cover; \tn 
% Row Count 14 (+ 2)
% Row 13
\SetRowColor{white}
=\textgreater{} & {\emph{`contain: se ajsuta al tamaño, cover: muestra tamaño real de la imagen`}} \tn 
% Row Count 18 (+ 4)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{background :  url(img\_flower.jpg) no-repeat center fixed ;  background-size :  cover ;*} \tn 
% Row Count 20 (+ 2)
% Row 15
\SetRowColor{white}
background-origin: & \seqsplit{border-box|padding-box|content-box;} \tn 
% Row Count 22 (+ 2)
% Row 16
\SetRowColor{LightBackground}
=\textgreater{} & {\emph{desde esquina superior izquierda}} \tn 
% Row Count 24 (+ 2)
% Row 17
\SetRowColor{white}
background-clip: & \seqsplit{border-box|padding-box|content-box;} \tn 
% Row Count 26 (+ 2)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 26 (+ 0)
% Row 19
\SetRowColor{white}
List dot & list-style-type: disc | circle | square | decimal | \seqsplit{decimal-leading-zero} | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit \tn 
% Row Count 37 (+ 11)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Imágenes (cont)}}  \tn
% Row 20
\SetRowColor{LightBackground}
 & list-style-image: \seqsplit{url("images/flecha.png");} \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Fuente y texto}}  \tn
% Row 0
\SetRowColor{LightBackground}
Importar fuentes de Google Fonts & \textless{}head\textgreater{}\textless{}link \seqsplit{href="https://fonts.googleapis.com/css?family=Notable|Noto+Serif+JP"} rel="stylesheet"\textgreater{}\textless{}/head\textgreater{} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
Usar fuentes descargadas localmente & `@font-face  \{ font-family : Los80; src :  url ('fonts/80db.ttf');   body \{ font-family : Los80; \}` \tn 
% Row Count 11 (+ 5)
% Row 2
\SetRowColor{LightBackground}
=\textgreater{} & {\emph{Por cada fuente un @font-face\{\}}} \tn 
% Row Count 13 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 13 (+ 0)
% Row 4
\SetRowColor{LightBackground}
Indicar una fuente & a \{ font-family: 'Noto Serif JP'; \} \tn 
% Row Count 15 (+ 2)
% Row 5
\SetRowColor{white}
" ", si no funciona coge la siguiente & a \{ font-family: 'Noto Serif JP', Arial; \} \tn 
% Row Count 18 (+ 3)
% Row 6
\SetRowColor{LightBackground}
" " & font-family: 'Chicle', cursive; \tn 
% Row Count 20 (+ 2)
% Row 7
\SetRowColor{white}
Tamaño de la fuente & font-size: \seqsplit{10px|2cm|2mm|2in|2pt|2pc|2em|2ex|2px;} \tn 
% Row Count 23 (+ 3)
% Row 8
\SetRowColor{LightBackground}
Cambiar el color & color: red|rgba(167, 240, 122, 0.52)|\#CCCCC; \tn 
% Row Count 26 (+ 3)
% Row 9
\SetRowColor{white}
Cursiva, negrita, itálica & font-style: \seqsplit{normal|italic|oblique|initial|inherit;} \tn 
% Row Count 29 (+ 3)
% Row 10
\SetRowColor{LightBackground}
Mayúsculas pequeñas & font-variant: \seqsplit{normal|small-caps|initial|inherit;} \tn 
% Row Count 32 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Fuente y texto (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
Grosor de fuente & font-weight: \seqsplit{normal|bold|bolder|lighter|number|initial|inherit|100(}...); \tn 
% Row Count 4 (+ 4)
% Row 12
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 4 (+ 0)
% Row 13
\SetRowColor{LightBackground}
Sombra de la fuente & text-shadow: 2px 2px 0px rgba(237, 150, 150, 1); \tn 
% Row Count 7 (+ 3)
% Row 14
\SetRowColor{white}
Espacio entre líneas & line-height: \seqsplit{40px|1.6|0.5cm|10\%;} \tn 
% Row Count 9 (+ 2)
% Row 15
\SetRowColor{LightBackground}
Subrayado de texto & text-decoration: \seqsplit{none|underline|overline|line-through|blink;} \tn 
% Row Count 12 (+ 3)
% Row 16
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\emph{Overline no es eclusivo de underline...}}} \tn 
% Row Count 13 (+ 1)
% Row 17
\SetRowColor{LightBackground}
Transformar a may., min., o capitalize & text-transform  : capitalize | uppercase | lowercase | none | inherit; \tn 
% Row Count 17 (+ 4)
% Row 18
\SetRowColor{white}
Sangrado/ tabulación del texto en primera línea & text-indent  : 20px; \tn 
% Row Count 20 (+ 3)
% Row 19
\SetRowColor{LightBackground}
Espaciado entre letras & letter-spacing  : .2em; \tn 
% Row Count 22 (+ 2)
% Row 20
\SetRowColor{white}
Esoaciado entre palabras & word-spacing  : .5em; \tn 
% Row Count 24 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.8718 cm} x{11.3982 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Texto}}  \tn
% Row 0
\SetRowColor{LightBackground}
Alineación del texto & text-align:  left | right | center | justify | inherit ; \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.3537 cm} x{11.9163 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Efectos}}  \tn
% Row 0
\SetRowColor{LightBackground}
Sombra en caja & box-shadow: 3px 3px 4px 0px rgba( 255, 87, 51, 0.75); \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Bordes redondeados & `   border-top-left-radius: 42px; border-top-right-radius: 26px;  \seqsplit{border-bottom-right-radius:} 90px; \seqsplit{border-bottom-left-radius:} 67px;` \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
 & `-webkit-border-radius: 42px; 	-moz-border-radius: 42px; 	border-radius: 42px;` \tn 
% Row Count 10 (+ 3)
% Row 3
\SetRowColor{white}
Fondo gradiente & `background: rgb(255, 87, 51); background: \seqsplit{-moz-linear-gradient(55deg}, rgb(255, 87, 51) 0\%, rgb(144, 12, 63) 100\%); background: \seqsplit{-webkit-linear-gradient(55deg}, rgb(255, 87, 51) 0\%, rgb(144, 12, 63) 100\%); background: -o-linear-gradient(55deg, rgb(255, 87, 51) 0\%, rgb(144, 12, 63) 100\%); background: \seqsplit{-ms-linear-gradient(55deg}, rgb(255, 87, 51) 0\%, rgb(144, 12, 63) 100\%); background: linear-gradient(145deg, rgb(255, 87, 51) 0\%, rgb(144, 12, 63) 100\%);` \tn 
% Row Count 27 (+ 17)
% Row 4
\SetRowColor{LightBackground}
 & background: linear-gradient(to bottom right, \#ff8930, \#f296ff);     background: \seqsplit{-prefix-linear-gradient(left} top,\#593be2, \#f296ff); \tn 
% Row Count 32 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.3537 cm} x{11.9163 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Efectos (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
Botones & `color: rgb(255, 255, 255); font-size: 18px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 90px; -moz-border-radius: 90px; border-radius: 90px; background: rgb(142, 110, 181); background: \seqsplit{-moz-linear-gradient(90deg}, rgb(142, 110, 181) 30\%, rgb(142, 131, 234) 70\%); background: \seqsplit{-webkit-linear-gradient(90deg}, rgb(142, 110, 181) 30\%, rgb(142, 131, 234) 70\%); background: -o-linear-gradient(90deg, rgb(142, 110, 181) 30\%, rgb(142, 131, 234) 70\%); background: \seqsplit{-ms-linear-gradient(90deg}, rgb(142, 110, 181) 30\%, rgb(142, 131, 234) 70\%); background: linear-gradient(0deg, rgb(142, 110, 181) 30\%, rgb(142, 131, 234) 70\%); -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.75); box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.75);` \tn 
% Row Count 31 (+ 31)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Distribución flexbox}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1548259356_container.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap}}  \tn
% Row 0
\SetRowColor{LightBackground}
Ajustar el ancho del área de usuario al ancho del dispositivo & \textless{}meta name="viewport" \seqsplit{content="width=device-width}, initial-scale=1.0"\textgreater{} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Vincular a plantillas online & \textless{}link rel="stylesheet" \seqsplit{href="https://maxcdn}.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" \seqsplit{integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"} crossorigin="anonymous"\textgreater{} \textless{}script \seqsplit{src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"} \seqsplit{integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"} crossorigin="anonymous"\textgreater{}\textless{}/script\textgreater{} \tn 
% Row Count 25 (+ 21)
% Row 2
\SetRowColor{LightBackground}
Vincular a plantillas localmente (css) & \textless{}link \seqsplit{href="css/bootstrap.min.css"} rel="stylesheet" media="screen"\textgreater{} \tn 
% Row Count 29 (+ 4)
% Row 3
\SetRowColor{white}
Vincular otros para funcionamiento & \textless{}script \seqsplit{src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min}.js"\textgreater{}\textless{}/script\textgreater{}     \textless{}script \seqsplit{src="https://code.jquery.com/jquery-3.3.1.slim.min.js"} \seqsplit{integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"} crossorigin="anonymous"\textgreater{}\textless{}/script\textgreater{}     \textless{}script \seqsplit{src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"} \seqsplit{integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"} crossorigin="anonymous"\textgreater{}\textless{}/script\textgreater{}     \textless{}script \seqsplit{src="https://stackpath}.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" \seqsplit{integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"} crossorigin="anonymous"\textgreater{}\textless{}/script\textgreater{} \tn 
% Row Count 64 (+ 35)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
Hace un wrapper para el elemento con unos márgenes alrededor a medida & class= container \tn 
% Row Count 4 (+ 4)
% Row 5
\SetRowColor{white}
Crea un wrapper para el elemento que cubre el ancho de la pantalla & class= container-fluid \tn 
% Row Count 8 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 8 (+ 0)
% Row 7
\SetRowColor{white}
Dejar columna/s en blanco: & offset-md-4 \tn 
% Row Count 10 (+ 2)
% Row 8
\SetRowColor{LightBackground}
hacer columnas invisibles & .d-none .d-sm-block \tn 
% Row Count 12 (+ 2)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Crear botones}}} \tn 
% Row Count 13 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 13 (+ 0)
% Row 11
\SetRowColor{white}
botones con bordes de colores & \textless{}button type="button" class="btn btn-outline-primary"\textgreater{}Primary\textless{}/button\textgreater{} \tn 
% Row Count 17 (+ 4)
% Row 12
\SetRowColor{LightBackground}
Tamaño de botón & \textless{}button type="button" class="btn btn-primary btn-lg"\textgreater{}Large button\textless{}/button\textgreater{} \tn 
% Row Count 21 (+ 4)
% Row 13
\SetRowColor{white}
 & \textless{}button type="button" class="btn btn-primary btn-sm"\textgreater{}Small button\textless{}/button\textgreater{} \tn 
% Row Count 25 (+ 4)
% Row 14
\SetRowColor{LightBackground}
Botones que ocupan el ancho del padre & \textless{}button type="button" class="btn btn-primary btn-lg btn-block"\textgreater{}Block level button\textless{}/button\textgreater{} \tn 
% Row Count 30 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 15
\SetRowColor{LightBackground}
Botones que asemejan estar pulsados & \textless{}a href="\#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"\textgreater{}Link\textless{}/a\textgreater{} \tn 
% Row Count 5 (+ 5)
% Row 16
\SetRowColor{white}
Botones que asemejan ser inactivos & \textless{}button type="button" class="btn btn-lg btn-primary" disabled\textgreater{}Primary button\textless{}/button\textgreater{} \tn 
% Row Count 10 (+ 5)
% Row 17
\SetRowColor{LightBackground}
Botones inactivos con \textless{}a\textgreater{} & \textless{}a href="\#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true"\textgreater{}Primary link\textless{}/a\textgreater{} \textless{}a href="\#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true"\textgreater{}Link\textless{}/a\textgreater{} \tn 
% Row Count 21 (+ 11)
% Row 18
\SetRowColor{white}
Botones activados & \textless{}button type="button" class="btn btn-primary" \seqsplit{data-toggle="button"} \seqsplit{aria-pressed="false"} autocomplete="off"\textgreater{}               Activado             \textless{}/button\textgreater{} \tn 
% Row Count 29 (+ 8)
% Row 19
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Listas}}} \tn 
% Row Count 30 (+ 1)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 20
\SetRowColor{LightBackground}
 & \textless{}ul class="list-group"\textgreater{} \tn 
% Row Count 2 (+ 2)
% Row 21
\SetRowColor{white}
 & \textless{}li class="list-group-item"\textgreater{}Cras justo odio\textless{}/li\textgreater{} \tn 
% Row Count 5 (+ 3)
% Row 22
\SetRowColor{LightBackground}
Estlo activo o disabled & \textless{}li \seqsplit{class="list-group-item} active"\textgreater{}Cras justo odio\textless{}/li\textgreater{}                   \textless{}li \seqsplit{class="list-group-item} disabled"\textgreater{}Dapibus ac facilisis in\textless{}/li\textgreater{} \tn 
% Row Count 12 (+ 7)
% Row 23
\SetRowColor{white}
Lista con \textless{}a\textgreater{} & \textless{}div class="list-group"\textgreater{}               \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active"\textgreater{} \tn 
% Row Count 18 (+ 6)
% Row 24
\SetRowColor{LightBackground}
Lista con \textless{}button\textgreater{} & \textless{}div class="list-group"\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active"\textgreater{}     Cras justo odio   \textless{}/button\textgreater{} \tn 
% Row Count 25 (+ 7)
% Row 25
\SetRowColor{white}
Listas sin esquinas o bordes & \textless{}ul class="list-group list-group-flush"\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Cras justo odio\textless{}/li\textgreater{} \tn 
% Row Count 30 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 26
\SetRowColor{LightBackground}
Listas con colores de clases contetxuales & \textless{}li \seqsplit{class="list-group-item} list-group-item-primary"\textgreater{}This is a primary list group item\textless{}/li \tn 
% Row Count 5 (+ 5)
% Row 27
\SetRowColor{white}
Listas con colores de clases contextuales activas & \textless{}a href="\#" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Dapibus ac facilisis in\textless{}/a\textgreater{}       \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} list-group-item-primary"\textgreater{}This is a primary list group item\textless{}/a\textgreater{} \tn 
% Row Count 16 (+ 11)
% Row 28
\SetRowColor{LightBackground}
Listas con badges o contadores de actividad & \textless{}ul class="list-group"\textgreater{}   \textless{}li \seqsplit{class="list-group-item} d-flex \seqsplit{justify-content-between} align-items-center"\textgreater{}     Cras justo odio     \textless{}span class="badge badge-primary badge-pill"\textgreater{}14\textless{}/span\textgreater{}   \textless{}/li\textgreater{} \tn 
% Row Count 26 (+ 10)
% Row 29
\SetRowColor{white}
Contenido HTML dentro de una lista & \textless{}div class="list-group"\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} flex-column align-items-start active"\textgreater{}     \textless{}div class="d-flex w-100 justify-content-between"\textgreater{}       \textless{}h5 class="mb-1"\textgreater{}List group item heading\textless{}/h5\textgreater{}       \textless{}small\textgreater{}3 days ago\textless{}/small\textgreater{}     \textless{}/div\textgreater{}     \textless{}p class="mb-1"\textgreater{}Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\textless{}/p\textgreater{}     \textless{}small\textgreater{}Donec id elit non mi porta.\textless{}/small\textgreater{}   \textless{}/a\textgreater{} \tn 
% Row Count 49 (+ 23)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 30
\SetRowColor{LightBackground}
List-tabs & \textless{}div class="row"\textgreater{}   \textless{}div class="col-4"\textgreater{}     \textless{}div class="list-group" id="list-tab" role="tablist"\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active" id="list-home-list" data-toggle="list" href="\#list-home" role="tab" aria-controls="home"\textgreater{}Home\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-profile-list"} data-toggle="list" \seqsplit{href="\#list-profile"} role="tab" aria-controls="profile"\textgreater{}Profile\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-messages-list"} data-toggle="list" \seqsplit{href="\#list-messages"} role="tab" aria-controls="messages"\textgreater{}Messages\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-settings-list"} data-toggle="list" \seqsplit{href="\#list-settings"} role="tab" aria-controls="settings"\textgreater{}Settings\textless{}/a\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{}   \textless{}div class="col-8"\textgreater{}     \textless{}div class="tab-content" id="nav-tabContent"\textgreater{}       \textless{}div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"\textgreater{}...\textless{}/div\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 68 (+ 68)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 31
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{flex}}} \tn 
% Row Count 1 (+ 1)
% Row 32
\SetRowColor{white}
Usar display: flex; se usan en el elemento padre & \textless{}div class="d-flex p-2"\textgreater{}I'm a flexbox container!\textless{}/div\textgreater{} \tn 
% Row Count 4 (+ 3)
% Row 33
\SetRowColor{LightBackground}
 & .flex-row \tn 
% Row Count 5 (+ 1)
% Row 34
\SetRowColor{white}
 & .flex-row-reverse \tn 
% Row Count 6 (+ 1)
% Row 35
\SetRowColor{LightBackground}
 & .flex-column \tn 
% Row Count 7 (+ 1)
% Row 36
\SetRowColor{white}
 & d-flex \seqsplit{justify-content-start}, d-flex justify-content-end, d-flex \seqsplit{justify-content-center}, d-flex \seqsplit{justify-content-between}, d-flex \seqsplit{justify-content-around} \tn 
% Row Count 15 (+ 8)
% Row 37
\SetRowColor{LightBackground}
 & d-flex align-items-start, d-flex align-items-end, d-flex align-items-center,d-flex \seqsplit{align-items-baseline}, d-flex align-items-stretch \tn 
% Row Count 22 (+ 7)
% Row 38
\SetRowColor{white}
 & align-self-start,align-self-end, align-self-center, align-self-baseline, align-self-stretch \tn 
% Row Count 27 (+ 5)
% Row 39
\SetRowColor{LightBackground}
Llenar hijos de flex & \textless{}div class="d-flex bd-highlight"\textgreater{}   \textless{}div class="p-2 flex-fill bd-highlight"\textgreater{}Flex item\textless{}/div\textgreater{} \tn 
% Row Count 32 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap (cont)}}  \tn
% Row 40
\SetRowColor{LightBackground}
grow de hijos de flex & \textless{}div class="d-flex bd-highlight"\textgreater{}   \textless{}div class="p-2 flex-grow-1 bd-highlight"\textgreater{}Flex item\textless{}/div\textgreater{} \tn 
% Row Count 5 (+ 5)
% Row 41
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Imágenes}}} \tn 
% Row Count 6 (+ 1)
% Row 42
\SetRowColor{LightBackground}
Imagen tamaño del padre & \textless{}img src="..." class="img-fluid" alt="Responsive image"\textgreater{} \tn 
% Row Count 9 (+ 3)
% Row 43
\SetRowColor{white}
Hacer thumbnails & \textless{}img src="..." alt="..." class="img-thumbnail"\textgreater{} \tn 
% Row Count 12 (+ 3)
% Row 44
\SetRowColor{LightBackground}
Imagen redondeada & \textless{}img src="..." class="rounded \tn 
% Row Count 14 (+ 2)
% Row 45
\SetRowColor{white}
Centrar imágenes, alinearlas & \textless{}img src="img2.png" class="rounded float-left" alt="..."\textgreater{}                 \textless{}img src="img2.png" class="rounded float-right" alt="..."\textgreater{}                 \textless{}img src="img2.png" class="rounded mx-auto d-block" alt="..."\textgreater{}                 \textless{}div class="text-center"\textgreater{}                   \textless{}img src="img2.png" class="rounded" alt="..."\textgreater{} \tn 
% Row Count 30 (+ 16)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\seqsplit{https://getbootstrap.com/docs/4.0/utilities/flex/}  \seqsplit{https://getbootstrap.com/docs/4.0/utilities/spacing/}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.0166 cm} x{7.2534 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Grillas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Las "filas" de contenido llevan la clase row, los elementos con esa clase} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{Dentro de las clases row , metemos las clases col} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{"col-sm-6" pide que el contenido para las pantallas pequeñas ocupen 6/12 columnas en esta row} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{"col-sm-6 col-lg-2" pide que al aumentar a grande, ocupe 2 columnas} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{"col" afecta al elemento seleccionado, si está en línea con otro elemento tienen que sumar 12} \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{Para un tamaño para todos los display, especificamos sólo la clase "col-sm-n"} \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
Dejar columna/s en blanco: & offset-md-4 \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
hacer columnas invisibles & .d-none .d-sm-block \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.8718 cm} x{11.3982 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Nav Tabs}}  \tn
% Row 0
\SetRowColor{LightBackground}
Tabs & \textless{}nav\textgreater{} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
 & \textless{}div class="nav nav-tabs" id="nav-tab" role="tablist"\textgreater{} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
 & \textless{}a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="\#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"\textgreater{}Pestaña activa\textless{}/a\textgreater{} \tn 
% Row Count 11 (+ 7)
% Row 3
\SetRowColor{white}
 & \textless{}a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="\#nav-profile" role="tab" \seqsplit{aria-controls="nav-profile"} aria-selected="false"\textgreater{}Una imagen\textless{}/a\textgreater{} \tn 
% Row Count 18 (+ 7)
% Row 4
\SetRowColor{LightBackground}
 & \textless{}a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="\#nav-contact" role="tab" \seqsplit{aria-controls="nav-contact"} aria-selected="false"\textgreater{}Contact\textless{}/a\textgreater{} \tn 
% Row Count 25 (+ 7)
% Row 5
\SetRowColor{white}
 & \textless{}/div\textgreater{}             \textless{}/nav\textgreater{} \tn 
% Row Count 26 (+ 1)
% Row 6
\SetRowColor{LightBackground}
Contenido de las tabs & \textless{}div class="tab-content" id="nav-tabContent"\textgreater{} \tn 
% Row Count 28 (+ 2)
% Row 7
\SetRowColor{white}
 & \textless{}div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"\textgreater{}\textless{}/div\textgreater{} \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.8718 cm} x{11.3982 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Nav Tabs (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
 & \textless{}div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"\textgreater{}...\textless{}/div\textgreater{} \tn 
% Row Count 4 (+ 4)
% Row 9
\SetRowColor{white}
 & \textless{}div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"\textgreater{}...\textless{}/div\textgreater{} \tn 
% Row Count 8 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} x{15.543 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap tablas}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & `\textless{}table class="table"\textgreater{}   \textless{}thead\textgreater{}     \textless{}tr\textgreater{}       \textless{}th scope="col"\textgreater{}\#\textless{}/th\textgreater{}       \textless{}th scope="col"\textgreater{}First\textless{}/th\textgreater{}       \textless{}th scope="col"\textgreater{}Last\textless{}/th\textgreater{}       \textless{}th scope="col"\textgreater{}Handle\textless{}/th\textgreater{}     \textless{}/tr\textgreater{}   \textless{}/thead\textgreater{}   \textless{}tbody\textgreater{}     \textless{}tr\textgreater{}       \textless{}th scope="row"\textgreater{}1\textless{}/th\textgreater{}       \textless{}td\textgreater{}Mark\textless{}/td\textgreater{}       \textless{}td\textgreater{}Otto\textless{}/td\textgreater{}       \textless{}td\textgreater{}@mdo\textless{}/td\textgreater{}     \textless{}/tr\textgreater{}     \textless{}tr\textgreater{}       \textless{}th scope="row"\textgreater{}2\textless{}/th\textgreater{}       \textless{}td\textgreater{}Jacob\textless{}/td\textgreater{}       \textless{}td\textgreater{}Thornton\textless{}/td\textgreater{}       \textless{}td\textgreater{}@fat\textless{}/td\textgreater{}     \textless{}/tr\textgreater{}     \textless{}tr\textgreater{}       \textless{}th scope="row"\textgreater{}3\textless{}/th\textgreater{}       \textless{}td\textgreater{}Larry\textless{}/td\textgreater{}       \textless{}td\textgreater{}the Bird\textless{}/td\textgreater{}       \textless{}td\textgreater{}@twitter\textless{}/td\textgreater{}     \textless{}/tr\textgreater{}   \textless{}/tbody\textgreater{} \textless{}/table\textgreater{}` \tn 
% Row Count 16 (+ 16)
% Row 1
\SetRowColor{white}
 & \textless{}table class="table table-dark"\textgreater{} \tn 
% Row Count 17 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & \textless{}thead class="thead-dark"\textgreater{} \tn 
% Row Count 18 (+ 1)
% Row 3
\SetRowColor{white}
 & \textless{}thead class="thead-light"\textgreater{} \tn 
% Row Count 19 (+ 1)
% Row 4
\SetRowColor{LightBackground}
 & \textless{}table class="table table-striped"\textgreater{} \tn 
% Row Count 20 (+ 1)
% Row 5
\SetRowColor{white}
 & \textless{}table class="table table-striped table-dark"\textgreater{} \tn 
% Row Count 22 (+ 2)
% Row 6
\SetRowColor{LightBackground}
 & \textless{}table class="table table-bordered"\textgreater{} \tn 
% Row Count 23 (+ 1)
% Row 7
\SetRowColor{white}
 & \textless{}table class="table table-bordered table-dark"\textgreater{} \tn 
% Row Count 25 (+ 2)
% Row 8
\SetRowColor{LightBackground}
 & \textless{}table class="table table-hover"\textgreater{} \tn 
% Row Count 26 (+ 1)
% Row 9
\SetRowColor{white}
 & \textless{}table class="table table-hover table-dark"\textgreater{} \tn 
% Row Count 28 (+ 2)
% Row 10
\SetRowColor{LightBackground}
 & \textless{}table class="table table-sm"\textgreater{} \tn 
% Row Count 29 (+ 1)
% Row 11
\SetRowColor{white}
 & \textless{}table class="table table-sm table-dark"\textgreater{} \tn 
% Row Count 31 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} x{15.543 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap tablas (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
 & \textless{}tr class="table-active"\textgreater{}...\textless{}/tr\textgreater{}  \textless{}tr class="table-primary"\textgreater{}...\textless{}/tr\textgreater{}  \textless{}td class="table-active"\textgreater{}...\textless{}/td\textgreater{} \tn 
% Row Count 3 (+ 3)
% Row 13
\SetRowColor{white}
 & \textless{}tr class="bg-primary"\textgreater{}...\textless{}/tr\textgreater{}   \textless{}td class="bg-primary"\textgreater{}...\textless{}/td\textgreater{} \tn 
% Row Count 5 (+ 2)
% Row 14
\SetRowColor{LightBackground}
 & \textless{}table class="table"\textgreater{}   \textless{}caption\textgreater{}List of users\textless{}/caption\textgreater{}   \textless{}thead\textgreater{} \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textless{}ul class="list-group"\textgreater{}, \textless{}li class="list-group-item"\textgreater{} & \textless{}ul class="list-group"\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Cras justo odio\textless{}/li\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Dapibus ac facilisis in\textless{}/li\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Morbi leo risus\textless{}/li\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Porta ac consectetur ac\textless{}/li\textgreater{}   \textless{}li class="list-group-item"\textgreater{}Vestibulum at eros\textless{}/li\textgreater{} \textless{}/ul\textgreater{} \tn 
% Row Count 16 (+ 16)
% Row 1
\SetRowColor{white}
 & \textless{}li \seqsplit{class="list-group-item} active"\textgreater{}Cras justo odio\textless{}/li\textgreater{} \tn 
% Row Count 19 (+ 3)
% Row 2
\SetRowColor{LightBackground}
 & \textless{}li \seqsplit{class="list-group-item} disabled"\textgreater{}Cras justo odio\textless{}/li\textgreater{} \tn 
% Row Count 22 (+ 3)
% Row 3
\SetRowColor{white}
actionable, no soporta disabled & \textless{}div class="list-group"\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active"\textgreater{}     Cras justo odio   \textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Dapibus ac facilisis in\textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Morbi leo risus\textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Porta ac consectetur ac\textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} disabled"\textgreater{}Vestibulum at eros\textless{}/a\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 46 (+ 24)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
actionable & \textless{}div class="list-group"\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active"\textgreater{}     Cras justo odio   \textless{}/button\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Dapibus ac facilisis in\textless{}/button\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Morbi leo risus\textless{}/button\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} list-group-item-action"\textgreater{}Porta ac consectetur ac\textless{}/button\textgreater{}   \textless{}button type="button" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} disabled\textgreater{}Vestibulum at eros\textless{}/button\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 28 (+ 28)
% Row 5
\SetRowColor{white}
no borders & \textless{}ul class="list-group list-group-flush"\textgreater{} \tn 
% Row Count 30 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
Contextual classes & \textless{}li \seqsplit{class="list-group-item} list-group-item-primary"\textgreater{}This is a primary list group item\textless{}/li\textgreater{}   \textless{}li \seqsplit{class="list-group-item} list-group-item-secondary"\textgreater{}This is a secondary list group item\textless{}/li\textgreater{} \tn 
% Row Count 10 (+ 10)
% Row 7
\SetRowColor{white}
Contextual classes & \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} list-group-item-primary"\textgreater{}This is a primary list group item\textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} list-group-item-secondary"\textgreater{}This is a secondary list group item\textless{}/a\textgreater{} \tn 
% Row Count 23 (+ 13)
% Row 8
\SetRowColor{LightBackground}
badge & \textless{}ul class="list-group"\textgreater{}   \textless{}li \seqsplit{class="list-group-item} d-flex \seqsplit{justify-content-between} align-items-center"\textgreater{}     Cras justo odio     \textless{}span class="badge badge-primary badge-pill"\textgreater{}14\textless{}/span\textgreater{}   \textless{}/li\textgreater{}   \textless{}li \seqsplit{class="list-group-item} d-flex \seqsplit{justify-content-between} align-items-center"\textgreater{}     Dapibus ac facilisis in     \textless{}span class="badge badge-primary badge-pill"\textgreater{}2\textless{}/span\textgreater{}   \textless{}/li\textgreater{}   \textless{}li \seqsplit{class="list-group-item} d-flex \seqsplit{justify-content-between} align-items-center"\textgreater{}     Morbi leo risus     \textless{}span class="badge badge-primary badge-pill"\textgreater{}1\textless{}/span\textgreater{}   \textless{}/li\textgreater{} \textless{}/ul\textgreater{} \tn 
% Row Count 50 (+ 27)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
contenido & div class="list-group"\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} flex-column align-items-start active"\textgreater{}     \textless{}div class="d-flex w-100 justify-content-between"\textgreater{}       \textless{}h5 class="mb-1"\textgreater{}List group item heading\textless{}/h5\textgreater{}       \textless{}small\textgreater{}3 days ago\textless{}/small\textgreater{}     \textless{}/div\textgreater{}     \textless{}p class="mb-1"\textgreater{}Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\textless{}/p\textgreater{}     \textless{}small\textgreater{}Donec id elit non mi porta.\textless{}/small\textgreater{}   \textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} flex-column align-items-start"\textgreater{}     \textless{}div class="d-flex w-100 justify-content-between"\textgreater{}       \textless{}h5 class="mb-1"\textgreater{}List group item heading\textless{}/h5\textgreater{}       \textless{}small class="text-muted"\textgreater{}3 days ago\textless{}/small\textgreater{}     \textless{}/div\textgreater{}     \textless{}p class="mb-1"\textgreater{}Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\textless{}/p\textgreater{}     \textless{}small class="text-muted"\textgreater{}Donec id elit non mi porta.\textless{}/small\textgreater{}   \textless{}/a\textgreater{}   \textless{}a href="\#" \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} flex-column align-items-start"\textgreater{}     \textless{}div class="d-flex w-100 justify-content-between"\textgreater{}       \textless{}h5 class="mb-1"\textgreater{}List group item heading\textless{}/h5\textgreater{}       \textless{}small class="text-muted"\textgreater{}3 days ago\textless{}/small\textgreater{}     \textless{}/div\textgreater{}     \textless{}p class="mb-1"\textgreater{}Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\textless{}/p\textgreater{}     \textless{}small class="text-muted"\textgreater{}Donec id elit non mi porta.\textless{}/small\textgreater{}   \textless{}/a\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 68 (+ 68)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
javascript & \textless{}div class="row"\textgreater{}   \textless{}div class="col-4"\textgreater{}     \textless{}div class="list-group" id="list-tab" role="tablist"\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active" id="list-home-list" data-toggle="list" href="\#list-home" role="tab" aria-controls="home"\textgreater{}Home\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-profile-list"} data-toggle="list" \seqsplit{href="\#list-profile"} role="tab" aria-controls="profile"\textgreater{}Profile\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-messages-list"} data-toggle="list" \seqsplit{href="\#list-messages"} role="tab" aria-controls="messages"\textgreater{}Messages\textless{}/a\textgreater{}       \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} \seqsplit{id="list-settings-list"} data-toggle="list" \seqsplit{href="\#list-settings"} role="tab" aria-controls="settings"\textgreater{}Settings\textless{}/a\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{}   \textless{}div class="col-8"\textgreater{}     \textless{}div class="tab-content" id="nav-tabContent"\textgreater{}       \textless{}div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"\textgreater{}...\textless{}/div\textgreater{}       \textless{}div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"\textgreater{}...\textless{}/div\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 68 (+ 68)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
con data-attributes & \textless{}!-{}- List group -{}-\textgreater{} \textless{}div class="list-group" id="myList" role="tablist"\textgreater{}   \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action} active" data-toggle="list" href="\#home" role="tab"\textgreater{}Home\textless{}/a\textgreater{}   \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} data-toggle="list" href="\#profile" role="tab"\textgreater{}Profile\textless{}/a\textgreater{}   \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} data-toggle="list" href="\#messages" role="tab"\textgreater{}Messages\textless{}/a\textgreater{}   \textless{}a \seqsplit{class="list-group-item} \seqsplit{list-group-item-action"} data-toggle="list" href="\#settings" role="tab"\textgreater{}Settings\textless{}/a\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 27 (+ 27)
% Row 12
\SetRowColor{white}
con data-attributes & \textless{}!-{}- Tab panes -{}-\textgreater{} \textless{}div class="tab-content"\textgreater{}   \textless{}div class="tab-pane active" id="home" role="tabpanel"\textgreater{}...\textless{}/div\textgreater{}   \textless{}div class="tab-pane" id="profile" role="tabpanel"\textgreater{}...\textless{}/div\textgreater{}   \textless{}div class="tab-pane" id="messages" role="tabpanel"\textgreater{}...\textless{}/div\textgreater{}   \textless{}div class="tab-pane" id="settings" role="tabpanel"\textgreater{}...\textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 43 (+ 16)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Listas (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
fade & \textless{}div class="tab-pane fade" id="profile" role="tabpanel"\textgreater{}...\textless{}/div\textgreater{} \tn 
% Row Count 4 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{3.7994 cm} x{13.4706 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap carousel}}  \tn
% Row 0
\SetRowColor{LightBackground}
básico & \textless{}div \seqsplit{id="carouselExampleSlidesOnly"} class="carousel slide" data-ride="carousel"\textgreater{}   \textless{}div class="carousel-inner"\textgreater{}     \textless{}div class="carousel-item active"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="First slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Second slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Third slide"\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 15 (+ 15)
% Row 1
\SetRowColor{white}
control & div \seqsplit{id="carouselExampleControls"} class="carousel slide" data-ride="carousel"\textgreater{}   \textless{}div class="carousel-inner"\textgreater{}     \textless{}div class="carousel-item active"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="First slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Second slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Third slide"\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{}   \textless{}a \seqsplit{class="carousel-control-prev"} \seqsplit{href="\#carouselExampleControls"} role="button" data-slide="prev"\textgreater{}     \textless{}span \seqsplit{class="carousel-control-prev-icon"} aria-hidden="true"\textgreater{}\textless{}/span\textgreater{}     \textless{}span class="sr-only"\textgreater{}Previous\textless{}/span\textgreater{}   \textless{}/a\textgreater{}   \textless{}a \seqsplit{class="carousel-control-next"} \seqsplit{href="\#carouselExampleControls"} role="button" data-slide="next"\textgreater{}     \textless{}span \seqsplit{class="carousel-control-next-icon"} aria-hidden="true"\textgreater{}\textless{}/span\textgreater{}     \textless{}span class="sr-only"\textgreater{}Next\textless{}/span\textgreater{}   \textless{}/a\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 44 (+ 29)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{3.7994 cm} x{13.4706 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap carousel (cont)}}  \tn
% Row 2
\SetRowColor{LightBackground}
\seqsplit{indicadores} & \textless{}div \seqsplit{id="carouselExampleIndicators"} class="carousel slide" data-ride="carousel"\textgreater{}   \textless{}ol class="carousel-indicators"\textgreater{}     \textless{}li \seqsplit{data-target="\#carouselExampleIndicators"} data-slide-to="0" class="active"\textgreater{}\textless{}/li\textgreater{}     \textless{}li \seqsplit{data-target="\#carouselExampleIndicators"} data-slide-to="1"\textgreater{}\textless{}/li\textgreater{}     \textless{}li \seqsplit{data-target="\#carouselExampleIndicators"} data-slide-to="2"\textgreater{}\textless{}/li\textgreater{}   \textless{}/ol\textgreater{}   \textless{}div class="carousel-inner"\textgreater{}     \textless{}div class="carousel-item active"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="First slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Second slide"\textgreater{}     \textless{}/div\textgreater{}     \textless{}div class="carousel-item"\textgreater{}       \textless{}img class="d-block w-100" src="..." alt="Third slide"\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{}   \textless{}a \seqsplit{class="carousel-control-prev"} \seqsplit{href="\#carouselExampleIndicators"} role="button" data-slide="prev"\textgreater{}     \textless{}span \seqsplit{class="carousel-control-prev-icon"} aria-hidden="true"\textgreater{}\textless{}/span\textgreater{}     \textless{}span class="sr-only"\textgreater{}Previous\textless{}/span\textgreater{}   \textless{}/a\textgreater{}   \textless{}a \seqsplit{class="carousel-control-next"} \seqsplit{href="\#carouselExampleIndicators"} role="button" data-slide="next"\textgreater{}     \textless{}span \seqsplit{class="carousel-control-next-icon"} aria-hidden="true"\textgreater{}\textless{}/span\textgreater{}     \textless{}span class="sr-only"\textgreater{}Next\textless{}/span\textgreater{}   \textless{}/a\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 38 (+ 38)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{3.7994 cm} x{13.4706 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap carousel (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
\seqsplit{captions} & \textless{}div class="carousel-item"\textgreater{}   \textless{}img src="..." alt="..."\textgreater{}   \textless{}div class="carousel-caption d-none d-md-block"\textgreater{}     \textless{}h5\textgreater{}...\textless{}/h5\textgreater{}     \textless{}p\textgreater{}...\textless{}/p\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 5 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.4902 cm} x{12.7798 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap modal}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & \textless{}!-{}- Button trigger modal -{}-\textgreater{} \textless{}button type="button" class="btn btn-primary" data-toggle="modal" data-target="\#exampleModal"\textgreater{}   Launch demo modal \textless{}/button\textgreater{} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
 & \textless{}!-{}- Modal -{}-\textgreater{} \textless{}div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" \seqsplit{aria-labelledby="exampleModalLabel"} aria-hidden="true"\textgreater{}   \textless{}div class="modal-dialog" role="document"\textgreater{}     \textless{}div class="modal-content"\textgreater{}       \textless{}div class="modal-header"\textgreater{}         \textless{}h5 class="modal-title" id="exampleModalLabel"\textgreater{}Modal title\textless{}/h5\textgreater{}         \textless{}button type="button" class="close" data-dismiss="modal" aria-label="Close"\textgreater{}           \textless{}span aria-hidden="true"\textgreater{}\×\textless{}/span\textgreater{}         \textless{}/button\textgreater{}       \textless{}/div\textgreater{}       \textless{}div class="modal-body"\textgreater{}         ...       \textless{}/div\textgreater{}       \textless{}div class="modal-footer"\textgreater{}         \textless{}button type="button" class="btn btn-secondary" data-dismiss="modal"\textgreater{}Close\textless{}/button\textgreater{}         \textless{}button type="button" class="btn btn-primary"\textgreater{}Save changes\textless{}/button\textgreater{}       \textless{}/div\textgreater{}     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 34 (+ 28)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.4902 cm} x{12.7798 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap modal (cont)}}  \tn
% Row 2
\SetRowColor{LightBackground}
 & \textless{}div class="modal-dialog modal-dialog-centered" role="document"\textgreater{} \tn 
% Row Count 3 (+ 3)
% Row 3
\SetRowColor{white}
smol and large & \textless{}!-{}- Large modal -{}-\textgreater{} \textless{}button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"\textgreater{}Large modal\textless{}/button\textgreater{}  \textless{}div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" \seqsplit{aria-labelledby="myLargeModalLabel"} aria-hidden="true"\textgreater{}   \textless{}div class="modal-dialog modal-lg"\textgreater{}     \textless{}div class="modal-content"\textgreater{}       ...     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{}  \textless{}!-{}- Small modal -{}-\textgreater{} \textless{}button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm"\textgreater{}Small modal\textless{}/button\textgreater{}  \textless{}div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" \seqsplit{aria-labelledby="mySmallModalLabel"} aria-hidden="true"\textgreater{}   \textless{}div class="modal-dialog modal-sm"\textgreater{}     \textless{}div class="modal-content"\textgreater{}       ...     \textless{}/div\textgreater{}   \textless{}/div\textgreater{} \textless{}/div\textgreater{} \tn 
% Row Count 30 (+ 27)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{2.9359 cm} x{14.3341 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap pagination}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{iconos} & \textless{}nav aria-label="Page navigation example"\textgreater{}   \textless{}ul class="pagination"\textgreater{}     \textless{}li class="page-item"\textgreater{}       \textless{}a class="page-link" href="\#" aria-label="Previous"\textgreater{}         \textless{}span aria-hidden="true"\textgreater{}\«\textless{}/span\textgreater{}         \textless{}span class="sr-only"\textgreater{}Previous\textless{}/span\textgreater{}       \textless{}/a\textgreater{}     \textless{}/li\textgreater{}     \textless{}li class="page-item"\textgreater{}\textless{}a class="page-link" href="\#"\textgreater{}1\textless{}/a\textgreater{}\textless{}/li\textgreater{}     \textless{}li class="page-item"\textgreater{}\textless{}a class="page-link" href="\#"\textgreater{}2\textless{}/a\textgreater{}\textless{}/li\textgreater{}     \textless{}li class="page-item"\textgreater{}\textless{}a class="page-link" href="\#"\textgreater{}3\textless{}/a\textgreater{}\textless{}/li\textgreater{}     \textless{}li class="page-item"\textgreater{}       \textless{}a class="page-link" href="\#" aria-label="Next"\textgreater{}         \textless{}span aria-hidden="true"\textgreater{}\»\textless{}/span\textgreater{}         \textless{}span class="sr-only"\textgreater{}Next\textless{}/span\textgreater{}       \textless{}/a\textgreater{}     \textless{}/li\textgreater{}   \textless{}/ul\textgreater{} \textless{}/nav\textgreater{} \tn 
% Row Count 21 (+ 21)
% Row 1
\SetRowColor{white}
 & \textless{}li class="page-item disabled"\textgreater{} \tn 
% Row Count 22 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & \textless{}li class="page-item active"\textgreater{} \tn 
% Row Count 23 (+ 1)
% Row 3
\SetRowColor{white}
 & \textless{}nav aria-label="..."\textgreater{}   \textless{}ul class="pagination"\textgreater{}     \textless{}li class="page-item disabled"\textgreater{}       \textless{}span class="page-link"\textgreater{}Previous\textless{}/span\textgreater{}     \textless{}/li\textgreater{} \tn 
% Row Count 28 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{grande} & \textless{}nav aria-label="..."\textgreater{}   \textless{}ul class="pagination pagination-lg"\textgreater{}     \textless{}li class="page-item disabled"\textgreater{} \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{2.9359 cm} x{14.3341 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap pagination (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
\seqsplit{pequeño} & \textless{}nav aria-label="..."\textgreater{}   \textless{}ul class="pagination pagination-sm"\textgreater{}     \textless{}li class="page-item disabled"\textgreater{} \tn 
% Row Count 3 (+ 3)
% Row 6
\SetRowColor{white}
\seqsplit{alineado} & \textless{}nav aria-label="Page navigation example"\textgreater{}   \textless{}ul class="pagination justify-content-center"\textgreater{} \tn 
% Row Count 6 (+ 3)
% Row 7
\SetRowColor{LightBackground}
 & \textless{}nav aria-label="Page navigation example"\textgreater{}   \textless{}ul class="pagination justify-content-end"\textgreater{} \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Modificar ancho manualmente}}  \tn
% Row 0
\SetRowColor{LightBackground}
Nos permite fijar manualmente el tamaño, que se atañe a las características que le pongamos dentro & @media (min-width: tamaño-pixels) \{ \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
Cuando la pantalla sea 700px o menos, hace x & @media (max-width: 700px)\{\} \tn 
% Row Count 9 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Controlar elementos según ancho & /{\emph{Para contorlar la altura de los elementos}}/ @media (max-width: 800px)\{     \#menu\{         height: 50px;     \}     \#contenido\{         height: 630px;         margin-top: 30px;     \}     a\{\} \} \tn 
% Row Count 19 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.3175 cm} x{12.9525 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Bootstrap Botones}}  \tn
% Row 0
\SetRowColor{LightBackground}
Crear botones & \textless{}button type="button" class="btn btn-primary"\textgreater{}Primary\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-secondary"\textgreater{}Secondary\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-success"\textgreater{}Success\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-danger"\textgreater{}Danger\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-warning"\textgreater{}Warning\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-info"\textgreater{}Info\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-light"\textgreater{}Light\textless{}/button\textgreater{} \textless{}button type="button" class="btn btn-dark"\textgreater{}Dark\textless{}/button\textgreater{} \tn 
% Row Count 17 (+ 17)
% Row 1
\SetRowColor{white}
 & \textless{}a class="btn btn-primary" href="\#" role="button"\textgreater{}Link\textless{}/a\textgreater{} \textless{}button class="btn btn-primary" type="submit"\textgreater{}Button\textless{}/button\textgreater{} \textless{}input class="btn btn-primary" type="button" value="Input"\textgreater{} \textless{}input class="btn btn-primary" type="submit" value="Submit"\textgreater{} \textless{}input class="btn btn-primary" type="reset" value="Reset"\textgreater{} \tn 
% Row Count 27 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}