Update Article: 120

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงามและได้รับความนิยมได้อย่างรวดเร็วและง่ายดาย โดย Bootstrap มีคลาส CSS และ JavaScript ที่ถูกออกแบบมาเพื่อช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่ตอบสนองได้ (responsive) และมีความสามารถในการปรับแต่งรูปแบบต่าง ๆ ได้ง่ายดาย
การใช้ Bootstrap นั้นมีขั้นตอนง่าย ๆ ดังนี้
<ol>
<li>
ดาวน์โหลด Bootstrap จากเว็บไซต์ <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow">https://getbootstrap.com/</a>
</li>
<li>
เพิ่ม CSS และ JavaScript ของ Bootstrap ลงในหน้า HTML โดยใช้ tag <code>&lt;link&gt;</code> และ <code>&lt;script&gt;</code> ตามลำดับดังนี้
</li>
</ol>
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &nbsp; &lt;title&gt;My Bootstrap Page&lt;/title&gt; &nbsp; &nbsp; &lt;!-- ส่วนของ CSS --&gt; &nbsp; &nbsp; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt; &nbsp; &nbsp; &lt;!-- ส่วนของ JavaScript ที่ใช้กับ jQuery --&gt; &nbsp; &nbsp; &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt; &nbsp; &nbsp; &lt;!-- ส่วนของ JavaScript ที่ใช้กับ Popper.js --&gt; &nbsp; &nbsp; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt; &nbsp; &nbsp; &lt;!-- ส่วนของ JavaScript ที่ใช้กับ Bootstrap --&gt; &nbsp; &nbsp; &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;
&lt;!-- ตรงนี้คือส่วนของเนื้อหาบนหน้าเว็บไซต์ --&gt;
&lt;/body&gt; &lt;/html&gt;
<ol start="3">
<li>
เริ่มใช้งาน Bootstrap โดยใช้คลาสที่เตรียมไว้ให้ ดังนี้
</li>
</ol>
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &nbsp; &lt;title&gt;My Bootstrap Page&lt;/title&gt; &nbsp; &nbsp; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt; &nbsp; &nbsp; &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt; &nbsp; &nbsp; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt; &nbsp; &nbsp; &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;
&lt;div class="container"&gt; &nbsp; &lt;h1&gt;My Bootstrap Page&lt;/h1&gt; &nbsp; &lt;p&gt;This is some text.&lt;/p&gt; &nbsp; &lt;button type="button" class="btn btn-primary"&gt;Click me&lt;/button&gt; &lt;/div&gt;
&lt;/body&gt; &lt;/html&gt;
ในตัวอย่างนี้ เราใช้คลาส <code>.container</code> เพื่อกำหนดขนาดของเนื้อหาบนหน้าเว็บไซต์ และใช้คลาส <code>.btn</code> และ <code>.btn-primary</code> เพื่อกำหนดรูปแบบของปุ่ม
Bootstrap ยังมีคลาสอื่น ๆ ที่ใช้งานได้ง่าย ๆ เช่น <code>.row</code> สำหรับกำหนดแถว และ <code>.col-*</code> สำหรับกำหนดคอลัมน์ โดย * จะเป็นตัวเลขที่ระบุขนาดของคอลัมน์
สรุปคือ Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงาม

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home