การสร้างเว็บด้วย Bootstrap framework
16
สางเบวย Bootstrap โดย www.projectsoft.biz สอนโปรเจคจบกกษา
Transcript of การสร้างเว็บด้วย Bootstrap framework
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">
การสร้างเมนู
class="active" คือ บอกให้รู้ว่ากำลังอยู่ที่เมนูอะไร
การสร้างเมนู
การใส่เนื้อหา• เนื้อหาจะต้องอยู่ภายใต้
• <div class="container">.........</div>
การสร้างแบบฟอร์มกรอกข้อมูล• <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 เช่นเดียวกับปุ่ม
การสร้างตาราง
