+ All Categories
Home > Documents > Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework...

Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework...

Date post: 26-Mar-2020
Category:
Upload: others
View: 50 times
Download: 4 times
Share this document with a friend
15
Theerayut Thongkrau Bootstrap
Transcript
Page 1: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Theerayut Thongkrau

Bootstrap

Page 2: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Bootstrap• Bootstrap เปน CSS Framework ทประกอบดวยคลาสพรอมใชทชวยในการแสดงผลในรปแบบตางๆ

• Bootstrap ใชงานไดฟร และรองรบการแสดงผลแบบ Responsive Design

• เวบไซต https://getbootstrap.com2

Page 3: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

การใช Bootstrap แบบ offline• กรณทตองการน าไฟลทเกยวของมาเกบไวทเวบไซตของตนเองสามารถ download ไดทหนาเวบไซตของ Bootstrap

3

Page 4: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

การใช Bootstrap แบบ online• อางองไฟล css จาก CDN (Content Delivery Network)https://getbootstrap.com/docs/4.0/getting-started/introduction

4

Page 5: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Template เรมตน

5

ตองม doctype เสมอ

อางองไฟล css

อางองไฟล JavaScript

ก าหนด viewport ใหรองรบการแสดงผลแบบ Responsive

Page 6: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

การจด Layout ของเวบ• พนฐานการจดผงหนาเวบดวย Bootstrap จะใชคลาส

container ครอบทงหมด ซง container ม 2 แบบ

6

<div class="container">

<!-- Content here -->

</div>

container ปกต - เปน container ทสามารถก าหนดความกวางไดดวย

max-width หนาจอจะขนกบนกพฒนาก าหนด

<div class="container-fluid">

<!-- Content here -->

</div>

container แบบ fluid - เปน container ทไมตองก าหนดความกวาง เพราะจะมขนาดเตม หรอ 100%

เสมอ ทกขนาดหนาจอ

Page 7: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Grid System• Grid คอ การแบง Container ออกเปนหลายคอลมน• จ านวนคอลมนท Bootstrap ก าหนดสงสด คอ 12 คอลมน• ขนาดของ Grid ม 5 ขนาด คอ

– Extra small (.col-) ใชกบหนาจอ 0-575 พกเซล– Small (.col-sm-) ใชกบหนาจอ 576-767 พกเซล– Medium (.col-md-) ใชกบหนาจอ 768-991 พกเซล– Large (.col-lg-) ใชกบหนาจอ 992-1999 พกเซล– Extra large (.col-xl-) ใชกบหนาจอมากกวา 1200 พกเซลขนไป

7

Page 8: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Grid System• การแบงคอลมนของ grid ม 2 แบบ

– MANUAL-LAYOUT คอ นกพฒนาก าหนดขนาดของคอลมนเอง โดยแตละแถวรวมแลวตองไมเกน 12 คอลมน

– AUTO-LAYOUT คอ ให Bootstrap ค านวณขนาดใหอตโนมต

8

Page 9: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

MANUAL-LAYOUT

9

<div class="container"><div class="row">

<div class="col-4" style="background-color: gray">Hello

</div><div class="col-4" style="background-color: gold">

Hello</div><div class="col-4" style="background-color: lavender">

Hello</div>

</div></div>

<div class="container"><div class="row">

<div class="col-2" style="background-color: gray">Hello

</div><div class="col-8" style="background-color: gold">

Hello</div><div class="col-2" style="background-color: lavender">

Hello</div>

</div></div>

ก าหนดตวเลขรวมกนไมเกน 12 (4+4+4=12)

ก าหนดตวเลขรวมกนไมเกน 12 (2+8+2=12)

Page 10: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

AUTO-LAYOUT

10

<div class="container"><div class="row">

<div class="col" style="background-color: gray">Hello

</div><div class="col" style="background-color: gold">

Hello</div><div class="col" style="background-color: lavender">

Hello</div>

</div></div>

<div class="container"><div class="row">

<div class="col" style="background-color: gray">Hello

</div><div class="col-8" style="background-color: gold">

Hello</div><div class="col" style="background-color: lavender">

Hello</div>

</div></div>

ไมตองก าหนดตวเลข เพราะ Bootstrap จะแบงคอลมนใหเทากน 3 คอลมน

ก าหนดตวเลขเฉพาะคอลมนทไมตองการใหเทากน คอลมนทเหลอ Bootstrap จะแบงคอลมนขนาดเทากนอตโนมต

Page 11: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

ตวอยาง Layout แบบหลายแถว

11

<div class="container"><div class="row" style="border: 1px solid">

<div class="col" style="background-color: gray">1 of 2

</div><div class="col" style="background-color: lavender">

2 of 2</div>

</div>

<div class="row" style="border: 1px solid"><div class="col" style="background-color: gray">

1 of 3</div><div class="col" style="background-color: gold">

2 of 3</div><div class="col" style="background-color: lavender">

3 of 3</div>

</div></div>

Page 12: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

Component• Bootstrap ไดเตรยมคลาสส าหรบจดรปแบบสวนประกอบของหนาเวบหลายสวน– แบบฟอรม และปมตางๆ– เมนบาร– Card– ตาราง– Modal

12

Page 13: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

คมอการใชและตวอยาง Bootstrap

13

การตดตง Bootstrapในแบบตางๆ

การจดผงเวบ

การใสรปแบบเนอหา

สวนประกอบส าเรจพรอมใช

ตวอยางการจดหนาเวบแบบตางๆ

Page 14: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

ฟอรม

14

<div class="container col-4"><h1>Sign-In</h1><form>

Email address<input type="email" class="form-control" placeholder="Enter email">Password<input type="password" class="form-control" placeholder="Password"><label class="form-check-label"><input type="checkbox" class="form-check-input"> Check me out

</label><br><button type="submit" class="btn btn-primary">Submit</button>

</form></div>

Page 15: Bootstrap - dev.cs.kku.ac.th · Bootstrap • Bootstrap เป็น CSS Framework ที่ประอบด้วยคลาสพร้อม ใชท้ี่ช่วยใน

เมนบาร

15

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li><li class="nav-item"><a class="nav-link" href="#">Link</a>

</li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>

</li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form></div>

</nav>


Recommended