Taninut.com
| Content ID | 120 |
|---|---|
| Category ID | 1 |
| Writer ID | (not set) |
| User ID | (not set) |
| Lang Mode | th |
| Content Name | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Content Url | Bootstrap-CSS-framework-คืออะไร-ใช้งานยังไง |
| Content Desc | <p data-pm-slice="1 1 []">Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงามและได้รับความนิยมได้อย่างรวดเร็วและง่ายดาย โดย Bootstrap มีคลาส CSS และ JavaScript ที่ถูกออกแบบมาเพื่อช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่ตอบสนองได้ (responsive) และมีความสามารถในการปรับแต่งรูปแบบต่าง ๆ ได้ง่ายดาย</p> <p>การใช้ Bootstrap นั้นมีขั้นตอนง่าย ๆ ดังนี้</p> <ol> <li> <p>ดาวน์โหลด Bootstrap จากเว็บไซต์ <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow">https://getbootstrap.com/</a></p> </li> <li> <p>เพิ่ม CSS และ JavaScript ของ Bootstrap ลงในหน้า HTML โดยใช้ tag <code><link></code> และ <code><script></code> ตามลำดับดังนี้</p> </li> </ol> <p style="padding-left: 80px;"><span style="font-size: 10pt;"><!DOCTYPE html></span><br><span style="font-size: 10pt;"><html></span><br><span style="font-size: 10pt;"><head></span><br><span style="font-size: 10pt;"> <title>My Bootstrap Page</title></span><br><span style="font-size: 10pt;"> <!-- ส่วนของ CSS --></span><br><span style="font-size: 10pt;"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></span><br><span style="font-size: 10pt;"> <!-- ส่วนของ JavaScript ที่ใช้กับ jQuery --></span><br><span style="font-size: 10pt;"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script></span><br><span style="font-size: 10pt;"> <!-- ส่วนของ JavaScript ที่ใช้กับ Popper.js --></span><br><span style="font-size: 10pt;"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script></span><br><span style="font-size: 10pt;"> <!-- ส่วนของ JavaScript ที่ใช้กับ Bootstrap --></span><br><span style="font-size: 10pt;"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></span><br><span style="font-size: 10pt;"></head></span><br><span style="font-size: 10pt;"><body></span></p> <p style="padding-left: 80px;"><span style="font-size: 10pt;"><!-- ตรงนี้คือส่วนของเนื้อหาบนหน้าเว็บไซต์ --></span></p> <p style="padding-left: 80px;"><span style="font-size: 10pt;"></body></span><br><span style="font-size: 10pt;"></html></span></p> <ol start="3"> <li> <p>เริ่มใช้งาน Bootstrap โดยใช้คลาสที่เตรียมไว้ให้ ดังนี้</p> </li> </ol> <p style="padding-left: 80px;"><span style="font-size: 10pt;"><!DOCTYPE html></span><br><span style="font-size: 10pt;"><html></span><br><span style="font-size: 10pt;"><head></span><br><span style="font-size: 10pt;"> <title>My Bootstrap Page</title></span><br><span style="font-size: 10pt;"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></span><br><span style="font-size: 10pt;"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script></span><br><span style="font-size: 10pt;"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script></span><br><span style="font-size: 10pt;"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></span><br><span style="font-size: 10pt;"></head></span><br><span style="font-size: 10pt;"><body></span></p> <p style="padding-left: 80px;"><span style="font-size: 10pt;"><div class="container"></span><br><span style="font-size: 10pt;"> <h1>My Bootstrap Page</h1></span><br><span style="font-size: 10pt;"> <p>This is some text.</p></span><br><span style="font-size: 10pt;"> <button type="button" class="btn btn-primary">Click me</button></span><br><span style="font-size: 10pt;"></div></span></p> <p style="padding-left: 80px;"><span style="font-size: 10pt;"></body></span><br><span style="font-size: 10pt;"></html></span></p> <p>ในตัวอย่างนี้ เราใช้คลาส <code>.container</code> เพื่อกำหนดขนาดของเนื้อหาบนหน้าเว็บไซต์ และใช้คลาส <code>.btn</code> และ <code>.btn-primary</code> เพื่อกำหนดรูปแบบของปุ่ม</p> <p>Bootstrap ยังมีคลาสอื่น ๆ ที่ใช้งานได้ง่าย ๆ เช่น <code>.row</code> สำหรับกำหนดแถว และ <code>.col-*</code> สำหรับกำหนดคอลัมน์ โดย * จะเป็นตัวเลขที่ระบุขนาดของคอลัมน์</p> <p>สรุปคือ Bootstrap เป็น CSS framework ที่ถูกพัฒนาขึ้นโดย Twitter ซึ่งช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างเว็บไซต์ที่มีรูปแบบสวยงาม</p> |
| Content Short | |
| Content View | 4627 |
| Content Thumb Highlight | |
| Content Thumb | /uploads/article/mToioSFIX5.png |
| Content Img Alt | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Content Tag | Bootstrap ,CSS framework,Bootstrap framework |
| Content Date | (not set) |
| Active Status | 1 |
| Sort | 99999 |
| Meta Title | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Meta Desc | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Meta Keyword | Bootstrap ,CSS framework,Bootstrap framework |
| Og Title | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Og Desc | Bootstrap CSS framework คืออะไร? ใช้งานยังไง? |
| Status | 1 |
| Create Date Time | 2023-03-24 15:18:50 |
| Update Date Time | 2023-03-24 15:26:30 |
| Create By | |
| Update By |
แดชบอร์ดรวม
ประวัติการจอง
การตั้งค่า
ออกจากระบบ