คอลัมน์

ตัวช่วยการจัดแบ่งเนื้อหาให้เป็นคอลัมน์เพื่อเพิ่มความสวยงามในการจัดเรียงเนื้อหา สามาระใช้ระบบ Grid Bootstrap หรือ ใช้ระบบพื้นฐาน คือการนำ class=col-xx มาบวกกันให้เป็น 100 แล้วคอบด้วย class=row ตามตัวอย่างด้านล่างนี้

 

แบ่ง 10 คอลัมน์ เท่ากัน

Example

col-10
col-10
col-10
col-10
col-10
col-10
col-10
col-10
col-10
col-10

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
<div class=”col-10″>col-10</div>
</div>

 

แบ่ง 5 คอลัมน์ เท่ากัน

Example

col-20
col-20
col-20
col-20
col-20

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-20″>col-20</div>
<div class=”col-20″>col-20</div>
<div class=”col-20″>col-20</div>
<div class=”col-20″>col-20</div>
<div class=”col-20″>col-20</div>
</div>

 

แบ่ง 4 คอลัมน์ เท่ากัน

Example

col-25
col-25
col-25
col-25

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-25″>col-25</div>
<div class=”col-25″>col-25</div>
<div class=”col-25″>col-25</div>
<div class=”col-25″>col-25</div>
</div>

 

แบ่ง 3 คอลัมน์ เท่ากัน

Example

col-33
col-33
col-33

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-33″>col-33</div>
<div class=”col-33″>col-33</div>
<div class=”col-33″>col-33</div>
</div>

 

แบ่ง 2 คอลัมน์ เท่ากัน

Example

col-50
col-50

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-50″>col-50</div>
<div class=”col-50″>col-50</div>
</div>

 

แบ่ง 2 คอลัมน์ อัตราส่วน 8:2

Example

col-80
col-20

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-80″>col-80</div>
<div class=”col-20″>col-20</div>
</div>

 

แบ่ง 2 คอลัมน์ อัตราส่วน 6:4

Example

col-60
col-40

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-60″>col-60</div>
<div class=”col-40″>col-40</div>
</div>

 

แบ่ง 3 คอลัมน์ อัตราส่วน 6:2:2

Example

col-60
col-20
col-20

Code

<div class=”row” style=”text-align: center;”>
<div class=”col-60″>col-60</div>
<div class=”col-20″>col-20</div>
<div class=”col-20″>col-20</div>
</div>

ตัวอักษร

รูปแบบตัวอักษร

 

หัวข้อ

การใส่ข้อความให้เป็นรูปแบบหัวข้อ มีตั้งแต่ขนาด <h1> ถึง <h6> โดยการใส่แท็ก h1 ถึง h6 คอบตำแหน่งที่เราต้องการให้เป็นหัวข้อ

Example

H1 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

H2 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

H3 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

H4 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

H5 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้
H6 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

Code

<h1>H1 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h1>
<h2>H2 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h2>
<h3>H3 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h3>
<h4>H4 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h4>
<h5>H5 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h5>
<h6>H6 ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</h6>

 

ขนาด

การเพิ่มและลดขนาดตัวหนังสือ ซึ่งปกติทางเวิร์ดเพรสจะไม่สามารถเปลี่ยนขนาดเองเป็น px ได้ จะระบุเป็นได้แค่ paragraphs เท่านั้น เราจึงได้ทำ class เพื่อเพิ่มลดขนาดได้หลากหลายมากขึ้น

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

Code

<p class=”lead”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</p>
<p class=”desc”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</p>
<p>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</p>
<small>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</small>

 

ที่อยู่

ตัวอย่างการใส่โค้ดที่อยู่ ซึ่งสามารถขั้นบรรทัดใหม่ได้ด้วย <br>

 

Example

Twitter, Inc.795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]

Code

<address>
<strong><br>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title=“Phone”>P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href=“mailto:#”>[email protected]</a>
</address>

ไอคอน

การเพิ่มไอคอนในบทความของเรา โดยการใส่แท็ก i class=”si-xxx” ซึ่งจะมีไอคอนมากมายให้เลือกใส่ได้ อ่านเพิ่มเติม และ เรายังเพิ่มไอคอนของทาง Font-Awesome เข้ามาเพื่อทำให้มีไอคอนให้เลือกได้ครอบคลุมความต้องการมากยิ่งขึ้น
 

ตัวอย่างไอคอน

seed-icon

Code

<i class=”si-xxx”>…</i>

รูปภาพ

ตัวอย่าง การจัดรูปแบบรูปภาพทั่วไป แบบขอบมน แบบวงกลม และ แบบมีขอบ
 

Example

...  ...  ...  ...

Code

<img src=”…” alt=”…”>
<img src=”…” alt=”…” class=”img-rounded”>
<img src=”…” alt=”…” class=”img-circle”>
<img src=”…” alt=”…” class=”img-thumbnail”>

ปุ่มกด

ตัวอย่างการจัดการรูปแบบปุ่มกด การเพิ่มขนาดปุ่มกด และ สีปุ่มกดแบบต่างๆ

 

ขนาดปุ่ม

Example

รายละเอียด รายละเอียด รายละเอียด

Code

<a class=”btn btn-lg” href=”#”>รายละเอียด</a>
<a class=”btn” href=”#”>รายละเอียด</a>
<a class=”btn btn-sm” href=”#”>รายละเอียด</a>

 

สีปุ่ม

Example

 รายละเอียด รายละเอียด รายละเอียด รายละเอียด รายละเอียด รายละเอียด

Code

<a class=”btn” href=”#”>รายละเอียด</a>
<a class=”btn btn-primary” href=”#”>รายละเอียด</a>
<a class=”btn btn-success” href=”#”>รายละเอียด</a>
<a class=”btn btn-info” href=”#”>รายละเอียด</a>
<a class=”btn btn-warning” href=”#”>รายละเอียด</a>
<a class=”btn btn-danger” href=”#”>รายละเอียด</a>

ตาราง

รูปแบบตารางพื้นฐาน สามารถใส่ class=table เพื่อจัดการความสวยงามของตาราง และ ยังมีรูปแบบหลากหลายเมื่อเพิ่ม class=table table-striped , class=table table-bordered เป็นต้น

 

Example

หัวข้อ หัวข้อ หัวข้อ
บรรทัด1 บรรทัด1 บรรทัด1
บรรทัด2 บรรทัด2 บรรทัด2
บรรทัด3 บรรทัด3 บรรทัด3

Code

<table class=”table table-bordered”>
<thead>
<tr class=”success”>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
<th>หัวข้อ</th>
</tr>
</thead>
<tbody>
<tr>
<td>บรรทัด1</td>
<td>บรรทัด1</td>
<td>บรรทัด1</td>
</tr>
<tr>
<td>บรรทัด2</td>
<td>บรรทัด2</td>
<td>บรรทัด2</td>
</tr>
<tr>
<td>บรรทัด3</td>
<td>บรรทัด3</td>
<td>บรรทัด3</td>
</tr>
</tbody>
</table>

กล่อง

กล่องคำคม(blockquotes)

กล่องคำคม คือ การสร้างกล่องขึ้นมาเพื่อเน้นคำหรือประโยคให้ดูโดดเด่นและเป็นจุดสำคัญให้คนอ่านเห็นได้ชัดเจน

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

Code

<blockquote>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</blockquote>

 

กล่องจัดรูปแบบ(pre)

กล่องจัดรูปแบบ คือ กล่องที่ใช้สำหรับจัดรูปแบบเนื้อหาได้สะดวกยิ่งขึ้น ซึ่งถ้าข้อความที่เราเขียนอยู่ในกล่องนี้จะเว้นวรรคและขึ้นบรรทัดใหม่ เหมือนตามที่เราเขียนเลย

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้

Code

<pre>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้</pre>

เพิ่มเติม

 

สีตัวอักษร

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

Code

<p class=”text-theme”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-muted”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-primary”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-success”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-info”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-warning”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”text-danger”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>

 

สีพื้นหลัง

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

Code

<p class=”bg-theme”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bg-primary”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bg-success”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bg-info”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bg-warning”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bg-danger”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>

 

คำบรรยาย(CallOut)

Example

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน

Code

<p class=”bs-callout bs-callout-theme”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bs-callout bs-callout-primary”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bs-callout bs-callout-success”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bs-callout bs-callout-info”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bs-callout bs-callout-warning”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>
<p class=”bs-callout bs-callout-danger”>ต้นถั่วเผาต้นถั่วในกระทะถั่วร้องไห้ กำเนิดจากรากเดียวกัน</p>