ในการสร้างหน้า
เว็บไซต์นอกจากจะมีเนื้อหาข้อมูลแล้ว สิ่งที่สำคัญอีกอย่างหนึ่งคือต้องมีปุ่มที่สามารถคลิกไปหน้าอื่นหรือเพื่อการทำงานอย่างอื่นได้ เช่น
ปุ่มแชร์ ซึ่งใน
Bootstrap มีปุ่มที่สามารถนำไปใช้งานได้หลากหลายรูปแบบ หลายสีสันและหลายขนาด สามารถนำไปใช้งานได้ตามความเหมาะสมของหน้าเว็บไซต์
วิธีนำไปใช้งาน
copy โค้ดส่วนนี้ไปใส่ในส่วน <head>
โค้ด: เลือกทั้งหมด
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
และ copy โค้ดปุ่มที่ต้องการนำไปใช้งานไปวางใน <body>
Button Styles เป็นสีสันของปุ่มที่แตกต่างกัน มีทั้งหมด 7 สีให้เลือกใช้งาน และปุ่มสุดท้ายเป็นแบบลิงค์ ไม่มีกรอบของปุ่ม
โค้ด: เลือกทั้งหมด
<button type="button" class="btn">gray</button>
<button type="button" class="btn btn-default">white</button>
<button type="button" class="btn btn-primary">blue</button>
<button type="button" class="btn btn-success">green</button>
<button type="button" class="btn btn-info">blue</button>
<button type="button" class="btn btn-warning">orange</button>
<button type="button" class="btn btn-danger">red</button>
<button type="button" class="btn btn-link">Link</button>
- Screenshot_290.jpg (8.84 KiB) Viewed 12951 times
Button Sizes ขนาดของปุ่ม มีทั้งหมด 4 ขนาด
โค้ด: เลือกทั้งหมด
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
- Screenshot_289.jpg (9.77 KiB) Viewed 12951 times
Block Level Buttons เป็นปุ่มที่มีขนาดยาวเต็มพื้นที่หน้าเว็บ
โค้ด: เลือกทั้งหมด
<button type="button" class="btn btn-primary btn-block">Click</button>
- 180823222116-R840.jpg (7.94 KiB) Viewed 12951 times
Active/Disabled Buttons ปุ่มแรกเป็นปุ่มพื้นฐาน ปุ่มที่สองเป็นปุ่มที่กำลังใช้งานอยู่จะมีสีเข้ม และปุ่มสุดท้ายเป็นปุ่มที่ไม่สามารถคลิกได้
โค้ด: เลือกทั้งหมด
<div class="container">
<button type="button" class="btn btn-primary">ปุ่มพื้นฐาน</button>
<button type="button" class="btn btn-primary active">ปุ่มที่กำลังใช้งานอยู่</button>
<button type="button" class="btn btn-primary disabled">ปุ่มที่ไม่สามารถใช้งานได้</button>
</div>
- Screenshot_292.jpg (10.86 KiB) Viewed 12951 times
ในการสร้างหน้า[url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3585-website-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C.html]เว็บไซต์[/url]นอกจากจะมีเนื้อหาข้อมูลแล้ว สิ่งที่สำคัญอีกอย่างหนึ่งคือต้องมีปุ่มที่สามารถคลิกไปหน้าอื่นหรือเพื่อการทำงานอย่างอื่นได้ เช่น [url=https://www.mindphp.com/developer/22-%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1-php/6380-share_facebook_button.html]ปุ่มแชร์[/url] ซึ่งใน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]Bootstrap[/url] มีปุ่มที่สามารถนำไปใช้งานได้หลากหลายรูปแบบ หลายสีสันและหลายขนาด สามารถนำไปใช้งานได้ตามความเหมาะสมของหน้าเว็บไซต์
วิธีนำไปใช้งาน
copy โค้ดส่วนนี้ไปใส่ในส่วน <head>
[code]<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
[/code]
และ copy โค้ดปุ่มที่ต้องการนำไปใช้งานไปวางใน <body>
[b]Button Styles[/b] เป็นสีสันของปุ่มที่แตกต่างกัน มีทั้งหมด 7 สีให้เลือกใช้งาน และปุ่มสุดท้ายเป็นแบบลิงค์ ไม่มีกรอบของปุ่ม
[code]<button type="button" class="btn">gray</button>
<button type="button" class="btn btn-default">white</button>
<button type="button" class="btn btn-primary">blue</button>
<button type="button" class="btn btn-success">green</button>
<button type="button" class="btn btn-info">blue</button>
<button type="button" class="btn btn-warning">orange</button>
<button type="button" class="btn btn-danger">red</button>
<button type="button" class="btn btn-link">Link</button>
[/code]
[attachment=3]Screenshot_289.jpg[/attachment]
[b]Button Sizes[/b] ขนาดของปุ่ม มีทั้งหมด 4 ขนาด
[code]
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
[/code]
[attachment=2]Screenshot_290.jpg[/attachment]
[b]Block Level Buttons[/b] เป็นปุ่มที่มีขนาดยาวเต็มพื้นที่หน้าเว็บ
[code]
<button type="button" class="btn btn-primary btn-block">Click</button>
[/code]
[attachment=1]180823222116-R840.jpg[/attachment]
[b]Active/Disabled Buttons[/b] ปุ่มแรกเป็นปุ่มพื้นฐาน ปุ่มที่สองเป็นปุ่มที่กำลังใช้งานอยู่จะมีสีเข้ม และปุ่มสุดท้ายเป็นปุ่มที่ไม่สามารถคลิกได้
[code]
<div class="container">
<button type="button" class="btn btn-primary">ปุ่มพื้นฐาน</button>
<button type="button" class="btn btn-primary active">ปุ่มที่กำลังใช้งานอยู่</button>
<button type="button" class="btn btn-primary disabled">ปุ่มที่ไม่สามารถใช้งานได้</button>
</div>
[/code]
[attachment=0]Screenshot_292.jpg[/attachment]