168 lines
5.8 KiB
HTML
168 lines
5.8 KiB
HTML
<div class="content-element__content">
|
|
<h2 class="content-element__title">Content Demo</h2>
|
|
<div class="typography">
|
|
<h3><i class="fas fa-search"></i> Quick start</h3>
|
|
<ol>
|
|
<li>
|
|
<p>Clone quick start repository</p>
|
|
<pre>
|
|
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>Install npm packages</p>
|
|
<pre>
|
|
cd ./webpack-bootstrap-ui-kit-quick-start.git
|
|
npm install
|
|
</pre
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>Edit ./src files</p>
|
|
</li>
|
|
<li>
|
|
<p>Start development server at https://127.0.0.1:8001/:</p>
|
|
<pre>yarn start</pre>
|
|
<p>Compile:</p>
|
|
<pre>yarn build</pre>
|
|
</li>
|
|
</ol>
|
|
<h2>
|
|
<i class="fas fa-search"></i> Header #2
|
|
<i class="fas fa-search"></i>
|
|
</h2>
|
|
<p>
|
|
<img
|
|
src="https://via.placeholder.com/200x200"
|
|
alt="Test Image"
|
|
class="image right"
|
|
/>Content Text Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry. Lorem Ipsum has been the industry's standard dummy
|
|
text ever since the 1500s, when an unknown printer took a galley of type
|
|
and scrambled it to make a type specimen book. It has survived not only
|
|
five centuries, but also the leap into electronic typesetting, remaining
|
|
essentially unchanged. It was popularised in the 1960s with the release of
|
|
Letraset sheets containing Lorem Ipsum passages, and more recently with
|
|
desktop publishing software like Aldus PageMaker including versions of
|
|
Lorem Ipsum.
|
|
</p>
|
|
<ol>
|
|
<li>
|
|
First
|
|
<ul>
|
|
<li>First</li>
|
|
<li>
|
|
Second
|
|
<ol>
|
|
<li>First</li>
|
|
<li>Second</li>
|
|
<li>Third</li>
|
|
</ol>
|
|
<ul>
|
|
<li>First</li>
|
|
<li>Second</li>
|
|
<li>Third</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
Content Text Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry. Lorem Ipsum has been the industry's standard
|
|
dummy text ever since the 1500s, when an unknown printer took a
|
|
galley of type and scrambled it to make a type specimen book. It
|
|
has survived not only five centuries, but also the leap into
|
|
electronic typesetting, remaining essentially unchanged. It was
|
|
popularised in the 1960s with the release of Letraset sheets
|
|
containing Lorem Ipsum passages, and more recently with desktop
|
|
publishing software like Aldus PageMaker including versions of
|
|
Lorem Ipsum.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>{paragraph} Second</p>
|
|
<p>{paragraph} Second #2</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
Content Text Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry. Lorem Ipsum has been the industry's standard
|
|
dummy text ever since the 1500s, when an unknown printer took a galley
|
|
of type and scrambled it to make a type specimen book. It has survived
|
|
not only five centuries, but also the leap into electronic
|
|
typesetting, remaining essentially unchanged. It was popularised in
|
|
the 1960s with the release of Letraset sheets containing Lorem Ipsum
|
|
passages, and more recently with desktop publishing software like
|
|
Aldus PageMaker including versions of Lorem Ipsum.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
<h2 class="text-center">Responsive Table #1: Default</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Header #1</th>
|
|
<th>Header #2</th>
|
|
<th>Header #3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Header #1">#1-1</td>
|
|
<td data-label="Header #2">#1-2</td>
|
|
<td data-label="Header #3">#1-3</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Header #1">#2-1</td>
|
|
<td data-label="Header #2">#2-2</td>
|
|
<td data-label="Header #3">#2-3</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Header #1">#3-1</td>
|
|
<td data-label="Header #2">#3-2</td>
|
|
<td data-label="Header #3">#3-3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="text-justify">
|
|
Content Text Lorem Ipsum is simply dummy text of the printing and
|
|
typesetting industry. Lorem Ipsum has been the industry's standard dummy
|
|
text ever since the 1500s, when an unknown printer took a galley of type
|
|
and scrambled it to make a type specimen book. It has survived not only
|
|
five centuries, but also the leap into electronic typesetting, remaining
|
|
essentially unchanged. It was popularised in the 1960s with the release of
|
|
Letraset sheets containing Lorem Ipsum passages, and more recently with
|
|
desktop publishing software like Aldus PageMaker including versions of
|
|
Lorem Ipsum.
|
|
</p>
|
|
<h2 class="text-center">Responsive Table #2: Border-less</h2>
|
|
<table class="table-none">
|
|
<thead>
|
|
<tr>
|
|
<th>Header #1</th>
|
|
<th>Header #2</th>
|
|
<th>Header #3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Header #1">#1-1</td>
|
|
<td data-label="Header #2">#1-2</td>
|
|
<td data-label="Header #3">#1-3</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Header #1">#2-1</td>
|
|
<td data-label="Header #2">#2-2</td>
|
|
<td data-label="Header #3">#2-3</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Header #1">#3-1</td>
|
|
<td data-label="Header #2">#3-2</td>
|
|
<td data-label="Header #3">#3-3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|