Custom Element UI Bstrap Template

Here are some elements that can be used for post or page purposes.

<div class='image-article'>
<img class='card-img-top' alt='#' src='#' type='image/webp'/>
</div>

h2. Bootstrap Typography

h1. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet.

Syntax Highlighter

Codebox syntax powered by highlightjs

<!--[ Default ]-->
<div class='PreC'>
<pre>code Here...</pre>
</div>

<!--[ HTML ]-->
<div class='PreC html'>
<pre>code Here...</pre>
</div>

<!--[ CSS ]-->
<div class='PreC css'>
<pre>code Here...</pre>
</div>

<!--[ Javascript ]-->
<div class='PreC js'>
<pre>code Here...</pre>
</div>

Table Content

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>
</div>

Blockquotes

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Alert Custom

<div class="alert alert-primary" role="alert">Lorem ipsum...</div>
<div class="alert alert-secondary" role="alert">Lorem ipsum...</div>
<div class="alert alert-success" role="alert">Lorem ipsum...</div>
<div class="alert alert-danger" role="alert">Lorem ipsum...</div>
<div class="alert alert-warning" role="alert">Lorem ipsum...</div>
<div class="alert alert-info" role="alert">Lorem ipsum...</div>
<div class="alert alert-light" role="alert">Lorem ipsum...</div>
<div class="alert alert-dark" role="alert">Lorem ipsum...</div>

Text selection

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Custom Buttons

<a class="btn" href="#" target="_blank">Default</a>
<a class="btn preview" href="#" target="_blank">Preview</a>
<a class="btn download" href="#" target="_blank">Download</a>
<a class="btn link" href="#" target="_blank">Link</a>
<a class="btn cart" href="#" target="_blank">Shop cart</a>
<a class="btn share" href="#" target="_blank">Share</a>
<a class="btn info" href="#" target="_blank">More info</a>
Default Preview Download Link Shop cart Contact More info

Player Video and Audio

Video and audio players are built using plugins from plyr io

Audio

<!--[ Audio Player ]-->
<div class='PlayerItm'>
<audio class='PlayerC' controls>
  <source src='url_audio.mp3' type='audio/mp3'>
</audio>
</div>

Video

<!--[ Video Player ]-->
<div class='PlayerItm'>
<video preload='metadata' class='PlayerC' controls playsinline crossorigin='anonymous'>
  <source src='url_video.mp4' type='video/mp4'>
  <track kind='captions' label='English' src='caption_en.vtt' srclang='en' default />
</video>
</div>

YouTube

<!--[ YouTube Player ]-->
<div class='PlayerItm'>
  <div class='PlayerC' data-plyr-embed-id='video_ID_YouTube' data-plyr-provider='youtube'></div>
</div>
Labels:

Komentar

Posting Komentar