การสร้างเว็บด้วย bootstrap framework
TRANSCRIPT
Bootstrap คืออะไร
• Style sheet และ JavaScript library ที่สร้างมาแล้วให้เราเรียกใช้งานโดยไม่ต้องออกแบบเองทั้งหมด ทำให้ประหยัดเวลาในการออกแบบ
• เราเรียกใช้ Style sheet โดยใส่ class ลงในแต่ละ element
การเรียกใช้งาน 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">
การสร้างแบบฟอร์มกรอกข้อมูล• <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>
การสร้างแบบฟอร์มกรอกข้อมูล
• tag label คือหัวข้อสำรับใส่ข้อมูล
• ใส่ class="form-inline" ภายใต้ tag form เพื่อให้ label อยู่กับบรรทัดเดียวกับ text การสร้างแบบฟอร์มกรอกข้อมูล และ dropdown
• ใส่ class="form-control" เพื่อสร้างขอบ และขนาดให้กับ textbox และ dropdown
การสร้างปุ่ม
• <button class="btn btn-success">
• ชื่อปุ่ม <span class="glyphicon glyphicon-ok"></span>
• </button>
การสร้างปุ่ม• ใส่ class="btn btn-success" ภายใต้ tag button เพื่อสร้างปุ่ม
• เราสามารถใส่สีให้ปุ่มได้สามแบบคือ
• btn-success
• btn-info
• btn-danger
• btn-warning
• btn-primary
การสร้างปุ่ม• <span class="glyphicon glyphicon-ok"></span>
• คือการใส่ icon ให้กับ ปุ่มเราสามารถเปลี่ยน icon ได้โดย เปลี่ยน glyphicon-ok
• สามารถเลือก icon ได้ที่
• http://getbootstrap.com/components
การสร้างตาราง• <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>
การสร้างตาราง
• ใส่ class="items table table-striped table-bordered" เพื่อให้ได้ตารางมีกรอบ และมีการสลับสีในแต่ละบรรทัด
• ใส่ class="info" เพื่อกำนดสีในตารางได้แก่ info primary success danger และ warning เช่นเดียวกับปุ่ม