TLA Library

WELCOME TO TLA LIBRARY!

Getting Started

1. Important jquery

Click jquery.com to learn more about jQuery.

2. Important Fontawesome

Click fontawesome.com to learn more about Fontawesome.

3. Important TLA Library

Copy the following code to import TLA Library

          
<link rel="stylesheet" href="https://huynhvangioiem.github.io/tla-library/TLALibrary.vs1.min.css">
<script src="https://huynhvangioiem.github.io/tla-library/TLALibrary.vs1.min.js"></script>

I. Layout

1. Basic Layout

col-12

col-6

col-4

col-2

col-1

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-7

col-5

col-11

col-1

col-2

col-1

col-4

col-2

col-3

          
<!-- This is code for basic layout -->
<div class="container-fluid">
  <div class="row">
    <div class="col-12">col-12</div>

    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>

    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>

    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>

    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
  </div>
  <div class="row">
    <div class="col-12">col-12</div>

    <div class="col-1">col-1</div>
    <div class="col-11">col-11</div>

    <div class="col-2">col-2</div>
    <div class="col-10">col-10</div>

    <div class="col-3">col-3</div>
    <div class="col-9">col-9</div>

    <div class="col-4">col-4</div>
    <div class="col-8">col-8</div>

    <div class="col-5">col-5</div>
    <div class="col-7">col-7</div>
    
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>

    <div class="col-7">col-7</div>
    <div class="col-5">col-5</div>

    <div class="col-11">col-11</div>
    <div class="col-1">col-1</div>
  </div>
  <div class="row">
    <div class="col-2">col-2</div>
    <div class="col-1">col-1</div>
    <div class="col-4">col-4</div>
    <div class="col-2">col-2</div>
    <div class="col-3">col-3</div>
  </div>
</div>

2. Nested Layout

This demo looks like a basic website layout. we want you to understand that they can nested.

Header

Navigation

Side Bar

Body Area

This is list items

Item 1

Img

Quantity

Price

Item 2

Img-1

Img-2

Quantity

Item 3

Img

Price

Item 4

Img

Quantity

Price

          
<!-- This is code for nested layout -->
<div class="container-fluid">
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Navigation</div>
</div>
<div class="row">
<div class="col-3">Side Bar</div>
<div class="col-9">
  <div class="row">
      <div class="col-12">Body Area</div>
  </div>
  <div class="row">
      <div class="col-12">This is list items</div>
      <div class="col-3">
          <div class="row">
              <div class="col-12">Item 1</div>
              <div class="col-12">Img</div>
              <div class="col-5">Quantity</div>
              <div class="col-7">Price</div>
          </div>
      </div>
      <div class="col-3">
          <div class="row">
              <div class="col-12">Item 2</div>
              <div class="col-6">Img-1</div>
              <div class="col-6">Img-2</div>
              <div class="col-12">Quantity</div>
          </div>
      </div>
      <div class="col-3">
          <div class="row">
          <div class="col-12">Item 3</div>
          <div class="col-12">Img</div>
          <!-- <div class="col-5">Quantity</div> -->
          <div class="col-7">Price</div> </div>
      </div>
      <div class="col-3">
          <div class="row">
              <div class="col-12">Item 4</div>
              <div class="col-12">Img</div>
              <div class="col-5">Quantity</div>
              <div class="col-5">Price</div>
          </div>
      </div>
  </div>
</div>
</div> 
<div class="row"> 
<div class="col-12">Footer</div>
</div>
</div>

3. Responsive Layout

col-2 col-m-4 col-s-12

col-3 col-m-6 col-s-6

col-4 col-m-12 col-s-12

col-6 col-m-6 col-s-12

col-12 col-m-12 col-s-12

col-4 col-m-0 col-s-0

col-8 col-m-12 col-s-12

col-5 col-m-6 col-s-0

col-7 col-m-6 col-s-12

col-4 col-m-4 col-s-6

col-4 col-m-4 col-s-6 col-o-4 col-m-o-4

col-4 col-m-4 col-s-12 col-o-4 col-m-o-4


<div class="container-fluid">
    <div class="row">
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
        <div class="col-2 col-m-4 col-s-12">col-2 col-m-4 col-s-12</div>
    </div>
    <div class="row">
        <div class="col-3 col-m-6 col-s-6">col-3 col-m-6 col-s-6</div>
        <div class="col-3 col-m-6 col-s-6">col-3 col-m-6 col-s-6</div> 
        <div class="col-3 col-m-6 col-s-6">col-3 col-m-6 col-s-6</div> 
        <div class="col-3 col-m-6 col-s-6">col-3 col-m-6 col-s-6</div> 
    </div> 
    <div class="row"> 
        <div class="col-4 col-m-12 col-s-12">col-4 col-m-12 col-s-12</div> 
        <div class="col-4 col-m-12 col-s-12">col-4 col-m-12 col-s-12</div> 
        <div class="col-4 col-m-12 col-s-12">col-4 col-m-12 col-s-12</div> 
    </div> 
    <div class="row"> 
        <div class="col-6 col-m-6 col-s-12">col-6 col-m-6 col-s-12</div> 
        <div class="col-6 col-m-6 col-s-12">col-6 col-m-6 col-s-12</div> 
    </div> 
    <div class="row"> 
        <div class="col-12 col-m-12 col-s-12">col-12 col-m-12 col-s-12</div> 
    </div> 
    <div class="row">
        <div class="col-4 col-m-0 col-s-0">col-4 col-m-0 col-s-0</div> 
        <div class="col-8 col-m-12 col-s-12">col-8 col-m-12 col-s-12</div> 
    </div> 
    <div class="row"> 
        <div class="col-5 col-m-6 col-s-0">col-5 col-m-6 col-s-0</div> 
        <div class="col-7 col-m-6 col-s-12">col-7 col-m-6 col-s-12</div> 
    </div> 
    <div class="row"> 
        <div class="col-4 col-m-4 col-s-6">col-4 col-m-4 col-s-6</div> 
        <div class="col-4 col-m-4 col-s-6 col-o-4 col-m-o-4">col-4 col-m-4 col-s-6 col-o-4 col-m-o-4</div> 
    </div> 
    <div class="row"> 
        <div class="col-4 col-m-4 col-s-12 col-o-4 col-m-o-4">col-4 col-m-4 col-s-12 col-o-4 col-m-o-4</div> 
    </div> 
</div>

4. For Example: Here are the websites that apply this layout

II. Navigation

1. Basic example

A basic example of the navbar with the most common elements like link, search form, brand, and dropdown.

          
<div class="container-fluid">
  <nav class="navbar navbar-dark"> 
    <a href="#!" class="navbar-brand">Brand</a> 
    <span class="navbar-toggler" data-target="#menu"><i class="fas fa-bars"></i></span> 
    <div class="navbar-collapse" id="menu" > 
      <ul class="navbar-nav navbar-left"> 
        <li class="nav-item"><a class="nav-link" href="#!">Home</a></li> 
        <li class="nav-item"> 
          <ul class="sub-nav"> 
            <li class="nav-item"><a href="#!">Sub nav 1</a></li> 
            <li class="nav-item"><a href="#!">Sub nav 2</a></li> 
            <li class="nav-item">
              <ul class="sub-nav"> 
                <li class="nav-item"><a href="#!">Sub nav 1</a></li> 
                <li class="nav-item"><a href="#!">Sub nav 2</a></li> 
                <li class="nav-item"><a href="#!">Sub nav 3</a></li> 
              </ul> 
              <a href="#!">Sub nav 3</a> 
            </li> 
            <li class="nav-item"><a href="#!">Sub nav 4</a></li> 
          </ul> 
          <a class="nav-link" href="#!">Item 1</a>
        </li> 
        <li class="nav-item"><a class="nav-link" href="#!">Item 2</a></li> 
        <li class="nav-item"><a class="nav-link" href="#!">Item 3</a></li>
      </ul> 
      <ul class="navbar-nav navbar-right"> 
        <li class="nav-item nav-search"> 
          <form action="" method="get"> 
            <input type="text" name="search" id="" placeholder="Search"> 
            <button type="submit"><i class="fas fa-search"></i></button> 
          </form> 
        </li> 
        <li class="nav-item"><a class="nav-link" href="#!">Sign In</a></li> 
        <li class="nav-item"> <a class="nav-link" href="#!">Sign Out</a></li> 
      </ul>
    </div> 
  </nav> 
</div>

2. Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .className for corresponding background colors.

          
<nav class="navbar navbar-light">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-primary">
  <!-- Navbar content -->
</nav> 

<nav class="navbar navbar-danger"> 
  <!-- Navbar content --> 
</nav> 

<nav class="navbar navbar-success"> 
  <!-- Navbar content --> 
</nav> 

<nav class="navbar navbar-warning"> 
  <!-- Navbar content --> 
</nav> 

<nav class="navbar navbar-info"> 
  <!-- Navbar content --> 
</nav>

III. Button

1. Basic Buttons

TLA_button includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Link's style is a button

          
<div class="container-fluid">
  <div class="row">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <a href="#!" class="btn btn-primary">Link's style is a button</a>
  </div> 
</div>

2. Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Link's style is a button

          
<div class="container-fluid">
  <div class="row">
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

    <a href="#!" class="btn btn-outline-primary">Link's style is a button</a>
  </div> 
</div>

3. Rounded Buttons

Add .btn-rounded class to make the button rounded.

Link's style is a button

          
<div class="container-fluid">
  <div class="row">
    <button type="button" class="btn btn-rounded btn-primary">Primary</button>
    <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-rounded btn-success">Success</button>
    <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-rounded btn-warning">Warning</button>
    <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
    <button type="button" class="btn btn-rounded btn-light">Light</button>
    <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>

    <a href="#!" class="btn btn-rounded btn-outline-primary">Link's style is a button</a>
  </div> 
</div>

4. Social Buttons

Combining our icons and custom colors you can create social buttons. We use icons from Fontawesome.com

          
<div class="container-fluid"> 
  <div class="row"> 
    <!-- Facebook --> 
    <a class="btn btn-social" style="background-color: #3b5998;" href="#!"> 
      <i class="fab fa-facebook-f"></i> 
    </a>
    <!-- Twitter --> 
    <a class="btn btn-rounded btn-social" style="background-color: #55acee;" href="#!"> 
      <i class="fab fa-twitter"></i> 
    </a>
    <!-- Google --> 
    <a class="btn btn-social" style="background-color: #dd4b39;" href="#!"> 
      <i class="fab fa-google"></i> 
    </a>
    <!-- Instagram --> 
    <a class="btn btn-rounded btn-social" style="background-color: #ac2bac;" href="#!"> 
      <i class="fab fa-instagram"></i> 
    </a>
    <!-- Linkedin --> 
    <a class="btn btn-social" style="background-color: #0082ca;" href="#!"> 
      <i class="fab fa-linkedin-in"></i> 
    </a>
    <!-- Pinterest --> 
    <a class="btn btn-rounded btn-social" style="background-color: #c61118;" href="#!"> 
      <i class="fab fa-pinterest"></i> 
    </a> 
    <!-- Vkontakte --> 
    <a class="btn btn-social" style="background-color: #4c75a3;" href="#!"> 
      <i class="fab fa-vk"></i> 
    </a> 
    <!-- Stack overflow --> 
    <a class="btn btn-rounded btn-social" style="background-color: #ffac44;" href="#!"> 
      <i class="fab fa-stack-overflow"></i> 
    </a> 
    <!-- Youtube --> 
    <a class="btn btn-social" style="background-color: #ed302f;" href="#!"> 
      <i class="fab fa-youtube"></i>
    </a> 
    <!-- Slack --> 
    <a class="btn btn-rounded btn-social" style="background-color: #481449;" href="#!"> 
      <i class="fab fa-slack-hash"></i>
    </a> 
    <!-- Github --> 
    <a class="btn btn-social" style="background-color: #333333;" href="#!"> 
      <i class="fab fa-github"></i>
    </a> 
    <!-- Dribbble -->
    <a class="btn btn-rounded btn-social" style="background-color: #ec4a89;" href="#!"> 
      <i class="fab fa-dribbble"></i> 
    </a> 
    <!-- Reddit --> 
    <a class="btn btn-social" style="background-color: #ff4500;" href="#!"> 
      <i class="fab fa-reddit-alien"></i> 
    </a> 
    <!-- Whatsapp --> 
    <a class="btn btn-rounded btn-social" style="background-color: #25d366;" href="#!"> 
      <i class="fab fa-whatsapp"></i>
    </a> 
  </div>
</div>

IV. Toast Message

1. Basic Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Click these buttons to call toast messages.

How to use?

With toast messages you can call it anywhere as a javascript function! But in html yoy must have <div id="toast"></div>.This example use a button to call the toast. Its source code is as follows:

          
<!-- HTML -->
<div id="toast"></div>
<button type="button" onclick="showToast();" class="btn btn-primary">Primary</button>
<!-- Javascript -->
<script>
  function showToast() { 
    toast({ 
      title: "This is title of message.", //Message title
      message: " This is a content of message. This message's style Success!", //Message content 
      style: "success", //Style of message 
      duration: 5000, //duration - default duration is 10s 
      iconType: "info" //icon for message - have four icons: info, success, warning, danger. If you omit this attribute, the default will be same the "style" or not displayed
    }); 
  }
</script>

2. Colored Toast

If you want to change the background color for toast. You can find out the example follow.

          
<!-- HTML -->
<div id="toast"></div>
<button type="button" onclick="showToast();" class="btn btn-success">Success</button>
<!-- Javascript -->
<script>
  function showToast() { 
    toast({ 
      style: "success-colored", //Style of message 
    }); 
  }
</script>

3. Outline Toast

          
<!-- HTML -->
<div id="toast"></div>
<button type="button" onclick="showToast();" class="btn btn-success">Success</button>
<!-- Javascript -->
<script>
  function showToast() { 
    toast({ 
      style: "success-colored", //Style of message 
    }); 
  }
</script>

Huynh Van Gioi Em - TLA

Web Developer

23/11/199X

huynhvangioiem@gmail.com

0335687425