สมัครสมาชิกวันนี้

  • Silver
  • สมาชิกระดับ Silver
  • ฟรี
  • สามารถเข้าถึงข้อมูลข่าวสารขั้นพื้นฐานได้
  • ข้อมูลผู้ประกอบการต่างประเทศ
  • ข้อมูลสถิติในประเทศและต่างประเทศ
  • มาตรการทางการค้าระหว่างประเทศ
  • กฎ ระเบียบ นโยบายในประเทศ
  • เทคโนโลยี และงานวิจัย
  • สมัครสมาชิก
A selection of Typography available with Xenon

Buttons: 1-4

Default Button Button 2 Button 3 Button 4

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

Buttons: Color

Button Grey Button Pink Button Red Button Purple Button Orange Button Blue

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

Buttons: Color Compounded with Buttons 2-4

Button Grey Button Pink Button Red Button Purple Button Orange Button Blue

<a href="#" class="button button-2 button-grey">Button Grey</a>
<a href="#" class="button button-3 button-pink">Button Pink</a>
<a href="#" class="button button-4 button-red">Button Red</a>
<a href="#" class="button button-2 button-purple">Button Purple</a>
<a href="#" class="button button-3 button-orange">Button Orange</a>
<a href="#" class="button button-4 button-blue">Button Blue</a>

Buttons: Square

Default Button Button 3 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue

<a href="#" class="button button-square">Default Button</a>
<a href="#" class="button button-square button-3">Button 3</a>
<a href="#" class="button button-square button-2 button-grey">Button Grey</a>
<a href="#" class="button button-square button-3 button-pink">Button Pink</a>

Buttons: Icons

Default Button Button 2 Button 3 Button 4 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue

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

Buttons: Icons Only

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

Buttons: Sizes

Button XLarge Button Large Button Medium Button Small Button XSmall

<a href="#" class="button button-xlarge button-grey">Button XLarge</a>
<a href="#" class="button button-large button-pink">Button Large</a>
<a href="#" class="button button-medium button-red">Button Medium</a>
<a href="#" class="button button-small button-purple">Button Small</a>
<a href="#" class="button button-xsmall button-orange">Button XSmall</a>

Buttons: Block

Default Button Button 2 Button 3 Button 4 Button Grey

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button button-block button-2">Button 2</a>
<a href="#" class="button button-block button-3">Button 3</a>
<a href="#" class="button button-block button-4">Button 4</a>
<a href="#" class="button button-block button-grey">Button Grey</a>

Headings

All HTML headings, <h1> through <h6> are available.

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

h5. Heading 5
h6. Heading 6

Emphasis

<em>

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

<strong>

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">…</p>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code><section></code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

 

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here…</p>
<pre>
&lt;p&gt;Sample text here…&lt;/p&gt;
</pre>

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
…
</table>

EB Sticky Cookie Notice

การตั้งค่าคุกกี้

การตั้งค่าความเป็นส่วนตัว

เมื่อท่านเข้าชมเว็บไซต์ของ อาจมีการจัดเก็บหรือกู้คืนข้อมูลจากเบราว์เซอร์ของท่านในรูปแบบของคุกกี้ ข้อมูลเหล่านี้อาจเป็นข้อมูลเกี่ยวกับท่าน ความชอบของท่าน หรืออุปกรณ์ของท่าน ซึ่งส่วนมากจะถูกใช้เพื่อทำให้เว็บไซต์สามารถทำงานได้ตามที่ท่านคาดหวัง ข้อมูลเหล่านี้มักไม่ได้ระบุถึงตัวท่านอย่างเฉพาะเจาะจง แต่สามารถให้ประสบการณ์การท่องเว็บแบบปรับแต่งเฉพาะสำหรับท่านมากขึ้น สถาบันยานยนต์ เคารพในสิทธิความเป็นส่วนตัวของท่าน โดยให้ท่านสามารถเลือกไม่อนุญาตการทำงานของคุกกี้บางประเภทได้ ท่านสามารถคลิกบนหัวข้อชื่อคุกกี้แต่ละประเภทเพื่อเรียนรู้เพิ่มเติมและปรับเปลี่ยนการตั้งค่าได้ ทั้งนี้ การปิดการใช้งานคุกกี้บางประเภทอาจส่งผลกระทบต่อประสบการณ์การใช้งานเว็บหรือบริการที่ได้เสนอให้แก่ท่านได้ นโยบายคุกกี้.