Thursday, 30 June 2016 22:30

Joomla - Typography

Written by
(0 votes)

h1. Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h2. Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h3. Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h4. Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h5. Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h6. Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Item
  • Item
  • Item
    • Item
    • Item
    • Item
      • Item
      • Item
      • Item
  1. tem
  2. Item
  3. Item
    1. Item
    2. Item
    3. Item
      1. Item
      2. Item
      3. Item

Button: 1-3

Default Button Button 2 Button 3

<a href="#" class="btn">Default Button</a>
<a href="#" class="btn btn-2">Button 2</a>
<a href="#" class="btn btn-3">Button 3</a>

Button: Color

Button silver Button Pink Button Red Button Purple Button Orange Button Blue

<a href="#" class="btn btn-silver">Button silver</a>
<a href="#" class="btn btn-pink">Button Pink</a>
<a href="#" class="btn btn-red">Button Red</a>
<a href="#" class="btn btn-purple">Button Purple</a>
<a href="#" class="btn btn-orange">Button Orange</a>
<a href="#" class="btn btn-blue">Button Blue</a>

Button: Color Compounded with Button 2-3

Button silver Button Pink Button Red Button Purple Button Orange Button Blue

<a href="#" class="btn btn-2 btn-silver">Button silver</a>
<a href="#" class="btn btn-3 btn-pink">Button Pink</a>
<a href="#" class="btn btn-3 btn-red">Button Red</a>
<a href="#" class="btn btn-2 btn-purple">Button Purple</a>
<a href="#" class="btn btn-3 btn-orange">Button Orange</a>
<a href="#" class="btn btn-3 btn-blue">Button Blue</a>

Button: Square

Default Button Button 3 Button silver Button Pink

<a href="#" class="btn btn-square">Default Button</a>
<a href="#" class="btn btn-square btn-3">Button 3</a>
<a href="#" class="btn btn-square btn-2 btn-silver">Button silver</a>
<a href="#" class="btn btn-square btn-3 btn-pink">Button Pink</a>

Button: Icons

Default Button Button 2 Button 3 Button silver Button Pink Button Red Button Purple Button Orange Button Blue

<a href="#" class="btn"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="btn btn-2"><i class="fa fa-fw fa-cloud"></i> Button 2</a>
<a href="#" class="btn btn-3"><i class="fa fa-fw fa-star"></i> Button 3</a>
<a href="#" class="btn btn-silver"><i class="fa fa-fw fa-tag"></i> Button silver</a>
<a href="#" class="btn btn-pink"><i class="fa fa-fw fa-university"></i> Button Pink</a>
<a href="#" class="btn btn-red"><i class="fa fa-fw fa-edit"></i> Button Red</a>
<a href="#" class="btn btn-purple"><i class="fa fa-fw fa-lock"></i> Button Purple</a>
<a href="#" class="btn btn-orange"><i class="fa fa-fw fa-clock-o"></i> Button Orange</a>
<a href="#" class="btn btn-blue"><i class="fa fa-fw fa-arrows"></i> Button Blue</a>

Button: Icons Only

<a href="#" class="btn"><i class="fa fa-fw fa-download"></i></a>
<a href="#" class="btn btn-2"><i class="fa fa-fw fa-cloud"></i></a>
<a href="#" class="btn btn-3"><i class="fa fa-fw fa-star"></i></a>
<a href="#" class="btn btn-silver"><i class="fa fa-fw fa-tag"></i></a>
<a href="#" class="btn btn-pink"><i class="fa fa-fw fa-university"></i></a>
<a href="#" class="btn btn-red"><i class="fa fa-fw fa-edit"></i></a>
<a href="#" class="btn btn-purple"><i class="fa fa-fw fa-lock"></i></a>
<a href="#" class="btn btn-orange"><i class="fa fa-fw fa-clock-o"></i></a>
<a href="#" class="btn btn-blue"><i class="fa fa-fw fa-arrows"></i></a>

Button: Block

Default btn Button 2 Button 3

<a href="#" class="btn btn-block">Default btn</a>
<a href="#" class="btn btn-block btn-2">btn 2</a>
<a href="#" class="btn btn-block btn-3">btn 3</a>

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

Responsive tables

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Inline form

Send invitation
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="This email address is being protected from spambots. You need JavaScript enabled to view it.">
  </div>
  <btn type="submit" class="btn btn-default">Send invitation</btn>
</form>
$
.00
Transfer cash

Horizontal form

Sign in
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <btn type="submit" class="btn btn-default">Sign in</btn>
    </div>
  </div>
</form>

Checkboxes and radios

Default (stacked)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>
Inline checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
Read 670 times Last modified on Wednesday, 29 January 2020 16:33

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

👀 Quick Search 👇

Explore More...

  • I am receiving SPAM message in WhatsApp and Groups.
    I am receiving SPAM message in WhatsApp and Groups. I am receiving SPAM message in WhatsApp and Groups. This article will explain you how to report someone as spammer on WhatsApp personal or Groups so you can stop receiving…
    Read more...
  • Explore
    What you'll find in this section Most of us happy yet many doesn’t know how to tackle with life exploring good or bad! Life, as always is thrilling by discovering…
  • How to live together as Good Neighbors Nagas and Meiteis
    How to live together as Good Neighbors Nagas and Meiteis History of the Meiteis (Manipuris): In the past, Meitei kingdom was known as Kangleipak. The present name 'Manipur' evolved along with the sanskritisation of Meitei population during the 18th century.…
    Read more...
  • Joomla - Typography
    h1. Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. h2. Heading 2 Lorem…
    Read more...
  • Don't go through life without goals
    (adsbygoogle = window.adsbygoogle || []).push({});
  • Judges 1 to 5
    Deborah was a multi talented women. She was a judge and a prophetess in the Israel. She Received God's knowledge and wisdom through her faith and served as a prophetess.…
  • Correct way for greeting Christmas
    Correct way for greeting Christmas Merry Christmas or Happy Christmas? For many Christians and non-believers, the month of December is mostly associated with the music from Boney M or Jim Rev collection in the shopping…

Stories and pictures are of their respective owners or the posters.       [ About Us]   [Contact Us ]         Please share us if you found any unrelated information.