Tag: Bootstrap 5

Bootstrap 5 การสร้าง Dropdown Menu Dropdown Menu คือเมนูที่อนุญาตให้ผู้ใช้สามารถคลิกเลือกรายการ 1 เมนู จากรายการเมนูทั้งหมดที่บราจุอยู่ด้านใน บรรทัดที่ 1 สร้าง Container ด้วยเอลิเมนต์…

Bootstrap 5 การใช้งาน Card Card คือกล่องที่ประกอบไปด้วยส่วนหัว Header ส่วนเนื้อหา Body และส่วนท้าย Footer แสดงผลเป็นกล่องแบบมีกรอบและ Padding สามารถนำมาใช้งานได้หลากหลายวัตถุประสงค์และสวยงามดูดี ทั้งนี้ เราอาจสร้าง…

Bootstrap 5 การสร้าง List Groups โดยปกติ การสร้าง List รายการทั่วไป เราจะใช้เอลิเมนต์ <ul> ครอบเอลิเมนต์ <li> ดังนี้ เราสามารถใช้ Bootstrap…

Bootstrap 5 กับการแบ่งหน้า ถ้าเราสร้างเว็บเพจที่ต้องมีการแบ่งหน้าเว็บออกเป็นหลาย ๆ หน้า Bootstrap 5 สามารถช่วยเราตกแต่ง Pagination ให้สวยงามได้ การสร้างการแบ่งหน้า หรือ Pagination ด้วย Bootstrap…

Bootstrap 5 การสร้าง Spinner Spinner คือสัญลักษณ์วงกลมที่หมุนไปเรื่อย ๆ สำหรับแสดงสถานะว่าระบบกำลังทำงาน กำลังโหลด เป็นต้น เพื่อให้ผู้ใช้งานรู้ว่าเว็บไซต์ของเราทำงานอยู่นะ ไม่ได้ค้างหรืออะไร ให้รอหน่อย เป็นต้น การสร้าง Spinner…

Bootstrap 5 การสร้าง Progress Bar Progress Bar ก็คือ แถบสถานะที่บ่งบอกความคืบหน้าของงานหรือกิจกรรมบางอย่าง เพื่อให้รู้ว่างานนั้น ๆ คืบหน้าไปแล้วเท่าไหร่ ใกล้เสร็จหรือยัง เป็นต้น เราสามารถใช้ Bootstrap…

Bootstrap 5 การสร้าง Badge Badge มีไว้สำหรับแสดงข้อมูลเพิ่มเติมต่อจากข้อมูลหลัก เช่น แสดงจำนวนตัวเลขการแจ้งเตือนใหม่ เป็นต้น หรือใช้งานอย่างอื่นในลักษณะเป็นป้าย การสร้าง Badge สามารถทำได้โดยการใช้คลาส .badge ร่วมกับเอลิเมนต์ <span>…

Bootstrap 5 การจัดกลุ่มให้ปุ่มกด ด้วยการใช้ Bootstrap 5 เราสามารถรวมปุ่มกดให้อยู่รวมกันเป็นกลุ่มในบรรทัดเดียวกันได้ โดยการใช้คลาส .btn-group ภายในเอลิเมนต์ <div> ดังนี้ โดยปกติ เมื่อตกแต่งปุ่มกดด้วยคลาส .btn เราสามารถกำหนดขนาดปุ่มได้โดยระบุอักษรย่อบอกขนาดกำกับไปด้วยได้เลย…

ตกแต่งปุ่มกด Button ด้วย Bootstrap 5 Bootstrap 5 มีคลาสสำหรับตกแต่งปุ่มกด Button จำนวนหนึ่ง โดยให้ใช้คลาส .btn เพื่อตกแต่งปุ่มกดตามสไตล์ของ Bootstrap หากต้องการปุ่มกดที่มีสีพื้นหลังแบบต่าง ๆ…

ตกแต่งข้อความแจ้งเตือน Alerts สวย ๆ ด้วย Bootstrap 5 เราสามารถตกแต่งข้อความแจ้งเตือนที่โดดเด่นดูดีด้วย Bootstrap 5 โดยใช้คลาส .alert ตามด้วย contextual class ตัวใดตัวหนึ่ง…

การใช้งาน Jumbotron ใน Bootstrap 5 ใน Bootstrap 3 และ Bootstrap 4 จะมีคลาส .jumbotron ให้เราใช้สำหรับการแสดงผลข้อความให้มีความโดดเด่น โดยการทำให้เอลิเมนต์แสดงผลเป็นเหมือนกล่องขนาดใหญ่และกำหนด Padding…

ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5 เราสามารถใช้ Bootstrap 5 ตกแต่งรูปทรงการแสดงผลของรูปภาพได้ 3 แบบ คือ แบบสี่เหลี่ยมมุมใน (Rounded Corners) แบบวงกลม (Circle) และแบบทัมบ์เนล…

ตกแต่งตารางด้วย Bootstrap 5 ใน Bootstrap 5 มีคลาสสำหรับตกแต่งตารางจำนวนหนึ่ง ซึ่งมีรายละเอียดการใช้งานดังนี้ การตกแต่งตารางขั้นพื้นฐาน สำหรับการตกแต่งตารางขั้นพื้นฐาน ให้ใช้คลาส .table กำกับแท็ก <table> ดังนี้ ตารางที่ตกแต่งด้วยคลาส…

ตกแต่งสีข้อความและพื้นหลัง ด้วย Bootstrap 5 Bootstrap 5 ได้เตรียมคลาสไว้ให้เราใช้สำหรับตกแต่งเอลิเมนต์ต่าง ๆ ในหน้าเว็บเพจจำนวนหนึ่ง สำหรับตกแต่งสีข้อความและสีพื้นหลัง คลาสสำหรับตกแต่งสีข้อความ Text Colors สำหรับคลาสที่ Bootstrap 5…

ตกแต่งข้อความ Text/Typography ด้วย Bootstrap 5 เมื่อใช้ Bootstrap 5 ในการตกแต่งเว็บไซต์ โดยค่าเริ่มต้นขนาดตัวอักษรจะถูกกำหนดไว้ที่ 1rem (16px) และความสูงของบรรทัดจะอยู่ที่ 1.5rem ถ้าเราใช้แท็ก <p>…