web analytics

สรุปการใช้งาน Bootstrap 4 แบบพื้นฐาน ตอนที่ 2

cover2

มาต่อกันในตอนที่ 2 ครับ จะเป็นเรื่องเกี่ยวกับ component ที่ใช้บ่อยๆของ Bootstrap ครับ

ตอนก่อนหน้านี้

สรุปการใช้งาน Bootstrap 4 แบบพื้นฐาน ตอนที่ 1

 

Table

สร้างไฟล์ใหม่ชื่อ portal.html
ใส่โค้ดพื้นฐาน html ลงไปแล้วก็เพิ่ม bootstrap.css ด้วย

 

ใส่ตารางลงไปใน container

จะได้แบบนี้

40

 

Bootstrap มี class ชื่อว่า table ทำให้ตารางสวยขึ้น

41

 

ปรับแต่งหัวตารางโดยใช้ utility class คือ bg- และ text-

42

 

ทำให้ตารางสลับสี ใช้ table-striped เพิ่มเข้าไป

43

 

ทำให้ตารางเลื่อสีไปตาม cursor ใช้ table-hover เพิ่มเข้าไป

g5

 

ใส่ขอบให้ตารางใช้ table-bordered

44

 

 

ลองย่อหน้าต่างให้เล็กเป็นมุมมองมือถือ จะพบว่าตารางไม่รองรับ responsive

46a

 

วิธีการแก้ก็คือเอาตารางไปใส่ใน div class table-responsive

มันจะสามารถเลื่อน ซ้ายขวาได้

g6

ใน VS Code ตรงไหนโค้ดยาวก็ย่อโค้ดได้นะ

47

 

Source code

https://gist.github.com/benznest/d7b07ec41ffef49429ec4c95112c1dcb

 

Form

สร้างไฟล์ใหม่ login.html จะลองทำหน้า login กัน อย่าลืมเพิ่ม boostrap.css เข้ามาด้วย

ฟอร์มล้อคอินที่จะทำ หน้าตาประมาณนี้

50

 

 

ลองใส่ฟอร์มล็อกอิน แบบง่ายๆ

48

 

ให้ใช้ class form-group จัดการแถวของฟอร์ม

49

 

ใช้ class form-control ให้กับ input เพื่อให้มันรองรับ responsive และความสวยงาม

51

 

ส่วนปุ่มใช้ class ชื่อว่า btn  และอยากได้ส้มๆก็ใส่ btn-warning

52

 

ถ้าต้องการให้ปุ่มแสดงตามขนาดจอ ก็ใช้ btn-block

53

 

ถ้าต้องการให้แสดงแบบแถวเดียวใช้ form-inline

54

 

ฟอร์มมันชิดไป ไม่สวยก็สามารถใช้ class margin มาร่วมได้

55

 

Source code

https://gist.github.com/benznest/1d77e1a799253e5546b8d4c836cd2f1c

 

Card

อีกอันที่ใช้บ่อยๆ คือ card มันคือการทำเนื้อหาเป็นบล็อกๆ

สร้างไฟล์ใหม่ชื่อว่า news.html ทำ grid ไว้ 2 คอลัมภ์

 

Card โครงสร้างจะเป็นประมาณนี้

58

56

 

สามารถจัดแต่งโดยใช้ utilities class ได้ตามปกติ เช่น bg และ text

57

 

สามารถนำรูปมาเป็น Header ได้ โดยใช้ class ชือว่า card-img-top 

59

 

เพิ่มปุ่มใน card ให้ดูสวยงาม

60

 

ซึ่งถ้าจะทำสวยๆ ก็ต้องมีรูป และเนื้อหาที่เหมาะสมกัน

61

 

 

สามารถนำรูปมาวางด้านล่างแทนได้ โดยใช้ class ชื่อว่า card-img-bottom

62

 

Source code

https://gist.github.com/benznest/bb45d6f0affd79d462a837055408f3c8

 

 

การใช้ Media

การนำคลิป youtube embed มาใช้ใน bootstrap
ไปที่ youtube คลิกขวาที่คลิป > Copy embed code

63a

มันจะเป็น iframe ถ้ามี width height ให้ลบออก เพราะ เราจะทำให้ responsive

 

เพิ่ม <div> ครอบตัว video โดยเพิ่ม class ชื่อว่า embed-responsive embed-responsive-4by3
4by3 คือขนาด 4:3 สามารถใช้ตัวอื่นได้เช่น 16by9, 21by9, 1by1
และที่ iframe เพิ่ม class ชื่อว่า embed-responsive-item

โดยจะลองเพิ่มแถวเข้าไปต่อจากเดิม

64

 

ลองเพิ่มคอมลัมภ์อีกอันเพื่อทำ photo gallery ด้านขวาของ video
ซึ่งสามารถใช้ class ชื่อว่า media การทำงานของมันจะเรียงไปแนวนอน

65

 

การจะเพิ่มแถวของเนื้อหาที่ใช้ class media สามารถใช้ <ul class=”list-unstyled”> และ <li> เข้ามาได้

66

 

Source code

https://gist.github.com/benznest/17e5753cff346c5ed5ba8f4689377801

 

 

Navigation

เพิ่ม row ไปที่บนสุดของ container ข้างในใช้ list คือ <ul><li> … </li></ul>

 

ใน bootstrap จะใช้
class ชื่อ nav ใน <ul>
class ชื่อ nav-item ใน <li>
class ชื่อ nav-link ใน <a> ที่เป็นป้ายลิงค์

67

 

เพิ่ม ให้เมนูนึงถูกเลือกใช้ class ชื่อว่า active

เพิ่ม class nav-pills ให้กับ <ul>

68

 

หรือจะใช้ class nav-tabs 

69

 

รายละเอียด

https://getbootstrap.com/docs/4.1/components/navs/

 

การใช้ Javascript ของ Bootstrap

Bootstrap ต้องใช้ library เพิ่มคือ jquery กับ popper ถึงจะใช้งานได้เต็มประสิทธิภาพ ซึ่ง bootstrap ไม่มีติดมาให้ เพราะ ติด license จำเป็นต้องไปดาวน์ดหลดมาจากต้นทางผู้พัฒนา
ให้ดาวน์โหลด jquery js กับ popper js มาติดตั้งไว้ในโปรเจค ในโฟลดเดอร์ js

71

 

เพิ่ม jquery , popper , bootstrap ไปที่ท้าย body โดยใช้คำสั่ง <script></script>
โดยให้ jquery และ popper อยู่ด้านบนของ bootstrap.js เพราะการอ่านโค้ดจะอ่านจากบนลงล่าง วึ่ง bootstrap เรียกใช้งาน jquery
จึงจำเป็นต้องอ่าน jquery มาก่อนนั่นเอง

 

ถ้าใส่ผิด สามารถ Inspect ดูที่เมนู console

72

 

การทำ dropdown

เพิ่ม dropdown ให้เมนู ได้ โดยใช้ dropdown-menu

73

 

ปัญหาที่ตามมาคือ เมนูแบบนี้ไม่รองรับ responsive ดังนั้นต้องไปใช้ Navbar แบบใหม่

74

 

ติตดั้ง extension

ติดตั้ง Bootstrap v4 Snippets

70

 

Navbar responsive

พิมพ์ b-navbar มันจะ generate โค้ดมาให้

g7

ซึ่งเยอะมาก เรามีหน้าที่แก้เนื้อหาก็พอ นี่คือการใช้เครื่องมือให้เป็นประโยชน์

 

Navbar อันใหม่จะรองรับ responsive

75

7677

 

ปรับสีของ Navbar โดยใช้ class uitility

78

 

และเนื่องจาก Navbar มันใช้ Fix-top มันจะทำให้กินเนื้อด้านบน ก็ให้เนื้อหาของเราเว้นว่างด้านบนนิดนึง โดยใช้ pt-5 ก็คือ padding top 5 rem

 

 

แนะนำ Bootswatch

bootswatch เป็นเว็บที่รวมแหล่งธีม css ของ bootstrap มาไว้ในที่เดียว เราสามารถดาวน์โหลดธีมที่ชอบมาใช้ได้ ซึ่งมันคือ css ของ bootstrap ดังนั้นสามารถนำมาใช้กับ bootstrap ได้เลย

https://bootswatch.com/

กดดาวน์โหลดธีมที่ชอบ แล้วจะได้ไฟล์ .css

79

 

เอาไฟล์ .css ไปไว้ในโฟลเดอร์ css แนะนำเปลี่ยนชื่อเป็นชื่อธีม ไม่ควรใช้ชื่อ bootstrap ทับอันเดิม

81

 

ใน html ให้เปลี่ยนการใช้ bootstrap.min.css มาใช้ธีมอันใหม่

Refresh หน้าเว็บ

80

 

การใช้ Carousel

carousel คือ ตัวสไลด์รูปภาพ
ใช้โค้ดลัด พิมพ์ว่า b-carousel เลือก carousel-full

g8

 

จากนั้นก็ปรับแต่ง carousel จะมีสามส่วน คือ
indicator  ที่เป็นจุด ว่ารูปภาพเราคือรูปไหน
Slide คือรูปภาพ
Button คือปุ่มซ้าย ขวา

active คืออันที่ถูกเลือกอยู่

82

 

การปรับเวลาในการเลื่อนอัตโนมัติ ทำได้โดยใช้ data-interval หน่วยเป็นมิลลิวินาที

83

Source code

https://gist.github.com/benznest/a2c5683a2f19ddd26617415821a2b141

 

Modal

Modal คือป๊อบอัพแบบสวยๆ อันนี้ก็ใช้บ่อยมากๆ
ใช้โค้ดลัดสร้าง Modal  คือพิมพ์ว่ b-modal แล้วเลือก modal-full

g10

 

Modal ปกติมันจะถูกซ่อนเอาไว้ รอให้เรียกใช้งาน
ให้เพิ่ม id ให้กับ div modal หลัก

 

ปรับแต่ง modal ตามใจ โดยภายในก็แบ่งเป็น header, content , footer

 

ปุ่มไหนที่อยากให้กดแล้วแสดง modal ก็เพิ่ม data-toggle=”modal” data-target=”#myModal”
โดย target คือ id ของ modal 

84

 

แนะนำ bootsnipp

bootsnipp จะเป็นเว็บที่รวม code หรือ component ต่างๆ เอาไว้สำหรับ bootstrap

https://bootsnipp.com

เช่นอยากลองใช้ตัวที่ชื่อว่า Timeline vertical ในเว็บของเรา

85

 

กดเข้าไป ข้างในจะมีรายละเอียด เช่น HTML , CSS

87

 

ให้ copy โค้ด HTML มาไว้ในที่ต้องการ และ copy CSS ของมันมาด้วย โดยเอาไปวางไว้ใน custom.css ของเรา

จากนั้น มาเพิ่ม custom.css

86

แนะนำ Startbootstrap.com

ตัวนี้เป็นแหล่งรวมธีมของ Bootstrap แบบมาทั้ง pack เลย เช่น ธีมสำหรับทำเว็บบริษัท ธีมสำหรับแสดงผลงาน

https://startbootstrap.com/

88

 

 

การใช้ class display

อันนี้เป็นความสามารถใหม่ใน ฺbootstrap4 เช่น อยากให้หน้าจอใหญ่แสดง Carousel แต่ในจอเล็กให้ซ่อน
ใน Bootstrap 4 สามารถใช้ class d-

g12

 

Media query

Media query คือการระบุเงื่อนไขเจาะจงสำหรับ css เช่น ถ้าหน้าจอขนาดมากกว่า 700px ให้ h1 , h2, h3 ขนาด 1 rem

 

สิ่งที่ใช้ร่วมกับ Bootstrap ไม่ได้

เช่น คู่แข่ง ชื่อว่า Foundation เพราะใช้ชื่อ class เหมือนกัน ตัว Foundation มีความสามารถมากกว่า Bootstrap ทำอะไร Advance ได้มากกว่า แต่ก็ต้องเรียนรู้มากกว่า

39

 

สรุป

บทความนี้ก็พาไปทำ component ที่ใช้งานบ่อย เช่น Table , Form , Carousel , Modal , Navbar รวมทั้งแนะนำเว็บที่เกี่ยวกับ bootstrap ที่จะช่วยให้ใช้งานได้ง่ายขึ้นอีกด้วย