การสร้างเว็บด้วย Bootstrap framework

1. สร้างเว็บด้วย Bootstrap
โดย www.projectsoft.biz
สอนทำโปรเจคจบนักศึกษา

2. Bootstrap คืออะไร
• Style sheet และ JavaScript library ที่สร้างมาแล้วให้
เราเรียกใช้งานโดยไม่ต้องออกแบบเองทั้งหมด ทำให้
ประหยัดเวลาในการออกแบบ
• เราเรียกใช้ Style sheet โดยใส่ class ลงในแต่ละ
element

3. การเรียกใช้งาน Bootstrap
• เราทำให้เว็บของเราใช้งาน Bootstrap ได้โดยใส่
• <script src="http://code.jquery.com/
jquery-1.11.2.min.js"></script>
• <script src="http://maxcdn.bootstrapcdn.com/
bootstrap/3.3.1/js/bootstrap.min.js"></script>
• <link href="//maxcdn.bootstrapcdn.com/
bootstrap/3.3.1/css/bootstrap.min.css"
rel="stylesheet">

4. การสร้างเมนู
class="active" คือ
บอกให้รู้ว่ากำลังอยู่ที่เมนูอะไร

5. การสร้างเมนู

6. การใส่เนื้อหา
• เนื้อหาจะต้องอยู่ภายใต้
• <div class="container">.........</div>

7. การสร้างแบบฟอร์มกรอกข้อมูล
• <form class="form-inline">
• <label>Text box</label>
• <input type="text" class="form-control" />
• <br /><br />
• <label>Dropdown</label>
• <select class="form-control">
• <option>option1</option>
• <option>option2</option>
• <option>option3</option>
• </select>
• </form>

8. การสร้างแบบฟอร์มกรอกข้อมูล
• tag label คือหัวข้อสำรับใส่ข้อมูล
• ใส่ class="form-inline" ภายใต้ tag form เพื่อให้
label อยู่กับบรรทัดเดียวกับ text การสร้างแบบฟอร์ม
กรอกข้อมูล และ dropdown
• ใส่ class="form-control" เพื่อสร้างขอบ และขนาดให้
กับ textbox และ dropdown

9. การสร้างแบบฟอร์มกรอกข้อมูล

10. การสร้างปุ่ม
• <button class="btn btn-success">
• ชื่อปุ่ม <span class="glyphicon glyphicon-ok"></span>
• </button>

11. การสร้างปุ่ม
• ใส่ class="btn btn-success" ภายใต้ tag button เพื่อ
สร้างปุ่ม
• เราสามารถใส่สีให้ปุ่มได้สามแบบคือ
• btn-success
• btn-info
• btn-danger
• btn-warning
• btn-primary

12. การสร้างปุ่ม
• <span class="glyphicon glyphicon-ok"></span>
• คือการใส่ icon ให้กับ ปุ่มเราสามารถเปลี่ยน icon ได้
โดย เปลี่ยน glyphicon-ok
• สามารถเลือก icon ได้ที่
• http://getbootstrap.com/components

13. การสร้างปุ่ม

14. การสร้างตาราง
• <table class="items table table-striped table-bordered">
• <tr>
• <td class="info">ชื่อ collumn</td>
• <td class="info">ชื่อ collumn</td>
• <td class="info">ชื่อ collumn</td>
• </tr>
• </table>

15. การสร้างตาราง
• ใส่ class="items table table-striped table-bordered" เพื่อ
ให้ได้ตารางมีกรอบ และมีการสลับสีในแต่ละบรรทัด
• ใส่ class="info" เพื่อกำนดสีในตารางได้แก่ info primary
success danger และ warning เช่นเดียวกับปุ่ม

16. การสร้างตาราง